react-panel-layout 0.3.0 → 0.4.2

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-C0uqEj9E.js";
-import { D as vr, g as Ir } from "./GridLayout-C0uqEj9E.js";
+import { u as Dt, a as At, b as kt, c as J, d as Mt, e as M, t as _t, R as ot, G as st } from "./GridLayout-CLvW8jID.js";
+import { D as Rr, f as Pr, r as Dr, g as Ar } from "./GridLayout-CLvW8jID.js";
 import { jsx as m, jsxs as H, Fragment as et } from "react/jsx-runtime";
 import * as l from "react";
-import { k as _t, l as Mt, m as Ot, H as Bt, p as Lt, q as $t, r as Ht, s as Nt, t as zt, u as Xt, T as Yt, v as Ft, w as jt, x as Vt, y as Kt, z as Ut, A as qt, S as Wt } from "./FloatingPanelFrame-BkjBp0S5.js";
-import { B as yr } from "./FloatingPanelFrame-BkjBp0S5.js";
-const Zt = (t) => ({
-  width: Bt,
+import { t as Ot, u as Bt, v as Lt, H as Ht, y as Nt, z as $t, A as zt, B as Xt, E as Yt, I as Ft, T as jt, J as Kt, K as Vt, L as Ut, M as Wt, N as qt, O as Zt, S as Jt } from "./styles-w0ZixggV.js";
+import { Q as Mr } from "./styles-w0ZixggV.js";
+import { a as rt } from "./usePivot-z9gumDf-.js";
+import { createPortal as Qt } from "react-dom";
+const te = (t) => ({
+  width: Ht,
   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" ? Ot : t === "hover" ? Bt : Lt
+}), Tr = ({ onResize: t, component: e, element: r }) => {
+  const { ref: n, isDragging: o, onPointerDown: s } = Dt({
     axis: "x",
     onResize: t
   }), [a, i] = l.useState(!1), c = {
     ref: n,
-    style: Zt(o ? "drag" : a ? "hover" : "idle"),
+    style: te(o ? "drag" : a ? "hover" : "idle"),
     role: "separator",
     "aria-orientation": "vertical",
     "data-dragging": o ? "true" : void 0,
@@ -25,20 +27,20 @@ const Zt = (t) => ({
     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();
+}, xr = () => {
+  const { layerId: t } = At(), { getLayerHandleProps: e } = kt();
   return l.useMemo(() => e(t), [e, t]);
-}, lt = l.createContext(null), Jt = () => {
-  const t = l.useContext(lt);
+}, dt = l.createContext(null), ee = () => {
+  const t = l.useContext(dt);
   if (!t)
     throw new Error("useKeybindings must be used within KeybindingsProvider");
   return t;
-}, Qt = (t) => {
+}, re = (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 }) => {
+}, ne = ({ children: t, configure: e }) => {
   const r = l.useRef({}), n = l.useCallback((a, i) => {
     r.current = { ...r.current, [a]: i };
   }, []), o = l.useCallback((a) => {
@@ -47,7 +49,7 @@ const Zt = (t) => ({
   }, []);
   l.useEffect(() => {
     const a = (i) => {
-      const c = Qt(i), u = r.current[c];
+      const c = re(i), u = r.current[c];
       u && u(i);
     };
     return window.addEventListener("keydown", a), () => {
@@ -57,8 +59,8 @@ const Zt = (t) => ({
   const s = l.useMemo(() => ({ register: n, unregister: o }), [n, o]);
   return l.useEffect(() => {
     e && e(s);
-  }, [s, e]), /* @__PURE__ */ m(lt.Provider, { value: s, children: t });
-}, ee = (t, e) => {
+  }, [s, e]), /* @__PURE__ */ m(dt.Provider, { value: s, children: t });
+}, oe = (t, e) => {
   t.register("Mod-\\", (r) => {
     r.preventDefault(), e.splitFocused("vertical");
   }), t.register("Mod-Shift-\\", (r) => {
@@ -73,9 +75,9 @@ const Zt = (t) => ({
   }), t.register("Alt-ArrowLeft", (r) => {
     r.preventDefault(), e.focusPrevGroup();
   });
-}, re = (t) => t.type === "group", dt = (t, e = { x: 0, y: 0, w: 100, h: 100 }) => {
+}, se = (t) => t.type === "group", pt = (t, e = { x: 0, y: 0, w: 100, h: 100 }) => {
   const r = /* @__PURE__ */ new Map(), n = (o, s) => {
-    if (re(o)) {
+    if (se(o)) {
       r.set(o.groupId, s);
       return;
     }
@@ -88,8 +90,8 @@ const Zt = (t) => ({
     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 });
   };
   return n(t, e), r;
-}, ne = (t, e) => {
-  const r = dt(t.tree), n = {
+}, ie = (t, e) => {
+  const r = pt(t.tree), n = {
     areas: [["root"]],
     rows: [{ size: "1fr" }],
     columns: [{ size: "1fr" }],
@@ -114,41 +116,41 @@ const Zt = (t) => ({
     };
   });
   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;
+}, ae = (t, e, r) => {
+  const n = pt(t.tree), o = Array.from(new Set(Array.from(n.values()).flatMap((h) => [h.x, h.x + h.w]))).sort((h, w) => h - w), s = Array.from(new Set(Array.from(n.values()).flatMap((h) => [h.y, h.y + h.h]))).sort((h, w) => h - w), a = o.slice(1).map((h, w) => `${h - o[w]}fr`), i = s.slice(1).map((h, w) => `${h - s[w]}fr`), c = a.map((h) => ({ size: h, resizable: r })), u = i.map((h) => ({ size: h, resizable: r })), d = (h, w, I, T) => {
+    for (const [b, v] of n.entries())
+      if (h >= v.x && w <= v.x + v.w && I >= v.y && T <= v.y + v.h)
+        return b;
     return ".";
-  }, g = [];
+  }, f = [];
   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);
+    for (let I = 0; I < o.length - 1; I += 1)
+      w.push(d(o[I], o[I + 1], s[h], s[h + 1]));
+    f.push(w);
   }
-  const v = {
-    areas: g,
+  const g = {
+    areas: f,
     rows: u,
     columns: c,
     gap: "0px"
-  }, T = Array.from(n.keys()).map((h) => ({
+  }, y = Array.from(n.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: y };
+}, ft = l.createContext(null), ce = () => {
+  const t = l.useContext(ft);
   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);
+}, ue = ({ value: t, children: e }) => /* @__PURE__ */ m(ft.Provider, { value: t, children: e }), bt = l.createContext(null), gt = () => {
+  const t = l.useContext(bt);
   if (!t)
     throw new Error("useDomRegistry must be used within DomRegistryProvider");
   return t;
-}, ae = ({ children: t }) => {
+}, le = ({ children: t }) => {
   const e = l.useRef(/* @__PURE__ */ new Map()), r = l.useCallback((c) => {
     const u = e.current.get(c);
     if (u)
@@ -159,8 +161,8 @@ const Zt = (t) => ({
     (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);
+        const f = e.current.get(c);
+        (f ? f.tabbar === null && f.content === null : !1) && e.current.delete(c);
       }
     },
     [r]
@@ -168,8 +170,8 @@ const Zt = (t) => ({
     (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);
+        const f = e.current.get(c);
+        (f ? f.group === null && f.content === null : !1) && e.current.delete(c);
       }
     },
     [r]
@@ -177,32 +179,32 @@ const Zt = (t) => ({
     (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);
+        const f = e.current.get(c);
+        (f ? f.group === null && f.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 = {
+  return /* @__PURE__ */ m(bt.Provider, { value: i, children: t });
+}, de = {
   display: "flex",
   flexDirection: "column",
   width: "100%",
   height: "100%"
-}, ue = {
+}, pe = {
   flex: "1 1 auto",
   minWidth: 0,
   minHeight: 0,
   position: "relative",
   overflow: "hidden"
 };
-function le(t, e, r, n) {
+function fe(t, e, r, n) {
   return t ? l.cloneElement(t, r, n) : e ? /* @__PURE__ */ m(e, { ...r, children: n }) : /* @__PURE__ */ m("div", { ...r, children: n });
 }
-function de(t, e, r, n) {
+function be(t, e, r, n) {
   return t ? l.cloneElement(t, r, n) : e ? /* @__PURE__ */ m(e, { ...r, children: n }) : /* @__PURE__ */ m("div", { ...r, children: n });
 }
-const pe = ({
+const ge = ({
   group: t,
   tabbar: e,
   content: r,
@@ -216,21 +218,21 @@ const pe = ({
 }) => {
   const d = {
     ref: o,
-    style: ce,
+    style: de,
     "data-group-id": t.id
-  }, v = le(u, c, {
+  }, g = fe(u, c, {
     ref: s,
-    style: ue,
+    style: pe,
     "data-dnd-zone": "content",
     onPointerDown: n
   }, r);
-  return de(i, a, d, /* @__PURE__ */ H(et, { children: [
+  return be(i, a, d, /* @__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) => {
+}, ht = l.memo(ge, (t, e) => t.group.id !== e.group.id || t.group.activeTabId !== e.group.activeTabId || t.group.tabs.length !== e.group.tabs.length ? !1 : t.group.tabs === e.group.tabs);
+ht.displayName = "PanelGroupView";
+const K = (t, e, r) => {
   const n = t.left, o = t.top, s = t.width, a = t.height, i = e - n, c = r - o, u = s / 3, d = a / 3;
   return i > u && i < s - u && c > d && c < a - d ? "center" : i < c && i < s - i && c < a - c ? "left" : s - i < c && s - i < i && c < a - c ? "right" : c < i && c < a - c && i < s - i ? "top" : "bottom";
 };
@@ -253,7 +255,7 @@ function A(t, e) {
     enumerable: !0
   }), r;
 }
-const fe = (t, e) => {
+const he = (t, e) => {
   const r = {};
   return Object.keys(t).forEach((n) => {
     const o = t[n];
@@ -262,7 +264,7 @@ const fe = (t, e) => {
       return e(a), a;
     });
   }), r;
-}, ht = (t, e) => {
+}, mt = (t, e) => {
   const r = {};
   return Object.keys(e).forEach((n) => {
     const o = e[n];
@@ -273,7 +275,7 @@ const fe = (t, e) => {
       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 = {
+}, vt = { phase: { kind: "idle" }, suggest: null, pointer: null, tabbarHover: null, draggingTabElement: null }, D = {
   startContent: A(
     "START_CONTENT",
     (t) => t
@@ -289,7 +291,7 @@ const fe = (t, e) => {
     (t) => t
   ),
   reset: A("RESET")
-}, be = ht(D, {
+}, me = mt(D, {
   startContent: (t, e) => ({
     phase: {
       kind: "content",
@@ -321,16 +323,16 @@ 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];
+  reset: () => vt
+}), ve = (t, e) => {
+  const r = me[e.type];
   return r ? r(t, e, void 0) : t;
-}, vt = l.createContext(null), q = () => {
-  const t = l.useContext(vt);
+}, It = l.createContext(null), W = () => {
+  const t = l.useContext(It);
   if (!t)
     throw new Error("usePanelInteractions must be used within InteractionsProvider");
   return t;
-}, he = ({
+}, Ie = ({
   containerRef: t,
   dragThresholdPx: e,
   onCommitContentDrop: r,
@@ -338,122 +340,122 @@ const fe = (t, e) => {
   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(ve, vt), c = gt(), u = l.useCallback(() => {
+    const I = Array.from(c.getAll().entries()), T = I.map(([p, x]) => ({ gid: p, el: x.content ?? x.group })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() })), b = I.map(([p, x]) => ({ gid: p, el: x.tabbar })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() })), v = I.map(([p, x]) => ({ gid: p, el: x.content ?? x.group })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() }));
+    return { groups: T, tabbars: b, contents: v };
+  }, [c]), d = J((I) => {
     if (!t.current)
       return;
-    const f = b.clientX, I = b.clientY, p = a.phase;
+    const b = I.clientX, v = I.clientY, p = a.phase;
     if (p.kind === "idle")
       return;
-    const G = Math.abs(f - p.startX), E = Math.abs(I - p.startY);
-    if (G < e && E < e) {
+    const x = Math.abs(b - p.startX), E = Math.abs(v - p.startY);
+    if (x < e && E < 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 (i(D.setPointer({ x: b, y: v })), p.kind === "content") {
+      const S = p.cache.groups.find(({ rect: G }) => b >= G.left && b <= G.right && v >= G.top && v <= G.bottom);
       if (!S) {
         i(D.setSuggest(null));
         return;
       }
-      const P = V(S.rect, f, I);
-      if (o && !o({ targetGroupId: S.gid, zone: P })) {
+      const R = K(S.rect, b, v);
+      if (o && !o({ targetGroupId: S.gid, zone: R })) {
         i(D.setSuggest(null));
         return;
       }
-      i(D.setSuggest({ rect: S.rect, zone: P }));
+      i(D.setSuggest({ rect: S.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);
+      const S = p.cache.tabbars.find(({ rect: C }) => b >= C.left && b <= C.right && v >= C.top && v <= C.bottom);
       if (S) {
-        const k = Array.from(S.el.querySelectorAll("[role='tab']")).map((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 }));
+        const k = Array.from(S.el.querySelectorAll("[role='tab']")).map(($) => $.getBoundingClientRect()), P = k.map(($) => $.left + $.width / 2), O = P.findIndex(($) => b < $), B = O === -1 ? P.length : O, Pt = k.length === 0 ? S.rect.left + 8 : B === 0 ? k[0].left : B === k.length ? k[k.length - 1].right : (k[B - 1].right + k[B].left) / 2;
+        i(D.setTabbarHover({ groupId: S.gid, index: B, rect: S.rect, insertX: Pt }));
       } 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 = p.cache.contents.find(({ rect: C }) => b >= C.left && b <= C.right && v >= C.top && v <= C.bottom);
+      if (!R) {
         i(D.setSuggest(null));
         return;
       }
-      const x = V(P.rect, f, I);
-      if (o && !o({ targetGroupId: P.gid, zone: x })) {
+      const G = K(R.rect, b, v);
+      if (o && !o({ targetGroupId: R.gid, zone: G })) {
         i(D.setSuggest(null));
         return;
       }
-      i(D.setSuggest({ rect: P.rect, zone: x }));
+      i(D.setSuggest({ rect: R.rect, zone: G }));
     }
-  }), g = J((b) => {
-    const y = t.current, f = a;
-    if (i(D.reset()), !y)
+  }), f = J((I) => {
+    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 v = I.clientX, p = I.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);
+    const x = Math.abs(v - b.phase.startX), E = Math.abs(p - b.phase.startY);
+    if (!(x < e && E < e)) {
+      if (b.phase.kind === "content") {
+        const S = b.phase.cache.groups.find(({ rect: C }) => v >= C.left && v <= C.right && p >= C.top && p <= C.bottom);
         if (!S)
           return;
-        const P = S.gid ?? null;
-        if (!P)
+        const R = S.gid ?? null;
+        if (!R)
           return;
-        const x = V(S.rect, I, p);
-        if (o && !o({ targetGroupId: P, zone: x }))
+        const G = K(S.rect, v, p);
+        if (o && !o({ targetGroupId: R, zone: G }))
           return;
-        r({ fromGroupId: f.phase.fromGroupId, tabId: f.phase.tabId, targetGroupId: P, zone: x });
+        r({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: R, zone: G });
         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 (b.phase.kind === "tab") {
+        const S = b.phase.cache.tabbars.find(({ rect: G }) => v >= G.left && v <= G.right && p >= G.top && p <= G.bottom);
         if (S) {
-          const x = S.gid;
-          if (!x)
+          const G = S.gid;
+          if (!G)
             return;
           const k = Array.from(S.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) => v < B), O = P === -1 ? k.length : P;
+          n({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: G, 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;
-          if (!x)
+        const R = b.phase.cache.contents.find(({ rect: G }) => v >= G.left && v <= G.right && p >= G.top && p <= G.bottom);
+        if (R) {
+          const G = R.gid ?? null;
+          if (!G)
             return;
-          const R = V(P.rect, I, p);
-          if (o && !o({ targetGroupId: x, zone: R }))
+          const C = K(R.rect, v, p);
+          if (o && !o({ targetGroupId: G, zone: C }))
             return;
-          r({ fromGroupId: f.phase.fromGroupId, tabId: f.phase.tabId, targetGroupId: x, zone: R });
+          r({ fromGroupId: b.phase.fromGroupId, tabId: b.phase.tabId, targetGroupId: G, zone: C });
         }
       }
     }
-  }), 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", d), window.addEventListener("pointerup", f, { once: !0 }), window.addEventListener("pointercancel", g, { once: !0 }), () => {
+        window.removeEventListener("pointermove", d), window.removeEventListener("pointerup", f), window.removeEventListener("pointercancel", g);
       };
   }, [a.phase.kind]);
-  const T = l.useCallback((b, y, f) => {
-    if (f.button !== 0)
+  const y = l.useCallback((I, 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 v = u();
+    i(D.startContent({ x: b.clientX, y: b.clientY, groupId: I, tabId: T, cache: v }));
+  }, [u]), h = l.useCallback((I, T, b) => {
+    if (b.button !== 0)
       return;
-    const I = f.currentTarget;
-    I && I.setPointerCapture(f.pointerId);
+    const v = b.currentTarget;
+    v && v.setPointerCapture(b.pointerId);
     const p = u();
-    i(D.startTab({ x: f.clientX, y: f.clientY, groupId: y, tabId: b, cache: p, element: I }));
+    i(D.startTab({ x: b.clientX, y: b.clientY, groupId: T, tabId: I, cache: p, element: v }));
   }, [u]), w = l.useMemo(() => ({
     suggest: a.suggest,
     isTabDragging: a.phase.kind === "tab",
@@ -461,15 +463,15 @@ const fe = (t, e) => {
     dragPointer: a.pointer,
     tabbarHover: a.tabbarHover,
     draggingTabElement: a.draggingTabElement,
-    onStartContentDrag: T,
+    onStartContentDrag: y,
     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, y, h]);
+  return /* @__PURE__ */ m(It.Provider, { value: w, children: s });
+}, it = {
   display: "inline-flex",
   alignItems: "center",
   userSelect: "none"
-}, me = ({
+}, we = ({
   groupId: t,
   tab: e,
   active: r,
@@ -483,17 +485,17 @@ const fe = (t, e) => {
 }) => {
   const d = l.useEffectEvent(() => {
     o(e.id);
-  }), g = l.useEffectEvent((w) => {
+  }), f = l.useEffectEvent((w) => {
     s && w.button === 0 && s(e.id, t, w);
-  }), v = () => {
+  }), g = () => {
     const w = !!a;
     return /* @__PURE__ */ m(l.Activity, { mode: w ? "visible" : "hidden", children: /* @__PURE__ */ m(
       "button",
       {
         type: "button",
         "aria-label": `Close tab ${e.title}`,
-        onClick: (b) => {
-          a && (b.stopPropagation(), a(t, e.id));
+        onClick: (I) => {
+          a && (I.stopPropagation(), a(t, e.id));
         },
         style: { marginLeft: 6 },
         tabIndex: w ? void 0 : -1,
@@ -502,27 +504,27 @@ const fe = (t, e) => {
         children: "×"
       }
     ) });
-  }, T = {
+  }, y = {
     role: "tab",
     "aria-selected": r,
     tabIndex: r ? 0 : -1,
-    style: st,
+    style: it,
     onClick: d,
-    onPointerDown: g,
+    onPointerDown: f,
     onDoubleClick: u,
     "data-tab-id": e.id,
     "data-active": r ? "true" : "false",
     "data-dragging": n ? "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,
+    style: it,
     onClick: () => {
       o(e.id);
     },
@@ -532,14 +534,14 @@ const fe = (t, e) => {
     onDoubleClick: u,
     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", { ...y });
+}, ye = {
   display: "flex",
   alignItems: "center"
-}, Ie = {
+}, Te = {
   flex: "1 1 auto",
   alignSelf: "stretch"
-}, we = ({
+}, xe = ({
   group: t,
   onClickTab: e,
   onStartDrag: r,
@@ -552,9 +554,9 @@ const fe = (t, e) => {
   onCloseTab: u,
   doubleClickToAdd: d
 }) => {
-  const { isTabDragging: g, draggingTabId: v } = q(), T = l.useRef(null), h = l.useCallback(
+  const { isTabDragging: f, draggingTabId: g } = W(), y = l.useRef(null), h = l.useCallback(
     (p) => {
-      if (T.current = p, !!n) {
+      if (y.current = p, !!n) {
         if (typeof n == "function") {
           n(p);
           return;
@@ -567,26 +569,26 @@ const fe = (t, e) => {
     },
     [n]
   ), w = l.useEffectEvent((p) => {
-    const G = T.current ?? p.currentTarget;
-    if (!G)
+    const x = y.current ?? p.currentTarget;
+    if (!x)
       return;
-    const E = Array.from(G.querySelectorAll('[role="tab"]'));
+    const E = Array.from(x.querySelectorAll('[role="tab"]'));
     if (E.length === 0)
       return;
-    const S = (C) => {
-      const O = Math.max(0, Math.min(C, E.length - 1)), B = E[O];
+    const S = (P) => {
+      const O = Math.max(0, Math.min(P, E.length - 1)), B = E[O];
       B && B.focus();
-    }, P = document.activeElement, x = P ? E.indexOf(P) : E.findIndex((C) => C.getAttribute("data-tab-id") === t.activeTabId);
+    }, R = document.activeElement, G = R ? E.indexOf(R) : E.findIndex((P) => P.getAttribute("data-tab-id") === t.activeTabId);
     if (p.key === "ArrowRight") {
       p.preventDefault();
-      const C = x >= 0 ? x + 1 : 0;
-      S(C >= E.length ? 0 : C);
+      const P = G >= 0 ? G + 1 : 0;
+      S(P >= E.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);
+      const P = G >= 0 ? G - 1 : E.length - 1;
+      S(P < 0 ? E.length - 1 : P);
       return;
     }
     if (p.key === "Home") {
@@ -599,44 +601,44 @@ const fe = (t, e) => {
     }
     if (p.key === "Enter" || p.key === " ") {
       p.preventDefault();
-      const O = (x >= 0 ? E[x] : null)?.getAttribute("data-tab-id") ?? null;
+      const O = (G >= 0 ? E[G] : 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;
+        const O = (G >= 0 ? E[G] : null)?.getAttribute("data-tab-id") ?? null;
         O && u(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") {
+    const C = (p.ctrlKey ? 1 : 0) + (p.metaKey ? 1 : 0) > 0, k = typeof p.key == "string" ? p.key.toLowerCase() : "";
+    if (C && k === "t") {
       c && (p.preventDefault(), c(t.id));
       return;
     }
   });
   l.useEffect(() => {
-    const p = T.current;
+    const p = y.current;
     if (!p)
       return;
-    const G = p.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);
-    if (G === document.activeElement)
+    const x = p.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);
+    if (x === document.activeElement)
       return;
-    !p.contains(document.activeElement) && G && G.focus();
+    !p.contains(document.activeElement) && x && x.focus();
   }, [t.activeTabId]);
-  const b = {
-    style: ve,
+  const I = {
+    style: ye,
     role: "tablist",
     "data-tabbar": "true",
     "data-group-id": t.id,
-    "data-dragging": g ? "true" : "false",
+    "data-dragging": f ? "true" : "false",
     onKeyDown: w
-  }, y = Dt({
+  }, T = Mt({
     element: s,
     component: o
-  }), f = () => c ? /* @__PURE__ */ m(
+  }), b = () => c ? /* @__PURE__ */ m(
     "button",
     {
       type: "button",
@@ -646,17 +648,17 @@ const fe = (t, e) => {
       },
       children: "+"
     }
-  ) : null, I = l.useCallback(() => {
+  ) : null, v = 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,
+  return /* @__PURE__ */ H(T, { ...I, ref: h, onDoubleClick: v, children: [
+    t.tabs.map((p, x) => /* @__PURE__ */ m(
+      we,
       {
         groupId: t.id,
         tab: p,
         active: t.activeTabId === p.id,
-        dragging: v === p.id,
+        dragging: g === p.id,
         onClickTab: e,
         onStartDrag: r,
         onCloseTab: u,
@@ -664,65 +666,64 @@ const fe = (t, e) => {
         tabElement: i,
         onDoubleClick: (E) => E.stopPropagation()
       },
-      `${t.id}:${p.id}:${G}`
+      `${t.id}:${p.id}:${x}`
     )),
-    /* @__PURE__ */ m("span", { style: Ie }),
-    f()
+    /* @__PURE__ */ m("span", { style: Te }),
+    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);
+}, Ge = ({ id: t, TabBarComponent: e, PanelGroupComponent: r }) => {
+  const { getGroup: n, getGroupContent: o, onClickTab: s, onAddTab: a, onCloseTab: i, onStartTabDrag: c, doubleClickToAdd: u, registerContentContainer: d } = ce(), { setGroupEl: f, setTabbarEl: g, setContentEl: y } = gt(), h = l.useCallback(
+    (x) => {
+      f(t, x);
     },
-    [t, g]
+    [t, f]
   ), w = l.useCallback(
-    (G) => {
-      T(t, G);
+    (x) => {
+      y(t, x), d(t, x);
     },
-    [t, T]
-  ), b = l.useCallback(
-    (G) => {
-      v(t, G);
+    [t, y, d]
+  ), I = l.useCallback(
+    (x) => {
+      g(t, x);
     },
-    [t, v]
-  ), y = n(t);
-  if (!y)
+    [t, g]
+  ), T = n(t);
+  if (!T)
     return null;
-  const f = o(t);
+  const b = o(t);
   return /* @__PURE__ */ m(
-    r ?? ((G) => /* @__PURE__ */ m(gt, { ...G })),
+    r ?? ((x) => /* @__PURE__ */ m(ht, { ...x })),
     {
-      group: y,
+      group: T,
       tabbar: /* @__PURE__ */ m(
-        e ?? we,
+        e ?? xe,
         {
-          rootRef: b,
-          group: y,
-          onClickTab: (G) => s(t, G),
+          rootRef: I,
+          group: T,
+          onClickTab: (x) => s(t, x),
           onAddTab: a,
           onCloseTab: i,
-          onStartDrag: (G, E, S) => u(G, E, S),
-          doubleClickToAdd: d
+          onStartDrag: (x, E, S) => c(x, E, S),
+          doubleClickToAdd: u
         }
       ),
-      content: f,
+      content: b,
       groupRef: h,
-      contentRef: w,
-      onContentPointerDown: (G) => c(t, G)
+      contentRef: w
     }
   );
-}, Te = (t, e) => {
+}, Se = (t, e) => {
   const r = new Array(16);
   for (let n = 0; n < 4; n++)
     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) => {
+}, V = (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 o = Se(e, n);
+    return V(o);
   };
   return Object.freeze({
     translate: (n = 0, o = 0, s = 0) => r([
@@ -971,7 +972,7 @@ const fe = (t, e) => {
     rotate: (n, o, s, a) => {
       const i = Math.sqrt(o * o + s * s + a * a);
       if (i === 0)
-        return K(e);
+        return V(e);
       o /= i, s /= i, a /= i;
       const c = Math.cos(n), u = Math.sin(n), d = 1 - c;
       return r([
@@ -996,7 +997,7 @@ const fe = (t, e) => {
     rotate3d: (n, o, s, a) => {
       const i = Math.sqrt(n * n + o * o + s * s);
       if (i === 0)
-        return K(e);
+        return V(e);
       n /= i, o /= i, s /= i;
       const c = Math.cos(a), u = Math.sin(a), d = 1 - c;
       return r([
@@ -1113,7 +1114,7 @@ const fe = (t, e) => {
     ].join(`
 `)
   });
-}, Ge = () => K([
+}, Ee = () => V([
   1,
   0,
   0,
@@ -1130,95 +1131,95 @@ const fe = (t, e) => {
   0,
   0,
   1
-]), xe = {
+]), Ce = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
-  zIndex: Lt
-}, Se = {
+  zIndex: Nt
+}, Re = {
   position: "absolute",
-  border: `${Nt} dashed ${zt}`,
-  background: Ht,
+  border: `${Xt} dashed ${Yt}`,
+  background: zt,
   borderRadius: $t,
   transformOrigin: "top left"
-}, L = (t, e) => e <= 0 ? 0 : _(t / e, 0), Ee = (t, e, r) => {
+}, L = (t, e) => e <= 0 ? 0 : M(t / e, 0), Pe = (t, e, r) => {
   const { width: n, height: o } = t, s = r / 2, a = n > 0 ? n : 1, i = o > 0 ? o : 1, c = {
     translateX: r,
     translateY: r,
-    scaleX: L(_(n - r * 2, 0), a),
-    scaleY: L(_(o - r * 2, 0), i)
+    scaleX: L(M(n - r * 2, 0), a),
+    scaleY: L(M(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)
+    scaleX: L(M(n / 2 - r * 1.5, 0), a),
+    scaleY: L(M(o - r * 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)
-  }, g = {
+    scaleX: L(M(n / 2 - r * 1.5, 0), a),
+    scaleY: L(M(o - r * 2, 0), i)
+  }, f = {
     translateX: r,
     translateY: r,
-    scaleX: L(_(n - r * 2, 0), a),
-    scaleY: L(_(o / 2 - r * 1.5, 0), i)
-  }, v = {
+    scaleX: L(M(n - r * 2, 0), a),
+    scaleY: L(M(o / 2 - r * 1.5, 0), i)
+  }, g = {
     translateX: r,
     translateY: o / 2 + s,
-    scaleX: L(_(n - r * 2, 0), a),
-    scaleY: L(_(o / 2 - r * 1.5, 0), i)
-  }, T = {
+    scaleX: L(M(n - r * 2, 0), a),
+    scaleY: L(M(o / 2 - r * 1.5, 0), i)
+  }, y = {
     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;
+    top: f,
+    bottom: g
+  }, { translateX: h, translateY: w, scaleX: I, scaleY: T } = y[e];
+  return Ee().translate(h, w, 0).scale(I, T, 1).toCSS();
+}, De = (t, e) => {
+  const r = Ft;
   return {
-    ...Se,
+    ...Re,
     left: t.left,
     top: t.top,
     width: t.width,
     height: t.height,
-    transform: Ee(t, e, r)
+    transform: Pe(t, e, r)
   };
-}, Pe = ({ suggest: t }) => {
+}, Ae = ({ 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 { rect: e, zone: r } = t, n = De(e, r);
+  return /* @__PURE__ */ m("div", { style: Ce, children: /* @__PURE__ */ m("div", { style: n }) });
+}, ke = typeof window < "u" && typeof document < "u", Me = (t) => {
   const [e, r] = l.useState(null), [n, o] = l.useState(null);
-  return At(() => {
-    if (!Ce || !t) {
+  return rt(() => {
+    if (!ke || !t) {
       r(null), o(null);
       return;
     }
     const s = t.getBoundingClientRect();
     r({ width: s.width, height: s.height }), o(t.outerHTML);
   }, [t]), { html: n, size: e };
-}, Ae = {
+}, _e = {
   position: "fixed",
   inset: 0,
   pointerEvents: "none",
-  zIndex: qt
-}, ke = {
+  zIndex: Zt
+}, Oe = {
   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(() => {
+  width: qt,
+  borderRadius: Wt,
+  background: Ut,
+  boxShadow: Vt
+}, Be = () => {
+  const { isTabDragging: t, draggingTabId: e, dragPointer: r, tabbarHover: n, draggingTabElement: o } = W(), { html: s, size: a } = Me(o), i = r !== null && e !== null, c = l.useMemo(() => {
     if (!(!i || !r))
       return {
         position: "absolute",
         left: r.x,
         top: r.y,
-        transform: `translate(${Yt}, ${Ft})`,
+        transform: `translate(${jt}, ${Kt})`,
         pointerEvents: "none"
       };
   }, [i, r]), u = l.useMemo(() => {
@@ -1227,13 +1228,13 @@ const fe = (t, e) => {
   }, [c, o, a]), d = l.useMemo(() => {
     if (n)
       return {
-        ...ke,
+        ...Oe,
         left: n.insertX,
         top: n.rect.top + 4,
         height: Math.max(0, n.rect.height - 8)
       };
   }, [n]);
-  return t ? /* @__PURE__ */ H("div", { style: Ae, children: [
+  return t ? /* @__PURE__ */ H("div", { style: _e, children: [
     /* @__PURE__ */ m(l.Activity, { mode: u ? "visible" : "hidden", children: /* @__PURE__ */ m("div", { style: u, children: /* @__PURE__ */ m(
       "div",
       {
@@ -1243,26 +1244,26 @@ const fe = (t, e) => {
     ) }) }),
     /* @__PURE__ */ m(l.Activity, { mode: d ? "visible" : "hidden", children: /* @__PURE__ */ m("div", { style: d }) })
   ] }) : null;
-}, M = (t) => t.type === "group", Y = (t, e = []) => {
-  if (M(t))
+}, _ = (t) => t.type === "group", F = (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 r = F(t.a, e);
+  return F(t.b, r);
+}, q = (t, e) => e.reduce((r, n) => _(r) ? r : r[n], t), j = (t, e, r) => {
   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) };
+  return _(t) ? t : n === "a" ? { ...t, a: j(t.a, o, r) } : { ...t, b: j(t.b, o, r) };
 }, U = (t, e, r = []) => {
-  if (M(t))
+  if (_(t))
     return t.groupId === e ? { splitPath: null, side: null } : null;
-  if (M(t.a) && t.a.groupId === e)
+  if (_(t.a) && t.a.groupId === e)
     return { splitPath: r, side: "a" };
-  if (M(t.b) && t.b.groupId === e)
+  if (_(t.b) && t.b.groupId === e)
     return { splitPath: r, side: "b" };
   const n = U(t.a, e, [...r, "a"]);
   return n || U(t.b, e, [...r, "b"]);
-}, It = (t, e, r, n) => {
+}, wt = (t, e, r, n) => {
   const o = n(), s = U(t, e), a = {
     type: "split",
     direction: r,
@@ -1272,26 +1273,26 @@ const fe = (t, e) => {
   };
   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) => {
+  return { tree: j(t, i, u), newGroupId: o };
+}, Le = (t, e) => {
   const r = U(t, e);
   if (!r || r.splitPath === null)
     return { tree: t, survivorGroupId: e };
-  const n = r.splitPath, o = W(t, n);
-  if (M(o))
+  const n = r.splitPath, o = q(t, n);
+  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 = r.side === "a" ? o.b : o.a, a = j(t, n, s), i = _(s) ? s.groupId : F(s)[0] ?? null;
   return { tree: a, survivorGroupId: i };
-}, Oe = (t, e, r) => {
-  const n = W(t, e);
-  if (M(n))
+}, He = (t, e, r) => {
+  const n = q(t, e);
+  if (_(n))
     return t;
-  const o = { ...n, ratio: _(r, 0.05, 0.95) };
-  return F(t, e, o);
+  const o = { ...n, ratio: M(r, 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;
@@ -1299,29 +1300,29 @@ const fe = (t, e) => {
     const a = o.groups[s];
     if (!a || a.tabs.length > 0 || Object.keys(o.groups).length <= 1)
       return o;
-    const { tree: c, survivorGroupId: 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: u } = Le(o.tree, s), { [s]: d, ...f } = o.groups, g = F(c), y = o.focusedGroupId === s ? u ?? g[0] ?? null : o.focusedGroupId;
+    return { ...o, tree: c, groups: f, groupOrder: g, focusedGroupId: y };
   };
   return t.groupOrder.reduce((o, s) => n(o, s), t);
-}, Be = (t) => ({ id: t, tabIds: [], tabs: [], activeTabId: null }), it = (t, e, r, n) => {
+}, Ne = (t) => ({ id: t, tabIds: [], tabs: [], activeTabId: null }), at = (t, e, r, n) => {
   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 };
+  const a = { ...t.panels, [r.id]: r }, i = [...s.tabIds, r.id], c = n ? r.id : s.activeTabId ?? r.id, u = i.map((f) => a[f]), d = { ...s, tabIds: i, tabs: u, activeTabId: c };
   return o[e] = d, { ...t, panels: a, groups: o };
-}, Le = (t, e, r) => {
+}, $e = (t, e, r) => {
   const n = { ...t.groups }, o = n[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) => {
+}, ct = (t, e, r, n, o) => {
   const s = t.groups[e], a = t.groups[r];
   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 i = { ...t.groups }, c = s.tabIds.filter((f) => f !== n), u = [...a.tabIds.filter((f) => f !== n), n], d = s.activeTabId === n ? c[0] ?? null : s.activeTabId;
+  return i[e] = { ...s, tabIds: c, tabs: c.map((f) => t.panels[f]), activeTabId: d }, i[r] = { ...a, tabIds: u, tabs: u.map((f) => t.panels[f]), activeTabId: n }, { ...t, groups: i };
+}, yt = (t, e, r) => {
   const n = t.groups[e];
   if (!n)
     throw new Error(`setActiveTab: group ${e} not found.`);
@@ -1329,85 +1330,85 @@ const fe = (t, e) => {
     throw new Error(`setActiveTab: tab ${r} not found in group ${e}.`);
   const o = { ...t.groups, [e]: { ...n, activeTabId: r } };
   return { ...t, groups: o, focusedGroupId: e };
-}, ct = (t, e, r, n, o) => {
+}, ut = (t, e, r, n, 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 u = i.map((g) => a[g]), d = o ? r.id : s.activeTabId ?? r.id, f = { ...t.groups, [e]: { ...s, tabIds: i, tabs: u, activeTabId: d } };
+  return { ...t, panels: a, groups: f };
+}, N = (t, e) => {
   if (!t.groups[e])
     throw new Error(`setFocusedGroup: group ${e} not found.`);
   return { ...t, focusedGroupId: e };
-}, $e = (t, e) => {
+}, ze = (t, e) => {
   const r = e - 1, n = t.groupOrder[r];
-  return n ? $(t, n) : t;
-}, He = (t) => {
+  return n ? N(t, n) : t;
+}, Xe = (t) => {
   const e = t.groupOrder, r = t.focusedGroupId;
   if (!r) {
     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) => {
+  return N(t, o);
+}, Ye = (t) => {
   const e = t.groupOrder, r = t.focusedGroupId;
   if (!r) {
     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);
+  return N(t, o);
+}, Tt = (t, e, r, n) => {
+  const { tree: o, newGroupId: s } = wt(t.tree, e, r, n), a = { ...t.groups, [s]: Ne(s) }, i = F(o);
   return { ...t, tree: o, groups: a, groupOrder: i, focusedGroupId: s };
-}, br = (t) => {
+}, Gr = (t) => {
   const r = { type: "group", groupId: "g_1" }, n = Object.fromEntries(t.map((i) => [i.id, i])), s = { g_1: { id: "g_1", tabIds: t.map((i) => i.id), tabs: t, activeTabId: t[0]?.id ?? null } };
   return { tree: r, panels: n, groups: s, groupOrder: ["g_1"], focusedGroupId: "g_1" };
-}, 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);
+}, Fe = l.createContext(null), je = ({ value: t, children: e }) => /* @__PURE__ */ m(Fe.Provider, { value: t, children: e }), xt = l.createContext(null), Ke = () => {
+  const t = l.useContext(xt);
   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) => {
+}, Ve = ({ value: t, children: e }) => /* @__PURE__ */ m(xt.Provider, { value: t, children: e }), Ue = l.createContext(null), We = ({ value: t, children: e }) => /* @__PURE__ */ m(Ue.Provider, { value: t, children: e }), X = (t) => {
+  const e = _t(t, Number.POSITIVE_INFINITY);
+  return M(e, 1);
+}, qe = (t) => typeof t == "object" && t !== null, Ze = (t) => qe(t) ? "rows" in t ? !0 : "cols" in t : !1, Gt = (t) => {
   if (!t)
     return {
       rows: Number.POSITIVE_INFINITY,
       cols: Number.POSITIVE_INFINITY
     };
   if (typeof t == "number") {
-    const r = z(t);
+    const r = X(t);
     return { rows: r, cols: r };
   }
-  if (Ue(t))
+  if (Ze(t))
     return {
-      rows: z(t.rows),
-      cols: z(t.cols)
+      rows: X(t.rows),
+      cols: X(t.cols)
     };
   const e = t;
   return {
-    rows: z(e.maxHorizontal),
-    cols: z(e.maxVertical)
+    rows: X(e.maxHorizontal),
+    cols: X(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__");
+}, Je = (t, e, r) => {
+  const { tree: n } = wt(t, e, r, () => "__preview__");
   return n;
-}, rt = (t, e, r, n) => {
+}, nt = (t, e, r, n) => {
   if (!Number.isFinite(n.rows) && !Number.isFinite(n.cols))
     return !0;
-  const o = qe(t, e, r), s = tt(o);
+  const o = Je(t, e, r), s = tt(o);
   return !(s.horizontal > n.rows || s.vertical > n.cols);
-}, xt = {
+}, St = {
   splitFocused: A("panelState/splitFocused", (t) => ({ direction: t })),
   focusGroupIndex: A("panelState/focusGroupIndex", (t) => ({ index1Based: t })),
   focusNextGroup: A("panelState/focusNextGroup"),
@@ -1431,79 +1432,79 @@ const fe = (t, e) => {
     (t) => t
   ),
   adjustSplitRatio: A("panelState/adjustSplitRatio", (t) => t)
-}, We = (t, e, r) => {
+}, Qe = (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))
+  if (!n || !o || !n.tabs.find((f) => f.id === e.tabId))
     return t;
   if (e.zone === "center" && e.fromGroupId === e.targetGroupId)
-    return wt(t, e.fromGroupId, e.tabId);
+    return yt(t, e.fromGroupId, e.tabId);
   if (e.zone === "center") {
-    const g = at(t, e.fromGroupId, e.targetGroupId, e.tabId);
-    return $(g, e.targetGroupId);
+    const f = ct(t, e.fromGroupId, e.targetGroupId, e.tabId);
+    return N(f, e.targetGroupId);
   }
   const a = e.zone === "left" || e.zone === "right" ? "vertical" : "horizontal";
-  if (!rt(t.tree, e.targetGroupId, a, r.splitLimits))
+  if (!nt(t.tree, e.targetGroupId, a, r.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 i = r.createGroupId(), c = Tt(t, e.targetGroupId, a, () => i), u = e.zone === "left" || e.zone === "top" ? e.targetGroupId : i, d = ct(c, e.fromGroupId, u, e.tabId);
+  return N(d, u);
+}, tr = (t, e) => {
   const r = t.groups[e.fromGroupId], n = t.groups[e.targetGroupId];
   if (!r || !n || !t.panels[e.tabId])
     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 = r.tabIds.filter((T) => T !== e.tabId), y = Math.max(0, Math.min(e.targetIndex, g.length)), h = g.slice(0, y).concat([e.tabId], g.slice(y)), w = h.map((T) => t.panels[T]).filter(Boolean), I = { ...t.groups, [e.fromGroupId]: { ...r, tabIds: h, tabs: w } };
+    return { ...t, groups: I };
   }
-  const s = { ...t.groups }, a = r.tabIds.filter((v) => v !== e.tabId), i = a.map((v) => t.panels[v]);
+  const s = { ...t.groups }, a = r.tabIds.filter((g) => g !== e.tabId), i = a.map((g) => t.panels[g]);
   s[e.fromGroupId] = {
     ...r,
     tabIds: a,
     tabs: i,
     activeTabId: r.activeTabId === e.tabId ? i[0]?.id ?? null : r.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, {
+  const c = n.tabIds.filter((g) => g !== e.tabId), u = Math.max(0, Math.min(e.targetIndex, c.length)), d = c.slice(0, u).concat([e.tabId], c.slice(u)), f = d.map((g) => t.panels[g]).filter(Boolean);
+  return s[e.targetGroupId] = { ...n, tabIds: d, tabs: f, activeTabId: e.tabId }, { ...t, groups: s, focusedGroupId: e.targetGroupId };
+}, er = mt(St, {
   splitFocused: (t, e, r) => {
     const n = t.focusedGroupId ?? t.groupOrder[0] ?? null;
-    return !n || !rt(t.tree, n, e.payload.direction, r.splitLimits) ? t : yt(t, n, e.payload.direction, r.createGroupId);
+    return !n || !nt(t.tree, n, e.payload.direction, r.splitLimits) ? t : Tt(t, n, e.payload.direction, r.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) => ze(t, e.payload.index1Based),
+  focusNextGroup: (t) => Xe(t),
+  focusPrevGroup: (t) => Ye(t),
+  setActiveTab: (t, e) => yt(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);
+    return typeof o == "number" ? ut(t, r, n, o, s ?? !0) : at(t, r, n, s ?? !0);
   },
   addNewTab: (t, e, r) => {
     if (!r.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);
+    return typeof a == "number" ? ut(t, s, o, a, i ?? !0) : at(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) => $e(t, e.payload.groupId, e.payload.tabId),
+  contentDrop: (t, e, r) => Qe(t, e.payload, r),
+  tabDrop: (t, e) => tr(t, e.payload),
   adjustSplitRatio: (t, e) => {
-    const r = W(t.tree, e.payload.path);
-    if (M(r))
+    const r = q(t.tree, e.payload.path);
+    if (_(r))
       return t;
-    const n = Oe(t.tree, e.payload.path, r.ratio + e.payload.deltaRatio);
+    const n = He(t.tree, e.payload.path, r.ratio + e.payload.deltaRatio);
     return { ...t, tree: n };
   }
-}), ut = (t, e, r) => {
-  const n = Je[e.type];
+}), lt = (t, e, r) => {
+  const n = er[e.type];
   if (!n)
     return t;
   const o = n(t, e, r);
   return Q(o);
-}, St = l.createContext(null), j = () => {
-  const t = l.useContext(St);
+}, Et = l.createContext(null), z = () => {
+  const t = l.useContext(Et);
   if (!t)
     throw new Error("usePanelSystem must be used within PanelSystemProvider");
   return t;
-}, Qe = ({
+}, rr = ({
   initialState: t,
   createGroupId: e,
   createPanelId: r,
@@ -1514,53 +1515,53 @@ const fe = (t, e) => {
 }) => {
   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 [d, f] = l.useReducer(
+    (x, E) => lt(x, E, u.current),
     i
-  ), v = l.useMemo(
+  ), g = l.useMemo(
     () => n ? Q(n) : d,
     [n, d]
-  ), T = l.useRef(v);
-  T.current = v;
+  ), y = l.useRef(g);
+  y.current = g;
   const h = n !== void 0, w = l.useCallback(
-    (G) => {
+    (x) => {
       if (h) {
-        const E = ut(T.current, G, u.current);
+        const E = lt(y.current, x, u.current);
         o?.(E);
         return;
       }
-      g(G);
+      f(x);
     },
-    [h, o, g]
-  ), b = l.useMemo(() => fe(xt, w), [w]), y = l.useMemo(
+    [h, o, f]
+  ), I = l.useMemo(() => he(St, w), [w]), T = l.useMemo(
     () => ({
-      setActiveTab: b.setActiveTab,
-      tabDrop: b.tabDrop
+      setActiveTab: I.setActiveTab,
+      tabDrop: I.tabDrop
     }),
-    [b]
-  ), f = l.useMemo(
+    [I]
+  ), b = l.useMemo(
     () => ({
-      adjustSplitRatio: b.adjustSplitRatio
+      adjustSplitRatio: I.adjustSplitRatio
     }),
-    [b]
-  ), I = l.useMemo(
+    [I]
+  ), v = l.useMemo(
     () => ({
-      focusGroupIndex: b.focusGroupIndex,
-      focusNextGroup: b.focusNextGroup,
-      focusPrevGroup: b.focusPrevGroup
+      focusGroupIndex: I.focusGroupIndex,
+      focusNextGroup: I.focusNextGroup,
+      focusPrevGroup: I.focusPrevGroup
     }),
-    [b]
+    [I]
   ), p = l.useMemo(
     () => ({
-      state: v,
+      state: g,
       dispatch: w,
-      actions: b
+      actions: I
     }),
-    [v, w, b]
+    [g, w, I]
   );
-  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(Et.Provider, { value: p, children: /* @__PURE__ */ m(je, { value: T, children: /* @__PURE__ */ m(Ve, { value: b, children: /* @__PURE__ */ m(We, { value: v, children: a }) }) }) });
+}, nr = () => {
+  const { actions: t } = z();
   return l.useMemo(
     () => ({
       splitFocused: (e) => {
@@ -1580,8 +1581,8 @@ const fe = (t, e) => {
     }),
     [t]
   );
-}, er = () => {
-  const { actions: t } = j(), e = l.useCallback(
+}, or = () => {
+  const { actions: t } = z(), e = l.useCallback(
     ({ fromGroupId: n, tabId: o, targetGroupId: s, zone: a }) => {
       t.contentDrop({ fromGroupId: n, tabId: o, targetGroupId: s, zone: a });
     },
@@ -1593,87 +1594,159 @@ const fe = (t, e) => {
     [t]
   );
   return { onCommitContentDrop: e, onCommitTabDrop: r };
-}, rr = () => {
-  const t = Jt(), e = tr();
+}, sr = () => {
+  const t = ee(), e = nr();
   return l.useEffect(() => {
-    ee(t, e);
+    oe(t, e);
   }, [t, e]), null;
-}, nr = ({
+}, Ct = l.createContext(null), ir = () => {
+  const t = l.useContext(Ct);
+  if (!t)
+    throw new Error("useContentRegistry must be used within ContentRegistryProvider");
+  return t;
+}, ar = (t) => {
+  const e = document.createElement("div");
+  return e.setAttribute("data-panel-wrapper", t), e.style.display = "contents", e;
+}, cr = (t, e, r) => {
+  const [n] = l.useState(() => ar(t));
+  return rt(() => (n.style.display = r ? "contents" : "none", e && n.parentElement !== e && e.appendChild(n), () => {
+    n.parentElement?.removeChild(n);
+  }), [n, e, r]), n;
+}, Rt = l.memo(
+  ({ panelId: t, content: e, placement: r, containerElement: n }) => {
+    const o = r?.isActive ?? !1, s = cr(t, n, o);
+    return Qt(
+      /* @__PURE__ */ m(l.Activity, { mode: o ? "visible" : "hidden", children: e }),
+      s
+    );
+  }
+);
+Rt.displayName = "PanelContentHost";
+const ur = ({
+  children: t,
+  panels: e,
+  placements: r
+}) => {
+  const [n, o] = l.useState(/* @__PURE__ */ new Map()), s = l.useRef(/* @__PURE__ */ new Map()), a = l.useCallback((d, f) => {
+    o((g) => {
+      const y = new Map(g);
+      return f ? y.set(d, f) : y.delete(d), y;
+    });
+  }, []), i = l.useMemo(
+    () => ({ registerContentContainer: a }),
+    [a]
+  ), c = l.useCallback((d, f) => {
+    const g = s.current.get(d);
+    if (g)
+      return g;
+    const y = f.render(f.id);
+    return s.current.set(d, y), y;
+  }, []), u = Object.keys(e);
+  return /* @__PURE__ */ H(Ct.Provider, { value: i, children: [
+    t,
+    u.map((d) => {
+      const f = e[d];
+      if (!f)
+        return null;
+      const g = r[d] ?? null, y = g ? n.get(g.groupId) ?? null : null, h = c(d, f);
+      return /* @__PURE__ */ m(
+        Rt,
+        {
+          panelId: d,
+          content: h,
+          placement: g,
+          containerElement: y
+        },
+        d
+      );
+    })
+  ] });
+}, lr = ({
   children: t,
   emptyContentComponent: e,
   doubleClickToAdd: r
 }) => {
-  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 n = W(), { state: o, actions: s } = z(), { registerContentContainer: a } = ir(), i = l.useCallback(() => l.createElement("div", { style: { color: "#888", fontSize: 12, padding: 12 } }, "No tabs"), []), c = e ?? i, u = l.useCallback(
+    (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 v = b.tabIds.map((p) => o.panels[p]).filter(Boolean);
+      return { ...b, tabs: v };
     },
     [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, {});
+  ), d = l.useCallback(
+    (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]
+  ), f = l.useCallback((T, b) => {
+    s.setActiveTab(T, b);
+  }, [s]), g = l.useCallback((T) => {
+    s.addNewTab({ groupId: T, title: "New Tab", makeActive: !0 });
+  }, [s]), y = l.useCallback((T, b) => {
+    s.removeTab(T, b);
+  }, [s]), h = l.useCallback((T, b, v) => {
+    s.setActiveTab(b, T), n.onStartTabDrag(T, b, v);
+  }, [s, n]), w = l.useCallback((T, b) => {
+    const v = o.groups[T];
+    !v || !v.activeTabId || n.onStartContentDrag(T, v.activeTabId, b);
+  }, [o.groups, n]), I = l.useMemo(
+    () => ({ getGroup: u, getGroupContent: d, onClickTab: f, onAddTab: g, onCloseTab: y, onStartTabDrag: h, onStartContentDrag: w, doubleClickToAdd: r, registerContentContainer: a }),
+    [u, d, f, g, y, h, w, r, a]
   );
-  return /* @__PURE__ */ m(ie, { value: w, children: t });
-}, X = (t, e, r, n) => {
-  if (M(t))
+  return /* @__PURE__ */ m(ue, { value: I, children: t });
+}, dr = ({
+  children: t,
+  emptyContentComponent: e,
+  doubleClickToAdd: r
+}) => {
+  const { state: n } = z(), o = l.useMemo(() => {
+    const s = {};
+    for (const [a, i] of Object.entries(n.groups))
+      for (const c of i.tabIds)
+        s[c] = {
+          groupId: a,
+          isActive: c === i.activeTabId
+        };
+    return s;
+  }, [n.groups]);
+  return /* @__PURE__ */ m(ur, { panels: n.panels, placements: o, children: /* @__PURE__ */ m(lr, { emptyContentComponent: e, doubleClickToAdd: r, children: t }) });
+}, Y = (t, e, r, n) => {
+  if (_(t))
     return n;
   const o = t.direction, s = o === "vertical" ? r.x + r.w * t.ratio : r.y + r.h * t.ratio;
   if (n.push({ path: e, direction: o, parentRect: r, linePos: s }), o === "vertical") {
     const c = r.w * t.ratio, u = r.w - c;
-    return 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 Y(t.a, [...e, "a"], { x: r.x, y: r.y, w: c, h: r.h }, n), Y(t.b, [...e, "b"], { x: r.x + c, y: r.y, w: u, h: r.h }, n), n;
   }
   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(() => {
+  return Y(t.a, [...e, "a"], { x: r.x, y: r.y, w: r.w, h: a }, n), Y(t.b, [...e, "b"], { x: r.x, y: r.y + a, w: r.w, h: i }, n), n;
+}, pr = ({ containerRef: t }) => {
+  const { state: e } = z(), { adjustSplitRatio: r } = Ke(), n = l.useMemo(() => Y(e.tree, [], { x: 0, y: 0, w: 100, h: 100 }, []), [e.tree]), [o, s] = l.useState(null);
+  if (rt(() => {
     const 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 y = i.getBoundingClientRect();
+      s({ left: y.left, top: y.top, width: y.width, height: y.height });
     };
     c();
     function u() {
       try {
-        const T = window.ResizeObserver;
-        return typeof T == "function" ? T : null;
+        const y = window.ResizeObserver;
+        return typeof y == "function" ? y : 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 d = u(), f = d ? new d(() => c()) : null;
+    f && f.observe(i);
+    const g = () => c();
+    return window.addEventListener("scroll", g, !0), () => {
+      window.removeEventListener("scroll", g, !0), f && f.disconnect();
     };
   }, [t, e.tree]), !o)
     return null;
@@ -1683,7 +1756,7 @@ const fe = (t, e) => {
       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;
+    }, d = Jt;
     if (i.direction === "vertical") {
       const h = u.left + u.width * (i.linePos - i.parentRect.x) / i.parentRect.w, w = {
         position: "fixed",
@@ -1694,32 +1767,32 @@ const fe = (t, e) => {
         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: w, children: /* @__PURE__ */ m(ot, { direction: "vertical", onResize: (T) => {
+        const b = o.width * i.parentRect.w / 100, v = b === 0 ? 0 : T / b;
+        r({ path: i.path, deltaRatio: v });
       } }) }, `split-${c}`);
     }
-    const g = u.top + u.height * (i.linePos - i.parentRect.y) / i.parentRect.h, v = {
+    const f = u.top + u.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)`,
+      top: `calc(${Math.round(f)}px - ${d} / 2)`,
       width: Math.round(u.width),
       height: d,
       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 w = o.height * i.parentRect.h / 100, I = w === 0 ? 0 : h / w;
+      r({ path: i.path, deltaRatio: I });
     } }) }, `split-${c}`);
   };
   return /* @__PURE__ */ m("div", { style: { position: "fixed", inset: 0, pointerEvents: "none" }, children: n.map((i, c) => a(i, c)) });
-}, sr = {
+}, fr = {
   position: "relative",
   display: "flex",
   width: "100%",
   height: "100%"
-}, ir = ({
+}, br = ({
   state: t,
   layoutMode: e,
   gridTracksInteractive: r,
@@ -1727,14 +1800,14 @@ const fe = (t, e) => {
   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) => n ? /* @__PURE__ */ m(n, { groupId: c }) : /* @__PURE__ */ m(Ge, { 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 = ae(t, a, !!r);
+    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 = ie(t, a);
+  return /* @__PURE__ */ m(st, { config: i.config, layers: i.layers });
+}, gr = ({
   containerRef: t,
   layoutMode: e,
   gridTracksInteractive: r,
@@ -1746,30 +1819,30 @@ const fe = (t, e) => {
   panelGroupComponent: c,
   splitLimits: u,
   emptyContentComponent: d,
-  doubleClickToAdd: g
+  doubleClickToAdd: f
 }) => {
-  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 } = z(), { onCommitContentDrop: y, onCommitTabDrop: h } = or(), w = l.useMemo(() => ({ ...fr, ...s }), [s]), I = 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 v = b === "left" || b === "right" ? "vertical" : "horizontal";
+      return nt(g.tree, T, v, u);
     },
-    [v.tree, u]
+    [g.tree, u]
   );
-  return /* @__PURE__ */ m(ae, { children: /* @__PURE__ */ H(
-    he,
+  return /* @__PURE__ */ m(le, { children: /* @__PURE__ */ H(
+    Ie,
     {
       containerRef: t,
       dragThresholdPx: n,
-      onCommitContentDrop: T,
+      onCommitContentDrop: y,
       onCommitTabDrop: h,
-      isContentZoneAllowed: b,
+      isContentZoneAllowed: I,
       children: [
-        /* @__PURE__ */ m(nr, { emptyContentComponent: d, doubleClickToAdd: g, children: /* @__PURE__ */ m("div", { ref: t, className: a, style: w, children: /* @__PURE__ */ m(
-          ir,
+        /* @__PURE__ */ m(dr, { emptyContentComponent: d, doubleClickToAdd: f, children: /* @__PURE__ */ m("div", { ref: t, className: a, style: w, children: /* @__PURE__ */ m(
+          br,
           {
-            state: v,
+            state: g,
             layoutMode: e,
             gridTracksInteractive: r,
             view: o,
@@ -1777,18 +1850,18 @@ const fe = (t, e) => {
             panelGroupComponent: c
           }
         ) }) }),
-        /* @__PURE__ */ m(or, { containerRef: t }),
-        /* @__PURE__ */ m(cr, {})
+        /* @__PURE__ */ m(pr, { containerRef: t }),
+        /* @__PURE__ */ m(hr, {})
       ]
     }
   ) });
-}, cr = () => {
-  const t = q();
+}, hr = () => {
+  const t = W();
   return /* @__PURE__ */ H(et, { children: [
-    /* @__PURE__ */ m(Pe, { suggest: t.suggest }),
-    /* @__PURE__ */ m(_e, {})
+    /* @__PURE__ */ m(Ae, { suggest: t.suggest }),
+    /* @__PURE__ */ m(Be, {})
   ] });
-}, gr = ({
+}, Sr = ({
   initialState: t,
   createGroupId: e,
   createPanelId: r,
@@ -1800,9 +1873,9 @@ const fe = (t, e) => {
   state: c,
   onStateChange: u,
   className: d,
-  style: g,
-  tabBarComponent: v,
-  panelGroupComponent: T,
+  style: f,
+  tabBarComponent: g,
+  panelGroupComponent: y,
   splitLimits: h,
   doubleClickToAdd: w
 }) => {
@@ -1816,9 +1889,9 @@ const fe = (t, e) => {
     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 I = l.useRef(null), T = l.useMemo(() => Gt(h), [h]);
   return /* @__PURE__ */ m(
-    Qe,
+    rr,
     {
       initialState: t,
       createGroupId: e,
@@ -1826,21 +1899,21 @@ const fe = (t, e) => {
       state: c,
       onStateChange: u,
       splitLimits: h,
-      children: /* @__PURE__ */ H(te, { children: [
-        /* @__PURE__ */ m(rr, {}),
+      children: /* @__PURE__ */ H(ne, { children: [
+        /* @__PURE__ */ m(sr, {}),
         /* @__PURE__ */ m(
-          ar,
+          gr,
           {
-            containerRef: b,
+            containerRef: I,
             layoutMode: n,
             gridTracksInteractive: o,
             dragThresholdPx: s,
             view: a,
-            style: g,
+            style: f,
             className: d,
-            tabBarComponent: v,
-            panelGroupComponent: T,
-            splitLimits: y,
+            tabBarComponent: g,
+            panelGroupComponent: y,
+            splitLimits: T,
             emptyContentComponent: i,
             doubleClickToAdd: w
           }
@@ -1850,14 +1923,16 @@ const fe = (t, e) => {
   );
 };
 export {
-  yr 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,
-  fr as useLayerDragHandle
+  Mr as CSS_VAR_PREFIX,
+  Rr as Drawer,
+  Pr as DrawerLayers,
+  st as GridLayout,
+  Tr as HorizontalDivider,
+  Sr as PanelSystem,
+  ot as ResizeHandle,
+  Gr as buildInitialState,
+  Dr as runTransition,
+  xr as useLayerDragHandle,
+  Ar as useTransitionState
 };
 //# sourceMappingURL=index.js.map