@archbase/layout 3.0.0 → 3.0.2

package/dist/index.js

@@ -2,7 +2,7 @@ import { Menu as at, ActionIcon as Zt } from "@mantine/core";
 import { Card as gi, Container as bi, Group as pi, Stack as zi } from "@mantine/core";
 import { jsx as c, jsxs as G, Fragment as Nt } from "react/jsx-runtime";
 import * as d from "prop-types";
-import * as M from "react";
+import * as I from "react";
 import J, { useRef as it, useState as V, useEffect as et, useMemo as kt, useCallback as Gt } from "react";
 import { ResizeSensor as Yt } from "css-element-queries";
 import { useWindowSize as Kt } from "usehooks-ts";
@@ -328,23 +328,23 @@ function ce(t) {
       if (n.element) {
         const e = s(o), a = n.left.adjusted.length === 0 ? 0 : n.left.adjusted[0], b = n.top.adjusted.length === 0 ? 0 : n.top.adjusted[0], r = e.x - a, g = e.y - b;
         let u = 0, z = 0, l = !1;
-        const m = (I, B) => i(n, r, g, I, B), R = re(m, 5), S = (I) => {
+        const m = (M, B) => i(n, r, g, M, B), R = re(m, 5), S = (M) => {
           l = !0;
-          const B = s(I);
-          u = B.x, z = B.y, I.preventDefault(), R(u, z);
+          const B = s(M);
+          u = B.x, z = B.y, M.preventDefault(), R(u, z);
         }, w = () => {
           if (l && m(u, z), window.removeEventListener(h, S), window.removeEventListener(f, w), y) {
-            const I = n.parentId && t.getSpace(n.parentId)?.element.getBoundingClientRect() || {
+            const M = n.parentId && t.getSpace(n.parentId)?.element.getBoundingClientRect() || {
               left: 0,
               top: 0
-            }, B = (({ left: P, top: x, right: T, bottom: _, width: k, height: N }) => ({ left: P, top: x, right: T, bottom: _, width: k, height: N }))(
+            }, B = (({ left: _, top: x, right: T, bottom: P, width: k, height: N }) => ({ left: _, top: x, right: T, bottom: P, width: k, height: N }))(
               n.element.getBoundingClientRect()
             );
             y(
               {
                 ...B,
-                left: B.left - I.left,
-                top: B.top - I.top
+                left: B.left - M.left,
+                top: B.top - M.top
               },
               l
             );
@@ -376,7 +376,7 @@ const bt = {
 function Et(t) {
   return t === A.ViewPort ? "fixed" : t === A.Fixed ? "relative" : "absolute";
 }
-function Pt(t) {
+function _t(t) {
   return t === C.Bottom || t === C.Top ? mt.Vertical : mt.Horizontal;
 }
 function ue(t) {
@@ -412,9 +412,9 @@ function fe() {
       return he.forEach((m) => {
         const R = z.filter((w) => w.anchor !== void 0 && w.anchor === m);
         R.map((w) => w.zIndex).filter(a).forEach((w) => {
-          const I = R.filter((T) => T.zIndex === w), B = I.filter((T) => T.order !== void 0), P = I.filter((T) => T.order === void 0);
-          var x = B.length > 0 ? B.map((T) => T.order).reduce((T, _) => Math.max(T, _)) : 0;
-          l = [...l, ...B, ...P.map((T, _) => ({ ...T, order: x + _ + 1 }))];
+          const M = R.filter((T) => T.zIndex === w), B = M.filter((T) => T.order !== void 0), _ = M.filter((T) => T.order === void 0);
+          var x = B.length > 0 ? B.map((T) => T.order).reduce((T, P) => Math.max(T, P)) : 0;
+          l = [...l, ...B, ..._.map((T, P) => ({ ...T, order: x + P + 1 }))];
         });
       }), [...l, ...z.filter((m) => m.anchor === void 0)];
     })(e.children);
@@ -472,12 +472,12 @@ function fe() {
         minimumSize: R,
         maximumSize: S,
         handleSize: w,
-        touchHandleSize: I,
+        touchHandleSize: M,
         handlePlacement: B,
-        allowOverflow: P
-      } = a, x = l && l.leftResizable || !1, T = l && l.rightResizable || !1, _ = l && l.topResizable || !1, k = l && l.bottomResizable || !1, N = l && l.topLeftResizable || !1, q = l && l.topRightResizable || !1, D = l && l.bottomLeftResizable || !1, ot = l && l.bottomRightResizable || !1;
+        allowOverflow: _
+      } = a, x = l && l.leftResizable || !1, T = l && l.rightResizable || !1, P = l && l.topResizable || !1, k = l && l.bottomResizable || !1, N = l && l.topLeftResizable || !1, q = l && l.topRightResizable || !1, D = l && l.bottomLeftResizable || !1, ot = l && l.bottomRightResizable || !1;
       let L = !1;
-      if (e.type !== b && (e.type = b, e.position = Et(b), L = !0), e.anchor !== r && (e.anchor = r, e.orientation = Pt(r), L = !0, b === A.Anchored && (r === C.Left ? e.adjustEdge = e.adjustLeft : r === C.Top ? e.adjustEdge = e.adjustTop : r === C.Right ? e.adjustEdge = e.adjustRight : r === C.Bottom && (e.adjustEdge = e.adjustBottom))), e.left.size !== (l && l.left) && (e.left.size = l && l.left, e.left.resized = 0, e.left.adjusted = [], L = !0), e.right.size !== (l && l.right) && (e.right.size = l && l.right, e.right.resized = 0, e.right.adjusted = [], L = !0), e.top.size !== (l && l.top) && (e.top.size = l && l.top, e.top.resized = 0, e.top.adjusted = [], L = !0), e.bottom.size !== (l && l.bottom) && (e.bottom.size = l && l.bottom, e.bottom.resized = 0, e.bottom.adjusted = [], L = !0), e.width.size !== (l && l.width) && (e.width.size = l && l.width, e.width.resized = 0, e.width.adjusted = [], L = !0), e.height.size !== (l && l.height) && (e.height.size = l && l.height, e.height.resized = 0, e.height.adjusted = [], L = !0), Z(e.order, 0) !== Z(g, 0) && (e.order = Z(g, 0), L = !0), Z(e.zIndex, 0) !== Z(u, 0) && (e.zIndex = Z(u, 0), L = !0), Z(e.scrollable, !1) !== Z(z, !1) && (e.scrollable = Z(z, !1), L = !0), e.minimumSize !== R && (e.minimumSize = R, L = !0), e.maximumSize !== S && (e.maximumSize = S, L = !0), Z(e.centerContent, st.None) !== Z(m, st.None) && (e.centerContent = Z(m, st.None), L = !0), e.handleSize !== w && (e.handleSize = w || bt.handleSize, L = !0), e.touchHandleSize !== I && (e.touchHandleSize = I || bt.touchHandleSize, L = !0), e.handlePlacement !== B && (e.handlePlacement = B || bt.handlePlacement, L = !0), e.canResizeBottom !== k && (e.canResizeBottom = k, L = !0), e.canResizeTop !== _ && (e.canResizeTop = _, L = !0), e.canResizeLeft !== x && (e.canResizeLeft = x, L = !0), e.canResizeRight !== T && (e.canResizeRight = T, L = !0), e.canResizeTopLeft !== N && (e.canResizeTopLeft = N, L = !0), e.canResizeTopRight !== q && (e.canResizeTopRight = q, L = !0), e.canResizeBottomLeft !== D && (e.canResizeBottomLeft = D, L = !0), e.canResizeBottomRight !== ot && (e.canResizeBottomRight = ot, L = !0), e.allowOverflow !== P && (e.allowOverflow = P || bt.allowOverflow, L = !0), L) {
+      if (e.type !== b && (e.type = b, e.position = Et(b), L = !0), e.anchor !== r && (e.anchor = r, e.orientation = _t(r), L = !0, b === A.Anchored && (r === C.Left ? e.adjustEdge = e.adjustLeft : r === C.Top ? e.adjustEdge = e.adjustTop : r === C.Right ? e.adjustEdge = e.adjustRight : r === C.Bottom && (e.adjustEdge = e.adjustBottom))), e.left.size !== (l && l.left) && (e.left.size = l && l.left, e.left.resized = 0, e.left.adjusted = [], L = !0), e.right.size !== (l && l.right) && (e.right.size = l && l.right, e.right.resized = 0, e.right.adjusted = [], L = !0), e.top.size !== (l && l.top) && (e.top.size = l && l.top, e.top.resized = 0, e.top.adjusted = [], L = !0), e.bottom.size !== (l && l.bottom) && (e.bottom.size = l && l.bottom, e.bottom.resized = 0, e.bottom.adjusted = [], L = !0), e.width.size !== (l && l.width) && (e.width.size = l && l.width, e.width.resized = 0, e.width.adjusted = [], L = !0), e.height.size !== (l && l.height) && (e.height.size = l && l.height, e.height.resized = 0, e.height.adjusted = [], L = !0), Z(e.order, 0) !== Z(g, 0) && (e.order = Z(g, 0), L = !0), Z(e.zIndex, 0) !== Z(u, 0) && (e.zIndex = Z(u, 0), L = !0), Z(e.scrollable, !1) !== Z(z, !1) && (e.scrollable = Z(z, !1), L = !0), e.minimumSize !== R && (e.minimumSize = R, L = !0), e.maximumSize !== S && (e.maximumSize = S, L = !0), Z(e.centerContent, st.None) !== Z(m, st.None) && (e.centerContent = Z(m, st.None), L = !0), e.handleSize !== w && (e.handleSize = w || bt.handleSize, L = !0), e.touchHandleSize !== M && (e.touchHandleSize = M || bt.touchHandleSize, L = !0), e.handlePlacement !== B && (e.handlePlacement = B || bt.handlePlacement, L = !0), e.canResizeBottom !== k && (e.canResizeBottom = k, L = !0), e.canResizeTop !== P && (e.canResizeTop = P, L = !0), e.canResizeLeft !== x && (e.canResizeLeft = x, L = !0), e.canResizeRight !== T && (e.canResizeRight = T, L = !0), e.canResizeTopLeft !== N && (e.canResizeTopLeft = N, L = !0), e.canResizeTopRight !== q && (e.canResizeTopRight = q, L = !0), e.canResizeBottomLeft !== D && (e.canResizeBottomLeft = D, L = !0), e.canResizeBottomRight !== ot && (e.canResizeBottomRight = ot, L = !0), e.allowOverflow !== _ && (e.allowOverflow = _ || bt.allowOverflow, L = !0), L) {
         if (e.parentId) {
           const F = o(e.parentId);
           F && f(F);
@@ -492,7 +492,7 @@ function fe() {
     startTouchDrag: () => null
   }, s = de(h), y = ce(h);
   return h.createSpace = (e, a, b) => {
-    const { position: r, anchor: g, type: u, ...z } = a, l = r && r.rightResizable || !1, m = r && r.leftResizable || !1, R = r && r.bottomResizable || !1, S = r && r.topResizable || !1, w = r && r.topLeftResizable || !1, I = r && r.topRightResizable || !1, B = r && r.bottomLeftResizable || !1, P = r && r.bottomRightResizable || !1, x = {
+    const { position: r, anchor: g, type: u, ...z } = a, l = r && r.rightResizable || !1, m = r && r.leftResizable || !1, R = r && r.bottomResizable || !1, S = r && r.topResizable || !1, w = r && r.topLeftResizable || !1, M = r && r.topRightResizable || !1, B = r && r.bottomLeftResizable || !1, _ = r && r.bottomRightResizable || !1, x = {
       ...bt,
       ...z,
       store: h,
@@ -507,7 +507,7 @@ function fe() {
       children: [],
       anchor: g,
       type: u,
-      orientation: Pt(g),
+      orientation: _t(g),
       position: Et(u),
       left: ut(r && r.left),
       right: ut(r && r.right),
@@ -520,11 +520,11 @@ function fe() {
       canResizeTop: R,
       canResizeBottom: S,
       canResizeTopLeft: w,
-      canResizeTopRight: I,
+      canResizeTopRight: M,
       canResizeBottomLeft: B,
-      canResizeBottomRight: P
+      canResizeBottomRight: _
     };
-    return x.anchoredChildren = (T, _, k) => T.filter((N) => N.type === A.Anchored && N.anchor === _ && N.zIndex === k), x.adjustLeft = (T) => Ct(x.left.adjusted, T) ? !1 : (x.left.adjusted = T, !0), x.adjustRight = (T) => Ct(x.right.adjusted, T) ? !1 : (x.right.adjusted = T, !0), x.adjustTop = (T) => Ct(x.top.adjusted, T) ? !1 : (x.top.adjusted = T, !0), x.adjustBottom = (T) => Ct(x.bottom.adjusted, T) ? !1 : (x.bottom.adjusted = T, !0), u === A.Anchored && (g === C.Left ? x.adjustEdge = x.adjustLeft : g === C.Top ? x.adjustEdge = x.adjustTop : g === C.Right ? x.adjustEdge = x.adjustRight : g === C.Bottom && (x.adjustEdge = x.adjustBottom)), x;
+    return x.anchoredChildren = (T, P, k) => T.filter((N) => N.type === A.Anchored && N.anchor === P && N.zIndex === k), x.adjustLeft = (T) => Ct(x.left.adjusted, T) ? !1 : (x.left.adjusted = T, !0), x.adjustRight = (T) => Ct(x.right.adjusted, T) ? !1 : (x.right.adjusted = T, !0), x.adjustTop = (T) => Ct(x.top.adjusted, T) ? !1 : (x.top.adjusted = T, !0), x.adjustBottom = (T) => Ct(x.bottom.adjusted, T) ? !1 : (x.bottom.adjusted = T, !0), u === A.Anchored && (g === C.Left ? x.adjustEdge = x.adjustLeft : g === C.Top ? x.adjustEdge = x.adjustTop : g === C.Right ? x.adjustEdge = x.adjustRight : g === C.Bottom && (x.adjustEdge = x.adjustBottom)), x;
   }, h.startMouseResize = (e, a, b, r) => {
     s.startResize(
       b,
@@ -582,7 +582,7 @@ const Ft = (t) => {
   o.current && (n.current = !0), et(() => (o.current || (i.current = t(), o.current = !0), h((s) => s + 1), () => {
     n.current && i.current && i.current();
   }), []);
-}, jt = M.createContext(void 0), Ot = M.createContext(void 0), At = M.createContext(void 0), Vt = M.createContext({}), qt = fe(), yt = {
+}, Ot = I.createContext(void 0), jt = I.createContext(void 0), At = I.createContext(void 0), Vt = I.createContext({}), qt = fe(), yt = {
   id: d.string,
   className: d.string,
   style: d.oneOfType([d.object, d.array]),
@@ -604,22 +604,22 @@ const Ft = (t) => {
   onTouchEnd: d.func
 };
 function me() {
-  const [, t] = M.useState(0);
-  return M.useCallback(() => {
+  const [, t] = I.useState(0);
+  return I.useCallback(() => {
     t((i) => i + 1);
   }, []);
 }
 function Ut() {
   if (ft) {
-    if (M.version && M.version.startsWith("18"))
-      return `s${M.useId().replace(/\:/g, "")}`;
-    if (typeof M.useId == "function")
-      return `s${M.useId().replace(/\:/g, "")}`;
+    if (I.version.startsWith("18"))
+      return `s${I.useId().replace(/\:/g, "")}`;
+    if (I.unstable_useOpaqueIdentifier)
+      return `s${I.unstable_useOpaqueIdentifier().replace(/\:/g, "")}`;
   }
   return `s${ne()}`;
 }
 function ge(t) {
-  const i = qt, o = me(), n = M.useContext(jt), f = M.useContext(At), { debug: h } = M.useContext(Vt), s = Ut(), [y] = M.useState(t.id || s), e = M.useRef(null), a = M.useRef(void 0), [b, r] = M.useState();
+  const i = qt, o = me(), n = I.useContext(Ot), f = I.useContext(At), { debug: h } = I.useContext(Vt), s = Ut(), [y] = I.useState(t.id || s), e = I.useRef(null), a = I.useRef(void 0), [b, r] = I.useState();
   let g = i.getSpace(y);
   h && console.table(i.getSpaces());
   const u = {
@@ -689,13 +689,13 @@ function pe(t, i) {
   };
 }
 function ii() {
-  const t = qt, i = M.useContext(jt), o = i ? t.getSpace(i) : void 0, n = M.useContext(Ot), f = M.useContext(At), h = M.useCallback(
+  const t = qt, i = I.useContext(Ot), o = i ? t.getSpace(i) : void 0, n = I.useContext(jt), f = I.useContext(At), h = I.useCallback(
     (b, r) => o ? t.startMouseDrag(o, b, r) : null,
     [i]
-  ), s = M.useCallback(
+  ), s = I.useCallback(
     (b, r) => o ? t.startTouchDrag(o, b, r) : null,
     [i]
-  ), y = M.useCallback(() => o ? t.updateStyles(o) : null, [i]);
+  ), y = I.useCallback(() => o ? t.updateStyles(o) : null, [i]);
   return {
     size: {
       ...{ width: 0, height: 0, x: 0, y: 0 },
@@ -721,7 +721,7 @@ function Re(t, i) {
   }
   return t;
 }
-class K extends M.Component {
+class K extends I.Component {
   _react_spaces_uniqueid;
   render() {
     return /* @__PURE__ */ c(ve, { ...this.props, wrapperInstance: this });
@@ -729,7 +729,7 @@ class K extends M.Component {
 }
 const ve = (t) => {
   let i = t.id ?? t.wrapperInstance._react_spaces_uniqueid;
-  const [o, n] = M.useState(!!ft), f = Ut();
+  const [o, n] = I.useState(!!ft), f = Ut();
   i || (t.wrapperInstance._react_spaces_uniqueid = f, i = t.wrapperInstance._react_spaces_uniqueid);
   const {
     style: h,
@@ -755,7 +755,7 @@ const ve = (t) => {
     onTouchStart: u,
     onTouchMove: z,
     onTouchEnd: l
-  }, { space: w, domRect: I, elementRef: B, resizeHandles: P } = ge({
+  }, { space: w, domRect: M, elementRef: B, resizeHandles: _ } = ge({
     ...t,
     id: i
   });
@@ -772,7 +772,7 @@ const ve = (t) => {
     w.type === A.Fixed ? "spaces-fixedsize-layout" : void 0,
     w.type === A.ViewPort ? "spaces-fullpage-layout" : void 0,
     ...x.map((D) => `${D}-container`)
-  ].filter((D) => D), _ = ["spaces-space-inner", ...x];
+  ].filter((D) => D), P = ["spaces-space-inner", ...x];
   let k = h;
   w.handlePlacement === rt.Inside && (k = {
     ...h,
@@ -788,12 +788,12 @@ const ve = (t) => {
     ...S
   };
   return /* @__PURE__ */ G(Nt, { children: [
-    P.mouseHandles.map((D) => R?.(D) || /* @__PURE__ */ c("div", { ...D })),
+    _.mouseHandles.map((D) => R?.(D) || /* @__PURE__ */ c("div", { ...D })),
     ft && w.ssrStyle && o && /* @__PURE__ */ c("style", { id: `style_${w.id}_ssr`, children: w.ssrStyle }),
-    M.createElement(
+    I.createElement(
       t.as || "div",
       q,
-      /* @__PURE__ */ c("div", { className: _.join(" "), style: k, children: /* @__PURE__ */ c(jt.Provider, { value: w.id, children: /* @__PURE__ */ c(At.Provider, { value: void 0, children: /* @__PURE__ */ c(Ot.Provider, { value: I, children: N }) }) }) })
+      /* @__PURE__ */ c("div", { className: P.join(" "), style: k, children: /* @__PURE__ */ c(Ot.Provider, { value: w.id, children: /* @__PURE__ */ c(At.Provider, { value: void 0, children: /* @__PURE__ */ c(jt.Provider, { value: M, children: N }) }) }) })
     )
   ] });
 }, St = {
@@ -918,7 +918,7 @@ const Be = oe(
     resizeTypes: d.array
   },
   "size"
-), je = ({
+), Oe = ({
   children: t,
   type: i,
   left: o,
@@ -956,9 +956,9 @@ const Be = oe(
     right: 0
   }, i = A.Fill), /* @__PURE__ */ c(K, { ...g, type: i, anchor: a, position: u, children: t });
 };
-je.propTypes = Be;
-const Oe = (t) => /* @__PURE__ */ c(K, { ...t, type: A.Fill, position: { left: 0, top: 0, right: 0, bottom: 0 }, children: t.children });
-Oe.propTypes = yt;
+Oe.propTypes = Be;
+const je = (t) => /* @__PURE__ */ c(K, { ...t, type: A.Fill, position: { left: 0, top: 0, right: 0, bottom: 0 }, children: t.children });
+je.propTypes = yt;
 const Me = ({ width: t, height: i, children: o, ...n }) => /* @__PURE__ */ c(K, { ...n, type: A.Fixed, position: { width: t, height: i }, children: o });
 Me.propTypes = {
   ...yt,
@@ -1007,7 +1007,7 @@ De.propTypes = {
   resizable: d.array
 };
 const ni = (t) => {
-  const i = M.useContext(Ot);
+  const i = I.useContext(jt);
   return i ? t.children(i) : t.children({ left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0, x: 0, y: 0, toJSON: () => "" });
 }, Ee = ({ left: t, top: i, right: o, bottom: n, children: f, ...h }) => /* @__PURE__ */ c(K, { ...h, type: A.ViewPort, position: { left: t || 0, top: i || 0, right: o || 0, bottom: n || 0 }, children: f });
 Ee.propTypes = {
@@ -1017,7 +1017,7 @@ Ee.propTypes = {
   right: d.oneOfType([d.string, d.number]),
   bottom: d.oneOfType([d.string, d.number])
 };
-const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i, children: t }), Pe = (t) => {
+const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i, children: t }), _e = (t) => {
   const {
     favicon: i,
     title: o,
@@ -1038,23 +1038,23 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
     onCloseLeftTabs: R,
     onCloseRightTabs: S,
     onCloseOtherTabs: w,
-    totalTabs: I
-  } = t, { t: B } = Ht(), [P, x] = V(0), [T, _] = V(!1), [k, N] = V(null), [q, D] = V(null), [ot, L] = V(!1), [F, tt] = V(0), [nt, U] = V(!1), lt = it(null), $ = 9, E = 84, H = 60, W = 48;
-  et(() => (document.addEventListener("mousemove", j), document.addEventListener("mouseup", O), () => {
-    document.removeEventListener("mousemove", j), document.addEventListener("mouseup", O);
+    totalTabs: M
+  } = t, { t: B } = Ht(), [_, x] = V(0), [T, P] = V(!1), [k, N] = V(null), [q, D] = V(null), [ot, L] = V(!1), [F, tt] = V(0), [nt, U] = V(!1), lt = it(null), $ = 9, E = 84, H = 60, W = 48;
+  et(() => (document.addEventListener("mousemove", O), document.addEventListener("mouseup", j), () => {
+    document.removeEventListener("mousemove", O), document.addEventListener("mouseup", j);
   })), et(() => {
-    T || setTimeout(() => _(!0), 500);
+    T || setTimeout(() => P(!0), 500);
   }, [T]), et(() => {
     x(s + 2 * $);
   }, [s]);
   const X = (Y) => {
     Y.button === 0 && (a(!0), D(Y.pageX), L(!1), tt(h));
-  }, j = (Y) => {
+  }, O = (Y) => {
     if (q != null && g) {
       let ht = F - $ + (Y.pageX - q);
-      ht < 0 && (ht = 0), ht > b - P && (ht = b - P), N(ht), !z && r(ht);
+      ht < 0 && (ht = 0), ht > b - _ && (ht = b - _), N(ht), !z && r(ht);
     }
-  }, O = (Y) => {
+  }, j = (Y) => {
     q != null && g && (D(null), N(null), a(!1), L(!0));
   }, [dt, ct] = V(h - $);
   et(() => {
@@ -1070,14 +1070,14 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
     m && m(), U(!1);
   }, Jt = (Y) => {
     Y.preventDefault(), U(!0);
-  }, Mt = u > 0, It = I !== void 0 && u < I - 1, Dt = (I || 0) > 1;
+  }, Mt = u > 0, It = M !== void 0 && u < M - 1, Dt = (M || 0) > 1;
   return /* @__PURE__ */ G(
     "div",
     {
       className: `archbase_tab ${T ? "" : " archbase_tab-was-just-added"}${q == null && !f ? " archbase_tab-was-just-dragged" : ""}`,
       style: {
         transform: `translate3d(${k ?? dt}px, 0, 0)`,
-        width: `${P}px`
+        width: `${_}px`
       },
       "tab-active": f !== !1 ? "" : null,
       "is-small": s < E ? "" : null,
@@ -1099,7 +1099,7 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
         /* @__PURE__ */ G("div", { className: "archbase_tab-content", children: [
           !!i && /* @__PURE__ */ c("div", { className: "archbase_tab-favicon", style: { backgroundImage: `url(${i})` } }),
           /* @__PURE__ */ c("div", { className: "archbase_tab-title", children: n ?? o }),
-          /* @__PURE__ */ c("div", { className: "archbase_tab-drag-handle", title: n ?? o, onClick: y, onPointerDown: (Y) => y(Y), onMouseUp: O, onMouseMove: j, onMouseDown: X }),
+          /* @__PURE__ */ c("div", { className: "archbase_tab-drag-handle", title: n ?? o, onClick: y, onPointerDown: (Y) => y(Y), onMouseUp: j, onMouseMove: O, onMouseDown: X }),
           (m || R || S || w) && /* @__PURE__ */ G(at, { shadow: "md", width: 200, opened: nt, onChange: U, position: "bottom-end", children: [
             /* @__PURE__ */ c(at.Target, { children: /* @__PURE__ */ c("div", { className: "archbase_tab-dropdown", onClick: (Y) => {
               Y.stopPropagation(), U(!nt);
@@ -1120,12 +1120,12 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
     }
   );
 }, si = (t) => {
-  const { currentTabs: i, onTabChange: o, activeTab: n, onTabClose: f, className: h, style: s, dark: y, onClick: e, buttonCloseOnlyActiveTab: a = !1, onCloseAllTabs: b, onCloseLeftTabs: r, onCloseRightTabs: g, onCloseOtherTabs: u } = t, [z, l] = V([]), [m, R] = V([]), [S, w] = V(i || []), [I, B] = V(!1), [P, x] = V(!1), T = it(null), { width: _, height: k } = Kt(), N = 9, q = 1, D = 24, ot = 240;
+  const { currentTabs: i, onTabChange: o, activeTab: n, onTabClose: f, className: h, style: s, dark: y, onClick: e, buttonCloseOnlyActiveTab: a = !1, onCloseAllTabs: b, onCloseLeftTabs: r, onCloseRightTabs: g, onCloseOtherTabs: u } = t, [z, l] = V([]), [m, R] = V([]), [S, w] = V(i || []), [M, B] = V(!1), [_, x] = V(!1), T = it(null), { width: P, height: k } = Kt(), N = 9, q = 1, D = 24, ot = 240;
   et(() => {
     l(F()), R(tt(F()));
   }, []), et(() => {
     L();
-  }, [JSON.stringify(S), _, k]), et(() => {
+  }, [JSON.stringify(S), P, k]), et(() => {
     i && w(i);
   }, [JSON.stringify(i)]);
   const L = () => {
@@ -1134,28 +1134,28 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
   }, F = () => {
     const $ = [];
     if (T.current) {
-      const E = S.length, H = T.current.clientWidth, W = (E - 1) * q, X = (H - 2 * N + W) / E, j = Math.max(D, Math.min(ot, X)), O = Math.floor(j), dt = O * E + 2 * N - W;
+      const E = S.length, H = T.current.clientWidth, W = (E - 1) * q, X = (H - 2 * N + W) / E, O = Math.max(D, Math.min(ot, X)), j = Math.floor(O), dt = j * E + 2 * N - W;
       let gt = H - dt;
       for (let xt = 0; xt < E; xt += 1) {
-        const Lt = O < ot && gt > 0 ? 1 : 0;
-        $.push(O + Lt), gt > 0 && (gt -= 1);
+        const Lt = j < ot && gt > 0 ? 1 : 0;
+        $.push(j + Lt), gt > 0 && (gt -= 1);
       }
     }
     return $;
   }, tt = ($) => {
     const E = [], H = $ || z;
     let W = N;
-    return H.forEach((X, j) => {
-      const O = j * q;
-      E.push(W - O), W += X;
+    return H.forEach((X, O) => {
+      const j = O * q;
+      E.push(W - j), W += X;
     }), E;
   }, nt = ($, E) => {
     B(!0);
     let H = 1 / 0, W = -1, X = [];
-    m.forEach((j, O) => {
-      Math.abs($ - j) < H && (H = Math.abs($ - j), W = O);
-    }), W = Math.max(0, Math.min(m.length, W)), E != W && (m.forEach((j, O) => {
-      O == E ? X[O] = S[W > E ? O + 1 : O - 1] : E > O && O >= W ? X[O] = S[O + 1] : E < O && O <= W ? X[O] = S[O - 1] : X[O] = S[O];
+    m.forEach((O, j) => {
+      Math.abs($ - O) < H && (H = Math.abs($ - O), W = j);
+    }), W = Math.max(0, Math.min(m.length, W)), E != W && (m.forEach((O, j) => {
+      j == E ? X[j] = S[W > E ? j + 1 : j - 1] : E > j && j >= W ? X[j] = S[j + 1] : E < j && j <= W ? X[j] = S[j - 1] : X[j] = S[j];
     }), U(X) && o(X)), B(!1);
   }, U = ($) => new Set($).size === $.length, lt = ($) => {
     f ? f($) : o(S.filter((E, H) => H != $));
@@ -1163,10 +1163,10 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
   return /* @__PURE__ */ c("div", { className: h, style: s, children: /* @__PURE__ */ G(
     "div",
     {
-      className: `archbase_tabs${y ? " archbase_tabs-dark-theme" : ""}${P ? "" : " archbase_tabs-is-sorting"}`,
+      className: `archbase_tabs${y ? " archbase_tabs-dark-theme" : ""}${_ ? "" : " archbase_tabs-is-sorting"}`,
       children: [
         /* @__PURE__ */ c("div", { className: "archbase_tabs_content", ref: T, children: !!S && S.map(($, E) => !!m[E] && /* @__PURE__ */ c(
-          Pe,
+          _e,
           {
             favicon: $.favicon,
             title: $.title,
@@ -1180,10 +1180,10 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
             showButtonClose: a ? n === $.key : !0,
             tabsContentWidth: T.current && T.current.clientWidth,
             animateTabMove: (H) => nt(H, E),
-            isDragging: P,
+            isDragging: _,
             id: $.key,
             index: E,
-            sorting: I,
+            sorting: M,
             onCloseAllTabs: b,
             onCloseLeftTabs: r,
             onCloseRightTabs: g,
@@ -1232,31 +1232,31 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
     t
   );
   i.id || (i.id = Date.now().toString()), Object.freeze(i);
-  const [o, n] = J.useState(i.height), [f, h] = J.useState(i.width), [s, y] = J.useState(i.top || 0), [e, a] = J.useState(i.left || 0), [b, r] = J.useState(0), [g, u] = J.useState(0), [z, l] = J.useState(!1), [m, R] = J.useState(!1), [S, w] = J.useState("▁"), [I, B] = J.useState("□"), [P, x] = J.useState(""), [T, _] = J.useState(pt()), [k, N] = J.useState(1), { ref: q, width: D, height: ot } = Qt(), L = J.useRef(null), F = it(o), tt = it(f), nt = it(s), U = it(e), lt = 500, $ = (j) => {
-    u(j.clientY - s), r(j.clientX - e), _(pt()), N(0.5);
-  }, E = (j) => {
-    a((j.clientX || j.screenX || e + b) - b), y((j.clientY || j.screenY || s + g) - g);
-  }, H = (j) => {
-    a((j.clientX || j.screenX) - b), y((j.clientY || j.screenY) - g), N(1);
+  const [o, n] = J.useState(i.height), [f, h] = J.useState(i.width), [s, y] = J.useState(i.top || 0), [e, a] = J.useState(i.left || 0), [b, r] = J.useState(0), [g, u] = J.useState(0), [z, l] = J.useState(!1), [m, R] = J.useState(!1), [S, w] = J.useState("▁"), [M, B] = J.useState("□"), [_, x] = J.useState(""), [T, P] = J.useState(pt()), [k, N] = J.useState(1), { ref: q, width: D, height: ot } = Qt(), L = J.useRef(null), F = it(o), tt = it(f), nt = it(s), U = it(e), lt = 500, $ = (O) => {
+    u(O.clientY - s), r(O.clientX - e), P(pt()), N(0.5);
+  }, E = (O) => {
+    a((O.clientX || O.screenX || e + b) - b), y((O.clientY || O.screenY || s + g) - g);
+  }, H = (O) => {
+    a((O.clientX || O.screenX) - b), y((O.clientY || O.screenY) - g), N(1);
   }, W = () => {
     if (x(`${lt}ms ease-in-out`), z)
       F.current = o, y(nt.current || 0), a(U.current || 0), l(!1), w("▁"), R(!1);
     else {
       F.current = 32, m || (U.current = e, nt.current = s);
-      const j = document.getElementById(i.id)?.parentElement;
+      const O = document.getElementById(i.id)?.parentElement;
       tt.current = f;
-      let O = (j?.clientHeight || window.innerHeight) - F.current - 4;
-      const dt = (j?.clientWidth || window.innerWidth) - tt.current - 4, ct = document.elementFromPoint(
+      let j = (O?.clientHeight || window.innerHeight) - F.current - 4;
+      const dt = (O?.clientWidth || window.innerWidth) - tt.current - 4, ct = document.elementFromPoint(
         dt + tt.current / 2,
-        O + F.current / 2
+        j + F.current / 2
       );
-      ct && ["archbase-window-container", "windowTitle"].includes(ct?.className || "") && (O -= ct?.clientHeight + 4), y(O), a(dt), l(!0), w("◰"), R(!1);
+      ct && ["archbase-window-container", "windowTitle"].includes(ct?.className || "") && (j -= ct?.clientHeight + 4), y(j), a(dt), l(!0), w("◰"), R(!1);
     }
-    _(pt()), setTimeout(x, lt + 1, "");
+    P(pt()), setTimeout(x, lt + 1, "");
   }, X = () => {
     x(`${lt}ms ease-in-out`);
-    const j = document.getElementById(i.id)?.parentElement;
-    m ? (F.current = o, tt.current = f, y(nt.current || 0), a(U.current || 0), R(!1), B("□"), l(!1), w("▁")) : (F.current = j?.clientHeight || window.innerHeight, tt.current = j?.clientWidth || window.innerWidth, z || (U.current = e, nt.current = s), y(j?.offsetTop || 0), a(j?.offsetLeft || 0), R(!0), B("❐"), l(!1), w("▁")), _(pt()), setTimeout(x, lt + 1, "");
+    const O = document.getElementById(i.id)?.parentElement;
+    m ? (F.current = o, tt.current = f, y(nt.current || 0), a(U.current || 0), R(!1), B("□"), l(!1), w("▁")) : (F.current = O?.clientHeight || window.innerHeight, tt.current = O?.clientWidth || window.innerWidth, z || (U.current = e, nt.current = s), y(O?.offsetTop || 0), a(O?.offsetLeft || 0), R(!0), B("❐"), l(!1), w("▁")), P(pt()), setTimeout(x, lt + 1, "");
   };
   return et(() => {
     !m && !z && (h(D), n(ot));
@@ -1271,13 +1271,13 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
         top: s,
         left: e,
         resize: i.resizable ? "both" : "none",
-        transition: P,
+        transition: _,
         zIndex: T,
         opacity: k
       },
       ref: q,
       onClick: () => {
-        _(pt());
+        P(pt());
       },
       children: [
         i.titleBar && /* @__PURE__ */ G(
@@ -1305,7 +1305,7 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
               ),
               i.titleBar.buttons && /* @__PURE__ */ G("span", { className: "buttonContainer", children: [
                 i.titleBar.buttons.minimize && /* @__PURE__ */ c("span", { className: "windowButton", onClick: W, children: S }),
-                i.titleBar.buttons.maximize && /* @__PURE__ */ c("span", { className: "windowButton", onClick: X, children: I }),
+                i.titleBar.buttons.maximize && /* @__PURE__ */ c("span", { className: "windowButton", onClick: X, children: M }),
                 !!i.titleBar.buttons.close && /* @__PURE__ */ c("span", { className: "windowButton", onClick: i.titleBar.buttons.close, children: "⨯" })
               ] })
             ]
@@ -1399,7 +1399,7 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
   et(() => {
     g ? S() : w();
   }, [g]);
-  const I = {
+  const M = {
     writingMode: "vertical-rl",
     transform: "rotate(360deg)",
     margin: "10px 0",
@@ -1411,7 +1411,7 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
     margin: "10px 0",
     alignSelf: "flex-center",
     cursor: "pointer"
-  }, P = s ? "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" : "none";
+  }, _ = s ? "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" : "none";
   return /* @__PURE__ */ G(
     "div",
     {
@@ -1433,14 +1433,14 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
               height: "100%",
               backgroundColor: h,
               cursor: "pointer",
-              border: P,
+              border: _,
               display: "flex",
               flexDirection: "column",
               justifyContent: "flex-start",
               alignItems: "center"
             },
             children: !l && !u && // @ts-ignore
-            /* @__PURE__ */ c("span", { style: e === "right" ? I : B, children: o })
+            /* @__PURE__ */ c("span", { style: e === "right" ? M : B, children: o })
           }
         ),
         /* @__PURE__ */ c(
@@ -1454,7 +1454,7 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
               transition: "width 0.3s ease-in-out",
               backgroundColor: f,
               padding: l || u ? "10px" : "0px",
-              border: l || u ? P : 0
+              border: l || u ? _ : 0
             },
             children: l || u ? /* @__PURE__ */ G(Nt, { children: [
               /* @__PURE__ */ G(
@@ -1480,7 +1480,7 @@ const ri = ({ children: t, ...i }) => /* @__PURE__ */ c(Vt.Provider, { value: i,
     }
   );
 };
-function _e({
+function Pe({
   components: t,
   defaultLayout: i,
   watermark: o,
@@ -1596,7 +1596,7 @@ function ui({
 }) {
   const { layout: y, components: e } = kt(() => ke(t, i), [t, i]);
   return /* @__PURE__ */ c(
-    _e,
+    Pe,
     {
       components: e,
       defaultLayout: y,
@@ -1616,7 +1616,7 @@ function ke(t, i) {
   let n;
   switch (t) {
     case "dashboard":
-      n = _t(o);
+      n = Pt(o);
       break;
     case "ide":
       n = We(o);
@@ -1628,7 +1628,7 @@ function ke(t, i) {
       n = Ve(o);
       break;
     default:
-      n = _t(o);
+      n = Pt(o);
   }
   return { layout: n, components: o };
 }
@@ -1709,7 +1709,7 @@ function He() {
     }
   };
 }
-function _t(t) {
+function Pt(t) {
   return {
     root: {
       type: "branch",
@@ -1938,7 +1938,7 @@ export {
   si as ArchbaseAdvancedTabs,
   gi as ArchbaseCard,
   bi as ArchbaseContainer,
-  _e as ArchbaseDockLayout,
+  Pe as ArchbaseDockLayout,
   ui as ArchbaseDockLayoutPreset,
   hi as ArchbaseDockableContainer,
   li as ArchbaseFloatingWindow,
@@ -1948,8 +1948,8 @@ export {
   Le as ArchbaseSpaceBottomResizable,
   ze as ArchbaseSpaceCentered,
   we as ArchbaseSpaceCenteredVertically,
-  je as ArchbaseSpaceCustom,
-  Oe as ArchbaseSpaceFill,
+  Oe as ArchbaseSpaceCustom,
+  je as ArchbaseSpaceFill,
   Me as ArchbaseSpaceFixed,
   ni as ArchbaseSpaceInfo,
   Ie as ArchbaseSpaceLayer,

package/dist/spaces/components/ArchbaseSpace.d.ts

@@ -0,0 +1,6 @@
+import { IArchbaseSpaceInnerProps } from '../core-react';
+import * as React from 'react';
+export declare class ArchbaseSpace extends React.Component<IArchbaseSpaceInnerProps> {
+    _react_spaces_uniqueid?: string;
+    render(): import("react/jsx-runtime").JSX.Element;
+}