react-panel-layout 0.4.1 → 0.5.0

package/dist/index.js

@@ -1,22 +1,24 @@
-import { u as Rt, a as Pt, b as Ct, c as J, d as Dt, e as _, f as At, t as kt, R as nt, G as ot } from "./GridLayout-DZCV1X-3.js";
-import { D as vr, g as Ir, r as wr, h as yr } from "./GridLayout-DZCV1X-3.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-tpSM0iM-.js";
+import { D as kn, f as Mn, F as _n, r as On, g as Bn } from "./GridLayout-tpSM0iM-.js";
 import { jsx as m, jsxs as H, Fragment as et } from "react/jsx-runtime";
 import * as l from "react";
-import { m as _t, n as Mt, o as Ot, H as Bt, r as Lt, s as $t, t as Ht, u as Nt, v as zt, w as Xt, T as Yt, x as Ft, y as jt, z as Vt, A as Kt, B as Ut, E as qt, S as Wt } from "./FloatingPanelFrame-BeP9z8EI.js";
-import { I as Gr } from "./FloatingPanelFrame-BeP9z8EI.js";
-const Zt = (t) => ({
-  width: Bt,
+import { t as Lt, u as Ht, v as Nt, H as zt, y as $t, z as Ft, A as Xt, B as Yt, E as jt, I as Kt, T as Ut, J as Vt, K as Wt, L as qt, M as Zt, N as Jt, O as Qt, S as te } from "./styles-w0ZixggV.js";
+import { Q as Hn } from "./styles-w0ZixggV.js";
+import { a as nt } from "./usePivot-z9gumDf-.js";
+import { createPortal as ee } from "react-dom";
+const ne = (t) => ({
+  width: zt,
   cursor: "col-resize",
   position: "relative",
   userSelect: "none",
-  backgroundColor: t === "drag" ? _t : t === "hover" ? Mt : Ot
-}), pr = ({ onResize: t, component: e, element: r }) => {
-  const { ref: n, isDragging: o, onPointerDown: s } = Rt({
+  backgroundColor: t === "drag" ? Lt : t === "hover" ? Ht : Nt
+}), Gn = ({ 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: Zt(o ? "drag" : a ? "hover" : "idle"),
+    ref: r,
+    style: ne(o ? "drag" : a ? "hover" : "idle"),
     role: "separator",
     "aria-orientation": "vertical",
     "data-dragging": o ? "true" : void 0,
@@ -24,78 +26,146 @@ const Zt = (t) => ({
     onPointerEnter: () => i(!0),
     onPointerLeave: () => i(!1)
   };
-  return r ? l.cloneElement(r, c) : e ? /* @__PURE__ */ m(e, { ...c }) : /* @__PURE__ */ m("div", { ...c });
-}, fr = () => {
-  const { layerId: t } = Pt(), { getLayerHandleProps: e } = Ct();
+  return n ? l.cloneElement(n, c) : e ? /* @__PURE__ */ m(e, { ...c }) : /* @__PURE__ */ m("div", { ...c });
+}, Cn = () => {
+  const { layerId: t } = Mt(), { getLayerHandleProps: e } = _t();
   return l.useMemo(() => e(t), [e, t]);
-}, lt = l.createContext(null), Jt = () => {
-  const t = l.useContext(lt);
+}, it = { left: 0, top: 0 }, at = { width: 400, height: 300 }, En = (t) => {
+  const [e, n] = l.useState(() => {
+    const u = {};
+    return t.forEach((p) => {
+      if (p.floating) {
+        const g = p.floating;
+        u[p.id] = {
+          position: g.defaultPosition ?? it,
+          size: g.defaultSize ?? at
+        };
+      }
+    }), u;
+  }), r = l.useMemo(() => {
+    const u = /* @__PURE__ */ new Map();
+    return t.forEach((p) => u.set(p.id, p)), u;
+  }, [t]), o = l.useCallback(
+    (u) => {
+      const p = r.get(u);
+      return p?.floating?.position !== void 0 ? p.floating.position : e[u]?.position ?? it;
+    },
+    [r, e]
+  ), s = l.useCallback(
+    (u) => {
+      const p = r.get(u);
+      return p?.floating?.size !== void 0 ? p.floating.size : e[u]?.size ?? at;
+    },
+    [r, e]
+  ), a = l.useCallback(
+    (u) => r.get(u)?.floating?.zIndex,
+    [r]
+  ), i = l.useCallback(
+    (u, p) => {
+      const g = r.get(u);
+      g?.floating && (g.floating.position === void 0 && n((v) => {
+        const h = v[u];
+        return h ? {
+          ...v,
+          [u]: { ...h, position: p }
+        } : v;
+      }), g.floating.onMove?.(p));
+    },
+    [r]
+  ), c = l.useCallback(
+    (u, p) => {
+      const g = r.get(u);
+      g?.floating && (g.floating.size === void 0 && n((v) => {
+        const h = v[u];
+        return h ? {
+          ...v,
+          [u]: { ...h, size: p }
+        } : v;
+      }), g.floating.onResize?.(p));
+    },
+    [r]
+  ), d = l.useCallback(
+    (u) => {
+      r.get(u)?.floating?.onClose?.();
+    },
+    [r]
+  );
+  return {
+    getPosition: o,
+    getSize: s,
+    getZIndex: a,
+    updatePosition: i,
+    updateSize: c,
+    close: d
+  };
+}, ft = l.createContext(null), re = () => {
+  const t = l.useContext(ft);
   if (!t)
     throw new Error("useKeybindings must be used within KeybindingsProvider");
   return t;
-}, Qt = (t) => {
+}, oe = (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("-");
-}, te = ({ children: t, configure: e }) => {
-  const r = l.useRef({}), n = l.useCallback((a, i) => {
-    r.current = { ...r.current, [a]: i };
+  const n = t.key.length === 1 ? t.key.toUpperCase() : t.key;
+  return e.push(n), e.join("-");
+}, se = ({ children: t, configure: e }) => {
+  const n = l.useRef({}), r = l.useCallback((a, i) => {
+    n.current = { ...n.current, [a]: i };
   }, []), o = l.useCallback((a) => {
-    const i = { ...r.current };
-    delete i[a], r.current = i;
+    const i = { ...n.current };
+    delete i[a], n.current = i;
   }, []);
   l.useEffect(() => {
     const a = (i) => {
-      const c = Qt(i), u = r.current[c];
-      u && u(i);
+      const c = oe(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]);
+  const s = l.useMemo(() => ({ register: r, unregister: o }), [r, o]);
   return l.useEffect(() => {
     e && e(s);
-  }, [s, e]), /* @__PURE__ */ m(lt.Provider, { value: s, children: t });
-}, ee = (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 });
+}, ie = (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();
   });
-}, re = (t) => t.type === "group", dt = (t, e = { x: 0, y: 0, w: 100, h: 100 }) => {
-  const r = /* @__PURE__ */ new Map(), n = (o, s) => {
-    if (re(o)) {
-      r.set(o.groupId, s);
+}, ae = (t) => t.type === "group", gt = (t, e = { x: 0, y: 0, w: 100, h: 100 }) => {
+  const n = /* @__PURE__ */ new Map(), r = (o, s) => {
+    if (ae(o)) {
+      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;
-}, ne = (t, e) => {
-  const r = dt(t.tree), n = {
+  return r(t, e), n;
+}, ce = (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}%`,
@@ -113,167 +183,167 @@ const Zt = (t) => ({
       component: e(s)
     };
   });
-  return { config: n, layers: o };
-}, oe = (t, e, r) => {
-  const n = dt(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, b, y) => {
-    for (const [f, I] of n.entries())
-      if (h >= I.x && w <= I.x + I.w && b >= I.y && y <= I.y + I.h)
-        return f;
+  return { config: r, layers: o };
+}, ue = (t, e, n) => {
+  const r = gt(t.tree), o = Array.from(new Set(Array.from(r.values()).flatMap((h) => [h.x, h.x + h.w]))).sort((h, y) => h - y), s = Array.from(new Set(Array.from(r.values()).flatMap((h) => [h.y, h.y + h.h]))).sort((h, y) => h - y), a = o.slice(1).map((h, y) => `${h - o[y]}fr`), i = s.slice(1).map((h, y) => `${h - s[y]}fr`), c = a.map((h) => ({ size: h, resizable: n })), d = i.map((h) => ({ size: h, resizable: n })), u = (h, y, w, T) => {
+    for (const [b, I] of r.entries())
+      if (h >= I.x && y <= I.x + I.w && w >= I.y && T <= I.y + I.h)
+        return b;
     return ".";
-  }, g = [];
+  }, p = [];
   for (let h = 0; h < s.length - 1; h += 1) {
-    const w = [];
-    for (let b = 0; b < o.length - 1; b += 1)
-      w.push(d(o[b], o[b + 1], s[h], s[h + 1]));
-    g.push(w);
+    const y = [];
+    for (let w = 0; w < o.length - 1; w += 1)
+      y.push(u(o[w], o[w + 1], s[h], s[h + 1]));
+    p.push(y);
   }
-  const v = {
-    areas: g,
-    rows: u,
+  const g = {
+    areas: p,
+    rows: d,
     columns: c,
     gap: "0px"
-  }, T = Array.from(n.keys()).map((h) => ({
+  }, v = Array.from(r.keys()).map((h) => ({
     id: h,
     gridArea: h,
     component: e(h)
   }));
-  return { config: v, layers: T };
-}, pt = l.createContext(null), se = () => {
-  const t = l.useContext(pt);
+  return { config: g, layers: v };
+}, bt = l.createContext(null), le = () => {
+  const t = l.useContext(bt);
   if (!t)
     throw new Error("usePanelRenderContext must be used within PanelRenderProvider");
   return t;
-}, ie = ({ value: t, children: e }) => /* @__PURE__ */ m(pt.Provider, { value: t, children: e }), ft = l.createContext(null), bt = () => {
-  const t = l.useContext(ft);
+}, de = ({ value: t, children: e }) => /* @__PURE__ */ m(bt.Provider, { value: t, children: e }), ht = l.createContext(null), mt = () => {
+  const t = l.useContext(ht);
   if (!t)
     throw new Error("useDomRegistry must be used within DomRegistryProvider");
   return t;
-}, ae = ({ 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 g = e.current.get(c);
-        (g ? g.tabbar === null && g.content === null : !1) && e.current.delete(c);
+}, pe = ({ children: t }) => {
+  const e = l.useRef(/* @__PURE__ */ new Map()), n = l.useCallback((c) => {
+    const d = e.current.get(c);
+    if (d)
+      return d;
+    const u = { group: null, tabbar: null, content: null };
+    return e.current.set(c, u), u;
+  }, []), r = l.useCallback(
+    (c, d) => {
+      const u = n(c);
+      if (u.group = d, d === null) {
+        const p = e.current.get(c);
+        (p ? p.tabbar === null && p.content === null : !1) && e.current.delete(c);
       }
     },
-    [r]
+    [n]
   ), o = l.useCallback(
-    (c, u) => {
-      const d = r(c);
-      if (d.tabbar = u, u === null) {
-        const g = e.current.get(c);
-        (g ? g.group === null && g.content === null : !1) && e.current.delete(c);
+    (c, d) => {
+      const u = n(c);
+      if (u.tabbar = d, d === null) {
+        const p = e.current.get(c);
+        (p ? p.group === null && p.content === null : !1) && e.current.delete(c);
       }
     },
-    [r]
+    [n]
   ), s = l.useCallback(
-    (c, u) => {
-      const d = r(c);
-      if (d.content = u, u === null) {
-        const g = e.current.get(c);
-        (g ? g.group === null && g.tabbar === null : !1) && e.current.delete(c);
+    (c, d) => {
+      const u = n(c);
+      if (u.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(ft.Provider, { value: i, children: t });
-}, ce = {
+    [n]
+  ), a = l.useCallback(() => e.current, []), i = l.useMemo(() => ({ setGroupEl: r, setTabbarEl: o, setContentEl: s, getAll: a }), [r, o, s, a]);
+  return /* @__PURE__ */ m(ht.Provider, { value: i, children: t });
+}, fe = {
   display: "flex",
   flexDirection: "column",
   width: "100%",
   height: "100%"
-}, ue = {
+}, ge = {
   flex: "1 1 auto",
   minWidth: 0,
   minHeight: 0,
   position: "relative",
   overflow: "hidden"
 };
-function le(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 be(t, e, n, r) {
+  return t ? l.cloneElement(t, n, r) : e ? /* @__PURE__ */ m(e, { ...n, children: r }) : /* @__PURE__ */ m("div", { ...n, children: r });
 }
-function de(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 ? l.cloneElement(t, n, r) : e ? /* @__PURE__ */ m(e, { ...n, children: r }) : /* @__PURE__ */ m("div", { ...n, children: r });
 }
-const pe = ({
+const me = ({
   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 u = {
     ref: o,
-    style: ce,
+    style: fe,
     "data-group-id": t.id
-  }, v = le(u, c, {
+  }, g = be(d, c, {
     ref: s,
-    style: ue,
+    style: ge,
     "data-dnd-zone": "content",
-    onPointerDown: n
-  }, r);
-  return de(i, a, d, /* @__PURE__ */ H(et, { children: [
+    onPointerDown: r
+  }, n);
+  return he(i, a, u, /* @__PURE__ */ H(et, { children: [
     e,
-    v
+    g
   ] }));
-}, gt = l.memo(pe, (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);
-gt.displayName = "PanelGroupView";
-const V = (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 = l.memo(me, (t, e) => t.group.id !== e.group.id || t.group.activeTabId !== e.group.activeTabId || t.group.tabs.length !== e.group.tabs.length ? !1 : t.group.tabs === e.group.tabs);
+vt.displayName = "PanelGroupView";
+const K = (t, e, n) => {
+  const r = t.left, o = t.top, s = t.width, a = t.height, i = e - r, c = n - o, d = s / 3, u = a / 3;
+  return i > d && i < s - d && c > u && c < a - u ? "center" : i < c && i < s - i && c < a - c ? "left" : s - i < c && s - i < i && c < a - c ? "right" : c < i && c < a - c && i < s - i ? "top" : "bottom";
 };
 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 fe = (t, e) => {
-  const r = {};
-  return Object.keys(t).forEach((n) => {
-    const o = t[n];
-    r[n] = ((...s) => {
+const ve = (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;
-}, ht = (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;
-}, mt = { 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
@@ -289,7 +359,7 @@ const fe = (t, e) => {
     (t) => t
   ),
   reset: A("RESET")
-}, be = ht(D, {
+}, Ie = It(D, {
   startContent: (t, e) => ({
     phase: {
       kind: "content",
@@ -321,322 +391,322 @@ const fe = (t, e) => {
   setSuggest: (t, e) => ({ ...t, suggest: e.payload }),
   setPointer: (t, e) => ({ ...t, pointer: e.payload }),
   setTabbarHover: (t, e) => ({ ...t, tabbarHover: e.payload }),
-  reset: () => mt
-}), ge = (t, e) => {
-  const r = be[e.type];
-  return r ? r(t, e, void 0) : t;
-}, vt = l.createContext(null), q = () => {
-  const t = l.useContext(vt);
+  reset: () => wt
+}), we = (t, e) => {
+  const n = Ie[e.type];
+  return n ? n(t, e, void 0) : t;
+}, yt = l.createContext(null), W = () => {
+  const t = l.useContext(yt);
   if (!t)
     throw new Error("usePanelInteractions must be used within InteractionsProvider");
   return t;
-}, he = ({
+}, ye = ({
   containerRef: t,
   dragThresholdPx: e,
-  onCommitContentDrop: r,
-  onCommitTabDrop: n,
+  onCommitContentDrop: n,
+  onCommitTabDrop: r,
   isContentZoneAllowed: o,
   children: s
 }) => {
-  const [a, i] = l.useReducer(ge, mt), c = bt(), u = l.useCallback(() => {
-    const b = Array.from(c.getAll().entries()), y = b.map(([p, G]) => ({ gid: p, el: G.content ?? G.group })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() })), f = b.map(([p, G]) => ({ gid: p, el: G.tabbar })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() })), I = b.map(([p, G]) => ({ gid: p, el: G.content ?? G.group })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() }));
-    return { groups: y, tabbars: f, contents: I };
-  }, [c]), d = J((b) => {
+  const [a, i] = l.useReducer(we, wt), c = mt(), d = l.useCallback(() => {
+    const w = Array.from(c.getAll().entries()), T = w.map(([f, S]) => ({ gid: f, el: S.content ?? S.group })).filter((f) => !!f.el).map((f) => ({ ...f, rect: f.el.getBoundingClientRect() })), b = w.map(([f, S]) => ({ gid: f, el: S.tabbar })).filter((f) => !!f.el).map((f) => ({ ...f, rect: f.el.getBoundingClientRect() })), I = w.map(([f, S]) => ({ gid: f, el: S.content ?? S.group })).filter((f) => !!f.el).map((f) => ({ ...f, rect: f.el.getBoundingClientRect() }));
+    return { groups: T, tabbars: b, contents: I };
+  }, [c]), u = J((w) => {
     if (!t.current)
       return;
-    const f = b.clientX, I = b.clientY, p = a.phase;
-    if (p.kind === "idle")
+    const b = w.clientX, I = w.clientY, f = a.phase;
+    if (f.kind === "idle")
       return;
-    const G = Math.abs(f - p.startX), E = Math.abs(I - p.startY);
-    if (G < e && E < e) {
+    const S = Math.abs(b - f.startX), C = Math.abs(I - 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: f, y: I })), p.kind === "content") {
-      const S = p.cache.groups.find(({ rect: x }) => f >= x.left && f <= x.right && I >= x.top && I <= x.bottom);
-      if (!S) {
+    if (i(D.setPointer({ x: b, y: I })), f.kind === "content") {
+      const G = f.cache.groups.find(({ rect: x }) => b >= x.left && b <= x.right && I >= x.top && I <= x.bottom);
+      if (!G) {
         i(D.setSuggest(null));
         return;
       }
-      const P = V(S.rect, f, I);
-      if (o && !o({ targetGroupId: S.gid, zone: P })) {
+      const R = K(G.rect, b, I);
+      if (o && !o({ targetGroupId: G.gid, zone: R })) {
         i(D.setSuggest(null));
         return;
       }
-      i(D.setSuggest({ rect: S.rect, zone: P }));
+      i(D.setSuggest({ rect: G.rect, zone: R }));
       return;
     }
-    if (p.kind === "tab") {
-      const S = p.cache.tabbars.find(({ rect: R }) => f >= R.left && f <= R.right && I >= R.top && I <= R.bottom);
-      if (S) {
-        const k = Array.from(S.el.querySelectorAll("[role='tab']")).map((N) => N.getBoundingClientRect()), C = k.map((N) => N.left + N.width / 2), O = C.findIndex((N) => f < N), B = O === -1 ? C.length : O, Et = 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: Et }));
+    if (f.kind === "tab") {
+      const G = f.cache.tabbars.find(({ rect: E }) => b >= E.left && b <= E.right && I >= E.top && I <= E.bottom);
+      if (G) {
+        const k = Array.from(G.el.querySelectorAll("[role='tab']")).map((z) => z.getBoundingClientRect()), P = k.map((z) => z.left + z.width / 2), O = P.findIndex((z) => b < z), B = O === -1 ? P.length : O, At = k.length === 0 ? G.rect.left + 8 : B === 0 ? k[0].left : B === k.length ? k[k.length - 1].right : (k[B - 1].right + k[B].left) / 2;
+        i(D.setTabbarHover({ groupId: G.gid, index: B, rect: G.rect, insertX: At }));
       } else
         i(D.setTabbarHover(null));
-      const P = p.cache.contents.find(({ rect: R }) => f >= R.left && f <= R.right && I >= R.top && I <= R.bottom);
-      if (!P) {
+      const R = f.cache.contents.find(({ rect: E }) => b >= E.left && b <= E.right && I >= E.top && I <= E.bottom);
+      if (!R) {
         i(D.setSuggest(null));
         return;
       }
-      const x = V(P.rect, f, I);
-      if (o && !o({ targetGroupId: P.gid, zone: x })) {
+      const x = K(R.rect, b, I);
+      if (o && !o({ targetGroupId: R.gid, zone: x })) {
         i(D.setSuggest(null));
         return;
       }
-      i(D.setSuggest({ rect: P.rect, zone: x }));
+      i(D.setSuggest({ rect: R.rect, zone: x }));
     }
-  }), g = J((b) => {
-    const y = t.current, f = a;
-    if (i(D.reset()), !y)
+  }), p = J((w) => {
+    const T = t.current, b = a;
+    if (i(D.reset()), !T)
       return;
-    const I = b.clientX, p = b.clientY;
-    if (f.phase.kind === "idle")
+    const I = w.clientX, f = w.clientY;
+    if (b.phase.kind === "idle")
       return;
-    const G = Math.abs(I - f.phase.startX), E = Math.abs(p - f.phase.startY);
-    if (!(G < e && E < e)) {
-      if (f.phase.kind === "content") {
-        const S = f.phase.cache.groups.find(({ rect: R }) => I >= R.left && I <= R.right && p >= R.top && p <= R.bottom);
-        if (!S)
+    const S = Math.abs(I - b.phase.startX), C = Math.abs(f - b.phase.startY);
+    if (!(S < e && C < e)) {
+      if (b.phase.kind === "content") {
+        const G = b.phase.cache.groups.find(({ rect: E }) => I >= E.left && I <= E.right && f >= E.top && f <= E.bottom);
+        if (!G)
           return;
-        const P = S.gid ?? null;
-        if (!P)
+        const R = G.gid ?? null;
+        if (!R)
           return;
-        const x = V(S.rect, I, p);
-        if (o && !o({ targetGroupId: P, zone: x }))
+        const x = K(G.rect, I, f);
+        if (o && !o({ targetGroupId: R, zone: x }))
           return;
-        r({ fromGroupId: f.phase.fromGroupId, tabId: f.phase.tabId, targetGroupId: P, zone: x });
+        n({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: R, zone: x });
         return;
       }
-      if (f.phase.kind === "tab") {
-        const S = f.phase.cache.tabbars.find(({ rect: x }) => I >= x.left && I <= x.right && p >= x.top && p <= x.bottom);
-        if (S) {
-          const x = S.gid;
+      if (b.phase.kind === "tab") {
+        const G = b.phase.cache.tabbars.find(({ rect: x }) => I >= x.left && I <= x.right && f >= x.top && f <= x.bottom);
+        if (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;
-          }), C = k.findIndex((B) => I < B), O = C === -1 ? k.length : C;
-          n({ fromGroupId: f.phase.fromGroupId, tabId: f.phase.tabId, targetGroupId: x, targetIndex: O });
+          }), P = k.findIndex((B) => I < B), O = P === -1 ? k.length : P;
+          r({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: x, targetIndex: O });
           return;
         }
-        const P = f.phase.cache.contents.find(({ rect: x }) => I >= x.left && I <= x.right && p >= x.top && p <= x.bottom);
-        if (P) {
-          const x = P.gid ?? null;
+        const R = b.phase.cache.contents.find(({ rect: x }) => I >= x.left && I <= x.right && f >= x.top && f <= x.bottom);
+        if (R) {
+          const x = R.gid ?? null;
           if (!x)
             return;
-          const R = V(P.rect, I, p);
-          if (o && !o({ targetGroupId: x, zone: R }))
+          const E = K(R.rect, I, f);
+          if (o && !o({ targetGroupId: x, zone: E }))
             return;
-          r({ fromGroupId: f.phase.fromGroupId, tabId: f.phase.tabId, targetGroupId: x, zone: R });
+          n({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: x, zone: E });
         }
       }
     }
-  }), v = J(() => {
+  }), g = J(() => {
     i(D.reset());
   });
   l.useEffect(() => {
     if (a.phase.kind !== "idle")
-      return window.addEventListener("pointermove", d), window.addEventListener("pointerup", g, { once: !0 }), window.addEventListener("pointercancel", v, { once: !0 }), () => {
-        window.removeEventListener("pointermove", d), window.removeEventListener("pointerup", g), window.removeEventListener("pointercancel", v);
+      return window.addEventListener("pointermove", u), window.addEventListener("pointerup", p, { once: !0 }), window.addEventListener("pointercancel", g, { once: !0 }), () => {
+        window.removeEventListener("pointermove", u), window.removeEventListener("pointerup", p), window.removeEventListener("pointercancel", g);
       };
   }, [a.phase.kind]);
-  const T = l.useCallback((b, y, f) => {
-    if (f.button !== 0)
+  const v = l.useCallback((w, T, b) => {
+    if (b.button !== 0)
       return;
-    f.currentTarget.setPointerCapture(f.pointerId);
-    const I = u();
-    i(D.startContent({ x: f.clientX, y: f.clientY, groupId: b, tabId: y, cache: I }));
-  }, [u]), h = l.useCallback((b, y, f) => {
-    if (f.button !== 0)
+    b.currentTarget.setPointerCapture(b.pointerId);
+    const I = d();
+    i(D.startContent({ x: b.clientX, y: b.clientY, groupId: w, tabId: T, cache: I }));
+  }, [d]), h = l.useCallback((w, T, b) => {
+    if (b.button !== 0)
       return;
-    const I = f.currentTarget;
-    I && I.setPointerCapture(f.pointerId);
-    const p = u();
-    i(D.startTab({ x: f.clientX, y: f.clientY, groupId: y, tabId: b, cache: p, element: I }));
-  }, [u]), w = l.useMemo(() => ({
+    const I = b.currentTarget;
+    I && I.setPointerCapture(b.pointerId);
+    const f = d();
+    i(D.startTab({ x: b.clientX, y: b.clientY, groupId: T, tabId: w, cache: f, element: I }));
+  }, [d]), y = l.useMemo(() => ({
     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: T,
+    onStartContentDrag: v,
     onStartTabDrag: h
-  }), [a.suggest, a.pointer, a.tabbarHover, a.phase, a.draggingTabElement, T, h]);
-  return /* @__PURE__ */ m(vt.Provider, { value: w, children: s });
-}, st = {
+  }), [a.suggest, a.pointer, a.tabbarHover, a.phase, a.draggingTabElement, v, h]);
+  return /* @__PURE__ */ m(yt.Provider, { value: y, children: s });
+}, ct = {
   display: "inline-flex",
   alignItems: "center",
   userSelect: "none"
-}, me = ({
+}, Te = ({
   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 u = l.useEffectEvent(() => {
     o(e.id);
-  }), g = l.useEffectEvent((w) => {
-    s && w.button === 0 && s(e.id, t, w);
-  }), v = () => {
-    const w = !!a;
-    return /* @__PURE__ */ m(l.Activity, { mode: w ? "visible" : "hidden", children: /* @__PURE__ */ m(
+  }), p = l.useEffectEvent((y) => {
+    s && y.button === 0 && s(e.id, t, y);
+  }), g = () => {
+    const y = !!a;
+    return /* @__PURE__ */ m(l.Activity, { mode: y ? "visible" : "hidden", children: /* @__PURE__ */ m(
       "button",
       {
         type: "button",
         "aria-label": `Close tab ${e.title}`,
-        onClick: (b) => {
-          a && (b.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: y ? void 0 : -1,
+        disabled: !y,
+        "aria-hidden": y ? void 0 : !0,
         children: "×"
       }
     ) });
-  }, T = {
+  }, v = {
     role: "tab",
-    "aria-selected": r,
-    tabIndex: r ? 0 : -1,
-    style: st,
-    onClick: d,
-    onPointerDown: g,
-    onDoubleClick: u,
+    "aria-selected": n,
+    tabIndex: n ? 0 : -1,
+    style: ct,
+    onClick: u,
+    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 }),
-      v()
+      g()
     ] })
   }, h = {
     type: "button",
     role: "tab",
-    "aria-selected": r,
-    tabIndex: r ? 0 : -1,
-    style: st,
+    "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: (y) => {
+      s && y.button === 0 && s(e.id, t, y);
     },
-    onDoubleClick: u,
+    onDoubleClick: d,
     children: /* @__PURE__ */ m("span", { children: e.title })
   };
-  return c ? c(h) : i ? /* @__PURE__ */ m(i, { ...h }) : /* @__PURE__ */ m("div", { ...T });
-}, ve = {
+  return c ? c(h) : i ? /* @__PURE__ */ m(i, { ...h }) : /* @__PURE__ */ m("div", { ...v });
+}, Se = {
   display: "flex",
   alignItems: "center"
-}, Ie = {
+}, xe = {
   flex: "1 1 auto",
   alignSelf: "stretch"
-}, we = ({
+}, Ge = ({
   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: u
 }) => {
-  const { isTabDragging: g, draggingTabId: v } = q(), T = l.useRef(null), h = l.useCallback(
-    (p) => {
-      if (T.current = p, !!n) {
-        if (typeof n == "function") {
-          n(p);
+  const { isTabDragging: p, draggingTabId: g } = W(), v = l.useRef(null), h = l.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 G = T.current ?? p.currentTarget;
-    if (!G)
+    [r]
+  ), y = l.useEffectEvent((f) => {
+    const S = v.current ?? f.currentTarget;
+    if (!S)
       return;
-    const E = Array.from(G.querySelectorAll('[role="tab"]'));
-    if (E.length === 0)
+    const C = Array.from(S.querySelectorAll('[role="tab"]'));
+    if (C.length === 0)
       return;
-    const S = (C) => {
-      const O = Math.max(0, Math.min(C, 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();
-    }, P = document.activeElement, x = P ? E.indexOf(P) : E.findIndex((C) => C.getAttribute("data-tab-id") === t.activeTabId);
-    if (p.key === "ArrowRight") {
-      p.preventDefault();
-      const C = x >= 0 ? x + 1 : 0;
-      S(C >= E.length ? 0 : C);
+    }, 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 C = x >= 0 ? x - 1 : E.length - 1;
-      S(C < 0 ? E.length - 1 : C);
+    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 = (x >= 0 ? E[x] : 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 = (x >= 0 ? E[x] : 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 R = (p.ctrlKey ? 1 : 0) + (p.metaKey ? 1 : 0) > 0, k = typeof p.key == "string" ? p.key.toLowerCase() : "";
-    if (R && 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 = T.current;
-    if (!p)
+    const f = v.current;
+    if (!f)
       return;
-    const G = p.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);
-    if (G === document.activeElement)
+    const S = f.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);
+    if (S === document.activeElement)
       return;
-    !p.contains(document.activeElement) && G && G.focus();
+    !f.contains(document.activeElement) && S && S.focus();
   }, [t.activeTabId]);
-  const b = {
-    style: ve,
+  const w = {
+    style: Se,
     role: "tablist",
     "data-tabbar": "true",
     "data-group-id": t.id,
-    "data-dragging": g ? "true" : "false",
-    onKeyDown: w
-  }, y = Dt({
+    "data-dragging": p ? "true" : "false",
+    onKeyDown: y
+  }, T = Ot({
     element: s,
     component: o
-  }), f = () => c ? /* @__PURE__ */ m(
+  }), b = () => c ? /* @__PURE__ */ m(
     "button",
     {
       type: "button",
@@ -647,85 +717,84 @@ const fe = (t, e) => {
       children: "+"
     }
   ) : null, I = l.useCallback(() => {
-    d && c && c(t.id);
-  }, [d, c, t.id]);
-  return /* @__PURE__ */ H(y, { ...b, ref: h, onDoubleClick: I, children: [
-    t.tabs.map((p, G) => /* @__PURE__ */ m(
-      me,
+    u && c && c(t.id);
+  }, [u, c, t.id]);
+  return /* @__PURE__ */ H(T, { ...w, ref: h, onDoubleClick: I, children: [
+    t.tabs.map((f, S) => /* @__PURE__ */ m(
+      Te,
       {
         groupId: t.id,
-        tab: p,
-        active: t.activeTabId === p.id,
-        dragging: v === 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}:${G}`
+      `${t.id}:${f.id}:${S}`
     )),
-    /* @__PURE__ */ m("span", { style: Ie }),
-    f()
+    /* @__PURE__ */ m("span", { style: xe }),
+    b()
   ] });
-}, ye = ({ id: t, TabBarComponent: e, PanelGroupComponent: r }) => {
-  const { getGroup: n, getGroupContent: o, onClickTab: s, onAddTab: a, onCloseTab: i, onStartContentDrag: c, onStartTabDrag: u, doubleClickToAdd: d } = se(), { setGroupEl: g, setTabbarEl: v, setContentEl: T } = bt(), h = l.useCallback(
-    (G) => {
-      g(t, G);
+}, Ce = ({ id: t, TabBarComponent: e, PanelGroupComponent: n }) => {
+  const { getGroup: r, getGroupContent: o, onClickTab: s, onAddTab: a, onCloseTab: i, onStartTabDrag: c, doubleClickToAdd: d, registerContentContainer: u } = le(), { setGroupEl: p, setTabbarEl: g, setContentEl: v } = mt(), h = l.useCallback(
+    (S) => {
+      p(t, S);
     },
-    [t, g]
-  ), w = l.useCallback(
-    (G) => {
-      T(t, G);
+    [t, p]
+  ), y = l.useCallback(
+    (S) => {
+      v(t, S), u(t, S);
     },
-    [t, T]
-  ), b = l.useCallback(
-    (G) => {
-      v(t, G);
+    [t, v, u]
+  ), w = l.useCallback(
+    (S) => {
+      g(t, S);
     },
-    [t, v]
-  ), y = n(t);
-  if (!y)
+    [t, g]
+  ), T = r(t);
+  if (!T)
     return null;
-  const f = o(t);
+  const b = o(t);
   return /* @__PURE__ */ m(
-    r ?? ((G) => /* @__PURE__ */ m(gt, { ...G })),
+    n ?? ((S) => /* @__PURE__ */ m(vt, { ...S })),
     {
-      group: y,
+      group: T,
       tabbar: /* @__PURE__ */ m(
-        e ?? we,
+        e ?? Ge,
         {
-          rootRef: b,
-          group: y,
-          onClickTab: (G) => s(t, G),
+          rootRef: w,
+          group: T,
+          onClickTab: (S) => s(t, S),
           onAddTab: a,
           onCloseTab: i,
-          onStartDrag: (G, E, S) => u(G, E, S),
+          onStartDrag: (S, C, G) => c(S, C, G),
           doubleClickToAdd: d
         }
       ),
-      content: f,
+      content: b,
       groupRef: h,
-      contentRef: w,
-      onContentPointerDown: (G) => c(t, G)
+      contentRef: y
     }
   );
-}, Te = (t, e) => {
-  const r = new Array(16);
-  for (let n = 0; n < 4; n++)
+}, Ee = (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;
-}, K = (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;
+}, U = (t) => {
   if (t.length !== 16)
     throw new Error("Matrix must have exactly 16 values");
-  const e = Object.freeze([...t]), r = (n) => {
-    const o = Te(e, n);
-    return K(o);
+  const e = Object.freeze([...t]), n = (r) => {
+    const o = Ee(e, r);
+    return U(o);
   };
   return Object.freeze({
-    translate: (n = 0, o = 0, s = 0) => r([
+    translate: (r = 0, o = 0, s = 0) => n([
       1,
       0,
       0,
@@ -738,12 +807,12 @@ const fe = (t, e) => {
       0,
       1,
       0,
-      n,
+      r,
       o,
       s,
       1
     ]),
-    translate3d: (n, o, s) => r([
+    translate3d: (r, o, s) => n([
       1,
       0,
       0,
@@ -756,12 +825,12 @@ const fe = (t, e) => {
       0,
       1,
       0,
-      n,
+      r,
       o,
       s,
       1
     ]),
-    translateX: (n) => r([
+    translateX: (r) => n([
       1,
       0,
       0,
@@ -774,12 +843,12 @@ const fe = (t, e) => {
       0,
       1,
       0,
-      n,
+      r,
       0,
       0,
       1
     ]),
-    translateY: (n) => r([
+    translateY: (r) => n([
       1,
       0,
       0,
@@ -793,11 +862,11 @@ const fe = (t, e) => {
       1,
       0,
       0,
-      n,
+      r,
       0,
       1
     ]),
-    translateZ: (n) => r([
+    translateZ: (r) => n([
       1,
       0,
       0,
@@ -812,11 +881,11 @@ const fe = (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,
@@ -833,8 +902,8 @@ const fe = (t, e) => {
       0,
       1
     ]),
-    scale3d: (n, o, s) => r([
-      n,
+    scale3d: (r, o, s) => n([
+      r,
       0,
       0,
       0,
@@ -851,8 +920,8 @@ const fe = (t, e) => {
       0,
       1
     ]),
-    scaleX: (n) => r([
-      n,
+    scaleX: (r) => n([
+      r,
       0,
       0,
       0,
@@ -869,13 +938,13 @@ const fe = (t, e) => {
       0,
       1
     ]),
-    scaleY: (n) => r([
+    scaleY: (r) => n([
       1,
       0,
       0,
       0,
       0,
-      n,
+      r,
       0,
       0,
       0,
@@ -887,7 +956,7 @@ const fe = (t, e) => {
       0,
       1
     ]),
-    scaleZ: (n) => r([
+    scaleZ: (r) => n([
       1,
       0,
       0,
@@ -898,16 +967,16 @@ const fe = (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,
@@ -926,9 +995,9 @@ const fe = (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,
@@ -947,9 +1016,9 @@ const fe = (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,
@@ -968,24 +1037,24 @@ const fe = (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 K(e);
+        return U(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), u = 1 - c;
+      return n([
+        u * o * o + c,
+        u * o * s + d * a,
+        u * o * a - d * s,
         0,
-        d * o * s - u * a,
-        d * s * s + c,
-        d * s * a + u * o,
+        u * o * s - d * a,
+        u * s * s + c,
+        u * s * a + d * o,
         0,
-        d * o * a + u * s,
-        d * s * a - u * o,
-        d * a * a + c,
+        u * o * a + d * s,
+        u * s * a - d * o,
+        u * a * a + c,
         0,
         0,
         0,
@@ -993,24 +1062,24 @@ const fe = (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 K(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 U(e);
+      r /= i, o /= i, s /= i;
+      const c = Math.cos(a), d = Math.sin(a), u = 1 - c;
+      return n([
+        u * r * r + c,
+        u * r * o + d * s,
+        u * r * s - d * o,
         0,
-        d * n * o - u * s,
-        d * o * o + c,
-        d * o * s + u * n,
+        u * r * o - d * s,
+        u * o * o + c,
+        u * o * s + d * r,
         0,
-        d * n * s + u * o,
-        d * o * s - u * n,
-        d * s * s + c,
+        u * r * s + d * o,
+        u * o * s - d * r,
+        u * s * s + c,
         0,
         0,
         0,
@@ -1018,9 +1087,9 @@ const fe = (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,
@@ -1039,9 +1108,9 @@ const fe = (t, e) => {
         1
       ]);
     },
-    skewX: (n) => {
-      const o = Math.tan(n);
-      return r([
+    skewX: (r) => {
+      const o = Math.tan(r);
+      return n([
         1,
         0,
         0,
@@ -1060,9 +1129,9 @@ const fe = (t, e) => {
         1
       ]);
     },
-    skewY: (n) => {
-      const o = Math.tan(n);
-      return r([
+    skewY: (r) => {
+      const o = Math.tan(r);
+      return n([
         1,
         o,
         0,
@@ -1081,10 +1150,10 @@ const fe = (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,
@@ -1096,7 +1165,7 @@ const fe = (t, e) => {
         0,
         0,
         1,
-        -1 / n,
+        -1 / r,
         0,
         0,
         0,
@@ -1113,7 +1182,7 @@ const fe = (t, e) => {
     ].join(`
 `)
   });
-}, Ge = () => K([
+}, Re = () => U([
   1,
   0,
   0,
@@ -1130,284 +1199,284 @@ const fe = (t, e) => {
   0,
   0,
   1
-]), xe = {
+]), Pe = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
-  zIndex: Lt
-}, Se = {
+  zIndex: $t
+}, De = {
   position: "absolute",
-  border: `${Nt} dashed ${zt}`,
-  background: Ht,
-  borderRadius: $t,
+  border: `${Yt} dashed ${jt}`,
+  background: Xt,
+  borderRadius: Ft,
   transformOrigin: "top left"
-}, L = (t, e) => e <= 0 ? 0 : _(t / e, 0), Ee = (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(_(n - r * 2, 0), a),
-    scaleY: L(_(o - r * 2, 0), i)
-  }, u = {
-    translateX: r,
-    translateY: r,
-    scaleX: L(_(n / 2 - r * 1.5, 0), a),
-    scaleY: L(_(o - r * 2, 0), i)
+}, L = (t, e) => e <= 0 ? 0 : M(t / e, 0), Ae = (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(_(n / 2 - r * 1.5, 0), a),
-    scaleY: L(_(o - r * 2, 0), i)
+    translateX: n,
+    translateY: n,
+    scaleX: L(M(r / 2 - n * 1.5, 0), a),
+    scaleY: L(M(o - n * 2, 0), i)
+  }, u = {
+    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,
-    translateY: r,
-    scaleX: L(_(n - r * 2, 0), a),
-    scaleY: L(_(o / 2 - r * 1.5, 0), i)
-  }, v = {
-    translateX: r,
+    translateX: n,
     translateY: o / 2 + s,
-    scaleX: L(_(n - r * 2, 0), a),
-    scaleY: L(_(o / 2 - r * 1.5, 0), i)
-  }, T = {
+    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: g,
-    bottom: v
-  }, { translateX: h, translateY: w, scaleX: b, scaleY: y } = T[e];
-  return Ge().translate(h, w, 0).scale(b, y, 1).toCSS();
-}, Re = (t, e) => {
-  const r = Xt;
+    left: d,
+    right: u,
+    top: p,
+    bottom: g
+  }, { translateX: h, translateY: y, scaleX: w, scaleY: T } = v[e];
+  return Re().translate(h, y, 0).scale(w, T, 1).toCSS();
+}, ke = (t, e) => {
+  const n = Kt;
   return {
-    ...Se,
+    ...De,
     left: t.left,
     top: t.top,
     width: t.width,
     height: t.height,
-    transform: Ee(t, e, r)
+    transform: Ae(t, e, n)
   };
-}, Pe = ({ suggest: t }) => {
+}, Me = ({ suggest: t }) => {
   if (!t)
     return null;
-  const { rect: e, zone: r } = t, n = Re(e, r);
-  return /* @__PURE__ */ m("div", { style: xe, children: /* @__PURE__ */ m("div", { style: n }) });
-}, Ce = typeof window < "u" && typeof document < "u", De = (t) => {
-  const [e, r] = l.useState(null), [n, o] = l.useState(null);
-  return At(() => {
-    if (!Ce || !t) {
-      r(null), o(null);
+  const { rect: e, zone: n } = t, r = ke(e, n);
+  return /* @__PURE__ */ m("div", { style: Pe, children: /* @__PURE__ */ m("div", { style: r }) });
+}, _e = typeof window < "u" && typeof document < "u", Oe = (t) => {
+  const [e, n] = l.useState(null), [r, o] = l.useState(null);
+  return nt(() => {
+    if (!_e || !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 };
-}, Ae = {
+    n({ width: s.width, height: s.height }), o(t.outerHTML);
+  }, [t]), { html: r, size: e };
+}, Be = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
-  zIndex: qt
-}, ke = {
+  zIndex: Qt
+}, Le = {
   position: "absolute",
-  width: Ut,
-  borderRadius: Kt,
-  background: Vt,
-  boxShadow: jt
-}, _e = () => {
-  const { isTabDragging: t, draggingTabId: e, dragPointer: r, tabbarHover: n, draggingTabElement: o } = q(), { html: s, size: a } = De(o), i = r !== null && e !== null, c = l.useMemo(() => {
-    if (!(!i || !r))
+  width: Jt,
+  borderRadius: Zt,
+  background: qt,
+  boxShadow: Wt
+}, He = () => {
+  const { isTabDragging: t, draggingTabId: e, dragPointer: n, tabbarHover: r, draggingTabElement: o } = W(), { html: s, size: a } = Oe(o), i = n !== null && e !== null, c = l.useMemo(() => {
+    if (!(!i || !n))
       return {
         position: "absolute",
-        left: r.x,
-        top: r.y,
-        transform: `translate(${Yt}, ${Ft})`,
+        left: n.x,
+        top: n.y,
+        transform: `translate(${Ut}, ${Vt})`,
         pointerEvents: "none"
       };
-  }, [i, r]), u = l.useMemo(() => {
+  }, [i, n]), d = l.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]), u = l.useMemo(() => {
+    if (r)
       return {
-        ...ke,
-        left: n.insertX,
-        top: n.rect.top + 4,
-        height: Math.max(0, n.rect.height - 8)
+        ...Le,
+        left: r.insertX,
+        top: r.rect.top + 4,
+        height: Math.max(0, r.rect.height - 8)
       };
-  }, [n]);
-  return t ? /* @__PURE__ */ H("div", { style: Ae, 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: Be, children: [
+    /* @__PURE__ */ m(l.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(l.Activity, { mode: u ? "visible" : "hidden", children: /* @__PURE__ */ m("div", { style: u }) })
   ] }) : null;
-}, M = (t) => t.type === "group", Y = (t, e = []) => {
-  if (M(t))
+}, _ = (t) => t.type === "group", Y = (t, e = []) => {
+  if (_(t))
     return [...e, t.groupId];
-  const r = Y(t.a, e);
-  return Y(t.b, r);
-}, W = (t, e) => e.reduce((r, n) => M(r) ? r : r[n], t), F = (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 M(t) ? t : n === "a" ? { ...t, a: F(t.a, o, r) } : { ...t, b: F(t.b, o, r) };
-}, U = (t, e, r = []) => {
-  if (M(t))
+    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 (M(t.a) && t.a.groupId === e)
-    return { splitPath: r, side: "a" };
-  if (M(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"]);
-}, It = (t, e, r, n) => {
-  const o = n(), s = U(t, e), a = {
+  if (_(t.a) && t.a.groupId === e)
+    return { splitPath: n, side: "a" };
+  if (_(t.b) && t.b.groupId === e)
+    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 }
   };
   if (!s || s.splitPath === null)
     return { tree: a, newGroupId: o };
-  const i = s.splitPath, c = W(t, i);
-  if (M(c))
+  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: F(t, i, u), newGroupId: o };
-}, Me = (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 };
+}, Ne = (t, e) => {
+  const n = V(t, e);
+  if (!n || n.splitPath === null)
     return { tree: t, survivorGroupId: e };
-  const n = r.splitPath, o = W(t, n);
-  if (M(o))
+  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 = F(t, n, s), i = M(s) ? s.groupId : Y(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 };
-}, Oe = (t, e, r) => {
-  const n = W(t, e);
-  if (M(n))
+}, ze = (t, e, n) => {
+  const r = q(t, e);
+  if (_(r))
     return t;
-  const o = { ...n, ratio: _(r, 0.05, 0.95) };
-  return F(t, e, o);
+  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 } = Me(o.tree, s), { [s]: d, ...g } = o.groups, v = Y(c), T = o.focusedGroupId === s ? u ?? v[0] ?? null : o.focusedGroupId;
-    return { ...o, tree: c, groups: g, groupOrder: v, focusedGroupId: T };
+    const { tree: c, survivorGroupId: d } = Ne(o.tree, s), { [s]: u, ...p } = o.groups, g = Y(c), v = o.focusedGroupId === s ? d ?? g[0] ?? null : o.focusedGroupId;
+    return { ...o, tree: c, groups: p, groupOrder: g, focusedGroupId: v };
   };
-  return t.groupOrder.reduce((o, s) => n(o, s), t);
-}, Be = (t) => ({ id: t, tabIds: [], tabs: [], activeTabId: null }), it = (t, e, r, n) => {
+  return t.groupOrder.reduce((o, s) => r(o, s), t);
+}, $e = (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((g) => a[g]), d = { ...s, tabIds: i, tabs: u, activeTabId: c };
-  return o[e] = d, { ...t, panels: a, groups: o };
-}, Le = (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]), u = { ...s, tabIds: i, tabs: d, activeTabId: c };
+  return o[e] = u, { ...t, panels: a, groups: o };
+}, Fe = (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 };
-}, at = (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((g) => g !== n), u = [...a.tabIds.filter((g) => g !== n), n], d = s.activeTabId === n ? c[0] ?? null : s.activeTabId;
-  return i[e] = { ...s, tabIds: c, tabs: c.map((g) => t.panels[g]), activeTabId: d }, i[r] = { ...a, tabIds: u, tabs: u.map((g) => t.panels[g]), activeTabId: n }, { ...t, groups: i };
-}, wt = (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], u = s.activeTabId === r ? c[0] ?? null : s.activeTabId;
+  return i[e] = { ...s, tabIds: c, tabs: c.map((p) => t.panels[p]), activeTabId: u }, i[n] = { ...a, tabIds: d, tabs: d.map((p) => t.panels[p]), activeTabId: r }, { ...t, groups: i };
+}, 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 };
-}, ct = (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((v) => a[v]), d = o ? r.id : s.activeTabId ?? r.id, g = { ...t.groups, [e]: { ...s, tabIds: i, tabs: u, activeTabId: d } };
-  return { ...t, panels: a, groups: g };
-}, $ = (t, e) => {
+  const a = { ...t.panels, [n.id]: n }, i = s.tabIds.slice(), c = Math.max(0, Math.min(r, i.length));
+  i.splice(c, 0, n.id);
+  const d = i.map((g) => a[g]), u = o ? n.id : s.activeTabId ?? n.id, p = { ...t.groups, [e]: { ...s, tabIds: i, tabs: d, activeTabId: u } };
+  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 };
-}, $e = (t, e) => {
-  const r = e - 1, n = t.groupOrder[r];
-  return n ? $(t, n) : t;
-}, He = (t) => {
-  const e = t.groupOrder, r = t.focusedGroupId;
-  if (!r) {
+}, Xe = (t, e) => {
+  const n = e - 1, r = t.groupOrder[n];
+  return r ? N(t, r) : t;
+}, Ye = (t) => {
+  const e = t.groupOrder, n = t.focusedGroupId;
+  if (!n) {
     const s = e[0];
-    return s ? $(t, s) : t;
+    return s ? N(t, s) : t;
   }
-  const n = e.indexOf(r), o = e[(n + 1) % e.length];
-  return $(t, o);
-}, Ne = (t) => {
-  const e = t.groupOrder, r = t.focusedGroupId;
-  if (!r) {
+  const r = e.indexOf(n), o = e[(r + 1) % e.length];
+  return N(t, o);
+}, je = (t) => {
+  const e = t.groupOrder, n = t.focusedGroupId;
+  if (!n) {
     const s = e[e.length - 1];
-    return s ? $(t, s) : t;
+    return s ? N(t, s) : t;
   }
-  const n = e.indexOf(r), o = e[(n - 1 + e.length) % e.length];
-  return $(t, o);
-}, yt = (t, e, r, n) => {
-  const { tree: o, newGroupId: s } = It(t.tree, e, r, n), a = { ...t.groups, [s]: Be(s) }, i = Y(o);
+  const r = e.indexOf(n), o = e[(r - 1 + e.length) % e.length];
+  return N(t, o);
+}, xt = (t, e, n, r) => {
+  const { tree: o, newGroupId: s } = Tt(t.tree, e, n, r), a = { ...t.groups, [s]: $e(s) }, i = Y(o);
   return { ...t, tree: o, groups: a, groupOrder: i, focusedGroupId: s };
-}, br = (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" };
-}, ze = l.createContext(null), Xe = ({ value: t, children: e }) => /* @__PURE__ */ m(ze.Provider, { value: t, children: e }), Tt = l.createContext(null), Ye = () => {
-  const t = l.useContext(Tt);
+}, Rn = (t) => {
+  const n = { type: "group", groupId: "g_1" }, r = Object.fromEntries(t.map((i) => [i.id, i])), s = { g_1: { id: "g_1", tabIds: t.map((i) => i.id), tabs: t, activeTabId: t[0]?.id ?? null } };
+  return { tree: n, panels: r, groups: s, groupOrder: ["g_1"], focusedGroupId: "g_1" };
+}, Ke = l.createContext(null), Ue = ({ value: t, children: e }) => /* @__PURE__ */ m(Ke.Provider, { value: t, children: e }), Gt = l.createContext(null), Ve = () => {
+  const t = l.useContext(Gt);
   if (!t)
     throw new Error("useTree must be used within TreeProvider");
   return t;
-}, Fe = ({ value: t, children: e }) => /* @__PURE__ */ m(Tt.Provider, { value: t, children: e }), je = l.createContext(null), Ve = ({ value: t, children: e }) => /* @__PURE__ */ m(je.Provider, { value: t, children: e }), z = (t) => {
-  const e = kt(t, Number.POSITIVE_INFINITY);
-  return _(e, 1);
-}, Ke = (t) => typeof t == "object" && t !== null, Ue = (t) => Ke(t) ? "rows" in t ? !0 : "cols" in t : !1, Gt = (t) => {
+}, We = ({ value: t, children: e }) => /* @__PURE__ */ m(Gt.Provider, { value: t, children: e }), qe = l.createContext(null), Ze = ({ value: t, children: e }) => /* @__PURE__ */ m(qe.Provider, { value: t, children: e }), F = (t) => {
+  const e = Bt(t, Number.POSITIVE_INFINITY);
+  return M(e, 1);
+}, Je = (t) => typeof t == "object" && t !== null, Qe = (t) => Je(t) ? "rows" in t ? !0 : "cols" in t : !1, Ct = (t) => {
   if (!t)
     return {
       rows: Number.POSITIVE_INFINITY,
       cols: Number.POSITIVE_INFINITY
     };
   if (typeof t == "number") {
-    const r = z(t);
-    return { rows: r, cols: r };
+    const n = F(t);
+    return { rows: n, cols: n };
   }
-  if (Ue(t))
+  if (Qe(t))
     return {
-      rows: z(t.rows),
-      cols: z(t.cols)
+      rows: F(t.rows),
+      cols: F(t.cols)
     };
   const e = t;
   return {
-    rows: z(e.maxHorizontal),
-    cols: z(e.maxVertical)
+    rows: F(e.maxHorizontal),
+    cols: F(e.maxVertical)
   };
 }, tt = (t) => {
-  if (M(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 };
-}, qe = (t, e, r) => {
-  const { tree: n } = It(t, e, r, () => "__preview__");
-  return n;
-}, rt = (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 };
+}, tn = (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 = qe(t, e, r), s = tt(o);
-  return !(s.horizontal > n.rows || s.vertical > n.cols);
-}, xt = {
+  const o = tn(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"),
@@ -1431,136 +1500,136 @@ const fe = (t, e) => {
     (t) => t
   ),
   adjustSplitRatio: A("panelState/adjustSplitRatio", (t) => t)
-}, We = (t, e, r) => {
-  const n = t.groups[e.fromGroupId], o = t.groups[e.targetGroupId];
-  if (!n || !o || !n.tabs.find((g) => g.id === e.tabId))
+}, en = (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 wt(t, e.fromGroupId, e.tabId);
+    return St(t, e.fromGroupId, e.tabId);
   if (e.zone === "center") {
-    const g = at(t, e.fromGroupId, e.targetGroupId, e.tabId);
-    return $(g, 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 (!rt(t.tree, e.targetGroupId, a, r.splitLimits))
+  if (!rt(t.tree, e.targetGroupId, a, n.splitLimits))
     return t;
-  const i = r.createGroupId(), c = yt(t, e.targetGroupId, a, () => i), u = e.zone === "left" || e.zone === "top" ? e.targetGroupId : i, d = at(c, e.fromGroupId, u, e.tabId);
-  return $(d, u);
-}, Ze = (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, u = lt(c, e.fromGroupId, d, e.tabId);
+  return N(u, d);
+}, nn = (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 v = r.tabIds.filter((y) => y !== e.tabId), T = Math.max(0, Math.min(e.targetIndex, v.length)), h = v.slice(0, T).concat([e.tabId], v.slice(T)), w = h.map((y) => t.panels[y]).filter(Boolean), b = { ...t.groups, [e.fromGroupId]: { ...r, tabIds: h, tabs: w } };
-    return { ...t, groups: b };
+    const g = n.tabIds.filter((T) => T !== e.tabId), v = Math.max(0, Math.min(e.targetIndex, g.length)), h = g.slice(0, v).concat([e.tabId], g.slice(v)), y = h.map((T) => t.panels[T]).filter(Boolean), w = { ...t.groups, [e.fromGroupId]: { ...n, tabIds: h, tabs: y } };
+    return { ...t, groups: w };
   }
-  const s = { ...t.groups }, a = r.tabIds.filter((v) => v !== e.tabId), i = a.map((v) => t.panels[v]);
+  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((v) => v !== e.tabId), u = Math.max(0, Math.min(e.targetIndex, c.length)), d = c.slice(0, u).concat([e.tabId], c.slice(u)), g = d.map((v) => t.panels[v]).filter(Boolean);
-  return s[e.targetGroupId] = { ...n, tabIds: d, tabs: g, activeTabId: e.tabId }, { ...t, groups: s, focusedGroupId: e.targetGroupId };
-}, Je = ht(xt, {
-  splitFocused: (t, e, r) => {
-    const n = t.focusedGroupId ?? t.groupOrder[0] ?? null;
-    return !n || !rt(t.tree, n, e.payload.direction, r.splitLimits) ? t : yt(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)), u = c.slice(0, d).concat([e.tabId], c.slice(d)), p = u.map((g) => t.panels[g]).filter(Boolean);
+  return s[e.targetGroupId] = { ...r, tabIds: u, tabs: p, activeTabId: e.tabId }, { ...t, groups: s, focusedGroupId: e.targetGroupId };
+}, rn = It(Et, {
+  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) => $e(t, e.payload.index1Based),
-  focusNextGroup: (t) => He(t),
-  focusPrevGroup: (t) => Ne(t),
-  setActiveTab: (t, e) => wt(t, e.payload.groupId, e.payload.tabId),
+  focusGroupIndex: (t, e) => Xe(t, e.payload.index1Based),
+  focusNextGroup: (t) => Ye(t),
+  focusPrevGroup: (t) => je(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" ? ct(t, r, n, o, s ?? !0) : it(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" ? ct(t, s, o, a, i ?? !0) : it(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) => Le(t, e.payload.groupId, e.payload.tabId),
-  contentDrop: (t, e, r) => We(t, e.payload, r),
-  tabDrop: (t, e) => Ze(t, e.payload),
+  removeTab: (t, e) => Fe(t, e.payload.groupId, e.payload.tabId),
+  contentDrop: (t, e, n) => en(t, e.payload, n),
+  tabDrop: (t, e) => nn(t, e.payload),
   adjustSplitRatio: (t, e) => {
-    const r = W(t.tree, e.payload.path);
-    if (M(r))
+    const n = q(t.tree, e.payload.path);
+    if (_(n))
       return t;
-    const n = Oe(t.tree, e.payload.path, r.ratio + e.payload.deltaRatio);
-    return { ...t, tree: n };
+    const r = ze(t.tree, e.payload.path, n.ratio + e.payload.deltaRatio);
+    return { ...t, tree: r };
   }
-}), ut = (t, e, r) => {
-  const n = Je[e.type];
-  if (!n)
+}), pt = (t, e, n) => {
+  const r = rn[e.type];
+  if (!r)
     return t;
-  const o = n(t, e, r);
+  const o = r(t, e, n);
   return Q(o);
-}, St = l.createContext(null), j = () => {
-  const t = l.useContext(St);
+}, Rt = l.createContext(null), $ = () => {
+  const t = l.useContext(Rt);
   if (!t)
     throw new Error("usePanelSystem must be used within PanelSystemProvider");
   return t;
-}, Qe = ({
+}, on = ({
   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, g] = l.useReducer(
-    (G, E) => ut(G, E, u.current),
+  const i = l.useMemo(() => Q(t), [t]), c = l.useMemo(() => Ct(s), [s]), d = l.useRef({ createGroupId: e, splitLimits: c, createPanelId: n });
+  d.current.createGroupId = e, d.current.splitLimits = c, d.current.createPanelId = n;
+  const [u, p] = l.useReducer(
+    (S, C) => pt(S, C, d.current),
     i
-  ), v = l.useMemo(
-    () => n ? Q(n) : d,
-    [n, d]
-  ), T = l.useRef(v);
-  T.current = v;
-  const h = n !== void 0, w = l.useCallback(
-    (G) => {
+  ), g = l.useMemo(
+    () => r ? Q(r) : u,
+    [r, u]
+  ), v = l.useRef(g);
+  v.current = g;
+  const h = r !== void 0, y = l.useCallback(
+    (S) => {
       if (h) {
-        const E = ut(T.current, G, u.current);
-        o?.(E);
+        const C = pt(v.current, S, d.current);
+        o?.(C);
         return;
       }
-      g(G);
+      p(S);
     },
-    [h, o, g]
-  ), b = l.useMemo(() => fe(xt, w), [w]), y = l.useMemo(
+    [h, o, p]
+  ), w = l.useMemo(() => ve(Et, y), [y]), T = l.useMemo(
     () => ({
-      setActiveTab: b.setActiveTab,
-      tabDrop: b.tabDrop
+      setActiveTab: w.setActiveTab,
+      tabDrop: w.tabDrop
     }),
-    [b]
-  ), f = l.useMemo(
+    [w]
+  ), b = l.useMemo(
     () => ({
-      adjustSplitRatio: b.adjustSplitRatio
+      adjustSplitRatio: w.adjustSplitRatio
     }),
-    [b]
+    [w]
   ), I = l.useMemo(
     () => ({
-      focusGroupIndex: b.focusGroupIndex,
-      focusNextGroup: b.focusNextGroup,
-      focusPrevGroup: b.focusPrevGroup
+      focusGroupIndex: w.focusGroupIndex,
+      focusNextGroup: w.focusNextGroup,
+      focusPrevGroup: w.focusPrevGroup
     }),
-    [b]
-  ), p = l.useMemo(
+    [w]
+  ), f = l.useMemo(
     () => ({
-      state: v,
-      dispatch: w,
-      actions: b
+      state: g,
+      dispatch: y,
+      actions: w
     }),
-    [v, w, b]
+    [g, y, w]
   );
-  return /* @__PURE__ */ m(St.Provider, { value: p, children: /* @__PURE__ */ m(Xe, { value: y, children: /* @__PURE__ */ m(Fe, { value: f, children: /* @__PURE__ */ m(Ve, { value: I, children: a }) }) }) });
-}, tr = () => {
-  const { actions: t } = j();
+  return /* @__PURE__ */ m(Rt.Provider, { value: f, children: /* @__PURE__ */ m(Ue, { value: T, children: /* @__PURE__ */ m(We, { value: b, children: /* @__PURE__ */ m(Ze, { value: I, children: a }) }) }) });
+}, sn = () => {
+  const { actions: t } = $();
   return l.useMemo(
     () => ({
       splitFocused: (e) => {
@@ -1580,269 +1649,341 @@ const fe = (t, e) => {
     }),
     [t]
   );
-}, er = () => {
-  const { actions: t } = j(), e = l.useCallback(
-    ({ fromGroupId: n, tabId: o, targetGroupId: s, zone: a }) => {
-      t.contentDrop({ fromGroupId: n, tabId: o, targetGroupId: s, zone: a });
+}, an = () => {
+  const { actions: t } = $(), e = l.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 = l.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 };
-}, rr = () => {
-  const t = Jt(), e = tr();
+  return { onCommitContentDrop: e, onCommitTabDrop: n };
+}, cn = () => {
+  const t = re(), e = sn();
   return l.useEffect(() => {
-    ee(t, e);
+    ie(t, e);
   }, [t, e]), null;
-}, nr = ({
+}, Pt = l.createContext(null), un = () => {
+  const t = l.useContext(Pt);
+  if (!t)
+    throw new Error("useContentRegistry must be used within ContentRegistryProvider");
+  return t;
+}, ln = (t) => {
+  const e = document.createElement("div");
+  return e.setAttribute("data-panel-wrapper", t), e.style.display = "contents", e;
+}, dn = (t, e, n) => {
+  const [r] = l.useState(() => ln(t));
+  return nt(() => (r.style.display = n ? "contents" : "none", e && r.parentElement !== e && e.appendChild(r), () => {
+    r.parentElement?.removeChild(r);
+  }), [r, e, n]), r;
+}, Dt = l.memo(
+  ({ panelId: t, content: e, placement: n, containerElement: r }) => {
+    const o = n?.isActive ?? !1, s = dn(t, r, o);
+    return ee(
+      /* @__PURE__ */ m(l.Activity, { mode: o ? "visible" : "hidden", children: e }),
+      s
+    );
+  }
+);
+Dt.displayName = "PanelContentHost";
+const pn = ({
+  children: t,
+  panels: e,
+  placements: n
+}) => {
+  const [r, o] = l.useState(/* @__PURE__ */ new Map()), s = l.useRef(/* @__PURE__ */ new Map()), a = l.useCallback((u, p) => {
+    o((g) => {
+      const v = new Map(g);
+      return p ? v.set(u, p) : v.delete(u), v;
+    });
+  }, []), i = l.useMemo(
+    () => ({ registerContentContainer: a }),
+    [a]
+  ), c = l.useCallback((u, p) => {
+    const g = s.current.get(u);
+    if (g)
+      return g;
+    const v = p.render(p.id);
+    return s.current.set(u, v), v;
+  }, []), d = Object.keys(e);
+  return /* @__PURE__ */ H(Pt.Provider, { value: i, children: [
+    t,
+    d.map((u) => {
+      const p = e[u];
+      if (!p)
+        return null;
+      const g = n[u] ?? null, v = g ? r.get(g.groupId) ?? null : null, h = c(u, p);
+      return /* @__PURE__ */ m(
+        Dt,
+        {
+          panelId: u,
+          content: h,
+          placement: g,
+          containerElement: v
+        },
+        u
+      );
+    })
+  ] });
+}, fn = ({
   children: t,
   emptyContentComponent: e,
-  doubleClickToAdd: r
+  doubleClickToAdd: n
 }) => {
-  const n = q(), { state: o, actions: s } = j(), a = l.useCallback(() => l.createElement("div", { style: { color: "#888", fontSize: 12, padding: 12 } }, "No tabs"), []), i = e ?? a, c = l.useCallback(
-    (b) => {
-      const y = o.groups[b];
-      if (!y)
+  const r = W(), { state: o, actions: s } = $(), { registerContentContainer: a } = un(), i = l.useCallback(() => l.createElement("div", { style: { color: "#888", fontSize: 12, padding: 12 } }, "No tabs"), []), c = e ?? i, d = l.useCallback(
+    (T) => {
+      const b = o.groups[T];
+      if (!b)
         return null;
-      const f = y.tabIds.map((I) => o.panels[I]).filter(Boolean);
-      return { ...y, tabs: f };
+      const I = b.tabIds.map((f) => o.panels[f]).filter(Boolean);
+      return { ...b, tabs: I };
     },
     [o.groups, o.panels]
   ), u = l.useCallback(
-    (b) => {
-      const y = o.groups[b];
-      if (!y)
-        return /* @__PURE__ */ m(i, {});
-      const f = y.activeTabId;
-      if (!f)
-        return /* @__PURE__ */ m(i, {});
-      const I = o.panels[f];
-      return I ? I.render() : /* @__PURE__ */ m(i, {});
+    (T) => {
+      const b = o.groups[T];
+      return !b || b.tabIds.length === 0 ? /* @__PURE__ */ m(c, {}) : null;
     },
-    [o.groups, o.panels, i]
-  ), d = l.useCallback((b, y) => {
-    s.setActiveTab(b, y);
-  }, [s]), g = l.useCallback((b) => {
-    s.addNewTab({ groupId: b, title: "New Tab", makeActive: !0 });
-  }, [s]), v = l.useCallback((b, y) => {
-    s.removeTab(b, y);
-  }, [s]), T = l.useCallback((b, y, f) => {
-    s.setActiveTab(y, b), n.onStartTabDrag(b, y, f);
-  }, [s, n]), h = l.useCallback((b, y) => {
-    const f = o.groups[b];
-    !f || !f.activeTabId || n.onStartContentDrag(b, f.activeTabId, y);
-  }, [o.groups, n]), w = l.useMemo(
-    () => ({ getGroup: c, getGroupContent: u, onClickTab: d, onAddTab: g, onCloseTab: v, onStartTabDrag: T, onStartContentDrag: h, doubleClickToAdd: r }),
-    [c, u, d, g, v, T, h, r]
+    [o.groups, c]
+  ), p = l.useCallback((T, b) => {
+    s.setActiveTab(T, b);
+  }, [s]), g = l.useCallback((T) => {
+    s.addNewTab({ groupId: T, title: "New Tab", makeActive: !0 });
+  }, [s]), v = l.useCallback((T, b) => {
+    s.removeTab(T, b);
+  }, [s]), h = l.useCallback((T, b, I) => {
+    s.setActiveTab(b, T), r.onStartTabDrag(T, b, I);
+  }, [s, r]), y = l.useCallback((T, b) => {
+    const I = o.groups[T];
+    !I || !I.activeTabId || r.onStartContentDrag(T, I.activeTabId, b);
+  }, [o.groups, r]), w = l.useMemo(
+    () => ({ getGroup: d, getGroupContent: u, onClickTab: p, onAddTab: g, onCloseTab: v, onStartTabDrag: h, onStartContentDrag: y, doubleClickToAdd: n, registerContentContainer: a }),
+    [d, u, p, g, v, h, y, n, a]
   );
-  return /* @__PURE__ */ m(ie, { value: w, children: t });
-}, X = (t, e, r, n) => {
-  if (M(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 X(t.a, [...e, "a"], { x: r.x, y: r.y, w: c, h: r.h }, n), X(t.b, [...e, "b"], { x: r.x + c, y: r.y, w: u, h: r.h }, n), n;
+  return /* @__PURE__ */ m(de, { value: w, children: t });
+}, gn = ({
+  children: t,
+  emptyContentComponent: e,
+  doubleClickToAdd: n
+}) => {
+  const { state: r } = $(), o = l.useMemo(() => {
+    const s = {};
+    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;
+  }, [r.groups]);
+  return /* @__PURE__ */ m(pn, { panels: r.panels, placements: o, children: /* @__PURE__ */ m(fn, { emptyContentComponent: e, doubleClickToAdd: n, children: t }) });
+}, X = (t, e, n, r) => {
+  if (_(t))
+    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 X(t.a, [...e, "a"], { x: r.x, y: r.y, w: r.w, h: a }, n), X(t.b, [...e, "b"], { x: r.x, y: r.y + a, w: r.w, h: i }, n), n;
-}, or = ({ containerRef: t }) => {
-  const { state: e } = j(), { adjustSplitRatio: r } = Ye(), n = l.useMemo(() => X(e.tree, [], { x: 0, y: 0, w: 100, h: 100 }, []), [e.tree]), [o, s] = l.useState(null);
-  if (l.useLayoutEffect(() => {
+  const a = n.h * t.ratio, i = n.h - a;
+  return X(t.a, [...e, "a"], { x: n.x, y: n.y, w: n.w, h: a }, r), X(t.b, [...e, "b"], { x: n.x, y: n.y + a, w: n.w, h: i }, r), r;
+}, bn = ({ containerRef: t }) => {
+  const { state: e } = $(), { adjustSplitRatio: n } = Ve(), r = l.useMemo(() => X(e.tree, [], { x: 0, y: 0, w: 100, h: 100 }, []), [e.tree]), [o, s] = l.useState(null);
+  if (nt(() => {
     const i = t.current;
     if (!i)
       return;
     const c = () => {
-      const T = i.getBoundingClientRect();
-      s({ left: T.left, top: T.top, width: T.width, height: T.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 T = window.ResizeObserver;
-        return typeof T == "function" ? T : null;
+        const v = window.ResizeObserver;
+        return typeof v == "function" ? v : null;
       } catch {
         return null;
       }
     }
-    const d = u(), g = d ? new d(() => c()) : null;
-    g && g.observe(i);
-    const v = () => c();
-    return window.addEventListener("scroll", v, !0), () => {
-      window.removeEventListener("scroll", v, !0), g && g.disconnect();
+    const u = d(), p = u ? new u(() => c()) : null;
+    p && p.observe(i);
+    const g = () => c();
+    return window.addEventListener("scroll", g, !0), () => {
+      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 = Wt;
+    }, u = te;
     if (i.direction === "vertical") {
-      const h = u.left + u.width * (i.linePos - i.parentRect.x) / i.parentRect.w, w = {
+      const h = d.left + d.width * (i.linePos - i.parentRect.x) / i.parentRect.w, y = {
         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(h)}px - ${u} / 2)`,
+        top: Math.round(d.top),
+        width: u,
+        height: Math.round(d.height),
         cursor: "col-resize",
         pointerEvents: "auto"
       };
-      return /* @__PURE__ */ m("div", { style: w, children: /* @__PURE__ */ m(nt, { direction: "vertical", onResize: (y) => {
-        const f = o.width * i.parentRect.w / 100, I = f === 0 ? 0 : y / f;
-        r({ path: i.path, deltaRatio: I });
+      return /* @__PURE__ */ m("div", { style: y, children: /* @__PURE__ */ m(ot, { direction: "vertical", onResize: (T) => {
+        const b = o.width * i.parentRect.w / 100, I = b === 0 ? 0 : T / b;
+        n({ path: i.path, deltaRatio: I });
       } }) }, `split-${c}`);
     }
-    const g = u.top + u.height * (i.linePos - i.parentRect.y) / i.parentRect.h, v = {
+    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(g)}px - ${d} / 2)`,
-      width: Math.round(u.width),
-      height: d,
+      left: Math.round(d.left),
+      top: `calc(${Math.round(p)}px - ${u} / 2)`,
+      width: Math.round(d.width),
+      height: u,
       cursor: "row-resize",
       pointerEvents: "auto"
     };
-    return /* @__PURE__ */ m("div", { style: v, children: /* @__PURE__ */ m(nt, { direction: "horizontal", onResize: (h) => {
-      const w = o.height * i.parentRect.h / 100, b = w === 0 ? 0 : h / w;
-      r({ path: i.path, deltaRatio: b });
+    return /* @__PURE__ */ m("div", { style: g, children: /* @__PURE__ */ m(ot, { direction: "horizontal", onResize: (h) => {
+      const y = o.height * i.parentRect.h / 100, w = y === 0 ? 0 : h / y;
+      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)) });
-}, sr = {
+  return /* @__PURE__ */ m("div", { style: { position: "fixed", inset: 0, pointerEvents: "none" }, children: r.map((i, c) => a(i, c)) });
+}, hn = {
   position: "relative",
   display: "flex",
   width: "100%",
   height: "100%"
-}, ir = ({
+}, mn = ({
   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(ye, { id: c, TabBarComponent: o, PanelGroupComponent: s });
+  const a = (c) => r ? /* @__PURE__ */ m(r, { groupId: c }) : /* @__PURE__ */ m(Ce, { id: c, TabBarComponent: o, PanelGroupComponent: s });
   if (e === "grid") {
-    const c = oe(t, a, !!r);
-    return /* @__PURE__ */ m(ot, { config: c.config, layers: c.layers });
+    const c = ue(t, a, !!n);
+    return /* @__PURE__ */ m(st, { config: c.config, layers: c.layers });
   }
-  const i = ne(t, a);
-  return /* @__PURE__ */ m(ot, { config: i.config, layers: i.layers });
-}, ar = ({
+  const i = ce(t, a);
+  return /* @__PURE__ */ m(st, { config: i.config, layers: i.layers });
+}, vn = ({
   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: g
+  splitLimits: d,
+  emptyContentComponent: u,
+  doubleClickToAdd: p
 }) => {
-  const { state: v } = j(), { onCommitContentDrop: T, onCommitTabDrop: h } = er(), w = l.useMemo(() => ({ ...sr, ...s }), [s]), b = l.useCallback(
-    ({ targetGroupId: y, zone: f }) => {
-      if (f === "center")
+  const { state: g } = $(), { onCommitContentDrop: v, onCommitTabDrop: h } = an(), y = l.useMemo(() => ({ ...hn, ...s }), [s]), w = l.useCallback(
+    ({ targetGroupId: T, zone: b }) => {
+      if (b === "center")
         return !0;
-      const I = f === "left" || f === "right" ? "vertical" : "horizontal";
-      return rt(v.tree, y, I, u);
+      const I = b === "left" || b === "right" ? "vertical" : "horizontal";
+      return rt(g.tree, T, I, d);
     },
-    [v.tree, u]
+    [g.tree, d]
   );
-  return /* @__PURE__ */ m(ae, { children: /* @__PURE__ */ H(
-    he,
+  return /* @__PURE__ */ m(pe, { children: /* @__PURE__ */ H(
+    ye,
     {
       containerRef: t,
-      dragThresholdPx: n,
-      onCommitContentDrop: T,
+      dragThresholdPx: r,
+      onCommitContentDrop: v,
       onCommitTabDrop: h,
-      isContentZoneAllowed: b,
+      isContentZoneAllowed: w,
       children: [
-        /* @__PURE__ */ m(nr, { emptyContentComponent: d, doubleClickToAdd: g, children: /* @__PURE__ */ m("div", { ref: t, className: a, style: w, children: /* @__PURE__ */ m(
-          ir,
+        /* @__PURE__ */ m(gn, { emptyContentComponent: u, doubleClickToAdd: p, children: /* @__PURE__ */ m("div", { ref: t, className: a, style: y, children: /* @__PURE__ */ m(
+          mn,
           {
-            state: v,
+            state: g,
             layoutMode: e,
-            gridTracksInteractive: r,
+            gridTracksInteractive: n,
             view: o,
             tabBarComponent: i,
             panelGroupComponent: c
           }
         ) }) }),
-        /* @__PURE__ */ m(or, { containerRef: t }),
-        /* @__PURE__ */ m(cr, {})
+        /* @__PURE__ */ m(bn, { containerRef: t }),
+        /* @__PURE__ */ m(In, {})
       ]
     }
   ) });
-}, cr = () => {
-  const t = q();
+}, In = () => {
+  const t = W();
   return /* @__PURE__ */ H(et, { children: [
-    /* @__PURE__ */ m(Pe, { suggest: t.suggest }),
-    /* @__PURE__ */ m(_e, {})
+    /* @__PURE__ */ m(Me, { suggest: t.suggest }),
+    /* @__PURE__ */ m(He, {})
   ] });
-}, gr = ({
+}, Pn = ({
   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: g,
-  tabBarComponent: v,
-  panelGroupComponent: T,
+  onStateChange: d,
+  className: u,
+  style: p,
+  tabBarComponent: g,
+  panelGroupComponent: v,
   splitLimits: h,
-  doubleClickToAdd: w
+  doubleClickToAdd: y
 }) => {
   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 b = l.useRef(null), y = l.useMemo(() => Gt(h), [h]);
+  const w = l.useRef(null), T = l.useMemo(() => Ct(h), [h]);
   return /* @__PURE__ */ m(
-    Qe,
+    on,
     {
       initialState: t,
       createGroupId: e,
-      createPanelId: r,
+      createPanelId: n,
       state: c,
-      onStateChange: u,
+      onStateChange: d,
       splitLimits: h,
-      children: /* @__PURE__ */ H(te, { children: [
-        /* @__PURE__ */ m(rr, {}),
+      children: /* @__PURE__ */ H(se, { children: [
+        /* @__PURE__ */ m(cn, {}),
         /* @__PURE__ */ m(
-          ar,
+          vn,
           {
-            containerRef: b,
-            layoutMode: n,
+            containerRef: w,
+            layoutMode: r,
             gridTracksInteractive: o,
             dragThresholdPx: s,
             view: a,
-            style: g,
-            className: d,
-            tabBarComponent: v,
-            panelGroupComponent: T,
-            splitLimits: y,
+            style: p,
+            className: u,
+            tabBarComponent: g,
+            panelGroupComponent: v,
+            splitLimits: T,
             emptyContentComponent: i,
-            doubleClickToAdd: w
+            doubleClickToAdd: y
           }
         )
       ] })
@@ -1850,16 +1991,18 @@ const fe = (t, e) => {
   );
 };
 export {
-  Gr as CSS_VAR_PREFIX,
-  vr as Drawer,
-  Ir as DrawerLayers,
-  ot as GridLayout,
-  pr as HorizontalDivider,
-  gr as PanelSystem,
-  nt as ResizeHandle,
-  br as buildInitialState,
-  wr as runTransition,
-  fr as useLayerDragHandle,
-  yr as useTransitionState
+  Hn as CSS_VAR_PREFIX,
+  kn as Drawer,
+  Mn as DrawerLayers,
+  _n as FloatingWindow,
+  st as GridLayout,
+  Gn as HorizontalDivider,
+  Pn as PanelSystem,
+  ot as ResizeHandle,
+  Rn as buildInitialState,
+  On as runTransition,
+  En as useFloatingState,
+  Cn as useLayerDragHandle,
+  Bn as useTransitionState
 };
 //# sourceMappingURL=index.js.map