react-panel-layout 0.5.2 → 0.6.1

package/dist/PanelSystem-BqUzNtf2.js

@@ -0,0 +1,1946 @@
+import { jsx as m, jsxs as N, Fragment as et } from "react/jsx-runtime";
+import * as l from "react";
+import { e as M, t as Dt, G as ot } from "./GridLayout-UWNxXw77.js";
+import { u as J } from "./useDocumentPointerEvents-DXxw3qWj.js";
+import { a as kt, R as st } from "./ResizeHandle-CXjc1meV.js";
+import { J as At, K as Mt, L as Ot, M as _t, N as Bt, O as $t, T as Nt, Q as Ht, U as Lt, V as zt, W as Xt, X as Yt, Y as Ft, Z as jt } from "./styles-NkjuMOVS.js";
+import { u as nt } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
+import { createPortal as Kt } from "react-dom";
+import { u as Wt } from "./useContentCache-CO3LYNmz.js";
+const dt = l.createContext(null), Ut = () => {
+  const t = l.useContext(dt);
+  if (!t)
+    throw new Error("useKeybindings must be used within KeybindingsProvider");
+  return t;
+}, Vt = (t) => {
+  const e = [];
+  t.metaKey && e.push("Mod"), t.ctrlKey && e.push("Ctrl"), t.altKey && e.push("Alt"), t.shiftKey && e.push("Shift");
+  const n = t.key.length === 1 ? t.key.toUpperCase() : t.key;
+  return e.push(n), e.join("-");
+}, qt = ({ 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 = { ...n.current };
+    delete i[a], n.current = i;
+  }, []);
+  l.useEffect(() => {
+    const a = (i) => {
+      const c = Vt(i), u = n.current[c];
+      u && u(i);
+    };
+    return window.addEventListener("keydown", a), () => {
+      window.removeEventListener("keydown", a);
+    };
+  }, []);
+  const s = l.useMemo(() => ({ register: r, unregister: o }), [r, o]);
+  return l.useEffect(() => {
+    e && e(s);
+  }, [s, e]), /* @__PURE__ */ m(dt.Provider, { value: s, children: t });
+}, Zt = (t, e) => {
+  t.register("Mod-\\", (n) => {
+    n.preventDefault(), e.splitFocused("vertical");
+  }), t.register("Mod-Shift-\\", (n) => {
+    n.preventDefault(), e.splitFocused("horizontal");
+  });
+  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", (n) => {
+    n.preventDefault(), e.focusNextGroup();
+  }), t.register("Alt-ArrowLeft", (n) => {
+    n.preventDefault(), e.focusPrevGroup();
+  });
+}, Jt = (t) => t.type === "group", pt = (t, e = { x: 0, y: 0, w: 100, h: 100 }) => {
+  const n = /* @__PURE__ */ new Map(), r = (o, s) => {
+    if (Jt(o)) {
+      n.set(o.groupId, s);
+      return;
+    }
+    if (o.direction === "vertical") {
+      const c = s.w * o.ratio, u = 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: u, h: s.h });
+      return;
+    }
+    const a = s.h * o.ratio, i = s.h - a;
+    r(o.a, { x: s.x, y: s.y, w: s.w, h: a }), r(o.b, { x: s.x, y: s.y + a, w: s.w, h: i });
+  };
+  return r(t, e), n;
+}, Qt = (t, e) => {
+  const n = pt(t.tree), r = {
+    areas: [["root"]],
+    rows: [{ size: "1fr" }],
+    columns: [{ size: "1fr" }],
+    gap: "0px",
+    style: { position: "relative" }
+  }, o = Array.from(n.entries()).map(([s, a]) => {
+    const i = {
+      position: "absolute",
+      left: `${a.x}%`,
+      top: `${a.y}%`,
+      width: `${a.w}%`,
+      height: `${a.h}%`,
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column"
+    };
+    return {
+      id: s,
+      positionMode: "absolute",
+      style: i,
+      component: e(s)
+    };
+  });
+  return { config: r, layers: o };
+}, te = (t, e, n) => {
+  const r = pt(t.tree), o = Array.from(new Set(Array.from(r.values()).flatMap((h) => [h.x, h.x + h.w]))).sort((h, v) => h - v), s = Array.from(new Set(Array.from(r.values()).flatMap((h) => [h.y, h.y + h.h]))).sort((h, v) => h - v), a = o.slice(1).map((h, v) => `${h - o[v]}fr`), i = s.slice(1).map((h, v) => `${h - s[v]}fr`), c = a.map((h) => ({ size: h, resizable: n })), u = i.map((h) => ({ size: h, resizable: n })), d = (h, v, w, T) => {
+    for (const [f, I] of r.entries())
+      if (h >= I.x && v <= I.x + I.w && w >= I.y && T <= I.y + I.h)
+        return f;
+    return ".";
+  }, b = [];
+  for (let h = 0; h < s.length - 1; h += 1) {
+    const v = [];
+    for (let w = 0; w < o.length - 1; w += 1)
+      v.push(d(o[w], o[w + 1], s[h], s[h + 1]));
+    b.push(v);
+  }
+  const g = {
+    areas: b,
+    rows: u,
+    columns: c,
+    gap: "0px"
+  }, y = Array.from(r.keys()).map((h) => ({
+    id: h,
+    gridArea: h,
+    component: e(h)
+  }));
+  return { config: g, layers: y };
+}, ft = l.createContext(null), ee = () => {
+  const t = l.useContext(ft);
+  if (!t)
+    throw new Error("usePanelRenderContext must be used within PanelRenderProvider");
+  return t;
+}, ne = ({ value: t, children: e }) => /* @__PURE__ */ m(ft.Provider, { value: t, children: e }), bt = l.createContext(null), ht = () => {
+  const t = l.useContext(bt);
+  if (!t)
+    throw new Error("useDomRegistry must be used within DomRegistryProvider");
+  return t;
+}, re = ({ children: t }) => {
+  const e = l.useRef(/* @__PURE__ */ new Map()), n = 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;
+  }, []), r = l.useCallback(
+    (c, u) => {
+      const d = n(c);
+      if (d.group = u, u === null) {
+        const b = e.current.get(c);
+        (b ? b.tabbar === null && b.content === null : !1) && e.current.delete(c);
+      }
+    },
+    [n]
+  ), o = l.useCallback(
+    (c, u) => {
+      const d = n(c);
+      if (d.tabbar = u, u === null) {
+        const b = e.current.get(c);
+        (b ? b.group === null && b.content === null : !1) && e.current.delete(c);
+      }
+    },
+    [n]
+  ), s = l.useCallback(
+    (c, u) => {
+      const d = n(c);
+      if (d.content = u, u === null) {
+        const b = e.current.get(c);
+        (b ? b.group === null && b.tabbar === null : !1) && e.current.delete(c);
+      }
+    },
+    [n]
+  ), a = l.useCallback(() => e.current, []), i = l.useMemo(() => ({ setGroupEl: r, setTabbarEl: o, setContentEl: s, getAll: a }), [r, o, s, a]);
+  return /* @__PURE__ */ m(bt.Provider, { value: i, children: t });
+}, oe = {
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  height: "100%"
+}, se = {
+  flex: "1 1 auto",
+  minWidth: 0,
+  minHeight: 0,
+  position: "relative",
+  overflow: "hidden"
+};
+function ie(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 ae(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 ce = ({
+  group: t,
+  tabbar: e,
+  content: n,
+  onContentPointerDown: r,
+  groupRef: o,
+  contentRef: s,
+  component: a,
+  element: i,
+  contentComponent: c,
+  contentElement: u
+}) => {
+  const d = {
+    ref: o,
+    style: oe,
+    "data-group-id": t.id
+  }, g = ie(u, c, {
+    ref: s,
+    style: se,
+    "data-dnd-zone": "content",
+    onPointerDown: r
+  }, n);
+  return ae(i, a, d, /* @__PURE__ */ N(et, { children: [
+    e,
+    g
+  ] }));
+}, gt = l.memo(ce, (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 K = (t, e, n) => {
+  const r = t.left, o = t.top, s = t.width, a = t.height, i = e - r, c = n - 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";
+};
+function k(t, e) {
+  if (!e) {
+    const r = (() => ({ type: t }));
+    return Object.defineProperty(r, "type", {
+      value: t,
+      writable: !1,
+      enumerable: !0
+    }), r;
+  }
+  const n = ((...r) => {
+    const o = e(...r);
+    return typeof o > "u" ? { type: t } : { type: t, payload: o };
+  });
+  return Object.defineProperty(n, "type", {
+    value: t,
+    writable: !1,
+    enumerable: !0
+  }), n;
+}
+const ue = (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;
+    });
+  }), n;
+}, mt = (t, e) => {
+  const n = {};
+  return Object.keys(e).forEach((r) => {
+    const o = e[r];
+    if (!o)
+      return;
+    const s = t[r];
+    if (!s)
+      throw new Error(`Missing action creator for key "${String(r)}"`);
+    n[s.type] = o;
+  }), n;
+}, vt = { phase: { kind: "idle" }, suggest: null, pointer: null, tabbarHover: null, draggingTabElement: null }, D = {
+  startContent: k(
+    "START_CONTENT",
+    (t) => t
+  ),
+  startTab: k(
+    "START_TAB",
+    (t) => t
+  ),
+  setSuggest: k("SET_SUGGEST", (t) => t),
+  setPointer: k("SET_POINTER", (t) => t),
+  setTabbarHover: k(
+    "SET_TABBAR_HOVER",
+    (t) => t
+  ),
+  reset: k("RESET")
+}, le = mt(D, {
+  startContent: (t, e) => ({
+    phase: {
+      kind: "content",
+      startX: e.payload.x,
+      startY: e.payload.y,
+      fromGroupId: e.payload.groupId,
+      tabId: e.payload.tabId,
+      cache: e.payload.cache
+    },
+    suggest: null,
+    pointer: null,
+    tabbarHover: null,
+    draggingTabElement: null
+  }),
+  startTab: (t, e) => ({
+    phase: {
+      kind: "tab",
+      startX: e.payload.x,
+      startY: e.payload.y,
+      fromGroupId: e.payload.groupId,
+      tabId: e.payload.tabId,
+      cache: e.payload.cache
+    },
+    suggest: null,
+    pointer: null,
+    tabbarHover: null,
+    draggingTabElement: e.payload.element
+  }),
+  setSuggest: (t, e) => ({ ...t, suggest: e.payload }),
+  setPointer: (t, e) => ({ ...t, pointer: e.payload }),
+  setTabbarHover: (t, e) => ({ ...t, tabbarHover: e.payload }),
+  reset: () => vt
+}), de = (t, e) => {
+  const n = le[e.type];
+  return n ? n(t, e, void 0) : t;
+}, wt = l.createContext(null), V = () => {
+  const t = l.useContext(wt);
+  if (!t)
+    throw new Error("usePanelInteractions must be used within InteractionsProvider");
+  return t;
+}, pe = ({
+  containerRef: t,
+  dragThresholdPx: e,
+  onCommitContentDrop: n,
+  onCommitTabDrop: r,
+  isContentZoneAllowed: o,
+  children: s
+}) => {
+  const [a, i] = l.useReducer(de, vt), c = ht(), u = l.useCallback(() => {
+    const w = Array.from(c.getAll().entries()), T = w.map(([p, G]) => ({ gid: p, el: G.content ?? G.group })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() })), f = w.map(([p, G]) => ({ gid: p, el: G.tabbar })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() })), I = w.map(([p, G]) => ({ gid: p, el: G.content ?? G.group })).filter((p) => !!p.el).map((p) => ({ ...p, rect: p.el.getBoundingClientRect() }));
+    return { groups: T, tabbars: f, contents: I };
+  }, [c]), d = J((w) => {
+    if (!t.current)
+      return;
+    const f = w.clientX, I = w.clientY, p = a.phase;
+    if (p.kind === "idle")
+      return;
+    const G = Math.abs(f - p.startX), C = Math.abs(I - p.startY);
+    if (G < 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) {
+        i(D.setSuggest(null));
+        return;
+      }
+      const P = K(S.rect, f, I);
+      if (o && !o({ targetGroupId: S.gid, zone: P })) {
+        i(D.setSuggest(null));
+        return;
+      }
+      i(D.setSuggest({ rect: S.rect, zone: P }));
+      return;
+    }
+    if (p.kind === "tab") {
+      const S = p.cache.tabbars.find(({ rect: E }) => f >= E.left && f <= E.right && I >= E.top && I <= E.bottom);
+      if (S) {
+        const A = Array.from(S.el.querySelectorAll("[role='tab']")).map((L) => L.getBoundingClientRect()), R = A.map((L) => L.left + L.width / 2), _ = R.findIndex((L) => f < L), B = _ === -1 ? R.length : _, Rt = A.length === 0 ? S.rect.left + 8 : B === 0 ? A[0].left : B === A.length ? A[A.length - 1].right : (A[B - 1].right + A[B].left) / 2;
+        i(D.setTabbarHover({ groupId: S.gid, index: B, rect: S.rect, insertX: Rt }));
+      } else
+        i(D.setTabbarHover(null));
+      const P = p.cache.contents.find(({ rect: E }) => f >= E.left && f <= E.right && I >= E.top && I <= E.bottom);
+      if (!P) {
+        i(D.setSuggest(null));
+        return;
+      }
+      const x = K(P.rect, f, I);
+      if (o && !o({ targetGroupId: P.gid, zone: x })) {
+        i(D.setSuggest(null));
+        return;
+      }
+      i(D.setSuggest({ rect: P.rect, zone: x }));
+    }
+  }), b = J((w) => {
+    const T = t.current, f = a;
+    if (i(D.reset()), !T)
+      return;
+    const I = w.clientX, p = w.clientY;
+    if (f.phase.kind === "idle")
+      return;
+    const G = Math.abs(I - f.phase.startX), C = Math.abs(p - f.phase.startY);
+    if (!(G < e && C < e)) {
+      if (f.phase.kind === "content") {
+        const S = f.phase.cache.groups.find(({ rect: E }) => I >= E.left && I <= E.right && p >= E.top && p <= E.bottom);
+        if (!S)
+          return;
+        const P = S.gid ?? null;
+        if (!P)
+          return;
+        const x = K(S.rect, I, p);
+        if (o && !o({ targetGroupId: P, zone: x }))
+          return;
+        n({ fromGroupId: f.phase.fromGroupId, tabId: f.phase.tabId, targetGroupId: P, 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 (!x)
+            return;
+          const A = Array.from(S.el.querySelectorAll("[role='tab']")).map((B) => {
+            const Z = B.getBoundingClientRect();
+            return Z.left + Z.width / 2;
+          }), R = A.findIndex((B) => I < B), _ = R === -1 ? A.length : R;
+          r({ fromGroupId: f.phase.fromGroupId, tabId: f.phase.tabId, targetGroupId: x, targetIndex: _ });
+          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)
+            return;
+          const E = K(P.rect, I, p);
+          if (o && !o({ targetGroupId: x, zone: E }))
+            return;
+          n({ fromGroupId: f.phase.fromGroupId, tabId: f.phase.tabId, targetGroupId: x, zone: E });
+        }
+      }
+    }
+  }), g = J(() => {
+    i(D.reset());
+  });
+  l.useEffect(() => {
+    if (a.phase.kind !== "idle")
+      return window.addEventListener("pointermove", d), window.addEventListener("pointerup", b, { once: !0 }), window.addEventListener("pointercancel", g, { once: !0 }), () => {
+        window.removeEventListener("pointermove", d), window.removeEventListener("pointerup", b), window.removeEventListener("pointercancel", g);
+      };
+  }, [a.phase.kind]);
+  const y = l.useCallback((w, T, f) => {
+    if (f.button !== 0)
+      return;
+    f.currentTarget.setPointerCapture(f.pointerId);
+    const I = u();
+    i(D.startContent({ x: f.clientX, y: f.clientY, groupId: w, tabId: T, cache: I }));
+  }, [u]), h = l.useCallback((w, T, f) => {
+    if (f.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: T, tabId: w, cache: p, element: I }));
+  }, [u]), v = 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: y,
+    onStartTabDrag: h
+  }), [a.suggest, a.pointer, a.tabbarHover, a.phase, a.draggingTabElement, y, h]);
+  return /* @__PURE__ */ m(wt.Provider, { value: v, children: s });
+}, it = {
+  display: "inline-flex",
+  alignItems: "center",
+  userSelect: "none"
+}, fe = ({
+  groupId: t,
+  tab: e,
+  active: n,
+  dragging: r,
+  onClickTab: o,
+  onStartDrag: s,
+  onCloseTab: a,
+  tabComponent: i,
+  tabElement: c,
+  onDoubleClick: u
+}) => {
+  const d = l.useEffectEvent(() => {
+    o(e.id);
+  }), b = l.useEffectEvent((v) => {
+    s && v.button === 0 && s(e.id, t, v);
+  }), g = () => {
+    const v = !!a;
+    return /* @__PURE__ */ m(l.Activity, { mode: v ? "visible" : "hidden", children: /* @__PURE__ */ m(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Close tab ${e.title}`,
+        onClick: (w) => {
+          a && (w.stopPropagation(), a(t, e.id));
+        },
+        style: { marginLeft: 6 },
+        tabIndex: v ? void 0 : -1,
+        disabled: !v,
+        "aria-hidden": v ? void 0 : !0,
+        children: "×"
+      }
+    ) });
+  }, y = {
+    role: "tab",
+    "aria-selected": n,
+    tabIndex: n ? 0 : -1,
+    style: it,
+    onClick: d,
+    onPointerDown: b,
+    onDoubleClick: u,
+    "data-tab-id": e.id,
+    "data-active": n ? "true" : "false",
+    "data-dragging": r ? "true" : "false",
+    children: /* @__PURE__ */ N(et, { children: [
+      /* @__PURE__ */ m("span", { children: e.title }),
+      g()
+    ] })
+  }, h = {
+    type: "button",
+    role: "tab",
+    "aria-selected": n,
+    tabIndex: n ? 0 : -1,
+    style: it,
+    onClick: () => {
+      o(e.id);
+    },
+    onPointerDown: (v) => {
+      s && v.button === 0 && s(e.id, t, v);
+    },
+    onDoubleClick: u,
+    children: /* @__PURE__ */ m("span", { children: e.title })
+  };
+  return c ? c(h) : i ? /* @__PURE__ */ m(i, { ...h }) : /* @__PURE__ */ m("div", { ...y });
+}, be = {
+  display: "flex",
+  alignItems: "center"
+}, he = {
+  flex: "1 1 auto",
+  alignSelf: "stretch"
+}, ge = ({
+  group: t,
+  onClickTab: e,
+  onStartDrag: n,
+  rootRef: r,
+  component: o,
+  element: s,
+  tabComponent: a,
+  tabElement: i,
+  onAddTab: c,
+  onCloseTab: u,
+  doubleClickToAdd: d
+}) => {
+  const { isTabDragging: b, draggingTabId: g } = V(), y = l.useRef(null), h = l.useCallback(
+    (p) => {
+      if (y.current = p, !!r) {
+        if (typeof r == "function") {
+          r(p);
+          return;
+        }
+        try {
+          r.current = p;
+        } catch {
+        }
+      }
+    },
+    [r]
+  ), v = l.useEffectEvent((p) => {
+    const G = y.current ?? p.currentTarget;
+    if (!G)
+      return;
+    const C = Array.from(G.querySelectorAll('[role="tab"]'));
+    if (C.length === 0)
+      return;
+    const S = (R) => {
+      const _ = Math.max(0, Math.min(R, C.length - 1)), B = C[_];
+      B && B.focus();
+    }, P = document.activeElement, x = P ? C.indexOf(P) : C.findIndex((R) => R.getAttribute("data-tab-id") === t.activeTabId);
+    if (p.key === "ArrowRight") {
+      p.preventDefault();
+      const R = x >= 0 ? x + 1 : 0;
+      S(R >= C.length ? 0 : R);
+      return;
+    }
+    if (p.key === "ArrowLeft") {
+      p.preventDefault();
+      const R = x >= 0 ? x - 1 : C.length - 1;
+      S(R < 0 ? C.length - 1 : R);
+      return;
+    }
+    if (p.key === "Home") {
+      p.preventDefault(), S(0);
+      return;
+    }
+    if (p.key === "End") {
+      p.preventDefault(), S(C.length - 1);
+      return;
+    }
+    if (p.key === "Enter" || p.key === " ") {
+      p.preventDefault();
+      const _ = (x >= 0 ? C[x] : null)?.getAttribute("data-tab-id") ?? null;
+      _ && e(_);
+      return;
+    }
+    if (p.key === "Delete" || p.key === "Backspace") {
+      if (u) {
+        p.preventDefault();
+        const _ = (x >= 0 ? C[x] : null)?.getAttribute("data-tab-id") ?? null;
+        _ && u(t.id, _);
+      }
+      return;
+    }
+    const E = (p.ctrlKey ? 1 : 0) + (p.metaKey ? 1 : 0) > 0, A = typeof p.key == "string" ? p.key.toLowerCase() : "";
+    if (E && A === "t") {
+      c && (p.preventDefault(), c(t.id));
+      return;
+    }
+  });
+  l.useEffect(() => {
+    const p = y.current;
+    if (!p)
+      return;
+    const G = p.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);
+    if (G === document.activeElement)
+      return;
+    !p.contains(document.activeElement) && G && G.focus();
+  }, [t.activeTabId]);
+  const w = {
+    style: be,
+    role: "tablist",
+    "data-tabbar": "true",
+    "data-group-id": t.id,
+    "data-dragging": b ? "true" : "false",
+    onKeyDown: v
+  }, T = kt({
+    element: s,
+    component: o
+  }), f = () => c ? /* @__PURE__ */ m(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Add tab",
+      onClick: () => {
+        c(t.id);
+      },
+      children: "+"
+    }
+  ) : null, I = l.useCallback(() => {
+    d && c && c(t.id);
+  }, [d, c, t.id]);
+  return /* @__PURE__ */ N(T, { ...w, ref: h, onDoubleClick: I, children: [
+    t.tabs.map((p, G) => /* @__PURE__ */ m(
+      fe,
+      {
+        groupId: t.id,
+        tab: p,
+        active: t.activeTabId === p.id,
+        dragging: g === p.id,
+        onClickTab: e,
+        onStartDrag: n,
+        onCloseTab: u,
+        tabComponent: a,
+        tabElement: i,
+        onDoubleClick: (C) => C.stopPropagation()
+      },
+      `${t.id}:${p.id}:${G}`
+    )),
+    /* @__PURE__ */ m("span", { style: he }),
+    f()
+  ] });
+}, me = ({ id: t, TabBarComponent: e, PanelGroupComponent: n }) => {
+  const { getGroup: r, getGroupContent: o, onClickTab: s, onAddTab: a, onCloseTab: i, onStartTabDrag: c, doubleClickToAdd: u, registerContentContainer: d } = ee(), { setGroupEl: b, setTabbarEl: g, setContentEl: y } = ht(), h = l.useCallback(
+    (G) => {
+      b(t, G);
+    },
+    [t, b]
+  ), v = l.useCallback(
+    (G) => {
+      y(t, G), d(t, G);
+    },
+    [t, y, d]
+  ), w = l.useCallback(
+    (G) => {
+      g(t, G);
+    },
+    [t, g]
+  ), T = r(t);
+  if (!T)
+    return null;
+  const f = o(t);
+  return /* @__PURE__ */ m(
+    n ?? ((G) => /* @__PURE__ */ m(gt, { ...G })),
+    {
+      group: T,
+      tabbar: /* @__PURE__ */ m(
+        e ?? ge,
+        {
+          rootRef: w,
+          group: T,
+          onClickTab: (G) => s(t, G),
+          onAddTab: a,
+          onCloseTab: i,
+          onStartDrag: (G, C, S) => c(G, C, S),
+          doubleClickToAdd: u
+        }
+      ),
+      content: f,
+      groupRef: h,
+      contentRef: v
+    }
+  );
+}, ve = (t, e) => {
+  const n = new Array(16);
+  for (let r = 0; r < 4; r++)
+    for (let o = 0; o < 4; o++)
+      n[r * 4 + o] = t[0 + o] * e[r * 4 + 0] + t[4 + o] * e[r * 4 + 1] + t[8 + o] * e[r * 4 + 2] + t[12 + o] * e[r * 4 + 3];
+  return n;
+}, W = (t) => {
+  if (t.length !== 16)
+    throw new Error("Matrix must have exactly 16 values");
+  const e = Object.freeze([...t]), n = (r) => {
+    const o = ve(e, r);
+    return W(o);
+  };
+  return Object.freeze({
+    translate: (r = 0, o = 0, s = 0) => n([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      r,
+      o,
+      s,
+      1
+    ]),
+    translate3d: (r, o, s) => n([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      r,
+      o,
+      s,
+      1
+    ]),
+    translateX: (r) => n([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      r,
+      0,
+      0,
+      1
+    ]),
+    translateY: (r) => n([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      r,
+      0,
+      1
+    ]),
+    translateZ: (r) => n([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      r,
+      1
+    ]),
+    scale: (r = 1, o = 1, s = 1) => n([
+      r,
+      0,
+      0,
+      0,
+      0,
+      o,
+      0,
+      0,
+      0,
+      0,
+      s,
+      0,
+      0,
+      0,
+      0,
+      1
+    ]),
+    scale3d: (r, o, s) => n([
+      r,
+      0,
+      0,
+      0,
+      0,
+      o,
+      0,
+      0,
+      0,
+      0,
+      s,
+      0,
+      0,
+      0,
+      0,
+      1
+    ]),
+    scaleX: (r) => n([
+      r,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1
+    ]),
+    scaleY: (r) => n([
+      1,
+      0,
+      0,
+      0,
+      0,
+      r,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1
+    ]),
+    scaleZ: (r) => n([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      r,
+      0,
+      0,
+      0,
+      0,
+      1
+    ]),
+    rotateX: (r) => {
+      const o = Math.cos(r), s = Math.sin(r);
+      return n([
+        1,
+        0,
+        0,
+        0,
+        0,
+        o,
+        s,
+        0,
+        0,
+        -s,
+        o,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    rotateY: (r) => {
+      const o = Math.cos(r), s = Math.sin(r);
+      return n([
+        o,
+        0,
+        -s,
+        0,
+        0,
+        1,
+        0,
+        0,
+        s,
+        0,
+        o,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    rotateZ: (r) => {
+      const o = Math.cos(r), s = Math.sin(r);
+      return n([
+        o,
+        s,
+        0,
+        0,
+        -s,
+        o,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    rotate: (r, o, s, a) => {
+      const i = Math.sqrt(o * o + s * s + a * a);
+      if (i === 0)
+        return W(e);
+      o /= i, s /= i, a /= i;
+      const c = Math.cos(r), u = Math.sin(r), d = 1 - c;
+      return n([
+        d * o * o + c,
+        d * o * s + u * a,
+        d * o * a - u * s,
+        0,
+        d * o * s - u * a,
+        d * s * s + c,
+        d * s * a + u * o,
+        0,
+        d * o * a + u * s,
+        d * s * a - u * o,
+        d * a * a + c,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    rotate3d: (r, o, s, a) => {
+      const i = Math.sqrt(r * r + o * o + s * s);
+      if (i === 0)
+        return W(e);
+      r /= i, o /= i, s /= i;
+      const c = Math.cos(a), u = Math.sin(a), d = 1 - c;
+      return n([
+        d * r * r + c,
+        d * r * o + u * s,
+        d * r * s - u * o,
+        0,
+        d * r * o - u * s,
+        d * o * o + c,
+        d * o * s + u * r,
+        0,
+        d * r * s + u * o,
+        d * o * s - u * r,
+        d * s * s + c,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    skew: (r = 0, o = 0) => {
+      const s = Math.tan(r), a = Math.tan(o);
+      return n([
+        1,
+        a,
+        0,
+        0,
+        s,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    skewX: (r) => {
+      const o = Math.tan(r);
+      return n([
+        1,
+        0,
+        0,
+        0,
+        o,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    skewY: (r) => {
+      const o = Math.tan(r);
+      return n([
+        1,
+        o,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    perspective: (r) => {
+      if (r === 0)
+        throw new Error("Perspective distance cannot be zero");
+      return n([
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        -1 / r,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    toCSS: () => `matrix3d(${e.join(", ")})`,
+    toArray: () => e,
+    toString: () => [
+      `[${e[0]}, ${e[4]}, ${e[8]}, ${e[12]}]`,
+      `[${e[1]}, ${e[5]}, ${e[9]}, ${e[13]}]`,
+      `[${e[2]}, ${e[6]}, ${e[10]}, ${e[14]}]`,
+      `[${e[3]}, ${e[7]}, ${e[11]}, ${e[15]}]`
+    ].join(`
+`)
+  });
+}, we = () => W([
+  1,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  1
+]), Ie = {
+  position: "fixed",
+  inset: 0,
+  pointerEvents: "none",
+  zIndex: At
+}, ye = {
+  position: "absolute",
+  border: `${_t} dashed ${Bt}`,
+  background: Ot,
+  borderRadius: Mt,
+  transformOrigin: "top left"
+}, $ = (t, e) => e <= 0 ? 0 : M(t / e, 0), Te = (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: $(M(r - n * 2, 0), a),
+    scaleY: $(M(o - n * 2, 0), i)
+  }, u = {
+    translateX: n,
+    translateY: n,
+    scaleX: $(M(r / 2 - n * 1.5, 0), a),
+    scaleY: $(M(o - n * 2, 0), i)
+  }, d = {
+    translateX: r / 2 + s,
+    translateY: n,
+    scaleX: $(M(r / 2 - n * 1.5, 0), a),
+    scaleY: $(M(o - n * 2, 0), i)
+  }, b = {
+    translateX: n,
+    translateY: n,
+    scaleX: $(M(r - n * 2, 0), a),
+    scaleY: $(M(o / 2 - n * 1.5, 0), i)
+  }, g = {
+    translateX: n,
+    translateY: o / 2 + s,
+    scaleX: $(M(r - n * 2, 0), a),
+    scaleY: $(M(o / 2 - n * 1.5, 0), i)
+  }, y = {
+    center: c,
+    left: u,
+    right: d,
+    top: b,
+    bottom: g
+  }, { translateX: h, translateY: v, scaleX: w, scaleY: T } = y[e];
+  return we().translate(h, v, 0).scale(w, T, 1).toCSS();
+}, Ge = (t, e) => {
+  const n = $t;
+  return {
+    ...ye,
+    left: t.left,
+    top: t.top,
+    width: t.width,
+    height: t.height,
+    transform: Te(t, e, n)
+  };
+}, xe = ({ suggest: t }) => {
+  if (!t)
+    return null;
+  const { rect: e, zone: n } = t, r = Ge(e, n);
+  return /* @__PURE__ */ m("div", { style: Ie, children: /* @__PURE__ */ m("div", { style: r }) });
+}, Se = typeof window < "u" && typeof document < "u", Ce = (t) => {
+  const [e, n] = l.useState(null), [r, o] = l.useState(null);
+  return nt(() => {
+    if (!Se || !t) {
+      n(null), o(null);
+      return;
+    }
+    const s = t.getBoundingClientRect();
+    n({ width: s.width, height: s.height }), o(t.outerHTML);
+  }, [t]), { html: r, size: e };
+}, Ee = {
+  position: "fixed",
+  inset: 0,
+  pointerEvents: "none",
+  zIndex: Ft
+}, Pe = {
+  position: "absolute",
+  width: Yt,
+  borderRadius: Xt,
+  background: zt,
+  boxShadow: Lt
+}, Re = () => {
+  const { isTabDragging: t, draggingTabId: e, dragPointer: n, tabbarHover: r, draggingTabElement: o } = V(), { html: s, size: a } = Ce(o), i = n !== null && e !== null, c = l.useMemo(() => {
+    if (!(!i || !n))
+      return {
+        position: "absolute",
+        left: n.x,
+        top: n.y,
+        transform: `translate(${Nt}, ${Ht})`,
+        pointerEvents: "none"
+      };
+  }, [i, n]), u = l.useMemo(() => {
+    if (!(!c || !o))
+      return a ? { ...c, width: a.width, height: a.height } : c;
+  }, [c, o, a]), d = l.useMemo(() => {
+    if (r)
+      return {
+        ...Pe,
+        left: r.insertX,
+        top: r.rect.top + 4,
+        height: Math.max(0, r.rect.height - 8)
+      };
+  }, [r]);
+  return t ? /* @__PURE__ */ N("div", { style: Ee, children: [
+    /* @__PURE__ */ m(l.Activity, { mode: u ? "visible" : "hidden", children: /* @__PURE__ */ m("div", { style: u, 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 }) })
+  ] }) : null;
+}, O = (t) => t.type === "group", z = (t, e = []) => {
+  if (O(t))
+    return [...e, t.groupId];
+  const n = z(t.a, e);
+  return z(t.b, n);
+}, q = (t, e) => e.reduce((n, r) => O(n) ? n : n[r], t), j = (t, e, n) => {
+  if (e.length === 0)
+    return n;
+  const [r, ...o] = e;
+  return O(t) ? t : r === "a" ? { ...t, a: j(t.a, o, n) } : { ...t, b: j(t.b, o, n) };
+}, U = (t, e, n = []) => {
+  if (O(t))
+    return t.groupId === e ? { splitPath: null, side: null } : null;
+  if (O(t.a) && t.a.groupId === e)
+    return { splitPath: n, side: "a" };
+  if (O(t.b) && t.b.groupId === e)
+    return { splitPath: n, side: "b" };
+  const r = U(t.a, e, [...n, "a"]);
+  return r || U(t.b, e, [...n, "b"]);
+}, It = (t, e, n, r) => {
+  const o = r(), s = U(t, e), a = {
+    type: "split",
+    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 = q(t, i);
+  if (O(c))
+    return { tree: a, newGroupId: o };
+  const u = s.side === "a" ? { ...c, a } : { ...c, b: a };
+  return { tree: j(t, i, u), newGroupId: o };
+}, De = (t, e) => {
+  const n = U(t, e);
+  if (!n || n.splitPath === null)
+    return { tree: t, survivorGroupId: e };
+  const r = n.splitPath, o = q(t, r);
+  if (O(o))
+    return { tree: t, survivorGroupId: e };
+  const s = n.side === "a" ? o.b : o.a, a = j(t, r, s), i = O(s) ? s.groupId : z(s)[0] ?? null;
+  return { tree: a, survivorGroupId: i };
+}, ke = (t, e, n) => {
+  const r = q(t, e);
+  if (O(r))
+    return t;
+  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 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 } = De(o.tree, s), { [s]: d, ...b } = o.groups, g = z(c), y = o.focusedGroupId === s ? u ?? g[0] ?? null : o.focusedGroupId;
+    return { ...o, tree: c, groups: b, groupOrder: g, focusedGroupId: y };
+  };
+  return t.groupOrder.reduce((o, s) => r(o, s), t);
+}, Ae = (t) => ({ id: t, tabIds: [], tabs: [], activeTabId: null }), at = (t, e, n, r) => {
+  const o = { ...t.groups }, s = o[e];
+  if (!s)
+    throw new Error(`Group ${e} does not exist.`);
+  const a = { ...t.panels, [n.id]: n }, i = [...s.tabIds, n.id], c = r ? n.id : s.activeTabId ?? n.id, u = i.map((b) => a[b]), d = { ...s, tabIds: i, tabs: u, activeTabId: c };
+  return o[e] = d, { ...t, panels: a, groups: o };
+}, Me = (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 !== 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 };
+}, ct = (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((b) => b !== r), u = [...a.tabIds.filter((b) => b !== r), r], d = s.activeTabId === r ? c[0] ?? null : s.activeTabId;
+  return i[e] = { ...s, tabIds: c, tabs: c.map((b) => t.panels[b]), activeTabId: d }, i[n] = { ...a, tabIds: u, tabs: u.map((b) => t.panels[b]), activeTabId: o ? r : a.activeTabId ?? r }, { ...t, groups: i };
+}, yt = (t, e, n) => {
+  const r = t.groups[e];
+  if (!r)
+    throw new Error(`setActiveTab: group ${e} not found.`);
+  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 };
+}, wn = (t, e, n, r) => {
+  const o = t.groups[e];
+  if (!o)
+    throw new Error(`reorderTabWithinGroup: group ${e} not found.`);
+  const s = o.tabIds.findIndex((b) => b === n);
+  if (s === -1)
+    throw new Error(`reorderTabWithinGroup: tab ${n} not in group ${e}.`);
+  const a = Math.max(0, Math.min(r, o.tabIds.length - 1));
+  if (s === a)
+    return t;
+  const i = o.tabIds.slice(), [c] = i.splice(s, 1);
+  i.splice(a, 0, c);
+  const u = i.map((b) => t.panels[b]), d = { ...t.groups, [e]: { ...o, tabIds: i, tabs: u } };
+  return { ...t, groups: d };
+}, ut = (t, e, n, r, o) => {
+  const s = t.groups[e];
+  if (!s)
+    throw new Error(`addTabToGroupAtIndex: group ${e} not found.`);
+  const a = { ...t.panels, [n.id]: n }, i = s.tabIds.slice(), c = Math.max(0, Math.min(r, i.length));
+  i.splice(c, 0, n.id);
+  const u = i.map((g) => a[g]), d = o ? n.id : s.activeTabId ?? n.id, b = { ...t.groups, [e]: { ...s, tabIds: i, tabs: u, activeTabId: d } };
+  return { ...t, panels: a, groups: b };
+}, H = (t, e) => {
+  if (!t.groups[e])
+    throw new Error(`setFocusedGroup: group ${e} not found.`);
+  return { ...t, focusedGroupId: e };
+}, Oe = (t, e) => {
+  const n = e - 1, r = t.groupOrder[n];
+  return r ? H(t, r) : t;
+}, _e = (t) => {
+  const e = t.groupOrder, n = t.focusedGroupId;
+  if (!n) {
+    const s = e[0];
+    return s ? H(t, s) : t;
+  }
+  const r = e.indexOf(n), o = e[(r + 1) % e.length];
+  return H(t, o);
+}, Be = (t) => {
+  const e = t.groupOrder, n = t.focusedGroupId;
+  if (!n) {
+    const s = e[e.length - 1];
+    return s ? H(t, s) : t;
+  }
+  const r = e.indexOf(n), o = e[(r - 1 + e.length) % e.length];
+  return H(t, o);
+}, In = (t) => {
+  const e = z(t.tree);
+  return { ...t, groupOrder: e };
+}, Tt = (t, e, n, r) => {
+  const { tree: o, newGroupId: s } = It(t.tree, e, n, r), a = { ...t.groups, [s]: Ae(s) }, i = z(o);
+  return { ...t, tree: o, groups: a, groupOrder: i, focusedGroupId: s };
+}, yn = (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" };
+}, $e = l.createContext(null), Ne = ({ value: t, children: e }) => /* @__PURE__ */ m($e.Provider, { value: t, children: e }), Gt = l.createContext(null), He = () => {
+  const t = l.useContext(Gt);
+  if (!t)
+    throw new Error("useTree must be used within TreeProvider");
+  return t;
+}, Le = ({ value: t, children: e }) => /* @__PURE__ */ m(Gt.Provider, { value: t, children: e }), ze = l.createContext(null), Xe = ({ value: t, children: e }) => /* @__PURE__ */ m(ze.Provider, { value: t, children: e }), Y = (t) => {
+  const e = Dt(t, Number.POSITIVE_INFINITY);
+  return M(e, 1);
+}, Ye = (t) => typeof t == "object" && t !== null, Fe = (t) => Ye(t) ? "rows" in t ? !0 : "cols" in t : !1, xt = (t) => {
+  if (!t)
+    return {
+      rows: Number.POSITIVE_INFINITY,
+      cols: Number.POSITIVE_INFINITY
+    };
+  if (typeof t == "number") {
+    const n = Y(t);
+    return { rows: n, cols: n };
+  }
+  if (Fe(t))
+    return {
+      rows: Y(t.rows),
+      cols: Y(t.cols)
+    };
+  const e = t;
+  return {
+    rows: Y(e.maxHorizontal),
+    cols: Y(e.maxVertical)
+  };
+}, tt = (t) => {
+  if (O(t))
+    return { horizontal: 1, vertical: 1 };
+  const e = tt(t.a), n = tt(t.b);
+  return t.direction === "horizontal" ? { horizontal: e.horizontal + n.horizontal, vertical: Math.max(e.vertical, n.vertical) } : { horizontal: Math.max(e.horizontal, n.horizontal), vertical: e.vertical + n.vertical };
+}, je = (t, e, n) => {
+  const { tree: r } = It(t, e, n, () => "__preview__");
+  return r;
+}, rt = (t, e, n, r) => {
+  if (!Number.isFinite(r.rows) && !Number.isFinite(r.cols))
+    return !0;
+  const o = je(t, e, n), s = tt(o);
+  return !(s.horizontal > r.rows || s.vertical > r.cols);
+}, St = {
+  splitFocused: k("panelState/splitFocused", (t) => ({ direction: t })),
+  focusGroupIndex: k("panelState/focusGroupIndex", (t) => ({ index1Based: t })),
+  focusNextGroup: k("panelState/focusNextGroup"),
+  focusPrevGroup: k("panelState/focusPrevGroup"),
+  setActiveTab: k("panelState/setActiveTab", (t, e) => ({ groupId: t, tabId: e })),
+  addTab: k(
+    "panelState/addTab",
+    (t) => t
+  ),
+  addNewTab: k(
+    "panelState/addNewTab",
+    (t) => t
+  ),
+  removeTab: k("panelState/removeTab", (t, e) => ({ groupId: t, tabId: e })),
+  contentDrop: k(
+    "panelState/contentDrop",
+    (t) => t
+  ),
+  tabDrop: k(
+    "panelState/tabDrop",
+    (t) => t
+  ),
+  adjustSplitRatio: k("panelState/adjustSplitRatio", (t) => t)
+}, Ke = (t, e, n) => {
+  const r = t.groups[e.fromGroupId], o = t.groups[e.targetGroupId];
+  if (!r || !o || !r.tabs.find((b) => b.id === e.tabId))
+    return t;
+  if (e.zone === "center" && e.fromGroupId === e.targetGroupId)
+    return yt(t, e.fromGroupId, e.tabId);
+  if (e.zone === "center") {
+    const b = ct(t, e.fromGroupId, e.targetGroupId, e.tabId, !0);
+    return H(b, e.targetGroupId);
+  }
+  const a = e.zone === "left" || e.zone === "right" ? "vertical" : "horizontal";
+  if (!rt(t.tree, e.targetGroupId, a, n.splitLimits))
+    return t;
+  const i = n.createGroupId(), c = Tt(t, e.targetGroupId, a, () => i), u = e.zone === "left" || e.zone === "top" ? e.targetGroupId : i, d = ct(c, e.fromGroupId, u, e.tabId, !0);
+  return H(d, u);
+}, We = (t, e) => {
+  const n = t.groups[e.fromGroupId], r = t.groups[e.targetGroupId];
+  if (!n || !r || !t.panels[e.tabId])
+    return t;
+  if (e.fromGroupId === e.targetGroupId) {
+    const g = n.tabIds.filter((T) => T !== e.tabId), y = Math.max(0, Math.min(e.targetIndex, g.length)), h = g.slice(0, y).concat([e.tabId], g.slice(y)), v = h.map((T) => t.panels[T]).filter(Boolean), w = { ...t.groups, [e.fromGroupId]: { ...n, tabIds: h, tabs: v } };
+    return { ...t, groups: w };
+  }
+  const s = { ...t.groups }, a = n.tabIds.filter((g) => g !== e.tabId), i = a.map((g) => t.panels[g]);
+  s[e.fromGroupId] = {
+    ...n,
+    tabIds: a,
+    tabs: i,
+    activeTabId: n.activeTabId === e.tabId ? i[0]?.id ?? null : n.activeTabId
+  };
+  const c = r.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)), b = d.map((g) => t.panels[g]).filter(Boolean);
+  return s[e.targetGroupId] = { ...r, tabIds: d, tabs: b, activeTabId: e.tabId }, { ...t, groups: s, focusedGroupId: e.targetGroupId };
+}, Ue = mt(St, {
+  splitFocused: (t, e, n) => {
+    const r = t.focusedGroupId ?? t.groupOrder[0] ?? null;
+    return !r || !rt(t.tree, r, e.payload.direction, n.splitLimits) ? t : Tt(t, r, e.payload.direction, n.createGroupId);
+  },
+  focusGroupIndex: (t, e) => Oe(t, e.payload.index1Based),
+  focusNextGroup: (t) => _e(t),
+  focusPrevGroup: (t) => Be(t),
+  setActiveTab: (t, e) => yt(t, e.payload.groupId, e.payload.tabId),
+  addTab: (t, e) => {
+    const { groupId: n, tab: r, index: o, makeActive: s } = e.payload;
+    return typeof o == "number" ? ut(t, n, r, o, s ?? !0) : at(t, n, r, s ?? !0);
+  },
+  addNewTab: (t, e, n) => {
+    if (!n.createPanelId)
+      throw new Error("addNewTab requires PanelSystemProvider.createPanelId");
+    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" ? ut(t, s, o, a, i ?? !0) : at(t, s, o, i ?? !0);
+  },
+  removeTab: (t, e) => Me(t, e.payload.groupId, e.payload.tabId),
+  contentDrop: (t, e, n) => Ke(t, e.payload, n),
+  tabDrop: (t, e) => We(t, e.payload),
+  adjustSplitRatio: (t, e) => {
+    const n = q(t.tree, e.payload.path);
+    if (O(n))
+      return t;
+    const r = ke(t.tree, e.payload.path, n.ratio + e.payload.deltaRatio);
+    return { ...t, tree: r };
+  }
+}), lt = (t, e, n) => {
+  const r = Ue[e.type];
+  if (!r)
+    return t;
+  const o = r(t, e, n);
+  return Q(o);
+}, Ct = l.createContext(null), X = () => {
+  const t = l.useContext(Ct);
+  if (!t)
+    throw new Error("usePanelSystem must be used within PanelSystemProvider");
+  return t;
+}, Ve = ({
+  initialState: t,
+  createGroupId: e,
+  createPanelId: n,
+  state: r,
+  onStateChange: o,
+  splitLimits: s,
+  children: a
+}) => {
+  const i = l.useMemo(() => Q(t), [t]), c = l.useMemo(() => xt(s), [s]), u = l.useRef({ createGroupId: e, splitLimits: c, createPanelId: n });
+  u.current.createGroupId = e, u.current.splitLimits = c, u.current.createPanelId = n;
+  const [d, b] = l.useReducer(
+    (G, C) => lt(G, C, u.current),
+    i
+  ), g = l.useMemo(
+    () => r ? Q(r) : d,
+    [r, d]
+  ), y = l.useRef(g);
+  y.current = g;
+  const h = r !== void 0, v = l.useCallback(
+    (G) => {
+      if (h) {
+        const C = lt(y.current, G, u.current);
+        o?.(C);
+        return;
+      }
+      b(G);
+    },
+    [h, o, b]
+  ), w = l.useMemo(() => ue(St, v), [v]), T = l.useMemo(
+    () => ({
+      setActiveTab: w.setActiveTab,
+      tabDrop: w.tabDrop
+    }),
+    [w]
+  ), f = l.useMemo(
+    () => ({
+      adjustSplitRatio: w.adjustSplitRatio
+    }),
+    [w]
+  ), I = l.useMemo(
+    () => ({
+      focusGroupIndex: w.focusGroupIndex,
+      focusNextGroup: w.focusNextGroup,
+      focusPrevGroup: w.focusPrevGroup
+    }),
+    [w]
+  ), p = l.useMemo(
+    () => ({
+      state: g,
+      dispatch: v,
+      actions: w
+    }),
+    [g, v, w]
+  );
+  return /* @__PURE__ */ m(Ct.Provider, { value: p, children: /* @__PURE__ */ m(Ne, { value: T, children: /* @__PURE__ */ m(Le, { value: f, children: /* @__PURE__ */ m(Xe, { value: I, children: a }) }) }) });
+}, qe = () => {
+  const { actions: t } = X();
+  return l.useMemo(
+    () => ({
+      splitFocused: (e) => {
+        t.splitFocused(e);
+      },
+      focusGroupIndex: (e) => {
+        t.focusGroupIndex(e);
+      },
+      focusNextGroup: () => {
+        t.focusNextGroup();
+      },
+      focusPrevGroup: () => {
+        t.focusPrevGroup();
+      },
+      closeFocusedGroup: () => {
+      }
+    }),
+    [t]
+  );
+}, Ze = () => {
+  const { actions: t } = X(), e = l.useCallback(
+    ({ fromGroupId: r, tabId: o, targetGroupId: s, zone: a }) => {
+      t.contentDrop({ fromGroupId: r, tabId: o, targetGroupId: s, zone: a });
+    },
+    [t]
+  ), 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: n };
+}, Je = () => {
+  const t = Ut(), e = qe();
+  return l.useEffect(() => {
+    Zt(t, e);
+  }, [t, e]), null;
+}, Et = l.createContext(null), Qe = () => {
+  const t = l.useContext(Et);
+  if (!t)
+    throw new Error("useContentRegistry must be used within ContentRegistryProvider");
+  return t;
+}, tn = (t) => {
+  const e = document.createElement("div");
+  return e.setAttribute("data-panel-wrapper", t), e.style.display = "contents", e;
+}, en = (t, e, n) => {
+  const [r] = l.useState(() => tn(t));
+  return nt(() => (r.style.display = n ? "contents" : "none", e && r.parentElement !== e && e.appendChild(r), () => {
+    r.parentElement?.removeChild(r);
+  }), [r, e, n]), r;
+}, Pt = l.memo(
+  ({ panelId: t, content: e, placement: n, containerElement: r }) => {
+    const o = n?.isActive ?? !1, s = en(t, r, o);
+    return Kt(
+      /* @__PURE__ */ m(l.Activity, { mode: o ? "visible" : "hidden", children: e }),
+      s
+    );
+  }
+);
+Pt.displayName = "PanelContentHost";
+const nn = ({
+  children: t,
+  panels: e,
+  placements: n
+}) => {
+  const [r, o] = l.useState(/* @__PURE__ */ new Map()), s = l.useCallback((g, y) => {
+    o((h) => {
+      const v = new Map(h);
+      return y ? v.set(g, y) : v.delete(g), v;
+    });
+  }, []), a = l.useMemo(
+    () => ({ registerContentContainer: s }),
+    [s]
+  ), i = l.useRef(e);
+  i.current = e;
+  const c = l.useCallback((g) => {
+    const y = i.current[g];
+    return y ? y.render(y.id) : null;
+  }, []), u = l.useMemo(() => Object.keys(e), [e]), { getCachedContent: d } = Wt({
+    resolveContent: c,
+    validIds: u
+  }), b = Object.keys(e);
+  return /* @__PURE__ */ N(Et.Provider, { value: a, children: [
+    t,
+    b.map((g) => {
+      if (!e[g])
+        return null;
+      const h = n[g] ?? null, v = h ? r.get(h.groupId) ?? null : null, w = d(g);
+      return /* @__PURE__ */ m(
+        Pt,
+        {
+          panelId: g,
+          content: w,
+          placement: h,
+          containerElement: v
+        },
+        g
+      );
+    })
+  ] });
+}, rn = ({
+  children: t,
+  emptyContentComponent: e,
+  doubleClickToAdd: n
+}) => {
+  const r = V(), { state: o, actions: s } = X(), { registerContentContainer: a } = Qe(), i = l.useCallback(() => l.createElement("div", { style: { color: "#888", fontSize: 12, padding: 12 } }, "No tabs"), []), c = e ?? i, u = l.useCallback(
+    (T) => {
+      const f = o.groups[T];
+      if (!f)
+        return null;
+      const I = f.tabIds.map((p) => o.panels[p]).filter(Boolean);
+      return { ...f, tabs: I };
+    },
+    [o.groups, o.panels]
+  ), d = l.useCallback(
+    (T) => {
+      const f = o.groups[T];
+      return !f || f.tabIds.length === 0 ? /* @__PURE__ */ m(c, {}) : null;
+    },
+    [o.groups, c]
+  ), b = l.useCallback((T, f) => {
+    s.setActiveTab(T, f);
+  }, [s]), g = l.useCallback((T) => {
+    s.addNewTab({ groupId: T, title: "New Tab", makeActive: !0 });
+  }, [s]), y = l.useCallback((T, f) => {
+    s.removeTab(T, f);
+  }, [s]), h = l.useCallback((T, f, I) => {
+    s.setActiveTab(f, T), r.onStartTabDrag(T, f, I);
+  }, [s, r]), v = l.useCallback((T, f) => {
+    const I = o.groups[T];
+    !I || !I.activeTabId || r.onStartContentDrag(T, I.activeTabId, f);
+  }, [o.groups, r]), w = l.useMemo(
+    () => ({ getGroup: u, getGroupContent: d, onClickTab: b, onAddTab: g, onCloseTab: y, onStartTabDrag: h, onStartContentDrag: v, doubleClickToAdd: n, registerContentContainer: a }),
+    [u, d, b, g, y, h, v, n, a]
+  );
+  return /* @__PURE__ */ m(ne, { value: w, children: t });
+}, on = ({
+  children: t,
+  emptyContentComponent: e,
+  doubleClickToAdd: n
+}) => {
+  const { state: r } = X(), 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(nn, { panels: r.panels, placements: o, children: /* @__PURE__ */ m(rn, { emptyContentComponent: e, doubleClickToAdd: n, children: t }) });
+}, F = (t, e, n, r) => {
+  if (O(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, u = n.w - c;
+    return F(t.a, [...e, "a"], { x: n.x, y: n.y, w: c, h: n.h }, r), F(t.b, [...e, "b"], { x: n.x + c, y: n.y, w: u, h: n.h }, r), r;
+  }
+  const a = n.h * t.ratio, i = n.h - a;
+  return F(t.a, [...e, "a"], { x: n.x, y: n.y, w: n.w, h: a }, r), F(t.b, [...e, "b"], { x: n.x, y: n.y + a, w: n.w, h: i }, r), r;
+}, sn = ({ containerRef: t }) => {
+  const { state: e } = X(), { adjustSplitRatio: n } = He(), r = l.useMemo(() => F(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 y = i.getBoundingClientRect();
+      s({ left: y.left, top: y.top, width: y.width, height: y.height });
+    };
+    c();
+    function u() {
+      try {
+        const y = window.ResizeObserver;
+        return typeof y == "function" ? y : null;
+      } catch {
+        return null;
+      }
+    }
+    const d = u(), b = d ? new d(() => c()) : null;
+    b && b.observe(i);
+    const g = () => c();
+    return window.addEventListener("scroll", g, !0), () => {
+      window.removeEventListener("scroll", g, !0), b && b.disconnect();
+    };
+  }, [t, e.tree]), !o)
+    return null;
+  const a = (i, c) => {
+    const u = {
+      left: o.left + o.width * i.parentRect.x / 100,
+      top: o.top + o.height * i.parentRect.y / 100,
+      width: o.width * i.parentRect.w / 100,
+      height: o.height * i.parentRect.h / 100
+    }, d = jt;
+    if (i.direction === "vertical") {
+      const h = u.left + u.width * (i.linePos - i.parentRect.x) / i.parentRect.w, v = {
+        position: "fixed",
+        left: `calc(${Math.round(h)}px - ${d} / 2)`,
+        top: Math.round(u.top),
+        width: d,
+        height: Math.round(u.height),
+        cursor: "col-resize",
+        pointerEvents: "auto"
+      };
+      return /* @__PURE__ */ m("div", { style: v, children: /* @__PURE__ */ m(st, { direction: "vertical", onResize: (T) => {
+        const f = o.width * i.parentRect.w / 100, I = f === 0 ? 0 : T / f;
+        n({ path: i.path, deltaRatio: I });
+      } }) }, `split-${c}`);
+    }
+    const b = u.top + u.height * (i.linePos - i.parentRect.y) / i.parentRect.h, g = {
+      position: "fixed",
+      left: Math.round(u.left),
+      top: `calc(${Math.round(b)}px - ${d} / 2)`,
+      width: Math.round(u.width),
+      height: d,
+      cursor: "row-resize",
+      pointerEvents: "auto"
+    };
+    return /* @__PURE__ */ m("div", { style: g, children: /* @__PURE__ */ m(st, { direction: "horizontal", onResize: (h) => {
+      const v = o.height * i.parentRect.h / 100, w = v === 0 ? 0 : h / v;
+      n({ path: i.path, deltaRatio: w });
+    } }) }, `split-${c}`);
+  };
+  return /* @__PURE__ */ m("div", { style: { position: "fixed", inset: 0, pointerEvents: "none" }, children: r.map((i, c) => a(i, c)) });
+}, an = {
+  position: "relative",
+  display: "flex",
+  width: "100%",
+  height: "100%"
+}, cn = ({
+  state: t,
+  layoutMode: e,
+  gridTracksInteractive: n,
+  view: r,
+  tabBarComponent: o,
+  panelGroupComponent: s
+}) => {
+  const a = (c) => r ? /* @__PURE__ */ m(r, { groupId: c }) : /* @__PURE__ */ m(me, { id: c, TabBarComponent: o, PanelGroupComponent: s });
+  if (e === "grid") {
+    const c = te(t, a, !!n);
+    return /* @__PURE__ */ m(ot, { config: c.config, layers: c.layers });
+  }
+  const i = Qt(t, a);
+  return /* @__PURE__ */ m(ot, { config: i.config, layers: i.layers });
+}, un = ({
+  containerRef: t,
+  layoutMode: e,
+  gridTracksInteractive: n,
+  dragThresholdPx: r,
+  view: o,
+  style: s,
+  className: a,
+  tabBarComponent: i,
+  panelGroupComponent: c,
+  splitLimits: u,
+  emptyContentComponent: d,
+  doubleClickToAdd: b
+}) => {
+  const { state: g } = X(), { onCommitContentDrop: y, onCommitTabDrop: h } = Ze(), v = l.useMemo(() => ({ ...an, ...s }), [s]), w = l.useCallback(
+    ({ targetGroupId: T, zone: f }) => {
+      if (f === "center")
+        return !0;
+      const I = f === "left" || f === "right" ? "vertical" : "horizontal";
+      return rt(g.tree, T, I, u);
+    },
+    [g.tree, u]
+  );
+  return /* @__PURE__ */ m(re, { children: /* @__PURE__ */ N(
+    pe,
+    {
+      containerRef: t,
+      dragThresholdPx: r,
+      onCommitContentDrop: y,
+      onCommitTabDrop: h,
+      isContentZoneAllowed: w,
+      children: [
+        /* @__PURE__ */ m(on, { emptyContentComponent: d, doubleClickToAdd: b, children: /* @__PURE__ */ m("div", { ref: t, className: a, style: v, children: /* @__PURE__ */ m(
+          cn,
+          {
+            state: g,
+            layoutMode: e,
+            gridTracksInteractive: n,
+            view: o,
+            tabBarComponent: i,
+            panelGroupComponent: c
+          }
+        ) }) }),
+        /* @__PURE__ */ m(sn, { containerRef: t }),
+        /* @__PURE__ */ m(ln, {})
+      ]
+    }
+  ) });
+}, ln = () => {
+  const t = V();
+  return /* @__PURE__ */ N(et, { children: [
+    /* @__PURE__ */ m(xe, { suggest: t.suggest }),
+    /* @__PURE__ */ m(Re, {})
+  ] });
+}, Tn = ({
+  initialState: t,
+  createGroupId: e,
+  createPanelId: n,
+  layoutMode: r,
+  gridTracksInteractive: o,
+  dragThresholdPx: s,
+  view: a,
+  emptyContentComponent: i,
+  state: c,
+  onStateChange: u,
+  className: d,
+  style: b,
+  tabBarComponent: g,
+  panelGroupComponent: y,
+  splitLimits: h,
+  doubleClickToAdd: v
+}) => {
+  if (!t)
+    throw new Error("PanelSystem requires initialState.");
+  if (!e)
+    throw new Error("PanelSystem requires explicit createGroupId function.");
+  if (!r)
+    throw new Error("PanelSystem requires explicit layoutMode ('absolute' | 'grid').");
+  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 w = l.useRef(null), T = l.useMemo(() => xt(h), [h]);
+  return /* @__PURE__ */ m(
+    Ve,
+    {
+      initialState: t,
+      createGroupId: e,
+      createPanelId: n,
+      state: c,
+      onStateChange: u,
+      splitLimits: h,
+      children: /* @__PURE__ */ N(qt, { children: [
+        /* @__PURE__ */ m(Je, {}),
+        /* @__PURE__ */ m(
+          un,
+          {
+            containerRef: w,
+            layoutMode: r,
+            gridTracksInteractive: o,
+            dragThresholdPx: s,
+            view: a,
+            style: b,
+            className: d,
+            tabBarComponent: g,
+            panelGroupComponent: y,
+            splitLimits: T,
+            emptyContentComponent: i,
+            doubleClickToAdd: v
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  xe as D,
+  Tn as P,
+  gt as a,
+  Ve as b,
+  z as c,
+  De as d,
+  ke as e,
+  Ae as f,
+  at as g,
+  yt as h,
+  O as i,
+  wn as j,
+  ut as k,
+  H as l,
+  ct as m,
+  Oe as n,
+  _e as o,
+  Be as p,
+  In as q,
+  Me as r,
+  It as s,
+  Tt as t,
+  X as u,
+  yn as v
+};
+//# sourceMappingURL=PanelSystem-BqUzNtf2.js.map