react-panel-layout 0.4.2 → 0.5.1

package/dist/index.js

@@ -1,24 +1,25 @@
-import { u as Dt, a as At, b as kt, c as J, d as Mt, e as M, t as _t, R as ot, G as st } from "./GridLayout-CLvW8jID.js";
-import { D as Rr, f as Pr, r as Dr, g as Ar } from "./GridLayout-CLvW8jID.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-BzrIDrC9.js";
+import { D as _n, f as On, F as Bn, r as Ln, g as Hn } from "./GridLayout-BzrIDrC9.js";
 import { jsx as m, jsxs as H, Fragment as et } from "react/jsx-runtime";
-import * as l from "react";
-import { t as Ot, u as Bt, v as Lt, H as Ht, y as Nt, z as $t, A as zt, B as Xt, E as Yt, I as Ft, T as jt, J as Kt, K as Vt, L as Ut, M as Wt, N as qt, O as Zt, S as Jt } from "./styles-w0ZixggV.js";
-import { Q as Mr } from "./styles-w0ZixggV.js";
-import { a as rt } from "./usePivot-z9gumDf-.js";
-import { createPortal as Qt } from "react-dom";
-const te = (t) => ({
-  width: Ht,
+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";
+import { a as ne } from "./usePivot-BvOGxLQQ.js";
+const re = (t) => ({
+  width: zt,
   cursor: "col-resize",
   position: "relative",
   userSelect: "none",
-  backgroundColor: t === "drag" ? Ot : t === "hover" ? Bt : Lt
-}), Tr = ({ onResize: t, component: e, element: r }) => {
-  const { ref: n, isDragging: o, onPointerDown: s } = Dt({
+  backgroundColor: t === "drag" ? Lt : t === "hover" ? Ht : Nt
+}), 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 = {
-    ref: n,
-    style: te(o ? "drag" : a ? "hover" : "idle"),
+  }), [a, i] = u.useState(!1), c = {
+    ref: r,
+    style: re(o ? "drag" : a ? "hover" : "idle"),
     role: "separator",
     "aria-orientation": "vertical",
     "data-dragging": o ? "true" : void 0,
@@ -26,78 +27,146 @@ const te = (t) => ({
     onPointerEnter: () => i(!0),
     onPointerLeave: () => i(!1)
   };
-  return r ? l.cloneElement(r, c) : e ? /* @__PURE__ */ m(e, { ...c }) : /* @__PURE__ */ m("div", { ...c });
-}, xr = () => {
-  const { layerId: t } = At(), { getLayerHandleProps: e } = kt();
-  return l.useMemo(() => e(t), [e, t]);
-}, dt = l.createContext(null), ee = () => {
-  const t = l.useContext(dt);
+  return n ? u.cloneElement(n, c) : e ? /* @__PURE__ */ m(e, { ...c }) : /* @__PURE__ */ m("div", { ...c });
+}, Rn = () => {
+  const { layerId: t } = Mt(), { getLayerHandleProps: e } = _t();
+  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;
+        l[p.id] = {
+          position: g.defaultPosition ?? it,
+          size: g.defaultSize ?? at
+        };
+      }
+    }), 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 = u.useCallback(
+    (l) => {
+      const p = r.get(l);
+      return p?.floating?.size !== void 0 ? p.floating.size : e[l]?.size ?? at;
+    },
+    [r, e]
+  ), a = u.useCallback(
+    (l) => r.get(l)?.floating?.zIndex,
+    [r]
+  ), i = u.useCallback(
+    (l, p) => {
+      const g = r.get(l);
+      g?.floating && (g.floating.position === void 0 && n((v) => {
+        const b = v[l];
+        return b ? {
+          ...v,
+          [l]: { ...b, position: p }
+        } : v;
+      }), g.floating.onMove?.(p));
+    },
+    [r]
+  ), c = u.useCallback(
+    (l, p) => {
+      const g = r.get(l);
+      g?.floating && (g.floating.size === void 0 && n((v) => {
+        const b = v[l];
+        return b ? {
+          ...v,
+          [l]: { ...b, size: p }
+        } : v;
+      }), g.floating.onResize?.(p));
+    },
+    [r]
+  ), d = u.useCallback(
+    (l) => {
+      r.get(l)?.floating?.onClose?.();
+    },
+    [r]
+  );
+  return {
+    getPosition: o,
+    getSize: s,
+    getZIndex: a,
+    updatePosition: i,
+    updateSize: c,
+    close: d
+  };
+}, ft = u.createContext(null), oe = () => {
+  const t = u.useContext(ft);
   if (!t)
     throw new Error("useKeybindings must be used within KeybindingsProvider");
   return t;
-}, re = (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 r = t.key.length === 1 ? t.key.toUpperCase() : t.key;
-  return e.push(r), e.join("-");
-}, ne = ({ children: t, configure: e }) => {
-  const r = l.useRef({}), n = l.useCallback((a, i) => {
-    r.current = { ...r.current, [a]: i };
-  }, []), o = l.useCallback((a) => {
-    const i = { ...r.current };
-    delete i[a], r.current = i;
+  const n = t.key.length === 1 ? t.key.toUpperCase() : t.key;
+  return e.push(n), e.join("-");
+}, ie = ({ children: t, configure: e }) => {
+  const n = u.useRef({}), r = u.useCallback((a, i) => {
+    n.current = { ...n.current, [a]: i };
+  }, []), o = u.useCallback((a) => {
+    const i = { ...n.current };
+    delete i[a], n.current = i;
   }, []);
-  l.useEffect(() => {
+  u.useEffect(() => {
     const a = (i) => {
-      const c = re(i), u = r.current[c];
-      u && u(i);
+      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: n, unregister: o }), [n, o]);
-  return l.useEffect(() => {
+  const s = u.useMemo(() => ({ register: r, unregister: o }), [r, o]);
+  return u.useEffect(() => {
     e && e(s);
-  }, [s, e]), /* @__PURE__ */ m(dt.Provider, { value: s, children: t });
-}, oe = (t, e) => {
-  t.register("Mod-\\", (r) => {
-    r.preventDefault(), e.splitFocused("vertical");
-  }), t.register("Mod-Shift-\\", (r) => {
-    r.preventDefault(), e.splitFocused("horizontal");
+  }, [s, e]), /* @__PURE__ */ m(ft.Provider, { value: s, children: t });
+}, ae = (t, e) => {
+  t.register("Mod-\\", (n) => {
+    n.preventDefault(), e.splitFocused("vertical");
+  }), t.register("Mod-Shift-\\", (n) => {
+    n.preventDefault(), e.splitFocused("horizontal");
   });
-  for (const r of [1, 2, 3, 4, 5, 6, 7, 8, 9])
-    t.register(`Mod-${String(r)}`, (n) => {
-      n.preventDefault(), e.focusGroupIndex(r);
+  for (const n of [1, 2, 3, 4, 5, 6, 7, 8, 9])
+    t.register(`Mod-${String(n)}`, (r) => {
+      r.preventDefault(), e.focusGroupIndex(n);
     });
-  t.register("Alt-ArrowRight", (r) => {
-    r.preventDefault(), e.focusNextGroup();
-  }), t.register("Alt-ArrowLeft", (r) => {
-    r.preventDefault(), e.focusPrevGroup();
+  t.register("Alt-ArrowRight", (n) => {
+    n.preventDefault(), e.focusNextGroup();
+  }), t.register("Alt-ArrowLeft", (n) => {
+    n.preventDefault(), e.focusPrevGroup();
   });
-}, se = (t) => t.type === "group", pt = (t, e = { x: 0, y: 0, w: 100, h: 100 }) => {
-  const r = /* @__PURE__ */ new Map(), n = (o, s) => {
-    if (se(o)) {
-      r.set(o.groupId, s);
+}, 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 (ce(o)) {
+      n.set(o.groupId, s);
       return;
     }
     if (o.direction === "vertical") {
-      const c = s.w * o.ratio, u = s.w - c;
-      n(o.a, { x: s.x, y: s.y, w: c, h: s.h }), n(o.b, { x: s.x + c, y: s.y, w: u, h: s.h });
+      const c = s.w * o.ratio, d = s.w - c;
+      r(o.a, { x: s.x, y: s.y, w: c, h: s.h }), r(o.b, { x: s.x + c, y: s.y, w: d, h: s.h });
       return;
     }
     const a = s.h * o.ratio, i = s.h - a;
-    n(o.a, { x: s.x, y: s.y, w: s.w, h: a }), n(o.b, { x: s.x, y: s.y + a, w: s.w, h: i });
+    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 n(t, e), r;
-}, ie = (t, e) => {
-  const r = pt(t.tree), n = {
+  return r(t, e), n;
+}, ue = (t, e) => {
+  const n = gt(t.tree), r = {
     areas: [["root"]],
     rows: [{ size: "1fr" }],
     columns: [{ size: "1fr" }],
     gap: "0px",
     style: { position: "relative" }
-  }, o = Array.from(r.entries()).map(([s, a]) => {
+  }, o = Array.from(n.entries()).map(([s, a]) => {
     const i = {
       position: "absolute",
       left: `${a.x}%`,
@@ -115,167 +184,167 @@ const te = (t) => ({
       component: e(s)
     };
   });
-  return { config: n, layers: o };
-}, ae = (t, e, r) => {
-  const n = pt(t.tree), o = Array.from(new Set(Array.from(n.values()).flatMap((h) => [h.x, h.x + h.w]))).sort((h, w) => h - w), s = Array.from(new Set(Array.from(n.values()).flatMap((h) => [h.y, h.y + h.h]))).sort((h, w) => h - w), a = o.slice(1).map((h, w) => `${h - o[w]}fr`), i = s.slice(1).map((h, w) => `${h - s[w]}fr`), c = a.map((h) => ({ size: h, resizable: r })), u = i.map((h) => ({ size: h, resizable: r })), d = (h, w, I, T) => {
-    for (const [b, v] of n.entries())
-      if (h >= v.x && w <= v.x + v.w && I >= v.y && T <= v.y + v.h)
-        return b;
+  return { config: r, layers: o };
+}, 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 ".";
-  }, f = [];
-  for (let h = 0; h < s.length - 1; h += 1) {
-    const w = [];
-    for (let I = 0; I < o.length - 1; I += 1)
-      w.push(d(o[I], o[I + 1], s[h], s[h + 1]));
-    f.push(w);
+  }, p = [];
+  for (let b = 0; b < s.length - 1; b += 1) {
+    const I = [];
+    for (let w = 0; w < o.length - 1; w += 1)
+      I.push(l(o[w], o[w + 1], s[b], s[b + 1]));
+    p.push(I);
   }
   const g = {
-    areas: f,
-    rows: u,
+    areas: p,
+    rows: d,
     columns: c,
     gap: "0px"
-  }, y = Array.from(n.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: y };
-}, ft = l.createContext(null), ce = () => {
-  const t = l.useContext(ft);
+  return { config: g, layers: v };
+}, bt = u.createContext(null), de = () => {
+  const t = u.useContext(bt);
   if (!t)
     throw new Error("usePanelRenderContext must be used within PanelRenderProvider");
   return t;
-}, ue = ({ value: t, children: e }) => /* @__PURE__ */ m(ft.Provider, { value: t, children: e }), bt = l.createContext(null), gt = () => {
-  const t = l.useContext(bt);
+}, 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;
-}, le = ({ children: t }) => {
-  const e = l.useRef(/* @__PURE__ */ new Map()), r = l.useCallback((c) => {
-    const u = e.current.get(c);
-    if (u)
-      return u;
-    const d = { group: null, tabbar: null, content: null };
-    return e.current.set(c, d), d;
-  }, []), n = l.useCallback(
-    (c, u) => {
-      const d = r(c);
-      if (d.group = u, u === null) {
-        const f = e.current.get(c);
-        (f ? f.tabbar === null && f.content === null : !1) && e.current.delete(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 l = { group: null, tabbar: null, content: null };
+    return e.current.set(c, l), l;
+  }, []), r = u.useCallback(
+    (c, d) => {
+      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);
       }
     },
-    [r]
-  ), o = l.useCallback(
-    (c, u) => {
-      const d = r(c);
-      if (d.tabbar = u, u === null) {
-        const f = e.current.get(c);
-        (f ? f.group === null && f.content === null : !1) && e.current.delete(c);
+    [n]
+  ), o = u.useCallback(
+    (c, d) => {
+      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);
       }
     },
-    [r]
-  ), s = l.useCallback(
-    (c, u) => {
-      const d = r(c);
-      if (d.content = u, u === null) {
-        const f = e.current.get(c);
-        (f ? f.group === null && f.tabbar === null : !1) && e.current.delete(c);
+    [n]
+  ), s = u.useCallback(
+    (c, d) => {
+      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);
       }
     },
-    [r]
-  ), a = l.useCallback(() => e.current, []), i = l.useMemo(() => ({ setGroupEl: n, setTabbarEl: o, setContentEl: s, getAll: a }), [n, o, s, a]);
-  return /* @__PURE__ */ m(bt.Provider, { value: i, children: t });
-}, de = {
+    [n]
+  ), 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 });
+}, ge = {
   display: "flex",
   flexDirection: "column",
   width: "100%",
   height: "100%"
-}, pe = {
+}, be = {
   flex: "1 1 auto",
   minWidth: 0,
   minHeight: 0,
   position: "relative",
   overflow: "hidden"
 };
-function fe(t, e, r, n) {
-  return t ? l.cloneElement(t, r, n) : e ? /* @__PURE__ */ m(e, { ...r, children: n }) : /* @__PURE__ */ m("div", { ...r, children: n });
+function he(t, e, n, r) {
+  return t ? u.cloneElement(t, n, r) : e ? /* @__PURE__ */ m(e, { ...n, children: r }) : /* @__PURE__ */ m("div", { ...n, children: r });
 }
-function be(t, e, r, n) {
-  return t ? l.cloneElement(t, r, n) : e ? /* @__PURE__ */ m(e, { ...r, children: n }) : /* @__PURE__ */ m("div", { ...r, children: n });
+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 ge = ({
+const ve = ({
   group: t,
   tabbar: e,
-  content: r,
-  onContentPointerDown: n,
+  content: n,
+  onContentPointerDown: r,
   groupRef: o,
   contentRef: s,
   component: a,
   element: i,
   contentComponent: c,
-  contentElement: u
+  contentElement: d
 }) => {
-  const d = {
+  const l = {
     ref: o,
-    style: de,
+    style: ge,
     "data-group-id": t.id
-  }, g = fe(u, c, {
+  }, g = he(d, c, {
     ref: s,
-    style: pe,
+    style: be,
     "data-dnd-zone": "content",
-    onPointerDown: n
-  }, r);
-  return be(i, a, d, /* @__PURE__ */ H(et, { children: [
+    onPointerDown: r
+  }, n);
+  return me(i, a, l, /* @__PURE__ */ H(et, { children: [
     e,
     g
   ] }));
-}, ht = l.memo(ge, (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);
-ht.displayName = "PanelGroupView";
-const K = (t, e, r) => {
-  const n = t.left, o = t.top, s = t.width, a = t.height, i = e - n, c = r - o, u = s / 3, d = a / 3;
-  return i > u && i < s - u && c > d && c < a - d ? "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";
+}, 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 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) {
-    const n = (() => ({ type: t }));
-    return Object.defineProperty(n, "type", {
+    const r = (() => ({ type: t }));
+    return Object.defineProperty(r, "type", {
       value: t,
       writable: !1,
       enumerable: !0
-    }), n;
+    }), r;
   }
-  const r = ((...n) => {
-    const o = e(...n);
+  const n = ((...r) => {
+    const o = e(...r);
     return typeof o > "u" ? { type: t } : { type: t, payload: o };
   });
-  return Object.defineProperty(r, "type", {
+  return Object.defineProperty(n, "type", {
     value: t,
     writable: !1,
     enumerable: !0
-  }), r;
+  }), n;
 }
-const he = (t, e) => {
-  const r = {};
-  return Object.keys(t).forEach((n) => {
-    const o = t[n];
-    r[n] = ((...s) => {
+const Ie = (t, e) => {
+  const n = {};
+  return Object.keys(t).forEach((r) => {
+    const o = t[r];
+    n[r] = ((...s) => {
       const a = o(...s);
       return e(a), a;
     });
-  }), r;
-}, mt = (t, e) => {
-  const r = {};
-  return Object.keys(e).forEach((n) => {
-    const o = e[n];
+  }), n;
+}, It = (t, e) => {
+  const n = {};
+  return Object.keys(e).forEach((r) => {
+    const o = e[r];
     if (!o)
       return;
-    const s = t[n];
+    const s = t[r];
     if (!s)
-      throw new Error(`Missing action creator for key "${String(n)}"`);
-    r[s.type] = o;
-  }), r;
-}, vt = { phase: { kind: "idle" }, suggest: null, pointer: null, tabbarHover: null, draggingTabElement: null }, D = {
+      throw new Error(`Missing action creator for key "${String(r)}"`);
+    n[s.type] = o;
+  }), n;
+}, wt = { phase: { kind: "idle" }, suggest: null, pointer: null, tabbarHover: null, draggingTabElement: null }, D = {
   startContent: A(
     "START_CONTENT",
     (t) => t
@@ -291,7 +360,7 @@ const he = (t, e) => {
     (t) => t
   ),
   reset: A("RESET")
-}, me = mt(D, {
+}, we = It(D, {
   startContent: (t, e) => ({
     phase: {
       kind: "content",
@@ -323,322 +392,322 @@ const he = (t, e) => {
   setSuggest: (t, e) => ({ ...t, suggest: e.payload }),
   setPointer: (t, e) => ({ ...t, pointer: e.payload }),
   setTabbarHover: (t, e) => ({ ...t, tabbarHover: e.payload }),
-  reset: () => vt
-}), ve = (t, e) => {
-  const r = me[e.type];
-  return r ? r(t, e, void 0) : t;
-}, It = l.createContext(null), W = () => {
-  const t = l.useContext(It);
+  reset: () => wt
+}), ye = (t, e) => {
+  const n = we[e.type];
+  return n ? n(t, e, void 0) : t;
+}, yt = u.createContext(null), W = () => {
+  const t = u.useContext(yt);
   if (!t)
     throw new Error("usePanelInteractions must be used within InteractionsProvider");
   return t;
-}, Ie = ({
+}, Te = ({
   containerRef: t,
   dragThresholdPx: e,
-  onCommitContentDrop: r,
-  onCommitTabDrop: n,
+  onCommitContentDrop: n,
+  onCommitTabDrop: r,
   isContentZoneAllowed: o,
   children: s
 }) => {
-  const [a, i] = l.useReducer(ve, vt), c = gt(), u = l.useCallback(() => {
-    const I = Array.from(c.getAll().entries()), T = I.map(([p, x]) => ({ gid: p, el: x.content ?? x.group })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() })), b = I.map(([p, x]) => ({ gid: p, el: x.tabbar })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() })), v = I.map(([p, x]) => ({ gid: p, el: x.content ?? x.group })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() }));
-    return { groups: T, tabbars: b, contents: v };
-  }, [c]), d = J((I) => {
+  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 = I.clientX, v = I.clientY, p = a.phase;
-    if (p.kind === "idle")
+    const h = w.clientX, y = w.clientY, f = a.phase;
+    if (f.kind === "idle")
       return;
-    const x = Math.abs(b - p.startX), E = Math.abs(v - p.startY);
-    if (x < e && E < e) {
+    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: v })), p.kind === "content") {
-      const S = p.cache.groups.find(({ rect: G }) => b >= G.left && b <= G.right && v >= G.top && v <= G.bottom);
-      if (!S) {
+    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(S.rect, b, v);
-      if (o && !o({ targetGroupId: S.gid, zone: R })) {
+      const R = U(G.rect, h, y);
+      if (o && !o({ targetGroupId: G.gid, zone: R })) {
         i(D.setSuggest(null));
         return;
       }
-      i(D.setSuggest({ rect: S.rect, zone: R }));
+      i(D.setSuggest({ rect: G.rect, zone: R }));
       return;
     }
-    if (p.kind === "tab") {
-      const S = p.cache.tabbars.find(({ rect: C }) => b >= C.left && b <= C.right && v >= C.top && v <= C.bottom);
-      if (S) {
-        const k = Array.from(S.el.querySelectorAll("[role='tab']")).map(($) => $.getBoundingClientRect()), P = k.map(($) => $.left + $.width / 2), O = P.findIndex(($) => b < $), B = O === -1 ? P.length : O, Pt = k.length === 0 ? S.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: S.gid, index: B, rect: S.rect, insertX: Pt }));
+    if (f.kind === "tab") {
+      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) => 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 = p.cache.contents.find(({ rect: C }) => b >= C.left && b <= C.right && v >= C.top && v <= C.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 G = K(R.rect, b, v);
-      if (o && !o({ targetGroupId: R.gid, zone: G })) {
+      const x = U(R.rect, h, y);
+      if (o && !o({ targetGroupId: R.gid, zone: x })) {
         i(D.setSuggest(null));
         return;
       }
-      i(D.setSuggest({ rect: R.rect, zone: G }));
+      i(D.setSuggest({ rect: R.rect, zone: x }));
     }
-  }), f = J((I) => {
-    const T = t.current, b = a;
+  }), p = J((w) => {
+    const T = t.current, h = a;
     if (i(D.reset()), !T)
       return;
-    const v = I.clientX, p = I.clientY;
-    if (b.phase.kind === "idle")
+    const y = w.clientX, f = w.clientY;
+    if (h.phase.kind === "idle")
       return;
-    const x = Math.abs(v - b.phase.startX), E = Math.abs(p - b.phase.startY);
-    if (!(x < e && E < e)) {
-      if (b.phase.kind === "content") {
-        const S = b.phase.cache.groups.find(({ rect: C }) => v >= C.left && v <= C.right && p >= C.top && p <= C.bottom);
-        if (!S)
+    const S = Math.abs(y - h.phase.startX), C = Math.abs(f - h.phase.startY);
+    if (!(S < e && C < e)) {
+      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 = S.gid ?? null;
+        const R = G.gid ?? null;
         if (!R)
           return;
-        const G = K(S.rect, v, p);
-        if (o && !o({ targetGroupId: R, zone: G }))
+        const x = U(G.rect, y, f);
+        if (o && !o({ targetGroupId: R, zone: x }))
           return;
-        r({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: R, zone: G });
+        n({ fromGroupId: h.phase.fromGroupId, tabId: h.phase.tabId, targetGroupId: R, zone: x });
         return;
       }
-      if (b.phase.kind === "tab") {
-        const S = b.phase.cache.tabbars.find(({ rect: G }) => v >= G.left && v <= G.right && p >= G.top && p <= G.bottom);
-        if (S) {
-          const G = S.gid;
-          if (!G)
+      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)
             return;
-          const k = Array.from(S.el.querySelectorAll("[role='tab']")).map((B) => {
+          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) => v < B), O = P === -1 ? k.length : P;
-          n({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: G, 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: G }) => v >= G.left && v <= G.right && p >= G.top && p <= G.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 G = R.gid ?? null;
-          if (!G)
+          const x = R.gid ?? null;
+          if (!x)
             return;
-          const C = K(R.rect, v, p);
-          if (o && !o({ targetGroupId: G, zone: C }))
+          const E = U(R.rect, y, f);
+          if (o && !o({ targetGroupId: x, zone: E }))
             return;
-          r({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: G, zone: C });
+          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", d), window.addEventListener("pointerup", f, { once: !0 }), window.addEventListener("pointercancel", g, { once: !0 }), () => {
-        window.removeEventListener("pointermove", d), window.removeEventListener("pointerup", f), 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 y = l.useCallback((I, T, b) => {
-    if (b.button !== 0)
+  const v = u.useCallback((w, T, h) => {
+    if (h.button !== 0)
       return;
-    b.currentTarget.setPointerCapture(b.pointerId);
-    const v = u();
-    i(D.startContent({ x: b.clientX, y: b.clientY, groupId: I, tabId: T, cache: v }));
-  }, [u]), h = l.useCallback((I, 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 v = b.currentTarget;
-    v && v.setPointerCapture(b.pointerId);
-    const p = u();
-    i(D.startTab({ x: b.clientX, y: b.clientY, groupId: T, tabId: I, cache: p, element: v }));
-  }, [u]), w = l.useMemo(() => ({
+    const y = h.currentTarget;
+    y && y.setPointerCapture(h.pointerId);
+    const f = d();
+    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,
     dragPointer: a.pointer,
     tabbarHover: a.tabbarHover,
     draggingTabElement: a.draggingTabElement,
-    onStartContentDrag: y,
-    onStartTabDrag: h
-  }), [a.suggest, a.pointer, a.tabbarHover, a.phase, a.draggingTabElement, y, h]);
-  return /* @__PURE__ */ m(It.Provider, { value: w, children: s });
-}, it = {
+    onStartContentDrag: v,
+    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"
-}, we = ({
+}, Se = ({
   groupId: t,
   tab: e,
-  active: r,
-  dragging: n,
+  active: n,
+  dragging: r,
   onClickTab: o,
   onStartDrag: s,
   onCloseTab: a,
   tabComponent: i,
   tabElement: c,
-  onDoubleClick: u
+  onDoubleClick: d
 }) => {
-  const d = l.useEffectEvent(() => {
+  const l = u.useEffectEvent(() => {
     o(e.id);
-  }), f = l.useEffectEvent((w) => {
-    s && w.button === 0 && s(e.id, t, w);
+  }), p = u.useEffectEvent((I) => {
+    s && I.button === 0 && s(e.id, t, I);
   }), g = () => {
-    const w = !!a;
-    return /* @__PURE__ */ m(l.Activity, { mode: w ? "visible" : "hidden", children: /* @__PURE__ */ m(
+    const I = !!a;
+    return /* @__PURE__ */ m(u.Activity, { mode: I ? "visible" : "hidden", children: /* @__PURE__ */ m(
       "button",
       {
         type: "button",
         "aria-label": `Close tab ${e.title}`,
-        onClick: (I) => {
-          a && (I.stopPropagation(), a(t, e.id));
+        onClick: (w) => {
+          a && (w.stopPropagation(), a(t, e.id));
         },
         style: { marginLeft: 6 },
-        tabIndex: w ? void 0 : -1,
-        disabled: !w,
-        "aria-hidden": w ? void 0 : !0,
+        tabIndex: I ? void 0 : -1,
+        disabled: !I,
+        "aria-hidden": I ? void 0 : !0,
         children: "×"
       }
     ) });
-  }, y = {
+  }, v = {
     role: "tab",
-    "aria-selected": r,
-    tabIndex: r ? 0 : -1,
-    style: it,
-    onClick: d,
-    onPointerDown: f,
-    onDoubleClick: u,
+    "aria-selected": n,
+    tabIndex: n ? 0 : -1,
+    style: ct,
+    onClick: l,
+    onPointerDown: p,
+    onDoubleClick: d,
     "data-tab-id": e.id,
-    "data-active": r ? "true" : "false",
-    "data-dragging": n ? "true" : "false",
+    "data-active": n ? "true" : "false",
+    "data-dragging": r ? "true" : "false",
     children: /* @__PURE__ */ H(et, { children: [
       /* @__PURE__ */ m("span", { children: e.title }),
       g()
     ] })
-  }, h = {
+  }, b = {
     type: "button",
     role: "tab",
-    "aria-selected": r,
-    tabIndex: r ? 0 : -1,
-    style: it,
+    "aria-selected": n,
+    tabIndex: n ? 0 : -1,
+    style: ct,
     onClick: () => {
       o(e.id);
     },
-    onPointerDown: (w) => {
-      s && w.button === 0 && s(e.id, t, w);
+    onPointerDown: (I) => {
+      s && I.button === 0 && s(e.id, t, I);
     },
-    onDoubleClick: u,
+    onDoubleClick: d,
     children: /* @__PURE__ */ m("span", { children: e.title })
   };
-  return c ? c(h) : i ? /* @__PURE__ */ m(i, { ...h }) : /* @__PURE__ */ m("div", { ...y });
-}, ye = {
+  return c ? c(b) : i ? /* @__PURE__ */ m(i, { ...b }) : /* @__PURE__ */ m("div", { ...v });
+}, xe = {
   display: "flex",
   alignItems: "center"
-}, Te = {
+}, Ge = {
   flex: "1 1 auto",
   alignSelf: "stretch"
-}, xe = ({
+}, Ce = ({
   group: t,
   onClickTab: e,
-  onStartDrag: r,
-  rootRef: n,
+  onStartDrag: n,
+  rootRef: r,
   component: o,
   element: s,
   tabComponent: a,
   tabElement: i,
   onAddTab: c,
-  onCloseTab: u,
-  doubleClickToAdd: d
+  onCloseTab: d,
+  doubleClickToAdd: l
 }) => {
-  const { isTabDragging: f, draggingTabId: g } = W(), y = l.useRef(null), h = l.useCallback(
-    (p) => {
-      if (y.current = p, !!n) {
-        if (typeof n == "function") {
-          n(p);
+  const { isTabDragging: p, draggingTabId: g } = W(), v = u.useRef(null), b = u.useCallback(
+    (f) => {
+      if (v.current = f, !!r) {
+        if (typeof r == "function") {
+          r(f);
           return;
         }
         try {
-          n.current = p;
+          r.current = f;
         } catch {
         }
       }
     },
-    [n]
-  ), w = l.useEffectEvent((p) => {
-    const x = y.current ?? p.currentTarget;
-    if (!x)
+    [r]
+  ), I = u.useEffectEvent((f) => {
+    const S = v.current ?? f.currentTarget;
+    if (!S)
       return;
-    const E = Array.from(x.querySelectorAll('[role="tab"]'));
-    if (E.length === 0)
+    const C = Array.from(S.querySelectorAll('[role="tab"]'));
+    if (C.length === 0)
       return;
-    const S = (P) => {
-      const O = Math.max(0, Math.min(P, E.length - 1)), B = E[O];
+    const G = (P) => {
+      const O = Math.max(0, Math.min(P, C.length - 1)), B = C[O];
       B && B.focus();
-    }, R = document.activeElement, G = R ? E.indexOf(R) : E.findIndex((P) => P.getAttribute("data-tab-id") === t.activeTabId);
-    if (p.key === "ArrowRight") {
-      p.preventDefault();
-      const P = G >= 0 ? G + 1 : 0;
-      S(P >= E.length ? 0 : P);
+    }, R = document.activeElement, x = R ? C.indexOf(R) : C.findIndex((P) => P.getAttribute("data-tab-id") === t.activeTabId);
+    if (f.key === "ArrowRight") {
+      f.preventDefault();
+      const P = x >= 0 ? x + 1 : 0;
+      G(P >= C.length ? 0 : P);
       return;
     }
-    if (p.key === "ArrowLeft") {
-      p.preventDefault();
-      const P = G >= 0 ? G - 1 : E.length - 1;
-      S(P < 0 ? E.length - 1 : P);
+    if (f.key === "ArrowLeft") {
+      f.preventDefault();
+      const P = x >= 0 ? x - 1 : C.length - 1;
+      G(P < 0 ? C.length - 1 : P);
       return;
     }
-    if (p.key === "Home") {
-      p.preventDefault(), S(0);
+    if (f.key === "Home") {
+      f.preventDefault(), G(0);
       return;
     }
-    if (p.key === "End") {
-      p.preventDefault(), S(E.length - 1);
+    if (f.key === "End") {
+      f.preventDefault(), G(C.length - 1);
       return;
     }
-    if (p.key === "Enter" || p.key === " ") {
-      p.preventDefault();
-      const O = (G >= 0 ? E[G] : null)?.getAttribute("data-tab-id") ?? null;
+    if (f.key === "Enter" || f.key === " ") {
+      f.preventDefault();
+      const O = (x >= 0 ? C[x] : null)?.getAttribute("data-tab-id") ?? null;
       O && e(O);
       return;
     }
-    if (p.key === "Delete" || p.key === "Backspace") {
-      if (u) {
-        p.preventDefault();
-        const O = (G >= 0 ? E[G] : null)?.getAttribute("data-tab-id") ?? null;
-        O && u(t.id, O);
+    if (f.key === "Delete" || f.key === "Backspace") {
+      if (d) {
+        f.preventDefault();
+        const O = (x >= 0 ? C[x] : null)?.getAttribute("data-tab-id") ?? null;
+        O && d(t.id, O);
       }
       return;
     }
-    const C = (p.ctrlKey ? 1 : 0) + (p.metaKey ? 1 : 0) > 0, k = typeof p.key == "string" ? p.key.toLowerCase() : "";
-    if (C && k === "t") {
-      c && (p.preventDefault(), c(t.id));
+    const E = (f.ctrlKey ? 1 : 0) + (f.metaKey ? 1 : 0) > 0, k = typeof f.key == "string" ? f.key.toLowerCase() : "";
+    if (E && k === "t") {
+      c && (f.preventDefault(), c(t.id));
       return;
     }
   });
-  l.useEffect(() => {
-    const p = y.current;
-    if (!p)
+  u.useEffect(() => {
+    const f = v.current;
+    if (!f)
       return;
-    const x = p.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);
-    if (x === document.activeElement)
+    const S = f.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);
+    if (S === document.activeElement)
       return;
-    !p.contains(document.activeElement) && x && x.focus();
+    !f.contains(document.activeElement) && S && S.focus();
   }, [t.activeTabId]);
-  const I = {
-    style: ye,
+  const w = {
+    style: xe,
     role: "tablist",
     "data-tabbar": "true",
     "data-group-id": t.id,
-    "data-dragging": f ? "true" : "false",
-    onKeyDown: w
-  }, T = Mt({
+    "data-dragging": p ? "true" : "false",
+    onKeyDown: I
+  }, T = Ot({
     element: s,
     component: o
-  }), b = () => c ? /* @__PURE__ */ m(
+  }), h = () => c ? /* @__PURE__ */ m(
     "button",
     {
       type: "button",
@@ -648,85 +717,85 @@ const he = (t, e) => {
       },
       children: "+"
     }
-  ) : null, v = l.useCallback(() => {
-    d && c && c(t.id);
-  }, [d, c, t.id]);
-  return /* @__PURE__ */ H(T, { ...I, ref: h, onDoubleClick: v, children: [
-    t.tabs.map((p, x) => /* @__PURE__ */ m(
-      we,
+  ) : 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(
+      Se,
       {
         groupId: t.id,
-        tab: p,
-        active: t.activeTabId === p.id,
-        dragging: g === p.id,
+        tab: f,
+        active: t.activeTabId === f.id,
+        dragging: g === f.id,
         onClickTab: e,
-        onStartDrag: r,
-        onCloseTab: u,
+        onStartDrag: n,
+        onCloseTab: d,
         tabComponent: a,
         tabElement: i,
-        onDoubleClick: (E) => E.stopPropagation()
+        onDoubleClick: (C) => C.stopPropagation()
       },
-      `${t.id}:${p.id}:${x}`
+      `${t.id}:${f.id}:${S}`
     )),
-    /* @__PURE__ */ m("span", { style: Te }),
-    b()
+    /* @__PURE__ */ m("span", { style: Ge }),
+    h()
   ] });
-}, Ge = ({ id: t, TabBarComponent: e, PanelGroupComponent: r }) => {
-  const { getGroup: n, getGroupContent: o, onClickTab: s, onAddTab: a, onCloseTab: i, onStartTabDrag: c, doubleClickToAdd: u, registerContentContainer: d } = ce(), { setGroupEl: f, setTabbarEl: g, setContentEl: y } = gt(), h = l.useCallback(
-    (x) => {
-      f(t, x);
+}, 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, f]
-  ), w = l.useCallback(
-    (x) => {
-      y(t, x), d(t, x);
+    [t, p]
+  ), I = u.useCallback(
+    (S) => {
+      v(t, S), l(t, S);
     },
-    [t, y, d]
-  ), I = l.useCallback(
-    (x) => {
-      g(t, x);
+    [t, v, l]
+  ), w = u.useCallback(
+    (S) => {
+      g(t, S);
     },
     [t, g]
-  ), T = n(t);
+  ), T = r(t);
   if (!T)
     return null;
-  const b = o(t);
+  const h = o(t);
   return /* @__PURE__ */ m(
-    r ?? ((x) => /* @__PURE__ */ m(ht, { ...x })),
+    n ?? ((S) => /* @__PURE__ */ m(vt, { ...S })),
     {
       group: T,
       tabbar: /* @__PURE__ */ m(
-        e ?? xe,
+        e ?? Ce,
         {
-          rootRef: I,
+          rootRef: w,
           group: T,
-          onClickTab: (x) => s(t, x),
+          onClickTab: (S) => s(t, S),
           onAddTab: a,
           onCloseTab: i,
-          onStartDrag: (x, E, S) => c(x, E, S),
-          doubleClickToAdd: u
+          onStartDrag: (S, C, G) => c(S, C, G),
+          doubleClickToAdd: d
         }
       ),
-      content: b,
-      groupRef: h,
-      contentRef: w
+      content: h,
+      groupRef: b,
+      contentRef: I
     }
   );
-}, Se = (t, e) => {
-  const r = new Array(16);
-  for (let n = 0; n < 4; n++)
+}, Re = (t, e) => {
+  const n = new Array(16);
+  for (let r = 0; r < 4; r++)
     for (let o = 0; o < 4; o++)
-      r[n * 4 + o] = t[0 + o] * e[n * 4 + 0] + t[4 + o] * e[n * 4 + 1] + t[8 + o] * e[n * 4 + 2] + t[12 + o] * e[n * 4 + 3];
-  return r;
-}, V = (t) => {
+      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;
+}, K = (t) => {
   if (t.length !== 16)
     throw new Error("Matrix must have exactly 16 values");
-  const e = Object.freeze([...t]), r = (n) => {
-    const o = Se(e, n);
-    return V(o);
+  const e = Object.freeze([...t]), n = (r) => {
+    const o = Re(e, r);
+    return K(o);
   };
   return Object.freeze({
-    translate: (n = 0, o = 0, s = 0) => r([
+    translate: (r = 0, o = 0, s = 0) => n([
       1,
       0,
       0,
@@ -739,12 +808,12 @@ const he = (t, e) => {
       0,
       1,
       0,
-      n,
+      r,
       o,
       s,
       1
     ]),
-    translate3d: (n, o, s) => r([
+    translate3d: (r, o, s) => n([
       1,
       0,
       0,
@@ -757,12 +826,12 @@ const he = (t, e) => {
       0,
       1,
       0,
-      n,
+      r,
       o,
       s,
       1
     ]),
-    translateX: (n) => r([
+    translateX: (r) => n([
       1,
       0,
       0,
@@ -775,12 +844,12 @@ const he = (t, e) => {
       0,
       1,
       0,
-      n,
+      r,
       0,
       0,
       1
     ]),
-    translateY: (n) => r([
+    translateY: (r) => n([
       1,
       0,
       0,
@@ -794,11 +863,11 @@ const he = (t, e) => {
       1,
       0,
       0,
-      n,
+      r,
       0,
       1
     ]),
-    translateZ: (n) => r([
+    translateZ: (r) => n([
       1,
       0,
       0,
@@ -813,11 +882,11 @@ const he = (t, e) => {
       0,
       0,
       0,
-      n,
+      r,
       1
     ]),
-    scale: (n = 1, o = 1, s = 1) => r([
-      n,
+    scale: (r = 1, o = 1, s = 1) => n([
+      r,
       0,
       0,
       0,
@@ -834,8 +903,8 @@ const he = (t, e) => {
       0,
       1
     ]),
-    scale3d: (n, o, s) => r([
-      n,
+    scale3d: (r, o, s) => n([
+      r,
       0,
       0,
       0,
@@ -852,8 +921,8 @@ const he = (t, e) => {
       0,
       1
     ]),
-    scaleX: (n) => r([
-      n,
+    scaleX: (r) => n([
+      r,
       0,
       0,
       0,
@@ -870,13 +939,13 @@ const he = (t, e) => {
       0,
       1
     ]),
-    scaleY: (n) => r([
+    scaleY: (r) => n([
       1,
       0,
       0,
       0,
       0,
-      n,
+      r,
       0,
       0,
       0,
@@ -888,7 +957,7 @@ const he = (t, e) => {
       0,
       1
     ]),
-    scaleZ: (n) => r([
+    scaleZ: (r) => n([
       1,
       0,
       0,
@@ -899,16 +968,16 @@ const he = (t, e) => {
       0,
       0,
       0,
-      n,
+      r,
       0,
       0,
       0,
       0,
       1
     ]),
-    rotateX: (n) => {
-      const o = Math.cos(n), s = Math.sin(n);
-      return r([
+    rotateX: (r) => {
+      const o = Math.cos(r), s = Math.sin(r);
+      return n([
         1,
         0,
         0,
@@ -927,9 +996,9 @@ const he = (t, e) => {
         1
       ]);
     },
-    rotateY: (n) => {
-      const o = Math.cos(n), s = Math.sin(n);
-      return r([
+    rotateY: (r) => {
+      const o = Math.cos(r), s = Math.sin(r);
+      return n([
         o,
         0,
         -s,
@@ -948,9 +1017,9 @@ const he = (t, e) => {
         1
       ]);
     },
-    rotateZ: (n) => {
-      const o = Math.cos(n), s = Math.sin(n);
-      return r([
+    rotateZ: (r) => {
+      const o = Math.cos(r), s = Math.sin(r);
+      return n([
         o,
         s,
         0,
@@ -969,24 +1038,24 @@ const he = (t, e) => {
         1
       ]);
     },
-    rotate: (n, o, s, a) => {
+    rotate: (r, o, s, a) => {
       const i = Math.sqrt(o * o + s * s + a * a);
       if (i === 0)
-        return V(e);
+        return K(e);
       o /= i, s /= i, a /= i;
-      const c = Math.cos(n), u = Math.sin(n), d = 1 - c;
-      return r([
-        d * o * o + c,
-        d * o * s + u * a,
-        d * o * a - u * s,
+      const c = Math.cos(r), d = Math.sin(r), l = 1 - c;
+      return n([
+        l * o * o + c,
+        l * o * s + d * a,
+        l * o * a - d * s,
         0,
-        d * o * s - u * a,
-        d * s * s + c,
-        d * s * a + u * o,
+        l * o * s - d * a,
+        l * s * s + c,
+        l * s * a + d * o,
         0,
-        d * o * a + u * s,
-        d * s * a - u * o,
-        d * a * a + c,
+        l * o * a + d * s,
+        l * s * a - d * o,
+        l * a * a + c,
         0,
         0,
         0,
@@ -994,24 +1063,24 @@ const he = (t, e) => {
         1
       ]);
     },
-    rotate3d: (n, o, s, a) => {
-      const i = Math.sqrt(n * n + o * o + s * s);
+    rotate3d: (r, o, s, a) => {
+      const i = Math.sqrt(r * r + o * o + s * s);
       if (i === 0)
-        return V(e);
-      n /= i, o /= i, s /= i;
-      const c = Math.cos(a), u = Math.sin(a), d = 1 - c;
-      return r([
-        d * n * n + c,
-        d * n * o + u * s,
-        d * n * s - u * o,
+        return K(e);
+      r /= i, o /= i, s /= i;
+      const c = Math.cos(a), d = Math.sin(a), l = 1 - c;
+      return n([
+        l * r * r + c,
+        l * r * o + d * s,
+        l * r * s - d * o,
         0,
-        d * n * o - u * s,
-        d * o * o + c,
-        d * o * s + u * n,
+        l * r * o - d * s,
+        l * o * o + c,
+        l * o * s + d * r,
         0,
-        d * n * s + u * o,
-        d * o * s - u * n,
-        d * s * s + c,
+        l * r * s + d * o,
+        l * o * s - d * r,
+        l * s * s + c,
         0,
         0,
         0,
@@ -1019,9 +1088,9 @@ const he = (t, e) => {
         1
       ]);
     },
-    skew: (n = 0, o = 0) => {
-      const s = Math.tan(n), a = Math.tan(o);
-      return r([
+    skew: (r = 0, o = 0) => {
+      const s = Math.tan(r), a = Math.tan(o);
+      return n([
         1,
         a,
         0,
@@ -1040,9 +1109,9 @@ const he = (t, e) => {
         1
       ]);
     },
-    skewX: (n) => {
-      const o = Math.tan(n);
-      return r([
+    skewX: (r) => {
+      const o = Math.tan(r);
+      return n([
         1,
         0,
         0,
@@ -1061,9 +1130,9 @@ const he = (t, e) => {
         1
       ]);
     },
-    skewY: (n) => {
-      const o = Math.tan(n);
-      return r([
+    skewY: (r) => {
+      const o = Math.tan(r);
+      return n([
         1,
         o,
         0,
@@ -1082,10 +1151,10 @@ const he = (t, e) => {
         1
       ]);
     },
-    perspective: (n) => {
-      if (n === 0)
+    perspective: (r) => {
+      if (r === 0)
         throw new Error("Perspective distance cannot be zero");
-      return r([
+      return n([
         1,
         0,
         0,
@@ -1097,7 +1166,7 @@ const he = (t, e) => {
         0,
         0,
         1,
-        -1 / n,
+        -1 / r,
         0,
         0,
         0,
@@ -1114,7 +1183,7 @@ const he = (t, e) => {
     ].join(`
 `)
   });
-}, Ee = () => V([
+}, Pe = () => K([
   1,
   0,
   0,
@@ -1131,142 +1200,142 @@ const he = (t, e) => {
   0,
   0,
   1
-]), Ce = {
+]), De = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
-  zIndex: Nt
-}, Re = {
+  zIndex: $t
+}, Ae = {
   position: "absolute",
-  border: `${Xt} dashed ${Yt}`,
-  background: zt,
-  borderRadius: $t,
+  border: `${Yt} dashed ${jt}`,
+  background: Xt,
+  borderRadius: Ft,
   transformOrigin: "top left"
-}, L = (t, e) => e <= 0 ? 0 : M(t / e, 0), Pe = (t, e, r) => {
-  const { width: n, height: o } = t, s = r / 2, a = n > 0 ? n : 1, i = o > 0 ? o : 1, c = {
-    translateX: r,
-    translateY: r,
-    scaleX: L(M(n - r * 2, 0), a),
-    scaleY: L(M(o - r * 2, 0), i)
-  }, u = {
-    translateX: r,
-    translateY: r,
-    scaleX: L(M(n / 2 - r * 1.5, 0), a),
-    scaleY: L(M(o - r * 2, 0), i)
+}, 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,
+    scaleX: L(M(r - n * 2, 0), a),
+    scaleY: L(M(o - n * 2, 0), i)
   }, d = {
-    translateX: n / 2 + s,
-    translateY: r,
-    scaleX: L(M(n / 2 - r * 1.5, 0), a),
-    scaleY: L(M(o - r * 2, 0), i)
-  }, f = {
-    translateX: r,
-    translateY: r,
-    scaleX: L(M(n - r * 2, 0), a),
-    scaleY: L(M(o / 2 - r * 1.5, 0), i)
+    translateX: n,
+    translateY: n,
+    scaleX: L(M(r / 2 - n * 1.5, 0), a),
+    scaleY: L(M(o - n * 2, 0), i)
+  }, l = {
+    translateX: r / 2 + s,
+    translateY: n,
+    scaleX: L(M(r / 2 - n * 1.5, 0), a),
+    scaleY: L(M(o - n * 2, 0), i)
+  }, p = {
+    translateX: n,
+    translateY: n,
+    scaleX: L(M(r - n * 2, 0), a),
+    scaleY: L(M(o / 2 - n * 1.5, 0), i)
   }, g = {
-    translateX: r,
+    translateX: n,
     translateY: o / 2 + s,
-    scaleX: L(M(n - r * 2, 0), a),
-    scaleY: L(M(o / 2 - r * 1.5, 0), i)
-  }, y = {
+    scaleX: L(M(r - n * 2, 0), a),
+    scaleY: L(M(o / 2 - n * 1.5, 0), i)
+  }, v = {
     center: c,
-    left: u,
-    right: d,
-    top: f,
+    left: d,
+    right: l,
+    top: p,
     bottom: g
-  }, { translateX: h, translateY: w, scaleX: I, scaleY: T } = y[e];
-  return Ee().translate(h, w, 0).scale(I, T, 1).toCSS();
-}, De = (t, e) => {
-  const r = Ft;
+  }, { 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 {
-    ...Re,
+    ...Ae,
     left: t.left,
     top: t.top,
     width: t.width,
     height: t.height,
-    transform: Pe(t, e, r)
+    transform: ke(t, e, n)
   };
-}, Ae = ({ suggest: t }) => {
+}, _e = ({ suggest: t }) => {
   if (!t)
     return null;
-  const { rect: e, zone: r } = t, n = De(e, r);
-  return /* @__PURE__ */ m("div", { style: Ce, children: /* @__PURE__ */ m("div", { style: n }) });
-}, ke = typeof window < "u" && typeof document < "u", Me = (t) => {
-  const [e, r] = l.useState(null), [n, o] = l.useState(null);
-  return rt(() => {
-    if (!ke || !t) {
-      r(null), o(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 (!Oe || !t) {
+      n(null), o(null);
       return;
     }
     const s = t.getBoundingClientRect();
-    r({ width: s.width, height: s.height }), o(t.outerHTML);
-  }, [t]), { html: n, size: e };
-}, _e = {
+    n({ width: s.width, height: s.height }), o(t.outerHTML);
+  }, [t]), { html: r, size: e };
+}, Le = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
-  zIndex: Zt
-}, Oe = {
+  zIndex: Qt
+}, He = {
   position: "absolute",
-  width: qt,
-  borderRadius: Wt,
-  background: Ut,
-  boxShadow: Vt
-}, Be = () => {
-  const { isTabDragging: t, draggingTabId: e, dragPointer: r, tabbarHover: n, draggingTabElement: o } = W(), { html: s, size: a } = Me(o), i = r !== null && e !== null, c = l.useMemo(() => {
-    if (!(!i || !r))
+  width: Jt,
+  borderRadius: Zt,
+  background: qt,
+  boxShadow: Wt
+}, 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: r.x,
-        top: r.y,
-        transform: `translate(${jt}, ${Kt})`,
+        left: n.x,
+        top: n.y,
+        transform: `translate(${Kt}, ${Vt})`,
         pointerEvents: "none"
       };
-  }, [i, r]), u = l.useMemo(() => {
+  }, [i, n]), d = u.useMemo(() => {
     if (!(!c || !o))
       return a ? { ...c, width: a.width, height: a.height } : c;
-  }, [c, o, a]), d = l.useMemo(() => {
-    if (n)
+  }, [c, o, a]), l = u.useMemo(() => {
+    if (r)
       return {
-        ...Oe,
-        left: n.insertX,
-        top: n.rect.top + 4,
-        height: Math.max(0, n.rect.height - 8)
+        ...He,
+        left: r.insertX,
+        top: r.rect.top + 4,
+        height: Math.max(0, r.rect.height - 8)
       };
-  }, [n]);
-  return t ? /* @__PURE__ */ H("div", { style: _e, children: [
-    /* @__PURE__ */ m(l.Activity, { mode: u ? "visible" : "hidden", children: /* @__PURE__ */ m("div", { style: u, children: /* @__PURE__ */ m(
+  }, [r]);
+  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: d ? "visible" : "hidden", children: /* @__PURE__ */ m("div", { style: d }) })
+    /* @__PURE__ */ m(u.Activity, { mode: l ? "visible" : "hidden", children: /* @__PURE__ */ m("div", { style: l }) })
   ] }) : null;
-}, _ = (t) => t.type === "group", F = (t, e = []) => {
+}, _ = (t) => t.type === "group", Y = (t, e = []) => {
   if (_(t))
     return [...e, t.groupId];
-  const r = F(t.a, e);
-  return F(t.b, r);
-}, q = (t, e) => e.reduce((r, n) => _(r) ? r : r[n], t), j = (t, e, r) => {
+  const n = Y(t.a, e);
+  return Y(t.b, n);
+}, q = (t, e) => e.reduce((n, r) => _(n) ? n : n[r], t), j = (t, e, n) => {
   if (e.length === 0)
-    return r;
-  const [n, ...o] = e;
-  return _(t) ? t : n === "a" ? { ...t, a: j(t.a, o, r) } : { ...t, b: j(t.b, o, r) };
-}, U = (t, e, r = []) => {
+    return n;
+  const [r, ...o] = e;
+  return _(t) ? t : r === "a" ? { ...t, a: j(t.a, o, n) } : { ...t, b: j(t.b, o, n) };
+}, V = (t, e, n = []) => {
   if (_(t))
     return t.groupId === e ? { splitPath: null, side: null } : null;
   if (_(t.a) && t.a.groupId === e)
-    return { splitPath: r, side: "a" };
+    return { splitPath: n, side: "a" };
   if (_(t.b) && t.b.groupId === e)
-    return { splitPath: r, side: "b" };
-  const n = U(t.a, e, [...r, "a"]);
-  return n || U(t.b, e, [...r, "b"]);
-}, wt = (t, e, r, n) => {
-  const o = n(), s = U(t, e), a = {
+    return { splitPath: n, side: "b" };
+  const r = V(t.a, e, [...n, "a"]);
+  return r || V(t.b, e, [...n, "b"]);
+}, Tt = (t, e, n, r) => {
+  const o = r(), s = V(t, e), a = {
     type: "split",
-    direction: r,
+    direction: n,
     ratio: 0.5,
     a: { type: "group", groupId: e },
     b: { type: "group", groupId: o }
@@ -1276,139 +1345,139 @@ const he = (t, e) => {
   const i = s.splitPath, c = q(t, i);
   if (_(c))
     return { tree: a, newGroupId: o };
-  const u = s.side === "a" ? { ...c, a } : { ...c, b: a };
-  return { tree: j(t, i, u), newGroupId: o };
-}, Le = (t, e) => {
-  const r = U(t, e);
-  if (!r || r.splitPath === null)
+  const d = s.side === "a" ? { ...c, a } : { ...c, b: a };
+  return { tree: j(t, i, d), newGroupId: o };
+}, ze = (t, e) => {
+  const n = V(t, e);
+  if (!n || n.splitPath === null)
     return { tree: t, survivorGroupId: e };
-  const n = r.splitPath, o = q(t, n);
+  const r = n.splitPath, o = q(t, r);
   if (_(o))
     return { tree: t, survivorGroupId: e };
-  const s = r.side === "a" ? o.b : o.a, a = j(t, n, s), i = _(s) ? s.groupId : F(s)[0] ?? null;
+  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 };
-}, He = (t, e, r) => {
-  const n = q(t, e);
-  if (_(n))
+}, $e = (t, e, n) => {
+  const r = q(t, e);
+  if (_(r))
     return t;
-  const o = { ...n, ratio: M(r, 0.05, 0.95) };
+  const o = { ...r, ratio: M(n, 0.05, 0.95) };
   return j(t, e, o);
 }, Q = (t) => {
   if (Object.keys(t.groups).filter((o) => t.groups[o].tabIds.length === 0).length === 0)
     return t;
-  const n = (o, s) => {
+  const r = (o, s) => {
     const a = o.groups[s];
     if (!a || a.tabs.length > 0 || Object.keys(o.groups).length <= 1)
       return o;
-    const { tree: c, survivorGroupId: u } = Le(o.tree, s), { [s]: d, ...f } = o.groups, g = F(c), y = o.focusedGroupId === s ? u ?? g[0] ?? null : o.focusedGroupId;
-    return { ...o, tree: c, groups: f, groupOrder: g, focusedGroupId: y };
+    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) => n(o, s), t);
-}, Ne = (t) => ({ id: t, tabIds: [], tabs: [], activeTabId: null }), at = (t, e, r, n) => {
+  return t.groupOrder.reduce((o, s) => r(o, s), t);
+}, 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, [r.id]: r }, i = [...s.tabIds, r.id], c = n ? r.id : s.activeTabId ?? r.id, u = i.map((f) => a[f]), d = { ...s, tabIds: i, tabs: u, activeTabId: c };
-  return o[e] = d, { ...t, panels: a, groups: o };
-}, $e = (t, e, r) => {
-  const n = { ...t.groups }, o = n[e];
+  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.`);
-  const s = o.tabIds.filter((c) => c !== r), a = s.map((c) => t.panels[c]), i = o.activeTabId === r ? s[0] ?? null : o.activeTabId;
-  return n[e] = { ...o, tabIds: s, tabs: a, activeTabId: i }, { ...t, groups: n };
-}, ct = (t, e, r, n, o) => {
-  const s = t.groups[e], a = t.groups[r];
+  const s = o.tabIds.filter((c) => c !== n), a = s.map((c) => t.panels[c]), i = o.activeTabId === n ? s[0] ?? null : o.activeTabId;
+  return r[e] = { ...o, tabIds: s, tabs: a, activeTabId: i }, { ...t, groups: r };
+}, lt = (t, e, n, r, o) => {
+  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((f) => f !== n), u = [...a.tabIds.filter((f) => f !== n), n], d = s.activeTabId === n ? c[0] ?? null : s.activeTabId;
-  return i[e] = { ...s, tabIds: c, tabs: c.map((f) => t.panels[f]), activeTabId: d }, i[r] = { ...a, tabIds: u, tabs: u.map((f) => t.panels[f]), activeTabId: n }, { ...t, groups: i };
-}, yt = (t, e, r) => {
-  const n = t.groups[e];
-  if (!n)
+  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)
     throw new Error(`setActiveTab: group ${e} not found.`);
-  if (!n.tabIds.some((s) => s === r))
-    throw new Error(`setActiveTab: tab ${r} not found in group ${e}.`);
-  const o = { ...t.groups, [e]: { ...n, activeTabId: r } };
+  if (!r.tabIds.some((s) => s === n))
+    throw new Error(`setActiveTab: tab ${n} not found in group ${e}.`);
+  const o = { ...t.groups, [e]: { ...r, activeTabId: n } };
   return { ...t, groups: o, focusedGroupId: e };
-}, ut = (t, e, r, n, o) => {
+}, dt = (t, e, n, r, o) => {
   const s = t.groups[e];
   if (!s)
     throw new Error(`addTabToGroupAtIndex: group ${e} not found.`);
-  const a = { ...t.panels, [r.id]: r }, i = s.tabIds.slice(), c = Math.max(0, Math.min(n, i.length));
-  i.splice(c, 0, r.id);
-  const u = i.map((g) => a[g]), d = o ? r.id : s.activeTabId ?? r.id, f = { ...t.groups, [e]: { ...s, tabIds: i, tabs: u, activeTabId: d } };
-  return { ...t, panels: a, groups: f };
+  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]), 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 };
-}, ze = (t, e) => {
-  const r = e - 1, n = t.groupOrder[r];
-  return n ? N(t, n) : t;
-}, Xe = (t) => {
-  const e = t.groupOrder, r = t.focusedGroupId;
-  if (!r) {
+}, Ye = (t, e) => {
+  const n = e - 1, r = t.groupOrder[n];
+  return r ? N(t, r) : t;
+}, je = (t) => {
+  const e = t.groupOrder, n = t.focusedGroupId;
+  if (!n) {
     const s = e[0];
     return s ? N(t, s) : t;
   }
-  const n = e.indexOf(r), o = e[(n + 1) % e.length];
+  const r = e.indexOf(n), o = e[(r + 1) % e.length];
   return N(t, o);
-}, Ye = (t) => {
-  const e = t.groupOrder, r = t.focusedGroupId;
-  if (!r) {
+}, Ue = (t) => {
+  const e = t.groupOrder, n = t.focusedGroupId;
+  if (!n) {
     const s = e[e.length - 1];
     return s ? N(t, s) : t;
   }
-  const n = e.indexOf(r), o = e[(n - 1 + e.length) % e.length];
+  const r = e.indexOf(n), o = e[(r - 1 + e.length) % e.length];
   return N(t, o);
-}, Tt = (t, e, r, n) => {
-  const { tree: o, newGroupId: s } = wt(t.tree, e, r, n), a = { ...t.groups, [s]: Ne(s) }, i = F(o);
+}, xt = (t, e, n, r) => {
+  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 };
-}, Gr = (t) => {
-  const r = { type: "group", groupId: "g_1" }, n = 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: r, panels: n, groups: s, groupOrder: ["g_1"], focusedGroupId: "g_1" };
-}, Fe = l.createContext(null), je = ({ value: t, children: e }) => /* @__PURE__ */ m(Fe.Provider, { value: t, children: e }), xt = l.createContext(null), Ke = () => {
-  const t = l.useContext(xt);
+}, 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 = 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;
-}, Ve = ({ value: t, children: e }) => /* @__PURE__ */ m(xt.Provider, { value: t, children: e }), Ue = l.createContext(null), We = ({ value: t, children: e }) => /* @__PURE__ */ m(Ue.Provider, { value: t, children: e }), X = (t) => {
-  const e = _t(t, Number.POSITIVE_INFINITY);
+}, 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);
-}, qe = (t) => typeof t == "object" && t !== null, Ze = (t) => qe(t) ? "rows" in t ? !0 : "cols" in t : !1, Gt = (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,
       cols: Number.POSITIVE_INFINITY
     };
   if (typeof t == "number") {
-    const r = X(t);
-    return { rows: r, cols: r };
+    const n = F(t);
+    return { rows: n, cols: n };
   }
-  if (Ze(t))
+  if (tn(t))
     return {
-      rows: X(t.rows),
-      cols: X(t.cols)
+      rows: F(t.rows),
+      cols: F(t.cols)
     };
   const e = t;
   return {
-    rows: X(e.maxHorizontal),
-    cols: X(e.maxVertical)
+    rows: F(e.maxHorizontal),
+    cols: F(e.maxVertical)
   };
 }, tt = (t) => {
   if (_(t))
     return { horizontal: 1, vertical: 1 };
-  const e = tt(t.a), r = tt(t.b);
-  return t.direction === "horizontal" ? { horizontal: e.horizontal + r.horizontal, vertical: Math.max(e.vertical, r.vertical) } : { horizontal: Math.max(e.horizontal, r.horizontal), vertical: e.vertical + r.vertical };
-}, Je = (t, e, r) => {
-  const { tree: n } = wt(t, e, r, () => "__preview__");
-  return n;
-}, nt = (t, e, r, n) => {
-  if (!Number.isFinite(n.rows) && !Number.isFinite(n.cols))
+  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 };
+}, 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 = Je(t, e, r), s = tt(o);
-  return !(s.horizontal > n.rows || s.vertical > n.cols);
-}, St = {
+  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 })),
   focusGroupIndex: A("panelState/focusGroupIndex", (t) => ({ index1Based: t })),
   focusNextGroup: A("panelState/focusNextGroup"),
@@ -1432,137 +1501,137 @@ const he = (t, e) => {
     (t) => t
   ),
   adjustSplitRatio: A("panelState/adjustSplitRatio", (t) => t)
-}, Qe = (t, e, r) => {
-  const n = t.groups[e.fromGroupId], o = t.groups[e.targetGroupId];
-  if (!n || !o || !n.tabs.find((f) => f.id === e.tabId))
+}, 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;
   if (e.zone === "center" && e.fromGroupId === e.targetGroupId)
-    return yt(t, e.fromGroupId, e.tabId);
+    return St(t, e.fromGroupId, e.tabId);
   if (e.zone === "center") {
-    const f = ct(t, e.fromGroupId, e.targetGroupId, e.tabId);
-    return N(f, e.targetGroupId);
+    const p = lt(t, e.fromGroupId, e.targetGroupId, e.tabId);
+    return N(p, e.targetGroupId);
   }
   const a = e.zone === "left" || e.zone === "right" ? "vertical" : "horizontal";
-  if (!nt(t.tree, e.targetGroupId, a, r.splitLimits))
+  if (!rt(t.tree, e.targetGroupId, a, n.splitLimits))
     return t;
-  const i = r.createGroupId(), c = Tt(t, e.targetGroupId, a, () => i), u = e.zone === "left" || e.zone === "top" ? e.targetGroupId : i, d = ct(c, e.fromGroupId, u, e.tabId);
-  return N(d, u);
-}, tr = (t, e) => {
-  const r = t.groups[e.fromGroupId], n = t.groups[e.targetGroupId];
-  if (!r || !n || !t.panels[e.tabId])
+  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 = r.tabIds.filter((T) => T !== e.tabId), y = Math.max(0, Math.min(e.targetIndex, g.length)), h = g.slice(0, y).concat([e.tabId], g.slice(y)), w = h.map((T) => t.panels[T]).filter(Boolean), I = { ...t.groups, [e.fromGroupId]: { ...r, tabIds: h, tabs: w } };
-    return { ...t, groups: I };
+    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 = r.tabIds.filter((g) => g !== e.tabId), i = a.map((g) => t.panels[g]);
+  const s = { ...t.groups }, a = n.tabIds.filter((g) => g !== e.tabId), i = a.map((g) => t.panels[g]);
   s[e.fromGroupId] = {
-    ...r,
+    ...n,
     tabIds: a,
     tabs: i,
-    activeTabId: r.activeTabId === e.tabId ? i[0]?.id ?? null : r.activeTabId
+    activeTabId: n.activeTabId === e.tabId ? i[0]?.id ?? null : n.activeTabId
   };
-  const c = n.tabIds.filter((g) => g !== e.tabId), u = Math.max(0, Math.min(e.targetIndex, c.length)), d = c.slice(0, u).concat([e.tabId], c.slice(u)), f = d.map((g) => t.panels[g]).filter(Boolean);
-  return s[e.targetGroupId] = { ...n, tabIds: d, tabs: f, activeTabId: e.tabId }, { ...t, groups: s, focusedGroupId: e.targetGroupId };
-}, er = mt(St, {
-  splitFocused: (t, e, r) => {
-    const n = t.focusedGroupId ?? t.groupOrder[0] ?? null;
-    return !n || !nt(t.tree, n, e.payload.direction, r.splitLimits) ? t : Tt(t, n, e.payload.direction, r.createGroupId);
+  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) => ze(t, e.payload.index1Based),
-  focusNextGroup: (t) => Xe(t),
-  focusPrevGroup: (t) => Ye(t),
-  setActiveTab: (t, e) => yt(t, e.payload.groupId, e.payload.tabId),
+  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: r, tab: n, index: o, makeActive: s } = e.payload;
-    return typeof o == "number" ? ut(t, r, n, o, s ?? !0) : at(t, r, n, s ?? !0);
+    const { groupId: n, tab: r, index: o, makeActive: s } = e.payload;
+    return typeof o == "number" ? dt(t, n, r, o, s ?? !0) : ut(t, n, r, s ?? !0);
   },
-  addNewTab: (t, e, r) => {
-    if (!r.createPanelId)
+  addNewTab: (t, e, n) => {
+    if (!n.createPanelId)
       throw new Error("addNewTab requires PanelSystemProvider.createPanelId");
-    const o = { id: r.createPanelId(), title: e.payload.title, render: () => e.payload.title }, { groupId: s, index: a, makeActive: i } = e.payload;
-    return typeof a == "number" ? ut(t, s, o, a, i ?? !0) : at(t, s, o, i ?? !0);
+    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) => $e(t, e.payload.groupId, e.payload.tabId),
-  contentDrop: (t, e, r) => Qe(t, e.payload, r),
-  tabDrop: (t, e) => tr(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 r = q(t.tree, e.payload.path);
-    if (_(r))
+    const n = q(t.tree, e.payload.path);
+    if (_(n))
       return t;
-    const n = He(t.tree, e.payload.path, r.ratio + e.payload.deltaRatio);
-    return { ...t, tree: n };
+    const r = $e(t.tree, e.payload.path, n.ratio + e.payload.deltaRatio);
+    return { ...t, tree: r };
   }
-}), lt = (t, e, r) => {
-  const n = er[e.type];
-  if (!n)
+}), pt = (t, e, n) => {
+  const r = on[e.type];
+  if (!r)
     return t;
-  const o = n(t, e, r);
+  const o = r(t, e, n);
   return Q(o);
-}, Et = l.createContext(null), z = () => {
-  const t = l.useContext(Et);
+}, Rt = u.createContext(null), $ = () => {
+  const t = u.useContext(Rt);
   if (!t)
     throw new Error("usePanelSystem must be used within PanelSystemProvider");
   return t;
-}, rr = ({
+}, sn = ({
   initialState: t,
   createGroupId: e,
-  createPanelId: r,
-  state: n,
+  createPanelId: n,
+  state: r,
   onStateChange: o,
   splitLimits: s,
   children: a
 }) => {
-  const i = l.useMemo(() => Q(t), [t]), c = l.useMemo(() => Gt(s), [s]), u = l.useRef({ createGroupId: e, splitLimits: c, createPanelId: r });
-  u.current.createGroupId = e, u.current.splitLimits = c, u.current.createPanelId = r;
-  const [d, f] = l.useReducer(
-    (x, E) => lt(x, E, u.current),
+  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 [l, p] = u.useReducer(
+    (S, C) => pt(S, C, d.current),
     i
-  ), g = l.useMemo(
-    () => n ? Q(n) : d,
-    [n, d]
-  ), y = l.useRef(g);
-  y.current = g;
-  const h = n !== void 0, w = l.useCallback(
-    (x) => {
-      if (h) {
-        const E = lt(y.current, x, u.current);
-        o?.(E);
+  ), g = u.useMemo(
+    () => r ? Q(r) : l,
+    [r, l]
+  ), v = u.useRef(g);
+  v.current = g;
+  const b = r !== void 0, I = u.useCallback(
+    (S) => {
+      if (b) {
+        const C = pt(v.current, S, d.current);
+        o?.(C);
         return;
       }
-      f(x);
+      p(S);
     },
-    [h, o, f]
-  ), I = l.useMemo(() => he(St, w), [w]), T = l.useMemo(
+    [b, o, p]
+  ), w = u.useMemo(() => Ie(Et, I), [I]), T = u.useMemo(
     () => ({
-      setActiveTab: I.setActiveTab,
-      tabDrop: I.tabDrop
+      setActiveTab: w.setActiveTab,
+      tabDrop: w.tabDrop
     }),
-    [I]
-  ), b = l.useMemo(
+    [w]
+  ), h = u.useMemo(
     () => ({
-      adjustSplitRatio: I.adjustSplitRatio
+      adjustSplitRatio: w.adjustSplitRatio
     }),
-    [I]
-  ), v = l.useMemo(
+    [w]
+  ), y = u.useMemo(
     () => ({
-      focusGroupIndex: I.focusGroupIndex,
-      focusNextGroup: I.focusNextGroup,
-      focusPrevGroup: I.focusPrevGroup
+      focusGroupIndex: w.focusGroupIndex,
+      focusNextGroup: w.focusNextGroup,
+      focusPrevGroup: w.focusPrevGroup
     }),
-    [I]
-  ), p = l.useMemo(
+    [w]
+  ), f = u.useMemo(
     () => ({
       state: g,
-      dispatch: w,
-      actions: I
+      dispatch: I,
+      actions: w
     }),
-    [g, w, I]
+    [g, I, w]
   );
-  return /* @__PURE__ */ m(Et.Provider, { value: p, children: /* @__PURE__ */ m(je, { value: T, children: /* @__PURE__ */ m(Ve, { value: b, children: /* @__PURE__ */ m(We, { value: v, children: a }) }) }) });
-}, nr = () => {
-  const { actions: t } = z();
-  return l.useMemo(
+  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 u.useMemo(
     () => ({
       splitFocused: (e) => {
         t.splitFocused(e);
@@ -1581,341 +1650,342 @@ const he = (t, e) => {
     }),
     [t]
   );
-}, or = () => {
-  const { actions: t } = z(), e = l.useCallback(
-    ({ fromGroupId: n, tabId: o, targetGroupId: s, zone: a }) => {
-      t.contentDrop({ fromGroupId: n, tabId: o, targetGroupId: s, zone: a });
+}, 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]
-  ), r = l.useCallback(
-    ({ fromGroupId: n, tabId: o, targetGroupId: s, targetIndex: a }) => {
-      t.tabDrop({ fromGroupId: n, tabId: o, targetGroupId: s, targetIndex: a });
+  ), 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: r };
-}, sr = () => {
-  const t = ee(), e = nr();
-  return l.useEffect(() => {
-    oe(t, e);
+  return { onCommitContentDrop: e, onCommitTabDrop: n };
+}, un = () => {
+  const t = oe(), e = an();
+  return u.useEffect(() => {
+    ae(t, e);
   }, [t, e]), null;
-}, Ct = l.createContext(null), ir = () => {
-  const t = l.useContext(Ct);
+}, Pt = u.createContext(null), ln = () => {
+  const t = u.useContext(Pt);
   if (!t)
     throw new Error("useContentRegistry must be used within ContentRegistryProvider");
   return t;
-}, ar = (t) => {
+}, dn = (t) => {
   const e = document.createElement("div");
   return e.setAttribute("data-panel-wrapper", t), e.style.display = "contents", e;
-}, cr = (t, e, r) => {
-  const [n] = l.useState(() => ar(t));
-  return rt(() => (n.style.display = r ? "contents" : "none", e && n.parentElement !== e && e.appendChild(n), () => {
-    n.parentElement?.removeChild(n);
-  }), [n, e, r]), n;
-}, Rt = l.memo(
-  ({ panelId: t, content: e, placement: r, containerElement: n }) => {
-    const o = r?.isActive ?? !1, s = cr(t, n, o);
-    return Qt(
-      /* @__PURE__ */ m(l.Activity, { mode: o ? "visible" : "hidden", children: e }),
+}, 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 = u.memo(
+  ({ panelId: t, content: e, placement: n, containerElement: r }) => {
+    const o = n?.isActive ?? !1, s = pn(t, r, o);
+    return ee(
+      /* @__PURE__ */ m(u.Activity, { mode: o ? "visible" : "hidden", children: e }),
       s
     );
   }
 );
-Rt.displayName = "PanelContentHost";
-const ur = ({
+Dt.displayName = "PanelContentHost";
+const fn = ({
   children: t,
   panels: e,
-  placements: r
+  placements: n
 }) => {
-  const [n, o] = l.useState(/* @__PURE__ */ new Map()), s = l.useRef(/* @__PURE__ */ new Map()), a = l.useCallback((d, f) => {
-    o((g) => {
-      const y = new Map(g);
-      return f ? y.set(d, f) : y.delete(d), y;
+  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((d, f) => {
-    const g = s.current.get(d);
-    if (g)
-      return g;
-    const y = f.render(f.id);
-    return s.current.set(d, y), y;
-  }, []), u = Object.keys(e);
-  return /* @__PURE__ */ H(Ct.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,
-    u.map((d) => {
-      const f = e[d];
-      if (!f)
+    p.map((g) => {
+      if (!e[g])
         return null;
-      const g = r[d] ?? null, y = g ? n.get(g.groupId) ?? null : null, h = c(d, f);
+      const b = n[g] ?? null, I = b ? r.get(b.groupId) ?? null : null, w = l(g);
       return /* @__PURE__ */ m(
-        Rt,
+        Dt,
         {
-          panelId: d,
-          content: h,
-          placement: g,
-          containerElement: y
+          panelId: g,
+          content: w,
+          placement: b,
+          containerElement: I
         },
-        d
+        g
       );
     })
   ] });
-}, lr = ({
+}, gn = ({
   children: t,
   emptyContentComponent: e,
-  doubleClickToAdd: r
+  doubleClickToAdd: n
 }) => {
-  const n = W(), { state: o, actions: s } = z(), { registerContentContainer: a } = ir(), i = l.useCallback(() => l.createElement("div", { style: { color: "#888", fontSize: 12, padding: 12 } }, "No tabs"), []), c = e ?? i, u = 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 v = b.tabIds.map((p) => o.panels[p]).filter(Boolean);
-      return { ...b, tabs: v };
+      const y = h.tabIds.map((f) => o.panels[f]).filter(Boolean);
+      return { ...h, tabs: y };
     },
     [o.groups, o.panels]
-  ), d = 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]
-  ), f = 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]), y = l.useCallback((T, b) => {
-    s.removeTab(T, b);
-  }, [s]), h = l.useCallback((T, b, v) => {
-    s.setActiveTab(b, T), n.onStartTabDrag(T, b, v);
-  }, [s, n]), w = l.useCallback((T, b) => {
-    const v = o.groups[T];
-    !v || !v.activeTabId || n.onStartContentDrag(T, v.activeTabId, b);
-  }, [o.groups, n]), I = l.useMemo(
-    () => ({ getGroup: u, getGroupContent: d, onClickTab: f, onAddTab: g, onCloseTab: y, onStartTabDrag: h, onStartContentDrag: w, doubleClickToAdd: r, registerContentContainer: a }),
-    [u, d, f, g, y, h, w, r, 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(ue, { value: I, children: t });
-}, dr = ({
+  return /* @__PURE__ */ m(pe, { value: w, children: t });
+}, bn = ({
   children: t,
   emptyContentComponent: e,
-  doubleClickToAdd: r
+  doubleClickToAdd: n
 }) => {
-  const { state: n } = z(), o = l.useMemo(() => {
+  const { state: r } = $(), o = u.useMemo(() => {
     const s = {};
-    for (const [a, i] of Object.entries(n.groups))
+    for (const [a, i] of Object.entries(r.groups))
       for (const c of i.tabIds)
         s[c] = {
           groupId: a,
           isActive: c === i.activeTabId
         };
     return s;
-  }, [n.groups]);
-  return /* @__PURE__ */ m(ur, { panels: n.panels, placements: o, children: /* @__PURE__ */ m(lr, { emptyContentComponent: e, doubleClickToAdd: r, children: t }) });
-}, Y = (t, e, r, n) => {
+  }, [r.groups]);
+  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 n;
-  const o = t.direction, s = o === "vertical" ? r.x + r.w * t.ratio : r.y + r.h * t.ratio;
-  if (n.push({ path: e, direction: o, parentRect: r, linePos: s }), o === "vertical") {
-    const c = r.w * t.ratio, u = r.w - c;
-    return Y(t.a, [...e, "a"], { x: r.x, y: r.y, w: c, h: r.h }, n), Y(t.b, [...e, "b"], { x: r.x + c, y: r.y, w: u, h: r.h }, n), n;
+    return r;
+  const o = t.direction, s = o === "vertical" ? n.x + n.w * t.ratio : n.y + n.h * t.ratio;
+  if (r.push({ path: e, direction: o, parentRect: n, linePos: s }), o === "vertical") {
+    const c = n.w * t.ratio, d = n.w - c;
+    return X(t.a, [...e, "a"], { x: n.x, y: n.y, w: c, h: n.h }, r), X(t.b, [...e, "b"], { x: n.x + c, y: n.y, w: d, h: n.h }, r), r;
   }
-  const a = r.h * t.ratio, i = r.h - a;
-  return Y(t.a, [...e, "a"], { x: r.x, y: r.y, w: r.w, h: a }, n), Y(t.b, [...e, "b"], { x: r.x, y: r.y + a, w: r.w, h: i }, n), n;
-}, pr = ({ containerRef: t }) => {
-  const { state: e } = z(), { adjustSplitRatio: r } = Ke(), n = l.useMemo(() => Y(e.tree, [], { x: 0, y: 0, w: 100, h: 100 }, []), [e.tree]), [o, s] = l.useState(null);
-  if (rt(() => {
+  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;
+}, 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)
       return;
     const c = () => {
-      const y = i.getBoundingClientRect();
-      s({ left: y.left, top: y.top, width: y.width, height: y.height });
+      const v = i.getBoundingClientRect();
+      s({ left: v.left, top: v.top, width: v.width, height: v.height });
     };
     c();
-    function u() {
+    function d() {
       try {
-        const y = window.ResizeObserver;
-        return typeof y == "function" ? y : null;
+        const v = window.ResizeObserver;
+        return typeof v == "function" ? v : null;
       } catch {
         return null;
       }
     }
-    const d = u(), f = d ? new d(() => c()) : null;
-    f && f.observe(i);
+    const l = d(), p = l ? new l(() => c()) : null;
+    p && p.observe(i);
     const g = () => c();
     return window.addEventListener("scroll", g, !0), () => {
-      window.removeEventListener("scroll", g, !0), f && f.disconnect();
+      window.removeEventListener("scroll", g, !0), p && p.disconnect();
     };
   }, [t, e.tree]), !o)
     return null;
   const a = (i, c) => {
-    const u = {
+    const d = {
       left: o.left + o.width * i.parentRect.x / 100,
       top: o.top + o.height * i.parentRect.y / 100,
       width: o.width * i.parentRect.w / 100,
       height: o.height * i.parentRect.h / 100
-    }, d = Jt;
+    }, l = te;
     if (i.direction === "vertical") {
-      const h = u.left + u.width * (i.linePos - i.parentRect.x) / i.parentRect.w, w = {
+      const b = d.left + d.width * (i.linePos - i.parentRect.x) / i.parentRect.w, I = {
         position: "fixed",
-        left: `calc(${Math.round(h)}px - ${d} / 2)`,
-        top: Math.round(u.top),
-        width: d,
-        height: Math.round(u.height),
+        left: `calc(${Math.round(b)}px - ${l} / 2)`,
+        top: Math.round(d.top),
+        width: l,
+        height: Math.round(d.height),
         cursor: "col-resize",
         pointerEvents: "auto"
       };
-      return /* @__PURE__ */ m("div", { style: w, children: /* @__PURE__ */ m(ot, { direction: "vertical", onResize: (T) => {
-        const b = o.width * i.parentRect.w / 100, v = b === 0 ? 0 : T / b;
-        r({ path: i.path, deltaRatio: v });
+      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 f = u.top + u.height * (i.linePos - i.parentRect.y) / i.parentRect.h, g = {
+    const p = d.top + d.height * (i.linePos - i.parentRect.y) / i.parentRect.h, g = {
       position: "fixed",
-      left: Math.round(u.left),
-      top: `calc(${Math.round(f)}px - ${d} / 2)`,
-      width: Math.round(u.width),
-      height: d,
+      left: Math.round(d.left),
+      top: `calc(${Math.round(p)}px - ${l} / 2)`,
+      width: Math.round(d.width),
+      height: l,
       cursor: "row-resize",
       pointerEvents: "auto"
     };
-    return /* @__PURE__ */ m("div", { style: g, children: /* @__PURE__ */ m(ot, { direction: "horizontal", onResize: (h) => {
-      const w = o.height * i.parentRect.h / 100, I = w === 0 ? 0 : h / w;
-      r({ path: i.path, deltaRatio: I });
+    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: n.map((i, c) => a(i, c)) });
-}, fr = {
+  return /* @__PURE__ */ m("div", { style: { position: "fixed", inset: 0, pointerEvents: "none" }, children: r.map((i, c) => a(i, c)) });
+}, mn = {
   position: "relative",
   display: "flex",
   width: "100%",
   height: "100%"
-}, br = ({
+}, vn = ({
   state: t,
   layoutMode: e,
-  gridTracksInteractive: r,
-  view: n,
+  gridTracksInteractive: n,
+  view: r,
   tabBarComponent: o,
   panelGroupComponent: s
 }) => {
-  const a = (c) => n ? /* @__PURE__ */ m(n, { groupId: c }) : /* @__PURE__ */ m(Ge, { 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 = ae(t, a, !!r);
+    const c = le(t, a, !!n);
     return /* @__PURE__ */ m(st, { config: c.config, layers: c.layers });
   }
-  const i = ie(t, a);
+  const i = ue(t, a);
   return /* @__PURE__ */ m(st, { config: i.config, layers: i.layers });
-}, gr = ({
+}, In = ({
   containerRef: t,
   layoutMode: e,
-  gridTracksInteractive: r,
-  dragThresholdPx: n,
+  gridTracksInteractive: n,
+  dragThresholdPx: r,
   view: o,
   style: s,
   className: a,
   tabBarComponent: i,
   panelGroupComponent: c,
-  splitLimits: u,
-  emptyContentComponent: d,
-  doubleClickToAdd: f
+  splitLimits: d,
+  emptyContentComponent: l,
+  doubleClickToAdd: p
 }) => {
-  const { state: g } = z(), { onCommitContentDrop: y, onCommitTabDrop: h } = or(), w = l.useMemo(() => ({ ...fr, ...s }), [s]), I = 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 v = b === "left" || b === "right" ? "vertical" : "horizontal";
-      return nt(g.tree, T, v, u);
+      const y = h === "left" || h === "right" ? "vertical" : "horizontal";
+      return rt(g.tree, T, y, d);
     },
-    [g.tree, u]
+    [g.tree, d]
   );
-  return /* @__PURE__ */ m(le, { children: /* @__PURE__ */ H(
-    Ie,
+  return /* @__PURE__ */ m(fe, { children: /* @__PURE__ */ H(
+    Te,
     {
       containerRef: t,
-      dragThresholdPx: n,
-      onCommitContentDrop: y,
-      onCommitTabDrop: h,
-      isContentZoneAllowed: I,
+      dragThresholdPx: r,
+      onCommitContentDrop: v,
+      onCommitTabDrop: b,
+      isContentZoneAllowed: w,
       children: [
-        /* @__PURE__ */ m(dr, { emptyContentComponent: d, doubleClickToAdd: f, children: /* @__PURE__ */ m("div", { ref: t, className: a, style: w, children: /* @__PURE__ */ m(
-          br,
+        /* @__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,
-            gridTracksInteractive: r,
+            gridTracksInteractive: n,
             view: o,
             tabBarComponent: i,
             panelGroupComponent: c
           }
         ) }) }),
-        /* @__PURE__ */ m(pr, { containerRef: t }),
-        /* @__PURE__ */ m(hr, {})
+        /* @__PURE__ */ m(hn, { containerRef: t }),
+        /* @__PURE__ */ m(wn, {})
       ]
     }
   ) });
-}, hr = () => {
+}, wn = () => {
   const t = W();
   return /* @__PURE__ */ H(et, { children: [
-    /* @__PURE__ */ m(Ae, { suggest: t.suggest }),
-    /* @__PURE__ */ m(Be, {})
+    /* @__PURE__ */ m(_e, { suggest: t.suggest }),
+    /* @__PURE__ */ m(Ne, {})
   ] });
-}, Sr = ({
+}, An = ({
   initialState: t,
   createGroupId: e,
-  createPanelId: r,
-  layoutMode: n,
+  createPanelId: n,
+  layoutMode: r,
   gridTracksInteractive: o,
   dragThresholdPx: s,
   view: a,
   emptyContentComponent: i,
   state: c,
-  onStateChange: u,
-  className: d,
-  style: f,
+  onStateChange: d,
+  className: l,
+  style: p,
   tabBarComponent: g,
-  panelGroupComponent: y,
-  splitLimits: h,
-  doubleClickToAdd: w
+  panelGroupComponent: v,
+  splitLimits: b,
+  doubleClickToAdd: I
 }) => {
   if (!t)
     throw new Error("PanelSystem requires initialState.");
   if (!e)
     throw new Error("PanelSystem requires explicit createGroupId function.");
-  if (!n)
+  if (!r)
     throw new Error("PanelSystem requires explicit layoutMode ('absolute' | 'grid').");
-  if (n === "grid" && o === void 0)
+  if (r === "grid" && o === void 0)
     throw new Error("PanelSystem(layoutMode='grid') requires explicit 'gridTracksInteractive' flag.");
   if (s === void 0)
     throw new Error("PanelSystem requires explicit 'dragThresholdPx' value.");
-  const I = l.useRef(null), T = l.useMemo(() => Gt(h), [h]);
+  const w = u.useRef(null), T = u.useMemo(() => Ct(b), [b]);
   return /* @__PURE__ */ m(
-    rr,
+    sn,
     {
       initialState: t,
       createGroupId: e,
-      createPanelId: r,
+      createPanelId: n,
       state: c,
-      onStateChange: u,
-      splitLimits: h,
-      children: /* @__PURE__ */ H(ne, { children: [
-        /* @__PURE__ */ m(sr, {}),
+      onStateChange: d,
+      splitLimits: b,
+      children: /* @__PURE__ */ H(ie, { children: [
+        /* @__PURE__ */ m(un, {}),
         /* @__PURE__ */ m(
-          gr,
+          In,
           {
-            containerRef: I,
-            layoutMode: n,
+            containerRef: w,
+            layoutMode: r,
             gridTracksInteractive: o,
             dragThresholdPx: s,
             view: a,
-            style: f,
-            className: d,
+            style: p,
+            className: l,
             tabBarComponent: g,
-            panelGroupComponent: y,
+            panelGroupComponent: v,
             splitLimits: T,
             emptyContentComponent: i,
-            doubleClickToAdd: w
+            doubleClickToAdd: I
           }
         )
       ] })
@@ -1923,16 +1993,18 @@ const ur = ({
   );
 };
 export {
-  Mr as CSS_VAR_PREFIX,
-  Rr as Drawer,
-  Pr as DrawerLayers,
+  zn as CSS_VAR_PREFIX,
+  _n as Drawer,
+  On as DrawerLayers,
+  Bn as FloatingWindow,
   st as GridLayout,
-  Tr as HorizontalDivider,
-  Sr as PanelSystem,
+  En as HorizontalDivider,
+  An as PanelSystem,
   ot as ResizeHandle,
-  Gr as buildInitialState,
-  Dr as runTransition,
-  xr as useLayerDragHandle,
-  Ar as useTransitionState
+  Dn as buildInitialState,
+  Ln as runTransition,
+  Pn as useFloatingState,
+  Rn as useLayerDragHandle,
+  Hn as useTransitionState
 };
 //# sourceMappingURL=index.js.map