react-panel-layout 0.5.0 → 0.5.2

package/dist/index.js

@@ -1,24 +1,25 @@
-import { u as kt, a as Mt, b as _t, c as J, d as Ot, e as M, t as Bt, R as ot, G as st } from "./GridLayout-tpSM0iM-.js";
-import { D as kn, f as Mn, F as _n, r as On, g as Bn } from "./GridLayout-tpSM0iM-.js";
+import { u as kt, a as Mt, b as _t, c as J, d as Ot, e as M, t as Bt, R as ot, G as st } from "./GridLayout-CJTKq7Mp.js";
+import { D as _n, f as On, F as Bn, r as Ln, g as Hn } from "./GridLayout-CJTKq7Mp.js";
 import { jsx as m, jsxs as H, Fragment as et } from "react/jsx-runtime";
-import * as l from "react";
-import { t as Lt, u as Ht, v as Nt, H as zt, y as $t, z as Ft, A as Xt, B as Yt, E as jt, I as Kt, T as Ut, J as Vt, K as Wt, L as qt, M as Zt, N as Jt, O as Qt, S as te } from "./styles-w0ZixggV.js";
-import { Q as Hn } from "./styles-w0ZixggV.js";
-import { a as nt } from "./usePivot-z9gumDf-.js";
+import * as u from "react";
+import { u as Lt, v as Ht, w as Nt, H as zt, z as $t, A as Ft, B as Xt, E as Yt, I as jt, J as Ut, T as Kt, K as Vt, L as Wt, M as qt, N as Zt, O as Jt, Q as Qt, S as te } from "./styles-CA2_zLZt.js";
+import { U as zn } from "./styles-CA2_zLZt.js";
+import { u as nt } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
 import { createPortal as ee } from "react-dom";
