@dynamix-layout/solid 1.1.0 → 2.0.0

package/dist/index.js

@@ -0,0 +1,704 @@
+/*! @dynamix-layout/solid | MIT License */ import { spread as $, mergeProps as S, insert as f, memo as F, effect as p, setStyleProperty as ne, createComponent as h, setAttribute as D, template as E, style as ie, use as te, delegateEvents as re } from "solid-js/web";
+import { createLayout as le, createFrameScheduler as X, getTabBarPlacement as oe, getTabContentRect as se } from "@dynamix-layout/core";
+import { isLayoutV1 as Be, migrateLayoutFromV1 as Ne } from "@dynamix-layout/core";
+import { onMount as U, splitProps as ce, createMemo as K, onCleanup as ae, createSignal as Z, createEffect as de, on as ue, For as L, Show as V } from "solid-js";
+var C = /* @__PURE__ */ E("<div>"), ge = /* @__PURE__ */ E("<div><div style=display:flex;align-items:center;gap:4px;height:100%>"), be = /* @__PURE__ */ E('<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>'), he = /* @__PURE__ */ E('<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>'), me = /* @__PURE__ */ E('<svg xmlns=http://www.w3.org/2000/svg width=14 height=14 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>'), fe = /* @__PURE__ */ E("<div class=DefaultTabsetToolbar>"), Y = /* @__PURE__ */ E("<button type=button class=DefaultTabsetToolbarButton>");
+const ye = (e) => (() => {
+  var r = C();
+  return $(r, S(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), f(r, () => e.children), r;
+})(), xe = (e) => (() => {
+  var r = C();
+  return $(r, S(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), f(r, () => e.children), r;
+})(), ve = (e) => (() => {
+  var r = C();
+  return $(r, S(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), f(r, () => e.children), r;
+})(), we = (e) => (() => {
+  var r = C();
+  return $(r, S(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), f(r, () => e.children), r;
+})(), Te = (e) => (() => {
+  var r = C();
+  return $(r, S(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), f(r, () => e.children), r;
+})(), De = (e) => (() => {
+  var r = ge(), l = r.firstChild;
+  return $(r, S(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), f(l, (() => {
+    var c = F(() => !e.direction);
+    return () => c() ? be() : he();
+  })()), f(r, () => e.children, null), p((c) => ne(l, "flex-direction", e.direction ? "column" : "row")), r;
+})(), ze = (e) => {
+  const [r, l] = ce(e, ["area", "size", "gap", "class", "style", "children"]), c = K(() => {
+    const n = r.size || {
+      h: "20%",
+      w: "6px"
+    }, g = r.gap || "0px", d = {};
+    return r.area === "left" ? (Object.assign(d, {
+      "border-top-right-radius": "16px",
+      "border-bottom-right-radius": "16px",
+      height: n.h,
+      left: g,
+      width: n.w
+    }), d.top = `calc(50% - ${n.h} / 2)`) : r.area === "top" ? (Object.assign(d, {
+      "border-bottom-left-radius": "16px",
+      "border-bottom-right-radius": "16px",
+      width: n.h,
+      top: g,
+      height: n.w
+    }), d.left = `calc(50% - ${n.h} / 2)`) : r.area === "right" ? (Object.assign(d, {
+      "border-top-left-radius": "16px",
+      "border-bottom-left-radius": "16px",
+      height: n.h,
+      right: g,
+      width: n.w
+    }), d.top = `calc(50% - ${n.h} / 2)`) : r.area === "bottom" && (Object.assign(d, {
+      "border-top-left-radius": "16px",
+      "border-top-right-radius": "16px",
+      width: n.h,
+      bottom: g,
+      height: n.w
+    }), d.left = `calc(50% - ${n.h} / 2)`), d;
+  });
+  return (() => {
+    var n = C();
+    return $(n, S(l, {
+      get class() {
+        return `RootSplitterHoverEl ${r.class || ""}`;
+      },
+      get style() {
+        return {
+          position: "absolute",
+          "z-index": -1,
+          display: "none",
+          "box-sizing": "border-box",
+          "background-color": "#0081f9",
+          cursor: "grab",
+          ...r.style,
+          ...c()
+        };
+      }
+    }), !1, !0), f(n, () => r.children), n;
+  })();
+}, G = (e) => (() => {
+  var r = me(), l = r.firstChild;
+  return p((c) => {
+    var n = e.rotate ? {
+      transform: `rotate(${e.rotate}deg)`
+    } : {}, g = e.path;
+    return c.e = ie(r, n, c.e), g !== c.t && D(l, "d", c.t = g), c;
+  }, {
+    e: void 0,
+    t: void 0
+  }), r;
+})(), Ee = "M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3", $e = "M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3", Se = "m15 18-6-6 6-6", ke = (e) => {
+  const r = () => (e.rowIsHorizontal ? 0 : 90) + (e.folded ? 180 : 0), l = () => e.rotated ? -90 : 0;
+  let c;
+  return U(() => {
+    const n = c?.parentElement;
+    if (!c || !n) return;
+    const g = () => {
+      c.style.transform = `translateX(${n.scrollLeft}px)`;
+    };
+    g(), n.addEventListener("scroll", g, {
+      passive: !0
+    }), ae(() => n.removeEventListener("scroll", g));
+  }), (() => {
+    var n = fe();
+    n.$$dblclick = (d) => d.stopPropagation();
+    var g = c;
+    return typeof g == "function" ? te(g, n) : c = n, f(n, (() => {
+      var d = F(() => !!e.showMaximize);
+      return () => d() && (() => {
+        var u = Y();
+        return u.$$click = () => e.onToggleMaximize(), f(u, h(G, {
+          get path() {
+            return e.maximized ? $e : Ee;
+          },
+          get rotate() {
+            return l();
+          }
+        })), p((i) => {
+          var z = e.maximized ? "Restore" : "Maximize", v = e.maximized, w = e.maximized ? "Restore (⌥ +)" : "Maximize (⌥ +)";
+          return z !== i.e && D(u, "aria-label", i.e = z), v !== i.t && D(u, "aria-pressed", i.t = v), w !== i.a && D(u, "title", i.a = w), i;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), u;
+      })();
+    })(), null), f(n, (() => {
+      var d = F(() => !!e.showFold);
+      return () => d() && (() => {
+        var u = Y();
+        return u.$$click = () => e.onToggleFold(), f(u, h(G, {
+          path: Se,
+          get rotate() {
+            return r() + l();
+          }
+        })), p((i) => {
+          var z = e.folded ? "Unfold" : "Fold", v = !e.folded, w = e.folded ? "Unfold (⌥ -)" : "Fold (⌥ -)";
+          return z !== i.e && D(u, "aria-label", i.e = z), v !== i.t && D(u, "aria-expanded", i.t = v), w !== i.a && D(u, "title", i.a = w), i;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), u;
+      })();
+    })(), null), n;
+  })();
+};
+re(["dblclick", "click"]);
+const Q = (e, r) => ({
+  x: e.left - r.x,
+  y: e.top - r.y,
+  width: e.width,
+  height: e.height
+}), Ce = (e) => {
+  const r = e.enableTabbar ? Math.max(e.minTabHeight, e.tabHeadHeight) : e.minTabHeight, l = le({
+    tabs: e.tabIds.map((t) => ({ id: t })),
+    initialLayout: e.layoutTree ?? null,
+    minPanelSize: { width: e.minTabWidth, height: r },
+    splitterSize: e.bondWidth,
+    // A folded tabset shrinks to its tab bar.
+    foldedSize: e.enableTabbar ? e.tabHeadHeight : r,
+    onLayoutChange: (t, s) => e.updateJSON?.(t, s)
+  }), [c, n] = Z(l.getSnapshot(), {
+    equals: !1
+  }), [g, d] = Z(!1), u = l.subscribe(n), i = (t, s) => {
+    const a = e.getRoot();
+    if (!a) return { x: t, y: s };
+    const o = a.getBoundingClientRect();
+    return {
+      x: t - o.left - a.clientLeft,
+      y: s - o.top - a.clientTop
+    };
+  }, z = () => {
+    const t = /* @__PURE__ */ new Map(), s = e.getRoot();
+    if (!s) return { tabBars: t };
+    const a = s.getBoundingClientRect(), o = {
+      x: a.left + s.clientLeft,
+      y: a.top + s.clientTop
+    };
+    return s.querySelectorAll("[data-tabbar]").forEach((b) => {
+      const y = b.dataset.uid;
+      y && t.set(y, {
+        rect: Q(b.getBoundingClientRect(), o),
+        isRotated: b.hasAttribute("data-rotated"),
+        tabs: Array.from(
+          b.querySelectorAll(
+            ':scope > [data-type="tab"]'
+          )
+        ).map((k) => ({
+          id: k.dataset.uid ?? "",
+          rect: Q(k.getBoundingClientRect(), o)
+        }))
+      });
+    }), { tabBars: t };
+  };
+  let v;
+  const w = X(
+    (t) => l.updateDrag(t, v)
+  ), O = (t, s) => {
+    if (t.stopPropagation(), v = z(), !!l.startDrag(s) && (d(!0), t.dataTransfer)) {
+      t.dataTransfer.effectAllowed = "move";
+      const a = document.createElement("div");
+      a.style.cssText = "width:1px;height:1px;position:absolute;top:-1000px", document.body.appendChild(a), t.dataTransfer.setDragImage(a, 0, 0), setTimeout(() => a.remove(), 0);
+    }
+  }, B = (t) => {
+    c().drag && (t.preventDefault(), t.dataTransfer && (t.dataTransfer.dropEffect = "move"), w.schedule(i(t.clientX, t.clientY)));
+  }, N = () => {
+    w.flush(), l.endDrag(), v = void 0, d(!1);
+  }, A = (t) => t.preventDefault(), m = X(
+    (t) => l.updateDrag(t)
+  ), M = (t, s) => {
+    if (t.preventDefault(), !l.startDrag({ type: "splitter", splitterId: s })) return;
+    const a = t.currentTarget;
+    a.setPointerCapture?.(t.pointerId), d(!0);
+    const o = (y) => m.schedule(i(y.clientX, y.clientY)), b = () => {
+      m.flush(), l.endDrag(), d(!1), a.removeEventListener("pointermove", o), a.removeEventListener("pointerup", b), a.removeEventListener("pointercancel", b);
+    };
+    a.addEventListener("pointermove", o), a.addEventListener("pointerup", b), a.addEventListener("pointercancel", b);
+  };
+  let H = null;
+  const j = (t) => {
+    const a = t.target.closest(
+      "[data-uid]"
+    )?.dataset.uid;
+    if (!a) return;
+    const o = c();
+    o.tabsets.has(a) ? H = a : o.tabs.has(a) && (H = o.tabs.get(a).tabsetId);
+  }, P = (t) => {
+    e.enableDoubleClickMaximize && l.toggleMaximize(t);
+  }, W = (t) => {
+    if (!e.keyboardShortcuts || !t.altKey || t.ctrlKey || t.metaKey)
+      return;
+    const s = H ?? c().maximizedTabsetId;
+    s && (t.code === "Equal" || t.code === "NumpadAdd" ? (t.preventDefault(), l.toggleMaximize(s)) : (t.code === "Minus" || t.code === "NumpadSubtract") && (t.preventDefault(), l.toggleFold(s)));
+  };
+  return U(() => {
+    let t;
+    const s = () => l.setContainerRect(e.container()), a = () => {
+      if (e.disableResizeTimeout) return s();
+      clearTimeout(t), t = setTimeout(s, e.windowResizeTimeout);
+    };
+    s(), window.addEventListener("resize", a), window.addEventListener("keydown", W), e.updateJSON?.(l.toJSON(), "mount"), ae(() => {
+      clearTimeout(t), window.removeEventListener("resize", a), window.removeEventListener("keydown", W), w.cancel(), m.cancel(), u(), l.destroy();
+    });
+  }), {
+    engine: l,
+    snapshot: c,
+    dragging: g,
+    onDragStart: O,
+    onDragOver: B,
+    onDragEnd: N,
+    onDrop: A,
+    onSliderPointerDown: M,
+    onRootPointerDown: j,
+    onTabbarDoubleClick: P,
+    selectTab: (t) => {
+      l.selectTab(t);
+    },
+    toggleMaximize: (t) => {
+      l.toggleMaximize(t);
+    },
+    toggleFold: (t) => {
+      l.toggleFold(t);
+    }
+  };
+};
+var Me = /* @__PURE__ */ E("<div>"), He = /* @__PURE__ */ E("<button type=button class=DefaultTabClose>×");
+const J = 40, Re = 10, Le = ["left", "right", "top", "bottom"], _ = (e) => e ? {
+  left: `${e.x}px`,
+  top: `${e.y}px`,
+  width: `${e.width}px`,
+  height: `${e.height}px`
+} : {}, ee = (e, r) => e.length === r.length && e.every((l, c) => l === r[c]), Fe = (e) => {
+  let r;
+  const l = e.tabs, c = e.tabHeadHeight ?? J, n = e.enableTabbar ?? !0, g = e.enableMaximize ?? !0, d = (e.enableCollapse ?? !0) && n, u = e.rootId ?? "dynamix-layout-root", i = Ce({
+    tabIds: l.map(([t]) => t),
+    layoutTree: e.layoutTree,
+    updateJSON: e.updateJSON,
+    enableTabbar: n,
+    tabHeadHeight: c,
+    bondWidth: e.bondWidth ?? Re,
+    minTabHeight: e.minTabHeight ?? J,
+    minTabWidth: e.minTabWidth ?? J,
+    windowResizeTimeout: e.windowResizeTimeout ?? 2,
+    disableResizeTimeout: e.disableResizeTimeout ?? !0,
+    keyboardShortcuts: e.keyboardShortcuts ?? !0,
+    enableDoubleClickMaximize: e.enableDoubleClickMaximize ?? !0,
+    getRoot: () => r,
+    container: () => {
+      const t = e.pad ?? {
+        t: 0,
+        b: 0,
+        l: 0,
+        r: 0
+      };
+      return r ? {
+        x: t.l,
+        y: t.t,
+        width: Math.max(0, r.clientWidth - t.l - t.r),
+        height: Math.max(0, r.clientHeight - t.t - t.b)
+      } : {
+        x: t.l,
+        y: t.t,
+        width: 0,
+        height: 0
+      };
+    }
+  }), z = e.WrapTabPanel ?? we, v = e.WrapTabHead ?? ve, w = e.WrapTabLabel ?? ye, O = e.WrapTabBody ?? xe, B = e.SliderElement ?? De, N = e.HoverElement ?? Te, A = e.TabsetToolbar ?? ke, {
+    snapshot: m,
+    dragging: M
+  } = i, H = K(() => [...m().tabsets.keys()], [], {
+    equals: ee
+  }), j = K(() => [...m().splitters.keys()], [], {
+    equals: ee
+  }), P = (t) => e.tabs.find(([s]) => s === t), W = (t) => P(t)?.[2]?.title ?? e.tabNames?.get(t) ?? t;
+  return de(ue(() => e.tabs.map(([t]) => t).join("\0"), () => i.engine.setTabs(e.tabs.map(([t]) => ({
+    id: t
+  }))), {
+    defer: !0
+  })), U(() => e.onReady?.(i.engine)), (() => {
+    var t = Me(), s = r;
+    return typeof s == "function" ? te(s, t) : r = t, D(t, "id", u), $(t, S(e, {
+      "data-testid": u,
+      get class() {
+        return M() ? "is-dragging" : "";
+      },
+      onPointerDown: (a) => i.onRootPointerDown(a),
+      onDragOver: (a) => i.onDragOver(a),
+      onDrop: (a) => i.onDrop(a),
+      get style() {
+        return {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          ...e.style
+        };
+      }
+    }), !1, !0), f(t, h(L, {
+      get each() {
+        return H();
+      },
+      children: (a) => {
+        const o = () => m().tabsets.get(a), b = () => m().rects.tabsets.get(a), y = () => {
+          const x = o(), T = b();
+          return x && T ? oe(T, x, c) : void 0;
+        }, k = () => g && !!o()?.canMaximize, R = () => d && !!o()?.canFold && !o()?.isMaximized, I = () => k() || R();
+        return [h(z, {
+          "data-uid": a,
+          "data-type": "tabset",
+          get class() {
+            return "hide-scrollbar DefaultWrapTabPanel " + (e.tabPanelElementClass || "");
+          },
+          get style() {
+            return {
+              position: "absolute",
+              ...e.tabPanelElementStyles,
+              ..._(b()),
+              "background-color": "transparent",
+              // Over the tab bodies while dragging, so iframes can't swallow dragover.
+              "z-index": M() ? 95 : 0,
+              display: M() ? "block" : "none"
+            };
+          }
+        }), h(V, {
+          when: n,
+          get children() {
+            return h(v, {
+              draggable: !0,
+              "data-uid": a,
+              "data-type": "tabset",
+              "data-tabbar": "",
+              get "data-folded"() {
+                return o()?.isFolded ? "" : void 0;
+              },
+              get "data-maximized"() {
+                return o()?.isMaximized ? "" : void 0;
+              },
+              get "data-dx-hidden"() {
+                return o()?.isHidden ? "" : void 0;
+              },
+              get "data-rotated"() {
+                return y()?.isRotated ? "" : void 0;
+              },
+              onDblClick: () => i.onTabbarDoubleClick(a),
+              onDragStart: (x) => i.onDragStart(x, {
+                type: "tabset",
+                tabsetId: a
+              }),
+              onDragEnd: () => i.onDragEnd(),
+              get class() {
+                return "hide-scrollbar " + (e.tabHeadElementClass || "");
+              },
+              get style() {
+                return {
+                  ...e.tabHeadElementStyles,
+                  position: "absolute",
+                  "z-index": 99,
+                  ..._(y()?.rect),
+                  "transform-origin": "0 0",
+                  ...y()?.isRotated ? {
+                    transform: "rotate(90deg)"
+                  } : {},
+                  ...I() ? {
+                    "padding-right": "64px"
+                  } : {},
+                  cursor: "pointer"
+                };
+              },
+              get children() {
+                return [h(L, {
+                  get each() {
+                    return o()?.tabIds ?? [];
+                  },
+                  children: (x) => h(w, {
+                    "data-uid": x,
+                    "data-type": "tab",
+                    draggable: !0,
+                    onDragStart: (T) => i.onDragStart(T, {
+                      type: "tab",
+                      tabId: x
+                    }),
+                    onDragEnd: () => i.onDragEnd(),
+                    get active() {
+                      return m().tabs.get(x)?.isActive ?? !1;
+                    },
+                    get class() {
+                      return "hide-scrollbar " + (e.tabLabelElementClass || "");
+                    },
+                    get style() {
+                      return {
+                        cursor: "pointer",
+                        ...e.tabLabelElementStyles
+                      };
+                    },
+                    onClick: () => i.selectTab(x),
+                    get children() {
+                      return [F(() => W(x)), h(V, {
+                        get when() {
+                          return P(x)?.[2]?.closable;
+                        },
+                        get children() {
+                          var T = He();
+                          return T.$$click = (q) => {
+                            q.stopPropagation(), e.onTabClose?.(x);
+                          }, T.$$mousedown = (q) => q.stopPropagation(), D(T, "aria-label", `Close ${x}`), D(T, "draggable", !1), T;
+                        }
+                      })];
+                    }
+                  })
+                }), h(V, {
+                  get when() {
+                    return I();
+                  },
+                  get children() {
+                    return h(A, {
+                      get maximized() {
+                        return !!o()?.isMaximized;
+                      },
+                      get folded() {
+                        return !!o()?.isFolded;
+                      },
+                      get rotated() {
+                        return !!y()?.isRotated;
+                      },
+                      get rowIsHorizontal() {
+                        return o()?.parentDirection === "horizontal";
+                      },
+                      get showMaximize() {
+                        return k();
+                      },
+                      get showFold() {
+                        return R();
+                      },
+                      onToggleMaximize: () => i.toggleMaximize(a),
+                      onToggleFold: () => i.toggleFold(a)
+                    });
+                  }
+                })];
+              }
+            });
+          }
+        })];
+      }
+    }), null), f(t, h(L, {
+      get each() {
+        return e.tabs;
+      },
+      children: ([a, o]) => {
+        const b = () => m().tabs.get(a), y = () => {
+          const R = b() && m().rects.tabsets.get(b().tabsetId);
+          return R && se(R, n ? c : 0);
+        }, k = () => !!b()?.isVisible && (y()?.height ?? 0) > 0;
+        return h(O, {
+          "data-uid": a,
+          draggable: !1,
+          get "data-dx-hidden"() {
+            return k() ? void 0 : "";
+          },
+          get class() {
+            return "hide-scrollbar " + (e.tabBodyElementClass || "");
+          },
+          get style() {
+            return {
+              position: "absolute",
+              "z-index": 90,
+              "overscroll-behavior": "contain",
+              ...e.tabBodyElementStyles,
+              ..._(y())
+            };
+          },
+          children: o
+        });
+      }
+    }), null), f(t, h(L, {
+      get each() {
+        return j();
+      },
+      children: (a) => {
+        const o = () => m().splitters.get(a);
+        return h(B, {
+          "data-uid": a,
+          get "data-dx-hidden"() {
+            return o()?.isHidden ? "" : void 0;
+          },
+          get direction() {
+            return o()?.direction === "vertical";
+          },
+          onPointerDown: (b) => i.onSliderPointerDown(b, a),
+          get class() {
+            return "hide-scrollbar " + (e.sliderElementClass || "");
+          },
+          get style() {
+            return {
+              ..._(m().rects.splitters.get(a)),
+              cursor: o()?.direction === "vertical" ? "ns-resize" : "ew-resize",
+              ...o()?.isLocked ? {
+                "pointer-events": "none"
+              } : {},
+              ...e.sliderElementStyles
+            };
+          }
+        });
+      }
+    }), null), f(t, h(N, {
+      get class() {
+        return "hide-scrollbar " + (e.hoverElementClass || "");
+      },
+      get style() {
+        return {
+          ...e.hoverElementStyles,
+          ..._(m().drag?.indicator ?? void 0),
+          display: m().drag?.indicator ? "block" : "none",
+          "z-index": 100
+        };
+      }
+    }), null), f(t, h(L, {
+      each: Le,
+      children: (a) => h(ze, {
+        "data-uid": u,
+        "data-area": a,
+        get class() {
+          return "hide-scrollbar " + (e.RootSplitterHoverElClass || "");
+        },
+        get style() {
+          return {
+            ...e.RootSplitterHoverElStyles,
+            ...m().drag && m().drag.source.type !== "splitter" ? {
+              display: "block",
+              "z-index": 99
+            } : {}
+          };
+        },
+        area: a,
+        size: {
+          h: "25%",
+          w: "8px"
+        }
+      })
+    }), null), t;
+  })();
+};
+re(["mousedown", "click"]);
+export {
+  Te as DefaultHoverElement,
+  De as DefaultSliderElement,
+  ke as DefaultTabsetToolbar,
+  xe as DefaultWrapTabBody,
+  ve as DefaultWrapTabHead,
+  ye as DefaultWrapTabLabel,
+  we as DefaultWrapTabPanel,
+  Fe as DynamixLayout,
+  ze as RootSplitterHoverEl,
+  Be as isLayoutV1,
+  Ne as migrateLayoutFromV1,
+  Ce as useDynamixLayout
+};