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 @@
+# Binary Window
+
+A tiling window manager for web browsers.

package/dist/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-header-height: 30px;--bw-glass-header-padding: 0 4px;--bw-glass-header-bg-color: hsl(0, 0%, 97%);--bw-glass-clearance: 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%)}.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{font-family:var(--bw-font-family);font-size:var(--bw-font-size);box-sizing:border-box;position:absolute;inset:var(--bw-glass-clearance);border:1px solid var(--bw-glass-border-color);background-color:#fff;display:flex;flex-direction:column}bw-glass[draggable=true]:active{cursor:move;opacity:.3}bw-glass-header{box-sizing:border-box;display:flex;align-items:center;padding:var(--bw-glass-header-padding);flex-basis:var(--bw-glass-header-height);border-bottom:1px solid var(--bw-glass-border-color);background-color:var(--bw-glass-header-bg-color)}bw-glass-tab-container{align-self:flex-end;display:flex;gap:4px}.bw-glass-tab{font-family:var(--bw-font-family);border:1px solid var(--bw-glass-border-color);border-bottom:none;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);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/bwin.js

@@ -0,0 +1,929 @@
+var $ = Object.defineProperty;
+var B = (e, t, i) => t in e ? $(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i;
+var p = (e, t, i) => B(e, typeof t != "symbol" ? t + "" : t, i);
+function W(e = 0.7, t = 128) {
+  const i = 256 - t, n = Math.floor(Math.random() * i + t), 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 R(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 C(e, t) {
+  for (; t.firstChild; )
+    e.append(t.firstChild);
+}
+function H(e, t) {
+  const i = document.createElement("div");
+  C(i, e), C(e, t), C(t, i);
+}
+function P(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 I(e) {
+  return e !== null && typeof e == "object" && !Array.isArray(e) && Object.getPrototypeOf(e) === Object.prototype;
+}
+function O(e, t) {
+  for (const i in t) {
+    if (Object.hasOwn(e, i))
+      throw new Error(`Key "${i}" already exists in target object`);
+    e[i] = t[i];
+  }
+  return e;
+}
+function G(e) {
+  const t = document.createElement("template");
+  return t.innerHTML = e.trim(), t.content;
+}
+function E(e) {
+  if (e == null || e === "")
+    return null;
+  if (typeof e == "string")
+    try {
+      const t = G(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 _(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 F({ width: e, height: t, x: i }) {
+  return t / e * i;
+}
+function U({ width: e, height: t, y: i }) {
+  return e / t * i;
+}
+function Y({ width: e, height: t, x: i }) {
+  return t - t / e * i;
+}
+function X({ width: e, height: t, y: i }) {
+  return e - e / t * i;
+}
+function k(e, { clientX: t, clientY: i }) {
+  const n = e.getBoundingClientRect(), { width: o, height: s } = n, r = t - n.left, l = i - n.top;
+  if (r < 0 || r > o || l < 0 || l > s)
+    return h.Outside;
+  const d = 0.3, c = F({ width: o, height: s, x: r }), a = Y({ width: o, height: s, x: r }), f = U({ width: o, height: s, y: l }), u = X({ width: o, height: s, y: l });
+  return r < o * (0.5 - d / 2) && l > c && l < a ? h.Left : r > o * (0.5 + d / 2) && l < c && l > a ? h.Right : l < s * (0.5 - d / 2) && r > f && r < u ? h.Top : l > s * (0.5 + d / 2) && r < f && r > u ? h.Bottom : r > o * (0.5 - d / 2) && r < o * (0.5 + d / 2) && l > s * (0.5 - d / 2) && l < s * (0.5 + d / 2) ? h.Center : h.Unknown;
+}
+const w = {
+  top: 0,
+  left: 0,
+  width: 100,
+  height: 100,
+  // Initial min values, real min width/height is calculated based on children
+  minWidth: 20,
+  minHeight: 20
+};
+class g {
+  constructor({
+    top: t = w.top,
+    left: i = w.left,
+    width: n = w.width,
+    height: o = w.height,
+    minWidth: s = w.minWidth,
+    minHeight: r = w.minHeight,
+    domNode: l = null,
+    store: d = {},
+    position: c,
+    id: a
+  } = w) {
+    if (this.id = a ?? R(), !c)
+      throw new Error("[bwin] Sash position is required");
+    this.position = c, this.domNode = l, this._top = t, this._left = i, this._width = n, this._height = o, this.children = [], this.minWidth = s, this.minHeight = r, this.store = d;
+  }
+  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 l = r.width + o.width, d = i * (r.width / l), c = l + i;
+      let a = r.width + d, f = c - a, u = o.left + d;
+      const m = r.calcMinWidth(), b = o.calcMinWidth();
+      a < m && f > b ? (a = m, f = c - a, u = r.left + a) : f < b && a > m && (f = b, a = c - f, u = r.left + a), r.width = a, o.width = f, 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 l = n.height + s.height, d = i * (n.height / l), c = l + i;
+      let a = n.height + d, f = c - a, u = s.top + d;
+      const m = n.calcMinHeight(), b = s.calcMinHeight();
+      a < m && f > b ? (a = m, f = c - a, u = n.top + a) : f < b && a > m && (f = b, a = c - f, u = n.top + a), n.height = a, s.height = f, s.top = u;
+    }
+    r && o && (r.height += i, o.height += i);
+  }
+}
+const A = {
+  size: "50%",
+  position: h.Left
+};
+class M {
+  constructor({
+    parentRect: t,
+    children: i,
+    siblingConfigNode: n,
+    id: o,
+    minWidth: s,
+    minHeight: r,
+    position: l,
+    size: d,
+    ...c
+  }) {
+    p(this, "left");
+    p(this, "top");
+    p(this, "width");
+    p(this, "height");
+    this.parentRect = t, this.children = i, this.siblingConfigNode = n, this.id = o, this.minWidth = s, this.minHeight = r, this.position = this.getPosition(l), this.size = this.getSize(d), this.nonCoreData = c, this.setBounds();
+  }
+  getPosition(t) {
+    if (!this.siblingConfigNode)
+      return t;
+    const i = _(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 P(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 = P(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 g({
+      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 (I(t))
+      return t;
+    if (Array.isArray(t))
+      return {
+        children: t
+      };
+    if (typeof t == "string" || typeof t == "number") {
+      const i = P(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, ...l }) {
+    return new M({
+      parentRect: this,
+      size: t ?? A.size,
+      position: i ?? A.position,
+      children: n,
+      id: o,
+      minWidth: s,
+      minHeight: r,
+      ...l
+    });
+  }
+  createSecondaryConfigNode({ size: t, position: i, children: n, id: o, minWidth: s, minHeight: r, ...l }, d) {
+    return new M({
+      parentRect: this,
+      size: t,
+      position: i,
+      children: n,
+      siblingConfigNode: d,
+      id: o,
+      minWidth: s,
+      minHeight: r,
+      ...l
+    });
+  }
+  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 v = {
+  width: 333,
+  height: 333
+}, D = {
+  fitContainer: !1
+};
+class q extends M {
+  constructor({
+    id: t,
+    children: i,
+    width: n = v.width,
+    height: o = v.height,
+    fitContainer: s = D.fitContainer,
+    ...r
+  } = {
+    ...v,
+    ...D
+  }) {
+    super({
+      id: t,
+      children: i,
+      size: NaN,
+      position: h.Root,
+      parentRect: { width: n, height: o },
+      ...r
+    }), this.fitContainer = s;
+  }
+}
+class j extends g {
+  constructor(t = w) {
+    super({ ...t, position: h.Root }), Object.assign(this, D);
+  }
+}
+const K = {
+  createPane(e) {
+    const t = N(e);
+    return e.store.droppable === !1 && t.setAttribute("can-drop", "false"), t;
+  },
+  // Intended to be overridden
+  onPaneCreate(e, t) {
+    t.store.content && e.append(E(t.store.content)), this != null && this.debug && (e.style.backgroundColor = W(), e.innerHTML = "", e.append(S(e)));
+  },
+  updatePane(e) {
+    return V(e);
+  },
+  // Intended to be overridden
+  onPaneUpdate(e, t) {
+    this != null && this.debug && (e.innerHTML = "", e.append(S(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 = et(i, t);
+    return i.id = R(), 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] Can not remove root pane");
+    const i = t.getChildSiblingById(e);
+    t.id = R(), 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 N(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 V(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 J(e) {
+  const t = new g({
+    top: e.top,
+    left: e.left,
+    width: e.width / 2,
+    height: e.height,
+    position: h.Left
+  }), i = new g({
+    top: e.top,
+    left: e.left + t.width,
+    width: e.width / 2,
+    height: e.height,
+    position: h.Right
+  }), n = N(i);
+  return i.domNode = n, C(n, e.domNode), e.addChild(t), e.addChild(i), t;
+}
+function Q(e) {
+  const t = new g({
+    top: e.top,
+    left: e.left,
+    width: e.width / 2,
+    height: e.height,
+    position: h.Left
+  }), i = N(t);
+  t.domNode = i, C(i, e.domNode);
+  const n = new g({
+    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 Z(e) {
+  const t = new g({
+    top: e.top,
+    left: e.left,
+    width: e.width,
+    height: e.height / 2,
+    position: h.Top
+  }), i = new g({
+    top: e.top + t.height,
+    left: e.left,
+    width: e.width,
+    height: e.height / 2,
+    position: h.Bottom
+  }), n = N(i);
+  return i.domNode = n, C(n, e.domNode), e.addChild(t), e.addChild(i), t;
+}
+function tt(e) {
+  const t = new g({
+    top: e.top,
+    left: e.left,
+    width: e.width,
+    height: e.height / 2,
+    position: h.Top
+  }), i = N(t);
+  t.domNode = i, C(i, e.domNode);
+  const n = new g({
+    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 et(e, t) {
+  if (t === h.Left)
+    return J(e);
+  if (t === h.Right)
+    return Q(e);
+  if (t === h.Top)
+    return Z(e);
+  if (t === h.Bottom)
+    return tt(e);
+}
+function S(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 it = {
+  create() {
+    const e = document.createElement("bw-window");
+    e.style.width = `${this.rootSash.width}px`, e.style.height = `${this.rootSash.height}px`, e.setAttribute("sash-id", this.rootSash.id), 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;
+    }), this.windowElement = e, this.containerElement.append(this.windowElement);
+  },
+  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));
+    });
+  }
+}, nt = {
+  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) {
+  }
+}, ot = {
+  fitContainer: !1,
+  enableFitContainer() {
+    new ResizeObserver((t) => {
+      for (const i of t)
+        i.target === this.containerElement && this.fitContainer && (this.rootSash.width = i.contentRect.width, this.rootSash.height = i.contentRect.height, this.update());
+    }).observe(this.containerElement);
+  }
+}, st = {
+  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 l = e.pageX - this.lastX, d = o.width + l, c = i.width - l;
+        if (d <= o.calcMinWidth() || c <= i.calcMinWidth())
+          return;
+        o.width = d, i.width = c, i.left = i.left + l, this.update(), this.lastX = e.pageX;
+      } else if (r && t && n) {
+        const l = e.pageY - this.lastY, d = t.height + l, c = n.height - l;
+        if (d <= t.calcMinHeight() || c <= n.calcMinHeight())
+          return;
+        t.height = d, n.height = c, n.top = n.top + l, this.update(), this.lastY = e.pageY;
+      }
+    }), document.addEventListener("mouseup", () => {
+      this.isResizeStarted = !1, this.activeMuntinSash = null, this.revertResizeStyles();
+    });
+  }
+}, ht = {
+  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 = k(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 L {
+  constructor(t) {
+    p(this, "windowElement", null);
+    p(this, "containerElement", null);
+    p(this, "debug", !1);
+    let i = null;
+    t instanceof j ? (i = t, this.rootSash = t) : (i = new q(t), this.rootSash = i.buildSashTree()), this.fitContainer = i.fitContainer;
+  }
+  mount(t) {
+    this.containerElement = t, this.create(), this.enableResize(), this.enableDrop(), this.fitContainer && this.enableFitContainer();
+  }
+  static assemble(...t) {
+    t.forEach((i) => {
+      O(this.prototype, i);
+    });
+  }
+}
+L.assemble(
+  it,
+  nt,
+  K,
+  ot,
+  ht,
+  st
+);
+function x(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 T = "bw-glass-action--close", rt = [
+  {
+    label: "",
+    className: T,
+    onClick: (e, t) => {
+      const i = x(e.target);
+      t.binaryWindow.removePane(i);
+    }
+  }
+], y = {
+  title: null,
+  content: null,
+  tabs: [],
+  actions: void 0,
+  draggable: !0
+};
+class z {
+  constructor({
+    title: t = y.title,
+    content: i = y.content,
+    tabs: n = y.tabs,
+    actions: o = y.actions,
+    draggable: s = y.draggable,
+    sash: r,
+    binaryWindow: l
+  }) {
+    p(this, "domNode");
+    this.title = t, this.content = i, this.tabs = n, this.actions = o, this.sash = r, this.draggable = s, this.binaryWindow = l, 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(E(this.title)), t.append(o);
+    }
+    t.setAttribute("can-drag", this.draggable), t.append(this.createActions());
+    const i = document.createElement("bw-glass-content"), n = E(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 = E(`<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 ? rt : 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 = E(`<button class="${s}">${o}</button>`);
+      typeof n.onClick == "function" && r.addEventListener("click", (l) => {
+        n.onClick(l, this);
+      }), t.append(r);
+    }
+    return t;
+  }
+  get contentElement() {
+    return this.domNode.querySelector("bw-glass-content");
+  }
+  get headerElement() {
+    return this.domNode.querySelector("bw-glass-header");
+  }
+}
+const lt = {
+  enableObservers() {
+    this.observeCloseButtons();
+  },
+  observeCloseButtons() {
+    const e = `.${T}`;
+    new MutationObserver((i) => {
+      i.forEach((n) => {
+        if (n.type === "childList")
+          if (this.windowElement.querySelectorAll("bw-pane").length === 1) {
+            const s = this.windowElement.querySelector(e);
+            s && s.setAttribute("disabled", "");
+          } else
+            this.windowElement.querySelectorAll(e).forEach((s) => {
+              s.removeAttribute("disabled");
+            });
+      });
+    }).observe(this.windowElement, {
+      childList: !0
+    });
+  }
+}, dt = {
+  activeDragGlassEl: null,
+  // Stores original `can-drop` attribute value of pane element
+  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";
+      H(n, this.activeDropPaneEl), n.setAttribute("can-drop", o);
+      return;
+    } else {
+      const n = x(this.activeDragGlassEl);
+      this.addPane(t.id, i).domNode.append(this.activeDragGlassEl), this.removePane(n);
+    }
+  },
+  enableDrag() {
+    document.addEventListener("mousedown", (e) => {
+      if (!e.target.matches("bw-glass-header") || e.target.getAttribute("can-drag") === "false") return;
+      const i = e.target.closest("bw-glass");
+      i.setAttribute("draggable", !0), this.activeDragGlassEl = i;
+    }), document.addEventListener("mouseup", () => {
+      this.activeDragGlassEl && (this.activeDragGlassEl.removeAttribute("draggable"), this.activeDragGlassEl = null);
+    }), document.addEventListener("dragstart", (e) => {
+      if (!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);
+    }), document.addEventListener("dragend", () => {
+      this.activeDragGlassEl && (this.activeDragGlassEl.removeAttribute("draggable"), this.activeDragGlassEl.closest("bw-pane").setAttribute("can-drop", this.activeDragGlassPaneCanDrop), this.activeDragGlassEl = null);
+    });
+  }
+};
+class at extends L {
+  mount(t) {
+    super.mount(t), this.enableObservers(), this.enableDrag();
+  }
+  onPaneCreate(t, i) {
+    const n = new z({ ...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 z({ ...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();
+    }
+  }
+  trimMuntin(t) {
+    t.hasAttribute("vertical") ? (t.style.top = `${parseFloat(t.style.top) + this.muntinSize / 2}px`, t.style.height = `${parseFloat(t.style.height) - this.muntinSize}px`) : t.hasAttribute("horizontal") && (t.style.left = `${parseFloat(t.style.left) + this.muntinSize / 2}px`, t.style.width = `${parseFloat(t.style.width) - this.muntinSize}px`);
+  }
+  onMuntinCreate(t) {
+    this.trimMuntin(t);
+  }
+  onMuntinUpdate(t) {
+    this.trimMuntin(t);
+  }
+}
+at.assemble(lt, dt);
+export {
+  rt as BUILTIN_ACTIONS,
+  at as BinaryWindow,
+  q as ConfigRoot,
+  L as Frame,
+  h as Position,
+  g as Sash,
+  j as SashConfig
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "bwin",
+  "description": "A tiling window manager for web browsers",
+  "type": "module",
+  "version": "0.1.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bhjsdev/bwin.git"
+  },
+  "keywords": [
+    "ui",
+    "drag",
+    "drop",
+    "resize",
+    "window-manager",
+    "tiling-window-manager"
+  ],
+  "author": "Bhjs Dev <bhjsdev@gmail.com>",
+  "license": "MIT",
+  "bugs": "https://github.com/bhjsdev/bwin/issues",
+  "homepage": "https://github.com/bhjsdev/bwin#readme",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/bwin.js",
+  "module": "./dist/bwin.js",
+  "exports": {
+    ".": {
+      "import": "./dist/bwin.js"
+    },
+    "./bwin.css": "./dist/bwin.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "devDependencies": {
+    "jsdom": "^25.0.1",
+    "prettier": "^3.3.3",
+    "prettier-plugin-brace-style": "^0.7.0",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.4"
+  }
+}