-const ne = (t) => ({
+import { a as ne } from "./usePivot-CgQxB8rc.js";
+const re = (t) => ({
   width: zt,
   cursor: "col-resize",
   position: "relative",
   userSelect: "none",
   backgroundColor: t === "drag" ? Lt : t === "hover" ? Ht : Nt
-}), Gn = ({ onResize: t, component: e, element: n }) => {
+}), En = ({ onResize: t, component: e, element: n }) => {
   const { ref: r, isDragging: o, onPointerDown: s } = kt({
     axis: "x",
     onResize: t
-  }), [a, i] = l.useState(!1), c = {
+  }), [a, i] = u.useState(!1), c = {
     ref: r,
-    style: ne(o ? "drag" : a ? "hover" : "idle"),
+    style: re(o ? "drag" : a ? "hover" : "idle"),
     role: "separator",
     "aria-orientation": "vertical",
     "data-dragging": o ? "true" : void 0,
@@ -26,67 +27,67 @@ const ne = (t) => ({
     onPointerEnter: () => i(!0),
     onPointerLeave: () => i(!1)
   };
-  return n ? l.cloneElement(n, c) : e ? /* @__PURE__ */ m(e, { ...c }) : /* @__PURE__ */ m("div", { ...c });
-}, Cn = () => {
+  return n ? u.cloneElement(n, c) : e ? /* @__PURE__ */ m(e, { ...c }) : /* @__PURE__ */ m("div", { ...c });
+}, Rn = () => {
   const { layerId: t } = Mt(), { getLayerHandleProps: e } = _t();
-  return l.useMemo(() => e(t), [e, t]);
-}, it = { left: 0, top: 0 }, at = { width: 400, height: 300 }, En = (t) => {
-  const [e, n] = l.useState(() => {
-    const u = {};
+  return u.useMemo(() => e(t), [e, t]);
+}, it = { left: 0, top: 0 }, at = { width: 400, height: 300 }, Pn = (t) => {
+  const [e, n] = u.useState(() => {
+    const l = {};
     return t.forEach((p) => {
       if (p.floating) {
         const g = p.floating;
-        u[p.id] = {
+        l[p.id] = {
           position: g.defaultPosition ?? it,
           size: g.defaultSize ?? at
         };
       }
-    }), u;
-  }), r = l.useMemo(() => {
-    const u = /* @__PURE__ */ new Map();
-    return t.forEach((p) => u.set(p.id, p)), u;
-  }, [t]), o = l.useCallback(
-    (u) => {
-      const p = r.get(u);
-      return p?.floating?.position !== void 0 ? p.floating.position : e[u]?.position ?? it;
+    }), l;
+  }), r = u.useMemo(() => {
+    const l = /* @__PURE__ */ new Map();
+    return t.forEach((p) => l.set(p.id, p)), l;
+  }, [t]), o = u.useCallback(
+    (l) => {
+      const p = r.get(l);
+      return p?.floating?.position !== void 0 ? p.floating.position : e[l]?.position ?? it;
     },
     [r, e]
-  ), s = l.useCallback(
-    (u) => {
-      const p = r.get(u);
-      return p?.floating?.size !== void 0 ? p.floating.size : e[u]?.size ?? at;
+  ), s = u.useCallback(
+    (l) => {
+      const p = r.get(l);
+      return p?.floating?.size !== void 0 ? p.floating.size : e[l]?.size ?? at;
     },
     [r, e]
-  ), a = l.useCallback(
-    (u) => r.get(u)?.floating?.zIndex,
+  ), a = u.useCallback(
+    (l) => r.get(l)?.floating?.zIndex,
     [r]
-  ), i = l.useCallback(
-    (u, p) => {
-      const g = r.get(u);
+  ), i = u.useCallback(
+    (l, p) => {
+      const g = r.get(l);
       g?.floating && (g.floating.position === void 0 && n((v) => {
-        const h = v[u];
-        return h ? {
+        const b = v[l];
+        return b ? {
           ...v,
-          [u]: { ...h, position: p }
+          [l]: { ...b, position: p }
         } : v;
       }), g.floating.onMove?.(p));
     },
     [r]
-  ), c = l.useCallback(
-    (u, p) => {
-      const g = r.get(u);
+  ), c = u.useCallback(
+    (l, p) => {
+      const g = r.get(l);
       g?.floating && (g.floating.size === void 0 && n((v) => {
-        const h = v[u];
-        return h ? {
+        const b = v[l];
+        return b ? {
           ...v,
-          [u]: { ...h, size: p }
+          [l]: { ...b, size: p }
         } : v;
       }), g.floating.onResize?.(p));
     },
     [r]
-  ), d = l.useCallback(
-    (u) => {
-      r.get(u)?.floating?.onClose?.();
+  ), d = u.useCallback(
+    (l) => {
+      r.get(l)?.floating?.onClose?.();
     },
     [r]
   );
@@ -98,37 +99,37 @@ const ne = (t) => ({
     updateSize: c,
     close: d
   };
-}, ft = l.createContext(null), re = () => {
-  const t = l.useContext(ft);
+}, ft = u.createContext(null), oe = () => {
+  const t = u.useContext(ft);
   if (!t)
     throw new Error("useKeybindings must be used within KeybindingsProvider");
   return t;
-}, oe = (t) => {
+}, se = (t) => {
   const e = [];
   t.metaKey && e.push("Mod"), t.ctrlKey && e.push("Ctrl"), t.altKey && e.push("Alt"), t.shiftKey && e.push("Shift");
   const n = t.key.length === 1 ? t.key.toUpperCase() : t.key;
   return e.push(n), e.join("-");
-}, se = ({ children: t, configure: e }) => {
-  const n = l.useRef({}), r = l.useCallback((a, i) => {
+}, ie = ({ children: t, configure: e }) => {
+  const n = u.useRef({}), r = u.useCallback((a, i) => {
     n.current = { ...n.current, [a]: i };
-  }, []), o = l.useCallback((a) => {
+  }, []), o = u.useCallback((a) => {
     const i = { ...n.current };
     delete i[a], n.current = i;
   }, []);
-  l.useEffect(() => {
+  u.useEffect(() => {
     const a = (i) => {
-      const c = oe(i), d = n.current[c];
+      const c = se(i), d = n.current[c];
       d && d(i);
     };
     return window.addEventListener("keydown", a), () => {
       window.removeEventListener("keydown", a);
     };
   }, []);
-  const s = l.useMemo(() => ({ register: r, unregister: o }), [r, o]);
-  return l.useEffect(() => {
+  const s = u.useMemo(() => ({ register: r, unregister: o }), [r, o]);
+  return u.useEffect(() => {
     e && e(s);
   }, [s, e]), /* @__PURE__ */ m(ft.Provider, { value: s, children: t });
-}, ie = (t, e) => {
+}, ae = (t, e) => {
   t.register("Mod-\\", (n) => {
     n.preventDefault(), e.splitFocused("vertical");
   }), t.register("Mod-Shift-\\", (n) => {
@@ -143,9 +144,9 @@ const ne = (t) => ({
   }), t.register("Alt-ArrowLeft", (n) => {
     n.preventDefault(), e.focusPrevGroup();
   });
-}, ae = (t) => t.type === "group", gt = (t, e = { x: 0, y: 0, w: 100, h: 100 }) => {
+}, ce = (t) => t.type === "group", gt = (t, e = { x: 0, y: 0, w: 100, h: 100 }) => {
   const n = /* @__PURE__ */ new Map(), r = (o, s) => {
-    if (ae(o)) {
+    if (ce(o)) {
       n.set(o.groupId, s);
       return;
     }
@@ -158,7 +159,7 @@ const ne = (t) => ({
     r(o.a, { x: s.x, y: s.y, w: s.w, h: a }), r(o.b, { x: s.x, y: s.y + a, w: s.w, h: i });
   };
   return r(t, e), n;
-}, ce = (t, e) => {
+}, ue = (t, e) => {
   const n = gt(t.tree), r = {
     areas: [["root"]],
     rows: [{ size: "1fr" }],
@@ -184,95 +185,95 @@ const ne = (t) => ({
     };
   });
   return { config: r, layers: o };
-}, ue = (t, e, n) => {
-  const r = gt(t.tree), o = Array.from(new Set(Array.from(r.values()).flatMap((h) => [h.x, h.x + h.w]))).sort((h, y) => h - y), s = Array.from(new Set(Array.from(r.values()).flatMap((h) => [h.y, h.y + h.h]))).sort((h, y) => h - y), a = o.slice(1).map((h, y) => `${h - o[y]}fr`), i = s.slice(1).map((h, y) => `${h - s[y]}fr`), c = a.map((h) => ({ size: h, resizable: n })), d = i.map((h) => ({ size: h, resizable: n })), u = (h, y, w, T) => {
-    for (const [b, I] of r.entries())
-      if (h >= I.x && y <= I.x + I.w && w >= I.y && T <= I.y + I.h)
-        return b;
+}, le = (t, e, n) => {
+  const r = gt(t.tree), o = Array.from(new Set(Array.from(r.values()).flatMap((b) => [b.x, b.x + b.w]))).sort((b, I) => b - I), s = Array.from(new Set(Array.from(r.values()).flatMap((b) => [b.y, b.y + b.h]))).sort((b, I) => b - I), a = o.slice(1).map((b, I) => `${b - o[I]}fr`), i = s.slice(1).map((b, I) => `${b - s[I]}fr`), c = a.map((b) => ({ size: b, resizable: n })), d = i.map((b) => ({ size: b, resizable: n })), l = (b, I, w, T) => {
+    for (const [h, y] of r.entries())
+      if (b >= y.x && I <= y.x + y.w && w >= y.y && T <= y.y + y.h)
+        return h;
     return ".";
   }, p = [];
-  for (let h = 0; h < s.length - 1; h += 1) {
-    const y = [];
+  for (let b = 0; b < s.length - 1; b += 1) {
+    const I = [];
     for (let w = 0; w < o.length - 1; w += 1)
-      y.push(u(o[w], o[w + 1], s[h], s[h + 1]));
-    p.push(y);
+      I.push(l(o[w], o[w + 1], s[b], s[b + 1]));
+    p.push(I);
   }
   const g = {
     areas: p,
     rows: d,
     columns: c,
     gap: "0px"
-  }, v = Array.from(r.keys()).map((h) => ({
-    id: h,
-    gridArea: h,
-    component: e(h)
+  }, v = Array.from(r.keys()).map((b) => ({
+    id: b,
+    gridArea: b,
+    component: e(b)
   }));
   return { config: g, layers: v };
-}, bt = l.createContext(null), le = () => {
-  const t = l.useContext(bt);
+}, bt = u.createContext(null), de = () => {
+  const t = u.useContext(bt);
   if (!t)
     throw new Error("usePanelRenderContext must be used within PanelRenderProvider");
   return t;
-}, de = ({ value: t, children: e }) => /* @__PURE__ */ m(bt.Provider, { value: t, children: e }), ht = l.createContext(null), mt = () => {
-  const t = l.useContext(ht);
+}, pe = ({ value: t, children: e }) => /* @__PURE__ */ m(bt.Provider, { value: t, children: e }), ht = u.createContext(null), mt = () => {
+  const t = u.useContext(ht);
   if (!t)
     throw new Error("useDomRegistry must be used within DomRegistryProvider");
   return t;
-}, pe = ({ children: t }) => {
-  const e = l.useRef(/* @__PURE__ */ new Map()), n = l.useCallback((c) => {
+}, fe = ({ children: t }) => {
+  const e = u.useRef(/* @__PURE__ */ new Map()), n = u.useCallback((c) => {
     const d = e.current.get(c);
     if (d)
       return d;
-    const u = { group: null, tabbar: null, content: null };
-    return e.current.set(c, u), u;
-  }, []), r = l.useCallback(
+    const l = { group: null, tabbar: null, content: null };
+    return e.current.set(c, l), l;
+  }, []), r = u.useCallback(
     (c, d) => {
-      const u = n(c);
-      if (u.group = d, d === null) {
+      const l = n(c);
+      if (l.group = d, d === null) {
         const p = e.current.get(c);
         (p ? p.tabbar === null && p.content === null : !1) && e.current.delete(c);
       }
     },
     [n]
-  ), o = l.useCallback(
+  ), o = u.useCallback(
     (c, d) => {
-      const u = n(c);
-      if (u.tabbar = d, d === null) {
+      const l = n(c);
+      if (l.tabbar = d, d === null) {
         const p = e.current.get(c);
         (p ? p.group === null && p.content === null : !1) && e.current.delete(c);
       }
     },
     [n]
-  ), s = l.useCallback(
+  ), s = u.useCallback(
     (c, d) => {
-      const u = n(c);
-      if (u.content = d, d === null) {
+      const l = n(c);
+      if (l.content = d, d === null) {
         const p = e.current.get(c);
         (p ? p.group === null && p.tabbar === null : !1) && e.current.delete(c);
       }
     },
     [n]
-  ), a = l.useCallback(() => e.current, []), i = l.useMemo(() => ({ setGroupEl: r, setTabbarEl: o, setContentEl: s, getAll: a }), [r, o, s, a]);
+  ), a = u.useCallback(() => e.current, []), i = u.useMemo(() => ({ setGroupEl: r, setTabbarEl: o, setContentEl: s, getAll: a }), [r, o, s, a]);
   return /* @__PURE__ */ m(ht.Provider, { value: i, children: t });
-}, fe = {
+}, ge = {
   display: "flex",
   flexDirection: "column",
   width: "100%",
   height: "100%"
-}, ge = {
+}, be = {
   flex: "1 1 auto",
   minWidth: 0,
   minHeight: 0,
   position: "relative",
   overflow: "hidden"
 };
-function be(t, e, n, r) {
-  return t ? l.cloneElement(t, n, r) : e ? /* @__PURE__ */ m(e, { ...n, children: r }) : /* @__PURE__ */ m("div", { ...n, children: r });
-}
 function he(t, e, n, r) {
-  return t ? l.cloneElement(t, n, r) : e ? /* @__PURE__ */ m(e, { ...n, children: r }) : /* @__PURE__ */ m("div", { ...n, children: r });
+  return t ? u.cloneElement(t, n, r) : e ? /* @__PURE__ */ m(e, { ...n, children: r }) : /* @__PURE__ */ m("div", { ...n, children: r });
+}
+function me(t, e, n, r) {
+  return t ? u.cloneElement(t, n, r) : e ? /* @__PURE__ */ m(e, { ...n, children: r }) : /* @__PURE__ */ m("div", { ...n, children: r });
 }
-const me = ({
+const ve = ({
   group: t,
   tabbar: e,
   content: n,
@@ -284,25 +285,25 @@ const me = ({
   contentComponent: c,
   contentElement: d
 }) => {
-  const u = {
+  const l = {
     ref: o,
-    style: fe,
+    style: ge,
     "data-group-id": t.id
-  }, g = be(d, c, {
+  }, g = he(d, c, {
     ref: s,
-    style: ge,
+    style: be,
     "data-dnd-zone": "content",
     onPointerDown: r
   }, n);
-  return he(i, a, u, /* @__PURE__ */ H(et, { children: [
+  return me(i, a, l, /* @__PURE__ */ H(et, { children: [
     e,
     g
   ] }));
-}, vt = l.memo(me, (t, e) => t.group.id !== e.group.id || t.group.activeTabId !== e.group.activeTabId || t.group.tabs.length !== e.group.tabs.length ? !1 : t.group.tabs === e.group.tabs);
+}, vt = u.memo(ve, (t, e) => t.group.id !== e.group.id || t.group.activeTabId !== e.group.activeTabId || t.group.tabs.length !== e.group.tabs.length ? !1 : t.group.tabs === e.group.tabs);
 vt.displayName = "PanelGroupView";
-const K = (t, e, n) => {
-  const r = t.left, o = t.top, s = t.width, a = t.height, i = e - r, c = n - o, d = s / 3, u = a / 3;
-  return i > d && i < s - d && c > u && c < a - u ? "center" : i < c && i < s - i && c < a - c ? "left" : s - i < c && s - i < i && c < a - c ? "right" : c < i && c < a - c && i < s - i ? "top" : "bottom";
+const U = (t, e, n) => {
+  const r = t.left, o = t.top, s = t.width, a = t.height, i = e - r, c = n - o, d = s / 3, l = a / 3;
+  return i > d && i < s - d && c > l && c < a - l ? "center" : i < c && i < s - i && c < a - c ? "left" : s - i < c && s - i < i && c < a - c ? "right" : c < i && c < a - c && i < s - i ? "top" : "bottom";
 };
 function A(t, e) {
   if (!e) {
@@ -323,7 +324,7 @@ function A(t, e) {
     enumerable: !0
   }), n;
 }
-const ve = (t, e) => {
+const Ie = (t, e) => {
   const n = {};
   return Object.keys(t).forEach((r) => {
     const o = t[r];
@@ -359,7 +360,7 @@ const ve = (t, e) => {
     (t) => t
   ),
   reset: A("RESET")
-}, Ie = It(D, {
+}, we = It(D, {
   startContent: (t, e) => ({
     phase: {
       kind: "content",
@@ -392,15 +393,15 @@ const ve = (t, e) => {
   setPointer: (t, e) => ({ ...t, pointer: e.payload }),
   setTabbarHover: (t, e) => ({ ...t, tabbarHover: e.payload }),
   reset: () => wt
-}), we = (t, e) => {
-  const n = Ie[e.type];
+}), ye = (t, e) => {
+  const n = we[e.type];
   return n ? n(t, e, void 0) : t;
-}, yt = l.createContext(null), W = () => {
-  const t = l.useContext(yt);
+}, yt = u.createContext(null), W = () => {
+  const t = u.useContext(yt);
   if (!t)
     throw new Error("usePanelInteractions must be used within InteractionsProvider");
   return t;
-}, ye = ({
+}, Te = ({
   containerRef: t,
   dragThresholdPx: e,
   onCommitContentDrop: n,
@@ -408,27 +409,27 @@ const ve = (t, e) => {
   isContentZoneAllowed: o,
   children: s
 }) => {
-  const [a, i] = l.useReducer(we, wt), c = mt(), d = l.useCallback(() => {
-    const w = Array.from(c.getAll().entries()), T = w.map(([f, S]) => ({ gid: f, el: S.content ?? S.group })).filter((f) => !!f.el).map((f) => ({ ...f, rect: f.el.getBoundingClientRect() })), b = w.map(([f, S]) => ({ gid: f, el: S.tabbar })).filter((f) => !!f.el).map((f) => ({ ...f, rect: f.el.getBoundingClientRect() })), I = w.map(([f, S]) => ({ gid: f, el: S.content ?? S.group })).filter((f) => !!f.el).map((f) => ({ ...f, rect: f.el.getBoundingClientRect() }));
-    return { groups: T, tabbars: b, contents: I };
-  }, [c]), u = J((w) => {
+  const [a, i] = u.useReducer(ye, wt), c = mt(), d = u.useCallback(() => {
+    const w = Array.from(c.getAll().entries()), T = w.map(([f, S]) => ({ gid: f, el: S.content ?? S.group })).filter((f) => !!f.el).map((f) => ({ ...f, rect: f.el.getBoundingClientRect() })), h = w.map(([f, S]) => ({ gid: f, el: S.tabbar })).filter((f) => !!f.el).map((f) => ({ ...f, rect: f.el.getBoundingClientRect() })), y = w.map(([f, S]) => ({ gid: f, el: S.content ?? S.group })).filter((f) => !!f.el).map((f) => ({ ...f, rect: f.el.getBoundingClientRect() }));
+    return { groups: T, tabbars: h, contents: y };
+  }, [c]), l = J((w) => {
     if (!t.current)
       return;
-    const b = w.clientX, I = w.clientY, f = a.phase;
+    const h = w.clientX, y = w.clientY, f = a.phase;
     if (f.kind === "idle")
       return;
-    const S = Math.abs(b - f.startX), C = Math.abs(I - f.startY);
+    const S = Math.abs(h - f.startX), C = Math.abs(y - f.startY);
     if (S < e && C < e) {
       a.phase.kind === "content" && i(D.setSuggest(null)), i(D.setPointer(null)), i(D.setTabbarHover(null));
       return;
     }
-    if (i(D.setPointer({ x: b, y: I })), f.kind === "content") {
-      const G = f.cache.groups.find(({ rect: x }) => b >= x.left && b <= x.right && I >= x.top && I <= x.bottom);
+    if (i(D.setPointer({ x: h, y })), f.kind === "content") {
+      const G = f.cache.groups.find(({ rect: x }) => h >= x.left && h <= x.right && y >= x.top && y <= x.bottom);
       if (!G) {
         i(D.setSuggest(null));
         return;
       }
-      const R = K(G.rect, b, I);
+      const R = U(G.rect, h, y);
       if (o && !o({ targetGroupId: G.gid, zone: R })) {
         i(D.setSuggest(null));
         return;
@@ -437,18 +438,18 @@ const ve = (t, e) => {
       return;
     }
     if (f.kind === "tab") {
-      const G = f.cache.tabbars.find(({ rect: E }) => b >= E.left && b <= E.right && I >= E.top && I <= E.bottom);
+      const G = f.cache.tabbars.find(({ rect: E }) => h >= E.left && h <= E.right && y >= E.top && y <= E.bottom);
       if (G) {
-        const k = Array.from(G.el.querySelectorAll("[role='tab']")).map((z) => z.getBoundingClientRect()), P = k.map((z) => z.left + z.width / 2), O = P.findIndex((z) => b < z), B = O === -1 ? P.length : O, At = k.length === 0 ? G.rect.left + 8 : B === 0 ? k[0].left : B === k.length ? k[k.length - 1].right : (k[B - 1].right + k[B].left) / 2;
+        const k = Array.from(G.el.querySelectorAll("[role='tab']")).map((z) => z.getBoundingClientRect()), P = k.map((z) => z.left + z.width / 2), O = P.findIndex((z) => h < z), B = O === -1 ? P.length : O, At = k.length === 0 ? G.rect.left + 8 : B === 0 ? k[0].left : B === k.length ? k[k.length - 1].right : (k[B - 1].right + k[B].left) / 2;
         i(D.setTabbarHover({ groupId: G.gid, index: B, rect: G.rect, insertX: At }));
       } else
         i(D.setTabbarHover(null));
-      const R = f.cache.contents.find(({ rect: E }) => b >= E.left && b <= E.right && I >= E.top && I <= E.bottom);
+      const R = f.cache.contents.find(({ rect: E }) => h >= E.left && h <= E.right && y >= E.top && y <= E.bottom);
       if (!R) {
         i(D.setSuggest(null));
         return;
       }
-      const x = K(R.rect, b, I);
+      const x = U(R.rect, h, y);
       if (o && !o({ targetGroupId: R.gid, zone: x })) {
         i(D.setSuggest(null));
         return;
@@ -456,29 +457,29 @@ const ve = (t, e) => {
       i(D.setSuggest({ rect: R.rect, zone: x }));
     }
   }), p = J((w) => {
-    const T = t.current, b = a;
+    const T = t.current, h = a;
     if (i(D.reset()), !T)
       return;
-    const I = w.clientX, f = w.clientY;
-    if (b.phase.kind === "idle")
+    const y = w.clientX, f = w.clientY;
+    if (h.phase.kind === "idle")
       return;
-    const S = Math.abs(I - b.phase.startX), C = Math.abs(f - b.phase.startY);
+    const S = Math.abs(y - h.phase.startX), C = Math.abs(f - h.phase.startY);
     if (!(S < e && C < e)) {
-      if (b.phase.kind === "content") {
-        const G = b.phase.cache.groups.find(({ rect: E }) => I >= E.left && I <= E.right && f >= E.top && f <= E.bottom);
+      if (h.phase.kind === "content") {
+        const G = h.phase.cache.groups.find(({ rect: E }) => y >= E.left && y <= E.right && f >= E.top && f <= E.bottom);
         if (!G)
           return;
         const R = G.gid ?? null;
         if (!R)
           return;
-        const x = K(G.rect, I, f);
+        const x = U(G.rect, y, f);
         if (o && !o({ targetGroupId: R, zone: x }))
           return;
-        n({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: R, zone: x });
+        n({ fromGroupId: h.phase.fromGroupId, tabId: h.phase.tabId, targetGroupId: R, zone: x });
         return;
       }
-      if (b.phase.kind === "tab") {
-        const G = b.phase.cache.tabbars.find(({ rect: x }) => I >= x.left && I <= x.right && f >= x.top && f <= x.bottom);
+      if (h.phase.kind === "tab") {
+        const G = h.phase.cache.tabbars.find(({ rect: x }) => y >= x.left && y <= x.right && f >= x.top && f <= x.bottom);
         if (G) {
           const x = G.gid;
           if (!x)
@@ -486,45 +487,45 @@ const ve = (t, e) => {
           const k = Array.from(G.el.querySelectorAll("[role='tab']")).map((B) => {
             const Z = B.getBoundingClientRect();
             return Z.left + Z.width / 2;
-          }), P = k.findIndex((B) => I < B), O = P === -1 ? k.length : P;
-          r({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: x, targetIndex: O });
+          }), P = k.findIndex((B) => y < B), O = P === -1 ? k.length : P;
+          r({ fromGroupId: h.phase.fromGroupId, tabId: h.phase.tabId, targetGroupId: x, targetIndex: O });
           return;
         }
-        const R = b.phase.cache.contents.find(({ rect: x }) => I >= x.left && I <= x.right && f >= x.top && f <= x.bottom);
+        const R = h.phase.cache.contents.find(({ rect: x }) => y >= x.left && y <= x.right && f >= x.top && f <= x.bottom);
         if (R) {
           const x = R.gid ?? null;
           if (!x)
             return;
-          const E = K(R.rect, I, f);
+          const E = U(R.rect, y, f);
           if (o && !o({ targetGroupId: x, zone: E }))
             return;
-          n({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: x, zone: E });
+          n({ fromGroupId: h.phase.fromGroupId, tabId: h.phase.tabId, targetGroupId: x, zone: E });
         }
       }
     }
   }), g = J(() => {
     i(D.reset());
   });
-  l.useEffect(() => {
+  u.useEffect(() => {
     if (a.phase.kind !== "idle")
-      return window.addEventListener("pointermove", u), window.addEventListener("pointerup", p, { once: !0 }), window.addEventListener("pointercancel", g, { once: !0 }), () => {
-        window.removeEventListener("pointermove", u), window.removeEventListener("pointerup", p), window.removeEventListener("pointercancel", g);
+      return window.addEventListener("pointermove", l), window.addEventListener("pointerup", p, { once: !0 }), window.addEventListener("pointercancel", g, { once: !0 }), () => {
+        window.removeEventListener("pointermove", l), window.removeEventListener("pointerup", p), window.removeEventListener("pointercancel", g);
       };
   }, [a.phase.kind]);
-  const v = l.useCallback((w, T, b) => {
-    if (b.button !== 0)
+  const v = u.useCallback((w, T, h) => {
+    if (h.button !== 0)
       return;
-    b.currentTarget.setPointerCapture(b.pointerId);
-    const I = d();
-    i(D.startContent({ x: b.clientX, y: b.clientY, groupId: w, tabId: T, cache: I }));
-  }, [d]), h = l.useCallback((w, T, b) => {
-    if (b.button !== 0)
+    h.currentTarget.setPointerCapture(h.pointerId);
+    const y = d();
+    i(D.startContent({ x: h.clientX, y: h.clientY, groupId: w, tabId: T, cache: y }));
+  }, [d]), b = u.useCallback((w, T, h) => {
+    if (h.button !== 0)
       return;
-    const I = b.currentTarget;
-    I && I.setPointerCapture(b.pointerId);
+    const y = h.currentTarget;
+    y && y.setPointerCapture(h.pointerId);
     const f = d();
-    i(D.startTab({ x: b.clientX, y: b.clientY, groupId: T, tabId: w, cache: f, element: I }));
-  }, [d]), y = l.useMemo(() => ({
+    i(D.startTab({ x: h.clientX, y: h.clientY, groupId: T, tabId: w, cache: f, element: y }));
+  }, [d]), I = u.useMemo(() => ({
     suggest: a.suggest,
     isTabDragging: a.phase.kind === "tab",
     draggingTabId: a.phase.kind === "tab" ? a.phase.tabId : null,
@@ -532,14 +533,14 @@ const ve = (t, e) => {
     tabbarHover: a.tabbarHover,
     draggingTabElement: a.draggingTabElement,
     onStartContentDrag: v,
-    onStartTabDrag: h
-  }), [a.suggest, a.pointer, a.tabbarHover, a.phase, a.draggingTabElement, v, h]);
-  return /* @__PURE__ */ m(yt.Provider, { value: y, children: s });
+    onStartTabDrag: b
+  }), [a.suggest, a.pointer, a.tabbarHover, a.phase, a.draggingTabElement, v, b]);
+  return /* @__PURE__ */ m(yt.Provider, { value: I, children: s });
 }, ct = {
   display: "inline-flex",
   alignItems: "center",
   userSelect: "none"
-}, Te = ({
+}, Se = ({
   groupId: t,
   tab: e,
   active: n,
@@ -551,13 +552,13 @@ const ve = (t, e) => {
   tabElement: c,
   onDoubleClick: d
 }) => {
-  const u = l.useEffectEvent(() => {
+  const l = u.useEffectEvent(() => {
     o(e.id);
-  }), p = l.useEffectEvent((y) => {
-    s && y.button === 0 && s(e.id, t, y);
+  }), p = u.useEffectEvent((I) => {
+    s && I.button === 0 && s(e.id, t, I);
   }), g = () => {
-    const y = !!a;
-    return /* @__PURE__ */ m(l.Activity, { mode: y ? "visible" : "hidden", children: /* @__PURE__ */ m(
+    const I = !!a;
+    return /* @__PURE__ */ m(u.Activity, { mode: I ? "visible" : "hidden", children: /* @__PURE__ */ m(
       "button",
       {
         type: "button",
@@ -566,9 +567,9 @@ const ve = (t, e) => {
           a && (w.stopPropagation(), a(t, e.id));
         },
         style: { marginLeft: 6 },
-        tabIndex: y ? void 0 : -1,
-        disabled: !y,
-        "aria-hidden": y ? void 0 : !0,
+        tabIndex: I ? void 0 : -1,
+        disabled: !I,
+        "aria-hidden": I ? void 0 : !0,
         children: "×"
       }
     ) });
@@ -577,7 +578,7 @@ const ve = (t, e) => {
     "aria-selected": n,
     tabIndex: n ? 0 : -1,
     style: ct,
-    onClick: u,
+    onClick: l,
     onPointerDown: p,
     onDoubleClick: d,
     "data-tab-id": e.id,
@@ -587,7 +588,7 @@ const ve = (t, e) => {
       /* @__PURE__ */ m("span", { children: e.title }),
       g()
     ] })
-  }, h = {
+  }, b = {
     type: "button",
     role: "tab",
     "aria-selected": n,
@@ -596,20 +597,20 @@ const ve = (t, e) => {
     onClick: () => {
       o(e.id);
     },
-    onPointerDown: (y) => {
-      s && y.button === 0 && s(e.id, t, y);
+    onPointerDown: (I) => {
+      s && I.button === 0 && s(e.id, t, I);
     },
     onDoubleClick: d,
     children: /* @__PURE__ */ m("span", { children: e.title })
   };
-  return c ? c(h) : i ? /* @__PURE__ */ m(i, { ...h }) : /* @__PURE__ */ m("div", { ...v });
-}, Se = {
+  return c ? c(b) : i ? /* @__PURE__ */ m(i, { ...b }) : /* @__PURE__ */ m("div", { ...v });
+}, xe = {
   display: "flex",
   alignItems: "center"
-}, xe = {
+}, Ge = {
   flex: "1 1 auto",
   alignSelf: "stretch"
-}, Ge = ({
+}, Ce = ({
   group: t,
   onClickTab: e,
   onStartDrag: n,
@@ -620,9 +621,9 @@ const ve = (t, e) => {
   tabElement: i,
   onAddTab: c,
   onCloseTab: d,
-  doubleClickToAdd: u
+  doubleClickToAdd: l
 }) => {
-  const { isTabDragging: p, draggingTabId: g } = W(), v = l.useRef(null), h = l.useCallback(
+  const { isTabDragging: p, draggingTabId: g } = W(), v = u.useRef(null), b = u.useCallback(
     (f) => {
       if (v.current = f, !!r) {
         if (typeof r == "function") {
@@ -636,7 +637,7 @@ const ve = (t, e) => {
       }
     },
     [r]
-  ), y = l.useEffectEvent((f) => {
+  ), I = u.useEffectEvent((f) => {
     const S = v.current ?? f.currentTarget;
     if (!S)
       return;
@@ -687,7 +688,7 @@ const ve = (t, e) => {
       return;
     }
   });
-  l.useEffect(() => {
+  u.useEffect(() => {
     const f = v.current;
     if (!f)
       return;
@@ -697,16 +698,16 @@ const ve = (t, e) => {
     !f.contains(document.activeElement) && S && S.focus();
   }, [t.activeTabId]);
   const w = {
-    style: Se,
+    style: xe,
     role: "tablist",
     "data-tabbar": "true",
     "data-group-id": t.id,
     "data-dragging": p ? "true" : "false",
-    onKeyDown: y
+    onKeyDown: I
   }, T = Ot({
     element: s,
     component: o
-  }), b = () => c ? /* @__PURE__ */ m(
+  }), h = () => c ? /* @__PURE__ */ m(
     "button",
     {
       type: "button",
@@ -716,12 +717,12 @@ const ve = (t, e) => {
       },
       children: "+"
     }
-  ) : null, I = l.useCallback(() => {
-    u && c && c(t.id);
-  }, [u, c, t.id]);
-  return /* @__PURE__ */ H(T, { ...w, ref: h, onDoubleClick: I, children: [
+  ) : null, y = u.useCallback(() => {
+    l && c && c(t.id);
+  }, [l, c, t.id]);
+  return /* @__PURE__ */ H(T, { ...w, ref: b, onDoubleClick: y, children: [
     t.tabs.map((f, S) => /* @__PURE__ */ m(
-      Te,
+      Se,
       {
         groupId: t.id,
         tab: f,
@@ -736,21 +737,21 @@ const ve = (t, e) => {
       },
       `${t.id}:${f.id}:${S}`
     )),
-    /* @__PURE__ */ m("span", { style: xe }),
-    b()
+    /* @__PURE__ */ m("span", { style: Ge }),
+    h()
   ] });
-}, Ce = ({ id: t, TabBarComponent: e, PanelGroupComponent: n }) => {
-  const { getGroup: r, getGroupContent: o, onClickTab: s, onAddTab: a, onCloseTab: i, onStartTabDrag: c, doubleClickToAdd: d, registerContentContainer: u } = le(), { setGroupEl: p, setTabbarEl: g, setContentEl: v } = mt(), h = l.useCallback(
+}, Ee = ({ id: t, TabBarComponent: e, PanelGroupComponent: n }) => {
+  const { getGroup: r, getGroupContent: o, onClickTab: s, onAddTab: a, onCloseTab: i, onStartTabDrag: c, doubleClickToAdd: d, registerContentContainer: l } = de(), { setGroupEl: p, setTabbarEl: g, setContentEl: v } = mt(), b = u.useCallback(
     (S) => {
       p(t, S);
     },
     [t, p]
-  ), y = l.useCallback(
+  ), I = u.useCallback(
     (S) => {
-      v(t, S), u(t, S);
+      v(t, S), l(t, S);
     },
-    [t, v, u]
-  ), w = l.useCallback(
+    [t, v, l]
+  ), w = u.useCallback(
     (S) => {
       g(t, S);
     },
@@ -758,13 +759,13 @@ const ve = (t, e) => {
   ), T = r(t);
   if (!T)
     return null;
-  const b = o(t);
+  const h = o(t);
   return /* @__PURE__ */ m(
     n ?? ((S) => /* @__PURE__ */ m(vt, { ...S })),
     {
       group: T,
       tabbar: /* @__PURE__ */ m(
-        e ?? Ge,
+        e ?? Ce,
         {
           rootRef: w,
           group: T,
@@ -775,23 +776,23 @@ const ve = (t, e) => {
           doubleClickToAdd: d
         }
       ),
-      content: b,
-      groupRef: h,
-      contentRef: y
+      content: h,
+      groupRef: b,
+      contentRef: I
     }
   );
-}, Ee = (t, e) => {
+}, Re = (t, e) => {
   const n = new Array(16);
   for (let r = 0; r < 4; r++)
     for (let o = 0; o < 4; o++)
       n[r * 4 + o] = t[0 + o] * e[r * 4 + 0] + t[4 + o] * e[r * 4 + 1] + t[8 + o] * e[r * 4 + 2] + t[12 + o] * e[r * 4 + 3];
   return n;
-}, U = (t) => {
+}, K = (t) => {
   if (t.length !== 16)
     throw new Error("Matrix must have exactly 16 values");
   const e = Object.freeze([...t]), n = (r) => {
-    const o = Ee(e, r);
-    return U(o);
+    const o = Re(e, r);
+    return K(o);
   };
   return Object.freeze({
     translate: (r = 0, o = 0, s = 0) => n([
@@ -1040,21 +1041,21 @@ const ve = (t, e) => {
     rotate: (r, o, s, a) => {
       const i = Math.sqrt(o * o + s * s + a * a);
       if (i === 0)
-        return U(e);
+        return K(e);
       o /= i, s /= i, a /= i;
-      const c = Math.cos(r), d = Math.sin(r), u = 1 - c;
+      const c = Math.cos(r), d = Math.sin(r), l = 1 - c;
       return n([
-        u * o * o + c,
-        u * o * s + d * a,
-        u * o * a - d * s,
+        l * o * o + c,
+        l * o * s + d * a,
+        l * o * a - d * s,
         0,
-        u * o * s - d * a,
-        u * s * s + c,
-        u * s * a + d * o,
+        l * o * s - d * a,
+        l * s * s + c,
+        l * s * a + d * o,
         0,
-        u * o * a + d * s,
-        u * s * a - d * o,
-        u * a * a + c,
+        l * o * a + d * s,
+        l * s * a - d * o,
+        l * a * a + c,
         0,
         0,
         0,
@@ -1065,21 +1066,21 @@ const ve = (t, e) => {
     rotate3d: (r, o, s, a) => {
       const i = Math.sqrt(r * r + o * o + s * s);
       if (i === 0)
-        return U(e);
+        return K(e);
       r /= i, o /= i, s /= i;
-      const c = Math.cos(a), d = Math.sin(a), u = 1 - c;
+      const c = Math.cos(a), d = Math.sin(a), l = 1 - c;
       return n([
-        u * r * r + c,
-        u * r * o + d * s,
-        u * r * s - d * o,
+        l * r * r + c,
+        l * r * o + d * s,
+        l * r * s - d * o,
         0,
-        u * r * o - d * s,
-        u * o * o + c,
-        u * o * s + d * r,
+        l * r * o - d * s,
+        l * o * o + c,
+        l * o * s + d * r,
         0,
-        u * r * s + d * o,
-        u * o * s - d * r,
-        u * s * s + c,
+        l * r * s + d * o,
+        l * o * s - d * r,
+        l * s * s + c,
         0,
         0,
         0,
@@ -1182,7 +1183,7 @@ const ve = (t, e) => {
     ].join(`
 `)
   });
-}, Re = () => U([
+}, Pe = () => K([
   1,
   0,
   0,
@@ -1199,18 +1200,18 @@ const ve = (t, e) => {
   0,
   0,
   1
-]), Pe = {
+]), De = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
   zIndex: $t
-}, De = {
+}, Ae = {
   position: "absolute",
   border: `${Yt} dashed ${jt}`,
   background: Xt,
   borderRadius: Ft,
   transformOrigin: "top left"
-}, L = (t, e) => e <= 0 ? 0 : M(t / e, 0), Ae = (t, e, n) => {
+}, L = (t, e) => e <= 0 ? 0 : M(t / e, 0), ke = (t, e, n) => {
   const { width: r, height: o } = t, s = n / 2, a = r > 0 ? r : 1, i = o > 0 ? o : 1, c = {
     translateX: n,
     translateY: n,
@@ -1221,7 +1222,7 @@ const ve = (t, e) => {
     translateY: n,
     scaleX: L(M(r / 2 - n * 1.5, 0), a),
     scaleY: L(M(o - n * 2, 0), i)
-  }, u = {
+  }, l = {
     translateX: r / 2 + s,
     translateY: n,
     scaleX: L(M(r / 2 - n * 1.5, 0), a),
@@ -1239,78 +1240,78 @@ const ve = (t, e) => {
   }, v = {
     center: c,
     left: d,
-    right: u,
+    right: l,
     top: p,
     bottom: g
-  }, { translateX: h, translateY: y, scaleX: w, scaleY: T } = v[e];
-  return Re().translate(h, y, 0).scale(w, T, 1).toCSS();
-}, ke = (t, e) => {
-  const n = Kt;
+  }, { translateX: b, translateY: I, scaleX: w, scaleY: T } = v[e];
+  return Pe().translate(b, I, 0).scale(w, T, 1).toCSS();
+}, Me = (t, e) => {
+  const n = Ut;
   return {
-    ...De,
+    ...Ae,
     left: t.left,
     top: t.top,
     width: t.width,
     height: t.height,
-    transform: Ae(t, e, n)
+    transform: ke(t, e, n)
   };
-}, Me = ({ suggest: t }) => {
+}, _e = ({ suggest: t }) => {
   if (!t)
     return null;
-  const { rect: e, zone: n } = t, r = ke(e, n);
-  return /* @__PURE__ */ m("div", { style: Pe, children: /* @__PURE__ */ m("div", { style: r }) });
-}, _e = typeof window < "u" && typeof document < "u", Oe = (t) => {
-  const [e, n] = l.useState(null), [r, o] = l.useState(null);
+  const { rect: e, zone: n } = t, r = Me(e, n);
+  return /* @__PURE__ */ m("div", { style: De, children: /* @__PURE__ */ m("div", { style: r }) });
+}, Oe = typeof window < "u" && typeof document < "u", Be = (t) => {
+  const [e, n] = u.useState(null), [r, o] = u.useState(null);
   return nt(() => {
-    if (!_e || !t) {
+    if (!Oe || !t) {
       n(null), o(null);
       return;
     }
     const s = t.getBoundingClientRect();
     n({ width: s.width, height: s.height }), o(t.outerHTML);
   }, [t]), { html: r, size: e };
-}, Be = {
+}, Le = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
   zIndex: Qt
-}, Le = {
+}, He = {
   position: "absolute",
   width: Jt,
   borderRadius: Zt,
   background: qt,
   boxShadow: Wt
-}, He = () => {
-  const { isTabDragging: t, draggingTabId: e, dragPointer: n, tabbarHover: r, draggingTabElement: o } = W(), { html: s, size: a } = Oe(o), i = n !== null && e !== null, c = l.useMemo(() => {
+}, Ne = () => {
+  const { isTabDragging: t, draggingTabId: e, dragPointer: n, tabbarHover: r, draggingTabElement: o } = W(), { html: s, size: a } = Be(o), i = n !== null && e !== null, c = u.useMemo(() => {
     if (!(!i || !n))
       return {
         position: "absolute",
         left: n.x,
         top: n.y,
-        transform: `translate(${Ut}, ${Vt})`,
+        transform: `translate(${Kt}, ${Vt})`,
         pointerEvents: "none"
       };
-  }, [i, n]), d = l.useMemo(() => {
+  }, [i, n]), d = u.useMemo(() => {
     if (!(!c || !o))
       return a ? { ...c, width: a.width, height: a.height } : c;
-  }, [c, o, a]), u = l.useMemo(() => {
+  }, [c, o, a]), l = u.useMemo(() => {
     if (r)
       return {
-        ...Le,
+        ...He,
         left: r.insertX,
         top: r.rect.top + 4,
         height: Math.max(0, r.rect.height - 8)
       };
   }, [r]);
-  return t ? /* @__PURE__ */ H("div", { style: Be, children: [
-    /* @__PURE__ */ m(l.Activity, { mode: d ? "visible" : "hidden", children: /* @__PURE__ */ m("div", { style: d, children: /* @__PURE__ */ m(
+  return t ? /* @__PURE__ */ H("div", { style: Le, children: [
+    /* @__PURE__ */ m(u.Activity, { mode: d ? "visible" : "hidden", children: /* @__PURE__ */ m("div", { style: d, children: /* @__PURE__ */ m(
       "div",
       {
         style: { width: "100%", height: "100%", pointerEvents: "none" },
         dangerouslySetInnerHTML: { __html: s ?? "" }
       }
     ) }) }),
-    /* @__PURE__ */ m(l.Activity, { mode: u ? "visible" : "hidden", children: /* @__PURE__ */ m("div", { style: u }) })
+    /* @__PURE__ */ m(u.Activity, { mode: l ? "visible" : "hidden", children: /* @__PURE__ */ m("div", { style: l }) })
   ] }) : null;
 }, _ = (t) => t.type === "group", Y = (t, e = []) => {
   if (_(t))
@@ -1346,7 +1347,7 @@ const ve = (t, e) => {
     return { tree: a, newGroupId: o };
   const d = s.side === "a" ? { ...c, a } : { ...c, b: a };
   return { tree: j(t, i, d), newGroupId: o };
-}, Ne = (t, e) => {
+}, ze = (t, e) => {
   const n = V(t, e);
   if (!n || n.splitPath === null)
     return { tree: t, survivorGroupId: e };
@@ -1355,7 +1356,7 @@ const ve = (t, e) => {
     return { tree: t, survivorGroupId: e };
   const s = n.side === "a" ? o.b : o.a, a = j(t, r, s), i = _(s) ? s.groupId : Y(s)[0] ?? null;
   return { tree: a, survivorGroupId: i };
-}, ze = (t, e, n) => {
+}, $e = (t, e, n) => {
   const r = q(t, e);
   if (_(r))
     return t;
@@ -1368,17 +1369,17 @@ const ve = (t, e) => {
     const a = o.groups[s];
     if (!a || a.tabs.length > 0 || Object.keys(o.groups).length <= 1)
       return o;
-    const { tree: c, survivorGroupId: d } = Ne(o.tree, s), { [s]: u, ...p } = o.groups, g = Y(c), v = o.focusedGroupId === s ? d ?? g[0] ?? null : o.focusedGroupId;
+    const { tree: c, survivorGroupId: d } = ze(o.tree, s), { [s]: l, ...p } = o.groups, g = Y(c), v = o.focusedGroupId === s ? d ?? g[0] ?? null : o.focusedGroupId;
     return { ...o, tree: c, groups: p, groupOrder: g, focusedGroupId: v };
   };
   return t.groupOrder.reduce((o, s) => r(o, s), t);
-}, $e = (t) => ({ id: t, tabIds: [], tabs: [], activeTabId: null }), ut = (t, e, n, r) => {
+}, Fe = (t) => ({ id: t, tabIds: [], tabs: [], activeTabId: null }), ut = (t, e, n, r) => {
   const o = { ...t.groups }, s = o[e];
   if (!s)
     throw new Error(`Group ${e} does not exist.`);
-  const a = { ...t.panels, [n.id]: n }, i = [...s.tabIds, n.id], c = r ? n.id : s.activeTabId ?? n.id, d = i.map((p) => a[p]), u = { ...s, tabIds: i, tabs: d, activeTabId: c };
-  return o[e] = u, { ...t, panels: a, groups: o };
-}, Fe = (t, e, n) => {
+  const a = { ...t.panels, [n.id]: n }, i = [...s.tabIds, n.id], c = r ? n.id : s.activeTabId ?? n.id, d = i.map((p) => a[p]), l = { ...s, tabIds: i, tabs: d, activeTabId: c };
+  return o[e] = l, { ...t, panels: a, groups: o };
+}, Xe = (t, e, n) => {
   const r = { ...t.groups }, o = r[e];
   if (!o)
     throw new Error(`Group ${e} does not exist.`);
@@ -1388,8 +1389,8 @@ const ve = (t, e) => {
   const s = t.groups[e], a = t.groups[n];
   if (!s || !a)
     throw new Error("moveTab: source or target group is missing.");
-  const i = { ...t.groups }, c = s.tabIds.filter((p) => p !== r), d = [...a.tabIds.filter((p) => p !== r), r], u = s.activeTabId === r ? c[0] ?? null : s.activeTabId;
-  return i[e] = { ...s, tabIds: c, tabs: c.map((p) => t.panels[p]), activeTabId: u }, i[n] = { ...a, tabIds: d, tabs: d.map((p) => t.panels[p]), activeTabId: r }, { ...t, groups: i };
+  const i = { ...t.groups }, c = s.tabIds.filter((p) => p !== r), d = [...a.tabIds.filter((p) => p !== r), r], l = s.activeTabId === r ? c[0] ?? null : s.activeTabId;
+  return i[e] = { ...s, tabIds: c, tabs: c.map((p) => t.panels[p]), activeTabId: l }, i[n] = { ...a, tabIds: d, tabs: d.map((p) => t.panels[p]), activeTabId: r }, { ...t, groups: i };
 }, St = (t, e, n) => {
   const r = t.groups[e];
   if (!r)
@@ -1404,16 +1405,16 @@ const ve = (t, e) => {
     throw new Error(`addTabToGroupAtIndex: group ${e} not found.`);
   const a = { ...t.panels, [n.id]: n }, i = s.tabIds.slice(), c = Math.max(0, Math.min(r, i.length));
   i.splice(c, 0, n.id);
-  const d = i.map((g) => a[g]), u = o ? n.id : s.activeTabId ?? n.id, p = { ...t.groups, [e]: { ...s, tabIds: i, tabs: d, activeTabId: u } };
+  const d = i.map((g) => a[g]), l = o ? n.id : s.activeTabId ?? n.id, p = { ...t.groups, [e]: { ...s, tabIds: i, tabs: d, activeTabId: l } };
   return { ...t, panels: a, groups: p };
 }, N = (t, e) => {
   if (!t.groups[e])
     throw new Error(`setFocusedGroup: group ${e} not found.`);
   return { ...t, focusedGroupId: e };
-}, Xe = (t, e) => {
+}, Ye = (t, e) => {
   const n = e - 1, r = t.groupOrder[n];
   return r ? N(t, r) : t;
-}, Ye = (t) => {
+}, je = (t) => {
   const e = t.groupOrder, n = t.focusedGroupId;
   if (!n) {
     const s = e[0];
@@ -1421,7 +1422,7 @@ const ve = (t, e) => {
   }
   const r = e.indexOf(n), o = e[(r + 1) % e.length];
   return N(t, o);
-}, je = (t) => {
+}, Ue = (t) => {
   const e = t.groupOrder, n = t.focusedGroupId;
   if (!n) {
     const s = e[e.length - 1];
@@ -1430,20 +1431,20 @@ const ve = (t, e) => {
   const r = e.indexOf(n), o = e[(r - 1 + e.length) % e.length];
   return N(t, o);
 }, xt = (t, e, n, r) => {
-  const { tree: o, newGroupId: s } = Tt(t.tree, e, n, r), a = { ...t.groups, [s]: $e(s) }, i = Y(o);
+  const { tree: o, newGroupId: s } = Tt(t.tree, e, n, r), a = { ...t.groups, [s]: Fe(s) }, i = Y(o);
   return { ...t, tree: o, groups: a, groupOrder: i, focusedGroupId: s };
-}, Rn = (t) => {
+}, Dn = (t) => {
   const n = { type: "group", groupId: "g_1" }, r = Object.fromEntries(t.map((i) => [i.id, i])), s = { g_1: { id: "g_1", tabIds: t.map((i) => i.id), tabs: t, activeTabId: t[0]?.id ?? null } };
   return { tree: n, panels: r, groups: s, groupOrder: ["g_1"], focusedGroupId: "g_1" };
-}, Ke = l.createContext(null), Ue = ({ value: t, children: e }) => /* @__PURE__ */ m(Ke.Provider, { value: t, children: e }), Gt = l.createContext(null), Ve = () => {
-  const t = l.useContext(Gt);
+}, Ke = u.createContext(null), Ve = ({ value: t, children: e }) => /* @__PURE__ */ m(Ke.Provider, { value: t, children: e }), Gt = u.createContext(null), We = () => {
+  const t = u.useContext(Gt);
   if (!t)
     throw new Error("useTree must be used within TreeProvider");
   return t;
-}, We = ({ value: t, children: e }) => /* @__PURE__ */ m(Gt.Provider, { value: t, children: e }), qe = l.createContext(null), Ze = ({ value: t, children: e }) => /* @__PURE__ */ m(qe.Provider, { value: t, children: e }), F = (t) => {
+}, qe = ({ value: t, children: e }) => /* @__PURE__ */ m(Gt.Provider, { value: t, children: e }), Ze = u.createContext(null), Je = ({ value: t, children: e }) => /* @__PURE__ */ m(Ze.Provider, { value: t, children: e }), F = (t) => {
   const e = Bt(t, Number.POSITIVE_INFINITY);
   return M(e, 1);
-}, Je = (t) => typeof t == "object" && t !== null, Qe = (t) => Je(t) ? "rows" in t ? !0 : "cols" in t : !1, Ct = (t) => {
+}, Qe = (t) => typeof t == "object" && t !== null, tn = (t) => Qe(t) ? "rows" in t ? !0 : "cols" in t : !1, Ct = (t) => {
   if (!t)
     return {
       rows: Number.POSITIVE_INFINITY,
@@ -1453,7 +1454,7 @@ const ve = (t, e) => {
     const n = F(t);
     return { rows: n, cols: n };
   }
-  if (Qe(t))
+  if (tn(t))
     return {
       rows: F(t.rows),
       cols: F(t.cols)
@@ -1468,13 +1469,13 @@ const ve = (t, e) => {
     return { horizontal: 1, vertical: 1 };
   const e = tt(t.a), n = tt(t.b);
   return t.direction === "horizontal" ? { horizontal: e.horizontal + n.horizontal, vertical: Math.max(e.vertical, n.vertical) } : { horizontal: Math.max(e.horizontal, n.horizontal), vertical: e.vertical + n.vertical };
-}, tn = (t, e, n) => {
+}, en = (t, e, n) => {
   const { tree: r } = Tt(t, e, n, () => "__preview__");
   return r;
 }, rt = (t, e, n, r) => {
   if (!Number.isFinite(r.rows) && !Number.isFinite(r.cols))
     return !0;
-  const o = tn(t, e, n), s = tt(o);
+  const o = en(t, e, n), s = tt(o);
   return !(s.horizontal > r.rows || s.vertical > r.cols);
 }, Et = {
   splitFocused: A("panelState/splitFocused", (t) => ({ direction: t })),
@@ -1500,7 +1501,7 @@ const ve = (t, e) => {
     (t) => t
   ),
   adjustSplitRatio: A("panelState/adjustSplitRatio", (t) => t)
-}, en = (t, e, n) => {
+}, nn = (t, e, n) => {
   const r = t.groups[e.fromGroupId], o = t.groups[e.targetGroupId];
   if (!r || !o || !r.tabs.find((p) => p.id === e.tabId))
     return t;
@@ -1513,14 +1514,14 @@ const ve = (t, e) => {
   const a = e.zone === "left" || e.zone === "right" ? "vertical" : "horizontal";
   if (!rt(t.tree, e.targetGroupId, a, n.splitLimits))
     return t;
-  const i = n.createGroupId(), c = xt(t, e.targetGroupId, a, () => i), d = e.zone === "left" || e.zone === "top" ? e.targetGroupId : i, u = lt(c, e.fromGroupId, d, e.tabId);
-  return N(u, d);
-}, nn = (t, e) => {
+  const i = n.createGroupId(), c = xt(t, e.targetGroupId, a, () => i), d = e.zone === "left" || e.zone === "top" ? e.targetGroupId : i, l = lt(c, e.fromGroupId, d, e.tabId);
+  return N(l, d);
+}, rn = (t, e) => {
   const n = t.groups[e.fromGroupId], r = t.groups[e.targetGroupId];
   if (!n || !r || !t.panels[e.tabId])
     return t;
   if (e.fromGroupId === e.targetGroupId) {
-    const g = n.tabIds.filter((T) => T !== e.tabId), v = Math.max(0, Math.min(e.targetIndex, g.length)), h = g.slice(0, v).concat([e.tabId], g.slice(v)), y = h.map((T) => t.panels[T]).filter(Boolean), w = { ...t.groups, [e.fromGroupId]: { ...n, tabIds: h, tabs: y } };
+    const g = n.tabIds.filter((T) => T !== e.tabId), v = Math.max(0, Math.min(e.targetIndex, g.length)), b = g.slice(0, v).concat([e.tabId], g.slice(v)), I = b.map((T) => t.panels[T]).filter(Boolean), w = { ...t.groups, [e.fromGroupId]: { ...n, tabIds: b, tabs: I } };
     return { ...t, groups: w };
   }
   const s = { ...t.groups }, a = n.tabIds.filter((g) => g !== e.tabId), i = a.map((g) => t.panels[g]);
@@ -1530,16 +1531,16 @@ const ve = (t, e) => {
     tabs: i,
     activeTabId: n.activeTabId === e.tabId ? i[0]?.id ?? null : n.activeTabId
   };
-  const c = r.tabIds.filter((g) => g !== e.tabId), d = Math.max(0, Math.min(e.targetIndex, c.length)), u = c.slice(0, d).concat([e.tabId], c.slice(d)), p = u.map((g) => t.panels[g]).filter(Boolean);
-  return s[e.targetGroupId] = { ...r, tabIds: u, tabs: p, activeTabId: e.tabId }, { ...t, groups: s, focusedGroupId: e.targetGroupId };
-}, rn = It(Et, {
+  const c = r.tabIds.filter((g) => g !== e.tabId), d = Math.max(0, Math.min(e.targetIndex, c.length)), l = c.slice(0, d).concat([e.tabId], c.slice(d)), p = l.map((g) => t.panels[g]).filter(Boolean);
+  return s[e.targetGroupId] = { ...r, tabIds: l, tabs: p, activeTabId: e.tabId }, { ...t, groups: s, focusedGroupId: e.targetGroupId };
+}, on = It(Et, {
   splitFocused: (t, e, n) => {
     const r = t.focusedGroupId ?? t.groupOrder[0] ?? null;
     return !r || !rt(t.tree, r, e.payload.direction, n.splitLimits) ? t : xt(t, r, e.payload.direction, n.createGroupId);
   },
-  focusGroupIndex: (t, e) => Xe(t, e.payload.index1Based),
-  focusNextGroup: (t) => Ye(t),
-  focusPrevGroup: (t) => je(t),
+  focusGroupIndex: (t, e) => Ye(t, e.payload.index1Based),
+  focusNextGroup: (t) => je(t),
+  focusPrevGroup: (t) => Ue(t),
   setActiveTab: (t, e) => St(t, e.payload.groupId, e.payload.tabId),
   addTab: (t, e) => {
     const { groupId: n, tab: r, index: o, makeActive: s } = e.payload;
@@ -1551,28 +1552,28 @@ const ve = (t, e) => {
     const o = { id: n.createPanelId(), title: e.payload.title, render: () => e.payload.title }, { groupId: s, index: a, makeActive: i } = e.payload;
     return typeof a == "number" ? dt(t, s, o, a, i ?? !0) : ut(t, s, o, i ?? !0);
   },
-  removeTab: (t, e) => Fe(t, e.payload.groupId, e.payload.tabId),
-  contentDrop: (t, e, n) => en(t, e.payload, n),
-  tabDrop: (t, e) => nn(t, e.payload),
+  removeTab: (t, e) => Xe(t, e.payload.groupId, e.payload.tabId),
+  contentDrop: (t, e, n) => nn(t, e.payload, n),
+  tabDrop: (t, e) => rn(t, e.payload),
   adjustSplitRatio: (t, e) => {
     const n = q(t.tree, e.payload.path);
     if (_(n))
       return t;
-    const r = ze(t.tree, e.payload.path, n.ratio + e.payload.deltaRatio);
+    const r = $e(t.tree, e.payload.path, n.ratio + e.payload.deltaRatio);
     return { ...t, tree: r };
   }
 }), pt = (t, e, n) => {
-  const r = rn[e.type];
+  const r = on[e.type];
   if (!r)
     return t;
   const o = r(t, e, n);
   return Q(o);
-}, Rt = l.createContext(null), $ = () => {
-  const t = l.useContext(Rt);
+}, Rt = u.createContext(null), $ = () => {
+  const t = u.useContext(Rt);
   if (!t)
     throw new Error("usePanelSystem must be used within PanelSystemProvider");
   return t;
-}, on = ({
+}, sn = ({
   initialState: t,
   createGroupId: e,
   createPanelId: n,
@@ -1581,56 +1582,56 @@ const ve = (t, e) => {
   splitLimits: s,
   children: a
 }) => {
-  const i = l.useMemo(() => Q(t), [t]), c = l.useMemo(() => Ct(s), [s]), d = l.useRef({ createGroupId: e, splitLimits: c, createPanelId: n });
+  const i = u.useMemo(() => Q(t), [t]), c = u.useMemo(() => Ct(s), [s]), d = u.useRef({ createGroupId: e, splitLimits: c, createPanelId: n });
   d.current.createGroupId = e, d.current.splitLimits = c, d.current.createPanelId = n;
-  const [u, p] = l.useReducer(
+  const [l, p] = u.useReducer(
     (S, C) => pt(S, C, d.current),
     i
-  ), g = l.useMemo(
-    () => r ? Q(r) : u,
-    [r, u]
-  ), v = l.useRef(g);
+  ), g = u.useMemo(
+    () => r ? Q(r) : l,
+    [r, l]
+  ), v = u.useRef(g);
   v.current = g;
-  const h = r !== void 0, y = l.useCallback(
+  const b = r !== void 0, I = u.useCallback(
     (S) => {
-      if (h) {
+      if (b) {
         const C = pt(v.current, S, d.current);
         o?.(C);
         return;
       }
       p(S);
     },
-    [h, o, p]
-  ), w = l.useMemo(() => ve(Et, y), [y]), T = l.useMemo(
+    [b, o, p]
+  ), w = u.useMemo(() => Ie(Et, I), [I]), T = u.useMemo(
     () => ({
       setActiveTab: w.setActiveTab,
       tabDrop: w.tabDrop
     }),
     [w]
-  ), b = l.useMemo(
+  ), h = u.useMemo(
     () => ({
       adjustSplitRatio: w.adjustSplitRatio
     }),
     [w]
-  ), I = l.useMemo(
+  ), y = u.useMemo(
     () => ({
       focusGroupIndex: w.focusGroupIndex,
       focusNextGroup: w.focusNextGroup,
       focusPrevGroup: w.focusPrevGroup
     }),
     [w]
-  ), f = l.useMemo(
+  ), f = u.useMemo(
     () => ({
       state: g,
-      dispatch: y,
+      dispatch: I,
       actions: w
     }),
-    [g, y, w]
+    [g, I, w]
   );
-  return /* @__PURE__ */ m(Rt.Provider, { value: f, children: /* @__PURE__ */ m(Ue, { value: T, children: /* @__PURE__ */ m(We, { value: b, children: /* @__PURE__ */ m(Ze, { value: I, children: a }) }) }) });
-}, sn = () => {
+  return /* @__PURE__ */ m(Rt.Provider, { value: f, children: /* @__PURE__ */ m(Ve, { value: T, children: /* @__PURE__ */ m(qe, { value: h, children: /* @__PURE__ */ m(Je, { value: y, children: a }) }) }) });
+}, an = () => {
   const { actions: t } = $();
-  return l.useMemo(
+  return u.useMemo(
     () => ({
       splitFocused: (e) => {
         t.splitFocused(e);
@@ -1649,128 +1650,129 @@ const ve = (t, e) => {
     }),
     [t]
   );
-}, an = () => {
-  const { actions: t } = $(), e = l.useCallback(
+}, cn = () => {
+  const { actions: t } = $(), e = u.useCallback(
     ({ fromGroupId: r, tabId: o, targetGroupId: s, zone: a }) => {
       t.contentDrop({ fromGroupId: r, tabId: o, targetGroupId: s, zone: a });
     },
     [t]
-  ), n = l.useCallback(
+  ), n = u.useCallback(
     ({ fromGroupId: r, tabId: o, targetGroupId: s, targetIndex: a }) => {
       t.tabDrop({ fromGroupId: r, tabId: o, targetGroupId: s, targetIndex: a });
     },
     [t]
   );
   return { onCommitContentDrop: e, onCommitTabDrop: n };
-}, cn = () => {
-  const t = re(), e = sn();
-  return l.useEffect(() => {
-    ie(t, e);
+}, un = () => {
+  const t = oe(), e = an();
+  return u.useEffect(() => {
+    ae(t, e);
   }, [t, e]), null;
-}, Pt = l.createContext(null), un = () => {
-  const t = l.useContext(Pt);
+}, Pt = u.createContext(null), ln = () => {
+  const t = u.useContext(Pt);
   if (!t)
     throw new Error("useContentRegistry must be used within ContentRegistryProvider");
   return t;
-}, ln = (t) => {
+}, dn = (t) => {
   const e = document.createElement("div");
   return e.setAttribute("data-panel-wrapper", t), e.style.display = "contents", e;
-}, dn = (t, e, n) => {
-  const [r] = l.useState(() => ln(t));
+}, pn = (t, e, n) => {
+  const [r] = u.useState(() => dn(t));
   return nt(() => (r.style.display = n ? "contents" : "none", e && r.parentElement !== e && e.appendChild(r), () => {
     r.parentElement?.removeChild(r);
   }), [r, e, n]), r;
-}, Dt = l.memo(
+}, Dt = u.memo(
   ({ panelId: t, content: e, placement: n, containerElement: r }) => {
-    const o = n?.isActive ?? !1, s = dn(t, r, o);
+    const o = n?.isActive ?? !1, s = pn(t, r, o);
     return ee(
-      /* @__PURE__ */ m(l.Activity, { mode: o ? "visible" : "hidden", children: e }),
+      /* @__PURE__ */ m(u.Activity, { mode: o ? "visible" : "hidden", children: e }),
       s
     );
   }
 );
 Dt.displayName = "PanelContentHost";
-const pn = ({
+const fn = ({
   children: t,
   panels: e,
   placements: n
 }) => {
-  const [r, o] = l.useState(/* @__PURE__ */ new Map()), s = l.useRef(/* @__PURE__ */ new Map()), a = l.useCallback((u, p) => {
-    o((g) => {
-      const v = new Map(g);
-      return p ? v.set(u, p) : v.delete(u), v;
+  const [r, o] = u.useState(/* @__PURE__ */ new Map()), s = u.useCallback((g, v) => {
+    o((b) => {
+      const I = new Map(b);
+      return v ? I.set(g, v) : I.delete(g), I;
     });
-  }, []), i = l.useMemo(
-    () => ({ registerContentContainer: a }),
-    [a]
-  ), c = l.useCallback((u, p) => {
-    const g = s.current.get(u);
-    if (g)
-      return g;
-    const v = p.render(p.id);
-    return s.current.set(u, v), v;
-  }, []), d = Object.keys(e);
-  return /* @__PURE__ */ H(Pt.Provider, { value: i, children: [
+  }, []), a = u.useMemo(
+    () => ({ registerContentContainer: s }),
+    [s]
+  ), i = u.useRef(e);
+  i.current = e;
+  const c = u.useCallback((g) => {
+    const v = i.current[g];
+    return v ? v.render(v.id) : null;
+  }, []), d = u.useMemo(() => Object.keys(e), [e]), { getCachedContent: l } = ne({
+    resolveContent: c,
+    validIds: d
+  }), p = Object.keys(e);
+  return /* @__PURE__ */ H(Pt.Provider, { value: a, children: [
     t,
-    d.map((u) => {
-      const p = e[u];
-      if (!p)
+    p.map((g) => {
+      if (!e[g])
         return null;
-      const g = n[u] ?? null, v = g ? r.get(g.groupId) ?? null : null, h = c(u, p);
+      const b = n[g] ?? null, I = b ? r.get(b.groupId) ?? null : null, w = l(g);
       return /* @__PURE__ */ m(
         Dt,
         {
-          panelId: u,
-          content: h,
-          placement: g,
-          containerElement: v
+          panelId: g,
+          content: w,
+          placement: b,
+          containerElement: I
         },
-        u
+        g
       );
     })
   ] });
-}, fn = ({
+}, gn = ({
   children: t,
   emptyContentComponent: e,
   doubleClickToAdd: n
 }) => {
-  const r = W(), { state: o, actions: s } = $(), { registerContentContainer: a } = un(), i = l.useCallback(() => l.createElement("div", { style: { color: "#888", fontSize: 12, padding: 12 } }, "No tabs"), []), c = e ?? i, d = l.useCallback(
+  const r = W(), { state: o, actions: s } = $(), { registerContentContainer: a } = ln(), i = u.useCallback(() => u.createElement("div", { style: { color: "#888", fontSize: 12, padding: 12 } }, "No tabs"), []), c = e ?? i, d = u.useCallback(
     (T) => {
-      const b = o.groups[T];
-      if (!b)
+      const h = o.groups[T];
+      if (!h)
         return null;
-      const I = b.tabIds.map((f) => o.panels[f]).filter(Boolean);
-      return { ...b, tabs: I };
+      const y = h.tabIds.map((f) => o.panels[f]).filter(Boolean);
+      return { ...h, tabs: y };
     },
     [o.groups, o.panels]
-  ), u = l.useCallback(
+  ), l = u.useCallback(
     (T) => {
-      const b = o.groups[T];
-      return !b || b.tabIds.length === 0 ? /* @__PURE__ */ m(c, {}) : null;
+      const h = o.groups[T];
+      return !h || h.tabIds.length === 0 ? /* @__PURE__ */ m(c, {}) : null;
     },
     [o.groups, c]
-  ), p = l.useCallback((T, b) => {
-    s.setActiveTab(T, b);
-  }, [s]), g = l.useCallback((T) => {
+  ), p = u.useCallback((T, h) => {
+    s.setActiveTab(T, h);
+  }, [s]), g = u.useCallback((T) => {
     s.addNewTab({ groupId: T, title: "New Tab", makeActive: !0 });
-  }, [s]), v = l.useCallback((T, b) => {
-    s.removeTab(T, b);
-  }, [s]), h = l.useCallback((T, b, I) => {
-    s.setActiveTab(b, T), r.onStartTabDrag(T, b, I);
-  }, [s, r]), y = l.useCallback((T, b) => {
-    const I = o.groups[T];
-    !I || !I.activeTabId || r.onStartContentDrag(T, I.activeTabId, b);
-  }, [o.groups, r]), w = l.useMemo(
-    () => ({ getGroup: d, getGroupContent: u, onClickTab: p, onAddTab: g, onCloseTab: v, onStartTabDrag: h, onStartContentDrag: y, doubleClickToAdd: n, registerContentContainer: a }),
-    [d, u, p, g, v, h, y, n, a]
+  }, [s]), v = u.useCallback((T, h) => {
+    s.removeTab(T, h);
+  }, [s]), b = u.useCallback((T, h, y) => {
+    s.setActiveTab(h, T), r.onStartTabDrag(T, h, y);
+  }, [s, r]), I = u.useCallback((T, h) => {
+    const y = o.groups[T];
+    !y || !y.activeTabId || r.onStartContentDrag(T, y.activeTabId, h);
+  }, [o.groups, r]), w = u.useMemo(
+    () => ({ getGroup: d, getGroupContent: l, onClickTab: p, onAddTab: g, onCloseTab: v, onStartTabDrag: b, onStartContentDrag: I, doubleClickToAdd: n, registerContentContainer: a }),
+    [d, l, p, g, v, b, I, n, a]
   );
-  return /* @__PURE__ */ m(de, { value: w, children: t });
-}, gn = ({
+  return /* @__PURE__ */ m(pe, { value: w, children: t });
+}, bn = ({
   children: t,
   emptyContentComponent: e,
   doubleClickToAdd: n
 }) => {
-  const { state: r } = $(), o = l.useMemo(() => {
+  const { state: r } = $(), o = u.useMemo(() => {
     const s = {};
     for (const [a, i] of Object.entries(r.groups))
       for (const c of i.tabIds)
@@ -1780,7 +1782,7 @@ const pn = ({
         };
     return s;
   }, [r.groups]);
-  return /* @__PURE__ */ m(pn, { panels: r.panels, placements: o, children: /* @__PURE__ */ m(fn, { emptyContentComponent: e, doubleClickToAdd: n, children: t }) });
+  return /* @__PURE__ */ m(fn, { panels: r.panels, placements: o, children: /* @__PURE__ */ m(gn, { emptyContentComponent: e, doubleClickToAdd: n, children: t }) });
 }, X = (t, e, n, r) => {
   if (_(t))
     return r;
@@ -1791,8 +1793,8 @@ const pn = ({
   }
   const a = n.h * t.ratio, i = n.h - a;
   return X(t.a, [...e, "a"], { x: n.x, y: n.y, w: n.w, h: a }, r), X(t.b, [...e, "b"], { x: n.x, y: n.y + a, w: n.w, h: i }, r), r;
-}, bn = ({ containerRef: t }) => {
-  const { state: e } = $(), { adjustSplitRatio: n } = Ve(), r = l.useMemo(() => X(e.tree, [], { x: 0, y: 0, w: 100, h: 100 }, []), [e.tree]), [o, s] = l.useState(null);
+}, hn = ({ containerRef: t }) => {
+  const { state: e } = $(), { adjustSplitRatio: n } = We(), r = u.useMemo(() => X(e.tree, [], { x: 0, y: 0, w: 100, h: 100 }, []), [e.tree]), [o, s] = u.useState(null);
   if (nt(() => {
     const i = t.current;
     if (!i)
@@ -1810,7 +1812,7 @@ const pn = ({
         return null;
       }
     }
-    const u = d(), p = u ? new u(() => c()) : null;
+    const l = d(), p = l ? new l(() => c()) : null;
     p && p.observe(i);
     const g = () => c();
     return window.addEventListener("scroll", g, !0), () => {
@@ -1824,43 +1826,43 @@ const pn = ({
       top: o.top + o.height * i.parentRect.y / 100,
       width: o.width * i.parentRect.w / 100,
       height: o.height * i.parentRect.h / 100
-    }, u = te;
+    }, l = te;
     if (i.direction === "vertical") {
-      const h = d.left + d.width * (i.linePos - i.parentRect.x) / i.parentRect.w, y = {
+      const b = d.left + d.width * (i.linePos - i.parentRect.x) / i.parentRect.w, I = {
         position: "fixed",
-        left: `calc(${Math.round(h)}px - ${u} / 2)`,
+        left: `calc(${Math.round(b)}px - ${l} / 2)`,
         top: Math.round(d.top),
-        width: u,
+        width: l,
         height: Math.round(d.height),
         cursor: "col-resize",
         pointerEvents: "auto"
       };
-      return /* @__PURE__ */ m("div", { style: y, children: /* @__PURE__ */ m(ot, { direction: "vertical", onResize: (T) => {
-        const b = o.width * i.parentRect.w / 100, I = b === 0 ? 0 : T / b;
-        n({ path: i.path, deltaRatio: I });
+      return /* @__PURE__ */ m("div", { style: I, children: /* @__PURE__ */ m(ot, { direction: "vertical", onResize: (T) => {
+        const h = o.width * i.parentRect.w / 100, y = h === 0 ? 0 : T / h;
+        n({ path: i.path, deltaRatio: y });
       } }) }, `split-${c}`);
     }
     const p = d.top + d.height * (i.linePos - i.parentRect.y) / i.parentRect.h, g = {
       position: "fixed",
       left: Math.round(d.left),
-      top: `calc(${Math.round(p)}px - ${u} / 2)`,
+      top: `calc(${Math.round(p)}px - ${l} / 2)`,
       width: Math.round(d.width),
-      height: u,
+      height: l,
       cursor: "row-resize",
       pointerEvents: "auto"
     };
-    return /* @__PURE__ */ m("div", { style: g, children: /* @__PURE__ */ m(ot, { direction: "horizontal", onResize: (h) => {
-      const y = o.height * i.parentRect.h / 100, w = y === 0 ? 0 : h / y;
+    return /* @__PURE__ */ m("div", { style: g, children: /* @__PURE__ */ m(ot, { direction: "horizontal", onResize: (b) => {
+      const I = o.height * i.parentRect.h / 100, w = I === 0 ? 0 : b / I;
       n({ path: i.path, deltaRatio: w });
     } }) }, `split-${c}`);
   };
   return /* @__PURE__ */ m("div", { style: { position: "fixed", inset: 0, pointerEvents: "none" }, children: r.map((i, c) => a(i, c)) });
-}, hn = {
+}, mn = {
   position: "relative",
   display: "flex",
   width: "100%",
   height: "100%"
-}, mn = ({
+}, vn = ({
   state: t,
   layoutMode: e,
   gridTracksInteractive: n,
@@ -1868,14 +1870,14 @@ const pn = ({
   tabBarComponent: o,
   panelGroupComponent: s
 }) => {
-  const a = (c) => r ? /* @__PURE__ */ m(r, { groupId: c }) : /* @__PURE__ */ m(Ce, { id: c, TabBarComponent: o, PanelGroupComponent: s });
+  const a = (c) => r ? /* @__PURE__ */ m(r, { groupId: c }) : /* @__PURE__ */ m(Ee, { id: c, TabBarComponent: o, PanelGroupComponent: s });
   if (e === "grid") {
-    const c = ue(t, a, !!n);
+    const c = le(t, a, !!n);
     return /* @__PURE__ */ m(st, { config: c.config, layers: c.layers });
   }
-  const i = ce(t, a);
+  const i = ue(t, a);
   return /* @__PURE__ */ m(st, { config: i.config, layers: i.layers });
-}, vn = ({
+}, In = ({
   containerRef: t,
   layoutMode: e,
   gridTracksInteractive: n,
@@ -1886,29 +1888,29 @@ const pn = ({
   tabBarComponent: i,
   panelGroupComponent: c,
   splitLimits: d,
-  emptyContentComponent: u,
+  emptyContentComponent: l,
   doubleClickToAdd: p
 }) => {
-  const { state: g } = $(), { onCommitContentDrop: v, onCommitTabDrop: h } = an(), y = l.useMemo(() => ({ ...hn, ...s }), [s]), w = l.useCallback(
-    ({ targetGroupId: T, zone: b }) => {
-      if (b === "center")
+  const { state: g } = $(), { onCommitContentDrop: v, onCommitTabDrop: b } = cn(), I = u.useMemo(() => ({ ...mn, ...s }), [s]), w = u.useCallback(
+    ({ targetGroupId: T, zone: h }) => {
+      if (h === "center")
         return !0;
-      const I = b === "left" || b === "right" ? "vertical" : "horizontal";
-      return rt(g.tree, T, I, d);
+      const y = h === "left" || h === "right" ? "vertical" : "horizontal";
+      return rt(g.tree, T, y, d);
     },
     [g.tree, d]
   );
-  return /* @__PURE__ */ m(pe, { children: /* @__PURE__ */ H(
-    ye,
+  return /* @__PURE__ */ m(fe, { children: /* @__PURE__ */ H(
+    Te,
     {
       containerRef: t,
       dragThresholdPx: r,
       onCommitContentDrop: v,
-      onCommitTabDrop: h,
+      onCommitTabDrop: b,
       isContentZoneAllowed: w,
       children: [
-        /* @__PURE__ */ m(gn, { emptyContentComponent: u, doubleClickToAdd: p, children: /* @__PURE__ */ m("div", { ref: t, className: a, style: y, children: /* @__PURE__ */ m(
-          mn,
+        /* @__PURE__ */ m(bn, { emptyContentComponent: l, doubleClickToAdd: p, children: /* @__PURE__ */ m("div", { ref: t, className: a, style: I, children: /* @__PURE__ */ m(
+          vn,
           {
             state: g,
             layoutMode: e,
@@ -1918,18 +1920,18 @@ const pn = ({
             panelGroupComponent: c
           }
         ) }) }),
-        /* @__PURE__ */ m(bn, { containerRef: t }),
-        /* @__PURE__ */ m(In, {})
+        /* @__PURE__ */ m(hn, { containerRef: t }),
+        /* @__PURE__ */ m(wn, {})
       ]
     }
   ) });
-}, In = () => {
+}, wn = () => {
   const t = W();
   return /* @__PURE__ */ H(et, { children: [
-    /* @__PURE__ */ m(Me, { suggest: t.suggest }),
-    /* @__PURE__ */ m(He, {})
+    /* @__PURE__ */ m(_e, { suggest: t.suggest }),
+    /* @__PURE__ */ m(Ne, {})
   ] });
-}, Pn = ({
+}, An = ({
   initialState: t,
   createGroupId: e,
   createPanelId: n,
@@ -1940,12 +1942,12 @@ const pn = ({
   emptyContentComponent: i,
   state: c,
   onStateChange: d,
-  className: u,
+  className: l,
   style: p,
   tabBarComponent: g,
   panelGroupComponent: v,
-  splitLimits: h,
-  doubleClickToAdd: y
+  splitLimits: b,
+  doubleClickToAdd: I
 }) => {
   if (!t)
     throw new Error("PanelSystem requires initialState.");
@@ -1957,20 +1959,20 @@ const pn = ({
     throw new Error("PanelSystem(layoutMode='grid') requires explicit 'gridTracksInteractive' flag.");
   if (s === void 0)
     throw new Error("PanelSystem requires explicit 'dragThresholdPx' value.");
-  const w = l.useRef(null), T = l.useMemo(() => Ct(h), [h]);
+  const w = u.useRef(null), T = u.useMemo(() => Ct(b), [b]);
   return /* @__PURE__ */ m(
-    on,
+    sn,
     {
       initialState: t,
       createGroupId: e,
       createPanelId: n,
       state: c,
       onStateChange: d,
-      splitLimits: h,
-      children: /* @__PURE__ */ H(se, { children: [
-        /* @__PURE__ */ m(cn, {}),
+      splitLimits: b,
+      children: /* @__PURE__ */ H(ie, { children: [
+        /* @__PURE__ */ m(un, {}),
         /* @__PURE__ */ m(
-          vn,
+          In,
           {
             containerRef: w,
             layoutMode: r,
@@ -1978,12 +1980,12 @@ const pn = ({
             dragThresholdPx: s,
             view: a,
             style: p,
-            className: u,
+            className: l,
             tabBarComponent: g,
             panelGroupComponent: v,
             splitLimits: T,
             emptyContentComponent: i,
-            doubleClickToAdd: y
+            doubleClickToAdd: I
           }
         )
       ] })
@@ -1991,18 +1993,18 @@ const pn = ({
   );
 };
 export {
-  Hn as CSS_VAR_PREFIX,
-  kn as Drawer,
-  Mn as DrawerLayers,
-  _n as FloatingWindow,
+  zn as CSS_VAR_PREFIX,
+  _n as Drawer,
+  On as DrawerLayers,
+  Bn as FloatingWindow,
   st as GridLayout,
-  Gn as HorizontalDivider,
-  Pn as PanelSystem,
+  En as HorizontalDivider,
+  An as PanelSystem,
   ot as ResizeHandle,
-  Rn as buildInitialState,
-  On as runTransition,
-  En as useFloatingState,
-  Cn as useLayerDragHandle,
-  Bn as useTransitionState
+  Dn as buildInitialState,
+  Ln as runTransition,
+  Pn as useFloatingState,
+  Rn as useLayerDragHandle,
+  Hn as useTransitionState
 };
 //# sourceMappingURL=index.js.map