@dynamix-layout/solid 1.0.3 → 2.0.0

package/dist/index.es.js

@@ -1,760 +0,0 @@
-import { spread as T, mergeProps as $, insert as y, memo as ie, effect as Ee, setStyleProperty as De, template as H, createComponent as v, use as Te } from "solid-js/web";
-import { DynamixLayoutCore as D, Node as x, setElementRect as Y, createFrameScheduler as $e, getTabBodyRect as Se, getNavbarDropPreview as Ne, getRootSplitPreview as Re, isSameDropPreview as ze, getTabsetDropPreview as Oe } from "@dynamix-layout/core";
-import { splitProps as He, createMemo as se, createSignal as W, onMount as Pe, onCleanup as Ce, For as L } from "solid-js";
-var P = H("<div>"), _e = H("<div><div style=display:flex;align-items:center;gap:4px;height:100%>"), Ie = H('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="lucide lucide-grip-vertical size-2.5"><circle cx=9 cy=12 r=1></circle><circle cx=9 cy=5 r=1></circle><circle cx=9 cy=19 r=1></circle><circle cx=15 cy=12 r=1></circle><circle cx=15 cy=5 r=1></circle><circle cx=15 cy=19 r=1>'), We = H('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round style=transform:rotate(90deg)><circle cx=9 cy=12 r=1></circle><circle cx=9 cy=5 r=1></circle><circle cx=9 cy=19 r=1></circle><circle cx=15 cy=12 r=1></circle><circle cx=15 cy=5 r=1></circle><circle cx=15 cy=19 r=1>');
-const Le = (e) => (() => {
-  var a = P();
-  return T(a, $(e, {
-    get class() {
-      return `DefaultWrapTabLabel ${e.class || ""}`;
-    },
-    get "data-state"() {
-      return e.active ? "active" : "inactive";
-    },
-    get style() {
-      return {
-        "align-self": "center",
-        padding: "4px 6px",
-        "box-sizing": "border-box",
-        "font-size": "14px",
-        "border-radius": "4px",
-        ...e.style
-      };
-    }
-  }), !1, !0), y(a, () => e.children), a;
-})(), ke = (e) => (() => {
-  var a = P();
-  return T(a, $(e, {
-    get class() {
-      return `DefaultWrapTabBody hide-scrollbar ${e.class || ""}`;
-    },
-    get style() {
-      return {
-        "box-sizing": "border-box",
-        height: "100%",
-        width: "100%",
-        display: "grid",
-        overflow: "auto",
-        "scrollbar-width": "none",
-        "-ms-overflow-style": "none",
-        ...e.style
-      };
-    }
-  }), !1, !0), y(a, () => e.children), a;
-})(), Be = (e) => (() => {
-  var a = P();
-  return T(a, $(e, {
-    get class() {
-      return `DefaultWrapTabHead hide-scrollbar ${e.class || ""}`;
-    },
-    get style() {
-      return {
-        display: "grid",
-        "grid-auto-flow": "column",
-        "justify-content": "start",
-        "align-items": "center",
-        gap: "6px",
-        "padding-left": "8px",
-        width: "100%",
-        "box-sizing": "border-box",
-        height: "100%",
-        "place-items": "self-start",
-        overflow: "auto",
-        "background-color": "#dfdfdf",
-        "scrollbar-width": "none",
-        "-ms-overflow-style": "none",
-        ...e.style
-      };
-    }
-  }), !1, !0), y(a, () => e.children), a;
-})(), Me = (e) => (() => {
-  var a = P();
-  return T(a, $(e, {
-    get class() {
-      return `DefaultWrapTabPanel ${e.class || ""}`;
-    },
-    get style() {
-      return {
-        display: "grid",
-        "align-items": "center",
-        "place-items": "self-start",
-        "box-sizing": "border-box",
-        position: "absolute",
-        "border-radius": "8px",
-        ...e.style
-      };
-    }
-  }), !1, !0), y(a, () => e.children), a;
-})(), Ae = (e) => (() => {
-  var a = P();
-  return T(a, $(e, {
-    get class() {
-      return `DefaultHoverElement ${e.class || ""}`;
-    },
-    get style() {
-      return {
-        display: "flex",
-        "justify-content": "center",
-        "align-items": "center",
-        opacity: 0.7,
-        position: "absolute",
-        "box-sizing": "border-box",
-        "font-weight": "bold",
-        "pointer-events": "none",
-        "background-color": "rgba(0, 175, 249, 0.5)",
-        "border-radius": "10px",
-        transition: "all 0.2s ease",
-        border: "2px dashed rgb(0, 196, 42)",
-        ...e.style
-      };
-    }
-  }), !1, !0), y(a, () => e.children), a;
-})(), je = (e) => (() => {
-  var a = _e(), h = a.firstChild;
-  return T(a, $(e, {
-    get class() {
-      return `DefaultSliderElement ${e.class || ""}`;
-    },
-    get style() {
-      return {
-        width: "100%",
-        height: "100%",
-        position: "absolute",
-        "box-sizing": "border-box",
-        "background-color": "white",
-        "z-index": 9,
-        cursor: "grab",
-        ...e.style
-      };
-    }
-  }), !1, !0), y(h, (() => {
-    var g = ie(() => !e.direction);
-    return () => g() ? Ie() : We();
-  })()), y(a, () => e.children, null), Ee((g) => De(h, "flex-direction", e.direction ? "column" : "row")), a;
-})(), Fe = (e) => {
-  const [a, h] = He(e, ["area", "size", "gap", "class", "style", "children"]), g = se(() => {
-    const s = a.size || {
-      h: "20%",
-      w: "6px"
-    }, b = a.gap || "0px", u = {};
-    return a.area === "left" ? (Object.assign(u, {
-      "border-top-right-radius": "16px",
-      "border-bottom-right-radius": "16px",
-      height: s.h,
-      left: b,
-      width: s.w
-    }), u.top = `calc(50% - ${s.h} / 2)`) : a.area === "top" ? (Object.assign(u, {
-      "border-bottom-left-radius": "16px",
-      "border-bottom-right-radius": "16px",
-      width: s.h,
-      top: b,
-      height: s.w
-    }), u.left = `calc(50% - ${s.h} / 2)`) : a.area === "right" ? (Object.assign(u, {
-      "border-top-left-radius": "16px",
-      "border-bottom-left-radius": "16px",
-      height: s.h,
-      right: b,
-      width: s.w
-    }), u.top = `calc(50% - ${s.h} / 2)`) : a.area === "bottom" && (Object.assign(u, {
-      "border-top-left-radius": "16px",
-      "border-top-right-radius": "16px",
-      width: s.h,
-      bottom: b,
-      height: s.w
-    }), u.left = `calc(50% - ${s.h} / 2)`), u;
-  });
-  return (() => {
-    var s = P();
-    return T(s, $(h, {
-      get class() {
-        return `RootSplitterHoverEl ${a.class || ""}`;
-      },
-      get style() {
-        return {
-          position: "absolute",
-          "z-index": -1,
-          display: "none",
-          "box-sizing": "border-box",
-          "background-color": "#0081f9",
-          cursor: "grab",
-          ...a.style,
-          ...g()
-        };
-      }
-    }), !1, !0), y(s, () => a.children), s;
-  })();
-}, Ue = ({
-  tabOutput: e,
-  rootId: a,
-  layoutTree: h,
-  updateJSON: g,
-  dimensions: s,
-  tabHeadHeight: b,
-  enableTabbar: u,
-  bondWidth: J,
-  minTabHeight: k,
-  minTabWidth: R,
-  sliderUpdateTimeout: K,
-  windowResizeTimeout: B,
-  disableSliderTimeout: C,
-  disableResizeTimeout: _
-}) => {
-  const z = /* @__PURE__ */ new Map(), M = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map(), w = { current: void 0 }, I = [], [j, G] = W(
-    h
-  ), [F, S] = W(
-    /* @__PURE__ */ new Map()
-  ), [Q, U] = W(
-    /* @__PURE__ */ new Map()
-  ), [V, p] = W(!1);
-  let E = null;
-  const [Z, m] = W(!1), o = {
-    src: void 0,
-    des: void 0,
-    area: void 0,
-    drag: !1
-  }, n = {
-    sliderId: void 0,
-    isSliding: !1
-  }, d = u ? Math.max(k, b) : k, c = new D({
-    tabs: e.keys,
-    tree: j(),
-    minW: R,
-    minH: d,
-    bond: J,
-    uqid: a,
-    tabsIds: e.name
-  }), ne = (t) => {
-    const r = new Map(t);
-    S(r);
-  }, ae = (t) => {
-    const r = new Map(t);
-    U(r);
-  }, q = () => {
-    const t = u ? b : 0;
-    x.cache.tabOpts.get().forEach((r, l) => {
-      const i = A.get(l);
-      if (!i) return;
-      const f = Se(r.nodDims, t);
-      Y(i, f), i.style.display = r.nodOpen && f.h > 0 ? "block" : "none";
-    });
-  }, le = x.cache.nodOpts.onChange(
-    (t) => {
-      t.forEach((r, l) => {
-        const i = O.get(l);
-        i && Y(i, r.nodDims);
-        const f = z.get(l);
-        f && u && Y(f, {
-          ...r.nodDims,
-          h: b
-        });
-      });
-    }
-  ), de = x.cache.tabOpts.onChange(() => q()), ce = x.cache.bndOpts.onChange(
-    (t) => {
-      t.forEach((r, l) => {
-        const i = M.get(l);
-        i && Y(i, r.nodDims);
-      });
-    }
-  ), ee = $e(
-    ({ id: t, point: r }) => c.updateSlider(
-      t,
-      r,
-      C,
-      K
-    )
-  ), oe = (t) => {
-    const r = n.sliderId;
-    !n.isSliding || !r || ee.schedule({ id: r, point: { x: t.clientX, y: t.clientY } });
-  }, X = (t) => {
-    if (!n.isSliding) return;
-    ee.flush();
-    const r = t.currentTarget;
-    n.isSliding = !1, n.sliderId = void 0, p(!1), g && g(D._root.toJSON()), r.releasePointerCapture(t.pointerId), r.removeEventListener("pointermove", oe), r.removeEventListener("pointerup", X), r.removeEventListener("pointercancel", X);
-  }, ue = (t) => {
-    t.preventDefault();
-    const r = t.currentTarget;
-    n.isSliding = !0, n.sliderId = r.id, p(!0), r.setPointerCapture(t.pointerId), r.addEventListener("pointermove", oe), r.addEventListener("pointerup", X), r.addEventListener("pointercancel", X);
-  };
-  let te = {};
-  const ge = (t, r, l) => {
-    if (!w.current || !o || !l)
-      return null;
-    const i = Oe(
-      l.getBoundingClientRect(),
-      t,
-      r
-    );
-    re(i), o.des = l, o.area = i.area;
-  }, fe = (t) => {
-    t.preventDefault(), t.stopPropagation(), t.dataTransfer && (t.dataTransfer.dropEffect = "move");
-    const r = t.currentTarget, l = Array.from(
-      r.childNodes
-    );
-    if (!w.current || !o) return;
-    const i = Ne(
-      r.getBoundingClientRect(),
-      l.map((f) => f.getBoundingClientRect()),
-      t.clientX,
-      t.clientY
-    );
-    i && (re(i), o.des = l[i.index], o.area = i.area);
-  }, me = (t) => {
-    t.preventDefault(), t.stopPropagation(), t.dataTransfer && (t.dataTransfer.dropEffect = "move");
-    const r = t.currentTarget, { area: l, uid: i } = r.dataset;
-    if (!l || !i || !w.current || !o)
-      return;
-    const f = l;
-    o.des = r, o.area = f, re(Re(s(), f));
-  }, re = (t) => {
-    const r = w.current;
-    !r || ze(te, t) || (Object.assign(r.style, {
-      left: `${t.left}px`,
-      top: `${t.top}px`,
-      width: `${t.width}px`,
-      height: `${t.height}px`,
-      display: "block",
-      zIndex: "100"
-    }), te = t);
-  }, he = (t) => {
-    if (t.stopPropagation(), p(!0), document.body.style.cursor = "move", t.currentTarget) {
-      if (t.dataTransfer) {
-        t.dataTransfer.effectAllowed = "move";
-        const r = document.createElement("div");
-        r.style.width = "1px", r.style.height = "1px", r.style.backgroundColor = "transparent", r.style.position = "absolute", r.style.top = "-1000px", document.body.appendChild(r), t.dataTransfer.setDragImage(r, 0, 0), setTimeout(() => {
-          r.parentNode && r.parentNode.removeChild(r);
-        }, 0);
-      }
-      I.forEach((r) => {
-        r && (r.style.display = "block", r.style.zIndex = "99");
-      }), O.forEach((r) => {
-        r && (r.style.display = "block", r.style.zIndex = "95");
-      }), o.src = t.currentTarget, o.drag = !0;
-    }
-  }, be = (t) => {
-    if (t.preventDefault(), t.stopPropagation(), document.body.style.cursor = "move", t.dataTransfer && (t.dataTransfer.dropEffect = "move"), !o?.src)
-      return;
-    const r = t.currentTarget, l = t.clientX, i = t.clientY;
-    E && cancelAnimationFrame(E), E = requestAnimationFrame(() => {
-      ge(l, i, r);
-    });
-  }, ye = () => {
-    if (document.body.style.cursor = "default", I.forEach((t) => {
-      t && (t.style.display = "none", t.style.zIndex = "-1");
-    }), E && (cancelAnimationFrame(E), E = null), w.current && (w.current.style.display = "none", w.current.style.zIndex = "-1"), te = {}, o.drag = !1, !o?.src || !o?.des) {
-      o.area = void 0, o.src = void 0, o.des = void 0, p(!1);
-      return;
-    }
-    if (o.src === o.des) {
-      o.area = void 0, o.src = void 0, o.des = void 0, p(!1);
-      return;
-    }
-    if (o.src && o.des) {
-      if (!o.area) {
-        console.warn("No area specified for drag and drop"), p(!1);
-        return;
-      }
-      if (!c.updateTree(
-        o.src.dataset.uid,
-        o.des.dataset.uid,
-        o.area || "contain"
-      )) {
-        console.warn("Failed to update layout tree"), p(!1);
-        return;
-      }
-      requestAnimationFrame(() => {
-        ne(x.cache.nodOpts.get()), ae(x.cache.bndOpts.get()), q(), g && g(D._root.toJSON());
-      });
-    }
-    o.area = void 0, o.src = void 0, o.des = void 0, p(!1);
-  }, ve = (t) => {
-    t.preventDefault(), t.stopPropagation(), t.dataTransfer && (t.dataTransfer.dropEffect = "move");
-  }, pe = (t) => {
-    t.preventDefault(), t.stopPropagation();
-  }, xe = (t) => {
-    t.preventDefault(), t.stopPropagation(), t.dataTransfer && t.dataTransfer.getData("text/plain");
-  }, we = (t) => {
-    const r = t.currentTarget, l = r.dataset.uid;
-    if (!l) return;
-    const i = x.cache.mapElem.get(l);
-    if (!(i instanceof x)) {
-      console.warn(`Element with uid ${l} is not a Node instance`);
-      return;
-    }
-    if (!i || !i.host || !i.host.unId) {
-      console.warn(`Node with uid ${l} not found in mapNode`);
-      return;
-    }
-    if (i.host.open == i.name) {
-      console.warn(`Node ${i.name} is already open`);
-      return;
-    }
-    const f = x.cache.nodOpts.get().get(i.host.unId);
-    if (!f || f.nodOpen && i?.open)
-      return;
-    i.host.open = i.name, f.nodOpen = i.name, f.nodKids?.forEach((N) => {
-      N.nodOpen = N.nodName === i.name;
-    }), r?.parentElement?.childNodes?.forEach((N) => {
-      N instanceof HTMLDivElement && N.dataset.uid !== l ? N.dataset.state = "inactive" : N.dataset.state = "active";
-    }), q();
-  };
-  return Pe(() => {
-    const t = (l) => {
-      c.updateDimension(
-        s(),
-        l,
-        B
-      );
-    };
-    t(!0);
-    const r = () => t(_ ?? !1);
-    window.addEventListener("resize", r), ne(x.cache.nodOpts.get()), ae(x.cache.bndOpts.get()), q(), g && g(D._root.toJSON()), Ce(() => {
-      window.removeEventListener("resize", r), le(), ce(), de(), ee.cancel(), E && cancelAnimationFrame(E);
-    });
-  }), {
-    tabsets: F,
-    sliders: Q,
-    tabsetsRef: z,
-    panelsRef: O,
-    tabsRef: A,
-    slidersRef: M,
-    layoutJSON: j,
-    layoutInstance: c,
-    hoverElementRef: w,
-    rootSplitHoverEl: I,
-    dragging: V,
-    isUpdating: Z,
-    setIsUpdating: m,
-    setDragging: p,
-    setTabsets: S,
-    setSliders: U,
-    setLayoutJSON: G,
-    onDragStart: he,
-    onDragOver: be,
-    onDragEnd: ye,
-    onDragEnter: ve,
-    onDragLeave: pe,
-    onDrop: xe,
-    onPointerDown: ue,
-    updateActiveTab: we,
-    handleRootSplit: me,
-    handleNavbarDragOver: fe
-  };
-};
-var qe = H("<div>"), Xe = H('<div class="flex items-center justify-center h-full"><span class=text-gray-500>No content');
-const Ye = (e) => {
-  const a = [], h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map();
-  for (const [s, b] of e) {
-    const u = crypto.randomUUID();
-    a.push(s), h.set(s, {
-      uqid: u,
-      name: s,
-      node: b
-    }), g.set(s, u);
-  }
-  return {
-    keys: a,
-    maps: h,
-    name: g
-  };
-}, Ve = (e) => {
-  const a = se(() => Ye(e.tabs));
-  let h;
-  const g = () => {
-    const m = h;
-    if (!m) return {
-      w: 0,
-      h: 0,
-      x: 0,
-      y: 0
-    };
-    const o = m.getBoundingClientRect(), n = e.pad || {
-      t: 0,
-      b: 0,
-      l: 0,
-      r: 0
-    };
-    return {
-      w: o.width - (n.l + n.r),
-      h: o.height - (n.t + n.b),
-      x: o.left + n.l,
-      y: o.top + n.t
-    };
-  }, {
-    tabsetsRef: s,
-    slidersRef: b,
-    sliders: u,
-    tabsets: J,
-    hoverElementRef: k,
-    onDragEnd: R,
-    onDragOver: K,
-    onDragStart: B,
-    onDragEnter: C,
-    onDragLeave: _,
-    onDrop: z,
-    dragging: M,
-    panelsRef: O,
-    onPointerDown: A,
-    handleNavbarDragOver: w,
-    updateActiveTab: I,
-    rootSplitHoverEl: j,
-    handleRootSplit: G,
-    tabsRef: F,
-    isUpdating: S
-  } = Ue({
-    tabOutput: a(),
-    rootId: e.rootId || "dynamix-layout-root",
-    updateJSON: e.updateJSON,
-    enableTabbar: e.enableTabbar === void 0 ? !0 : e.enableTabbar,
-    layoutTree: e.layoutTree,
-    tabHeadHeight: e.tabHeadHeight || D._minH,
-    dimensions: g,
-    sliderUpdateTimeout: e.sliderUpdateTimeout || 2,
-    windowResizeTimeout: e.windowResizeTimeout || 2,
-    bondWidth: e.bondWidth || D._bond,
-    minTabHeight: e.minTabHeight || D._minH,
-    minTabWidth: e.minTabWidth || D._minW,
-    disableSliderTimeout: e.disableSliderTimeout === void 0 ? !0 : e.disableSliderTimeout,
-    disableResizeTimeout: e.disableResizeTimeout === void 0 ? !0 : e.disableResizeTimeout,
-    hoverElementStyles: e.hoverElementStyles
-  }), Q = e.WrapTabPanel || Me, U = e.WrapTabHead || Be, V = e.WrapTabLabel || Le, p = e.WrapTabBody || ke, E = e.SliderElement || je, Z = e.HoverElement || Ae;
-  return (() => {
-    var m = qe(), o = h;
-    return typeof o == "function" ? Te(o, m) : h = m, T(m, $({
-      get id() {
-        return e.rootId || "dynamix-layout-root";
-      }
-    }, e, {
-      get "data-testid"() {
-        return e.rootId || "dynamix-layout-root";
-      },
-      get class() {
-        return M() ? "is-dragging" : "";
-      },
-      get style() {
-        return {
-          position: "relative",
-          width: "100%",
-          height: "100%",
-          overflow: "hidden",
-          ...e.style
-        };
-      }
-    }), !1, !0), y(m, v(L, {
-      get each() {
-        return Array.from(J().values());
-      },
-      children: (n) => [v(Q, {
-        ref: (d) => {
-          const c = n.uidNode;
-          d ? O.set(c, d) : O.delete(c);
-        },
-        onDragEnd: R,
-        onDragOver: K,
-        onDragEnter: C,
-        onDragLeave: _,
-        onDrop: z,
-        get "data-uid"() {
-          return n.uidNode;
-        },
-        get "data-type"() {
-          return n.typNode;
-        },
-        get class() {
-          return "hide-scrollbar DefaultWrapTabPanel " + (e.tabPanelElementClass || "");
-        },
-        get style() {
-          return {
-            position: "absolute",
-            ...e.tabPanelElementStyles,
-            width: `${n.nodDims.w}px`,
-            height: `${n.nodDims.h}px`,
-            left: `${n.nodDims.x}px`,
-            top: `${n.nodDims.y}px`,
-            "background-color": "transparent"
-          };
-        }
-      }), v(U, {
-        get draggable() {
-          return !S();
-        },
-        get "data-uid"() {
-          return n.uidNode;
-        },
-        "data-type": "tabset",
-        onDragOver: w,
-        onDragStart: B,
-        onDragEnd: R,
-        onDragEnter: C,
-        onDragLeave: _,
-        onDrop: z,
-        ref: (d) => {
-          const c = n.uidNode;
-          d ? s.set(c, d) : s.delete(c);
-        },
-        get class() {
-          return "hide-scrollbar " + (e.tabHeadElementClass || "");
-        },
-        get style() {
-          return {
-            ...e.tabHeadElementStyles,
-            position: "absolute",
-            "z-index": 99,
-            width: `${n.nodDims.w}px`,
-            height: `${e.tabHeadHeight || D._minH}px`,
-            left: `${n.nodDims.x}px`,
-            top: `${n.nodDims.y}px`,
-            cursor: S() ? "wait" : "pointer"
-          };
-        },
-        get children() {
-          return v(L, {
-            get each() {
-              return n.nodKids;
-            },
-            children: (d) => v(V, {
-              get "data-uid"() {
-                return d.uidNode;
-              },
-              "data-type": "tab",
-              onDragStart: B,
-              onDragEnd: R,
-              get draggable() {
-                return !S();
-              },
-              get active() {
-                return !!d.nodOpen;
-              },
-              get class() {
-                return "hide-scrollbar " + (e.tabLabelElementClass || "");
-              },
-              get style() {
-                return {
-                  cursor: S() ? "wait" : "pointer",
-                  ...e.tabLabelElementStyles
-                };
-              },
-              onClick: I,
-              get children() {
-                return ie(() => !!e.tabNames)() && e.tabNames.get(d.nodName) || d.nodName;
-              }
-            })
-          });
-        }
-      })]
-    }), null), y(m, v(L, {
-      get each() {
-        return a().keys;
-      },
-      children: (n) => {
-        const d = a().maps.get(n)?.uqid;
-        return v(p, {
-          id: d,
-          draggable: !1,
-          "data-uid": d,
-          get class() {
-            return "hide-scrollbar " + (e.tabBodyElementClass || "");
-          },
-          get style() {
-            return {
-              position: "absolute",
-              "z-index": 90,
-              "overscroll-behavior": "contain",
-              ...e.tabBodyElementStyles
-            };
-          },
-          ref: (c) => {
-            d && (c ? F.set(d, c) : F.delete(d));
-          },
-          get children() {
-            return a().maps.get(n)?.node || Xe();
-          }
-        });
-      }
-    }), null), y(m, v(L, {
-      get each() {
-        return Array.from(u().values());
-      },
-      children: (n) => v(E, {
-        get id() {
-          return n.uidNode;
-        },
-        get "data-uid"() {
-          return n.uidNode;
-        },
-        get direction() {
-          return n.nodeDir;
-        },
-        onPointerDown: A,
-        get class() {
-          return "hide-scrollbar " + (e.sliderElementClass || "");
-        },
-        ref: (d) => {
-          const c = n.uidNode;
-          d ? b.set(c, d) : b.delete(c);
-        },
-        get style() {
-          return {
-            width: `${n.nodDims.w}px`,
-            height: `${n.nodDims.h}px`,
-            left: `${n.nodDims.x}px`,
-            top: `${n.nodDims.y}px`,
-            cursor: n.nodeDir ? "ns-resize" : "ew-resize",
-            ...e.sliderElementStyles
-          };
-        }
-      })
-    }), null), y(m, v(Z, {
-      get class() {
-        return "hide-scrollbar " + (e.hoverElementClass || "");
-      },
-      get style() {
-        return {
-          ...e.hoverElementStyles
-        };
-      },
-      ref: (n) => k.current = n
-    }), null), y(m, v(L, {
-      each: ["left", "right", "top", "bottom"],
-      children: (n, d) => v(Fe, {
-        onDragOver: G,
-        onDragEnd: R,
-        onDragEnter: C,
-        onDragLeave: _,
-        onDrop: z,
-        get "data-uid"() {
-          return e.rootId || "dynamix-layout-root";
-        },
-        "data-area": n,
-        get class() {
-          return "hide-scrollbar " + (e.RootSplitterHoverElClass || "");
-        },
-        ref: (c) => {
-          c && (j[d()] = c);
-        },
-        get style() {
-          return {
-            ...e.RootSplitterHoverElStyles
-          };
-        },
-        area: n,
-        size: {
-          h: "25%",
-          w: "8px"
-        }
-      })
-    }), null), m;
-  })();
-};
-export {
-  Ae as DefaultHoverElement,
-  je as DefaultSliderElement,
-  ke as DefaultWrapTabBody,
-  Be as DefaultWrapTabHead,
-  Le as DefaultWrapTabLabel,
-  Me as DefaultWrapTabPanel,
-  Ve as DynamixLayout,
-  Fe as RootSplitterHoverEl,
-  Ye as getTabOutput,
-  Ue as useDynamixLayout
-};