react-panel-layout 0.2.0

package/dist/index.js

@@ -0,0 +1,1863 @@
+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-CmzKfbPP.js";
+import { D as vr, g as Ir } from "./GridLayout-CmzKfbPP.js";
+import { jsx as m, jsxs as H, Fragment as et } from "react/jsx-runtime";
+import * as l from "react";
+import { C as _t, a as Mt, b as Ot, H as Bt, D as Lt, c as $t, d as Ht, e as Nt, f as zt, g as Xt, T as Yt, h as Ft, i as jt, j as Vt, k as Kt, l as Ut, m as qt, S as Wt } from "./styles-BnvLfp6e.js";
+import { n as yr } from "./styles-BnvLfp6e.js";
+const Zt = (t) => ({
+  width: Bt,
+  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({
+    axis: "x",
+    onResize: t
+  }), [a, i] = l.useState(!1), c = {
+    ref: n,
+    style: Zt(o ? "drag" : a ? "hover" : "idle"),
+    role: "separator",
+    "aria-orientation": "vertical",
+    "data-dragging": o ? "true" : void 0,
+    onPointerDown: s,
+    onPointerEnter: () => i(!0),
+    onPointerLeave: () => i(!1)
+  };
+  return r ? l.cloneElement(r, c) : e ? /* @__PURE__ */ m(e, { ...c }) : /* @__PURE__ */ m("div", { ...c });
+}, fr = () => {
+  const { layerId: t } = Pt(), { getLayerHandleProps: e } = Ct();
+  return l.useMemo(() => e(t), [e, t]);
+}, lt = l.createContext(null), Jt = () => {
+  const t = l.useContext(lt);
+  if (!t)
+    throw new Error("useKeybindings must be used within KeybindingsProvider");
+  return t;
+}, Qt = (t) => {
+  const e = [];
+  t.metaKey && e.push("Mod"), t.ctrlKey && e.push("Ctrl"), t.altKey && e.push("Alt"), t.shiftKey && e.push("Shift");
+  const r = t.key.length === 1 ? t.key.toUpperCase() : t.key;
+  return e.push(r), e.join("-");
+}, te = ({ children: t, configure: e }) => {
+  const r = l.useRef({}), n = l.useCallback((a, i) => {
+    r.current = { ...r.current, [a]: i };
+  }, []), o = l.useCallback((a) => {
+    const i = { ...r.current };
+    delete i[a], r.current = i;
+  }, []);
+  l.useEffect(() => {
+    const a = (i) => {
+      const c = Qt(i), u = r.current[c];
+      u && u(i);
+    };
+    return window.addEventListener("keydown", a), () => {
+      window.removeEventListener("keydown", a);
+    };
+  }, []);
+  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) => {
+  t.register("Mod-\\", (r) => {
+    r.preventDefault(), e.splitFocused("vertical");
+  }), t.register("Mod-Shift-\\", (r) => {
+    r.preventDefault(), e.splitFocused("horizontal");
+  });
+  for (const r of [1, 2, 3, 4, 5, 6, 7, 8, 9])
+    t.register(`Mod-${String(r)}`, (n) => {
+      n.preventDefault(), e.focusGroupIndex(r);
+    });
+  t.register("Alt-ArrowRight", (r) => {
+    r.preventDefault(), e.focusNextGroup();
+  }), 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 }) => {
+  const r = /* @__PURE__ */ new Map(), n = (o, s) => {
+    if (re(o)) {
+      r.set(o.groupId, s);
+      return;
+    }
+    if (o.direction === "vertical") {
+      const c = s.w * o.ratio, u = s.w - c;
+      n(o.a, { x: s.x, y: s.y, w: c, h: s.h }), n(o.b, { x: s.x + c, y: s.y, w: u, h: s.h });
+      return;
+    }
+    const a = s.h * o.ratio, i = s.h - a;
+    n(o.a, { x: s.x, y: s.y, w: s.w, h: a }), n(o.b, { x: s.x, y: s.y + a, w: s.w, h: i });
+  };
+  return n(t, e), r;
+}, ne = (t, e) => {
+  const r = dt(t.tree), n = {
+    areas: [["root"]],
+    rows: [{ size: "1fr" }],
+    columns: [{ size: "1fr" }],
+    gap: "0px",
+    style: { position: "relative" }
+  }, o = Array.from(r.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: n, layers: o };
+}, oe = (t, e, r) => {
+  const n = dt(t.tree), o = Array.from(new Set(Array.from(n.values()).flatMap((h) => [h.x, h.x + h.w]))).sort((h, w) => h - w), s = Array.from(new Set(Array.from(n.values()).flatMap((h) => [h.y, h.y + h.h]))).sort((h, w) => h - w), a = o.slice(1).map((h, w) => `${h - o[w]}fr`), i = s.slice(1).map((h, w) => `${h - s[w]}fr`), c = a.map((h) => ({ size: h, resizable: r })), u = i.map((h) => ({ size: h, resizable: r })), d = (h, w, b, y) => {
+    for (const [f, I] of n.entries())
+      if (h >= I.x && w <= I.x + I.w && b >= I.y && y <= I.y + I.h)
+        return f;
+    return ".";
+  }, g = [];
+  for (let h = 0; h < s.length - 1; h += 1) {
+    const w = [];
+    for (let b = 0; b < o.length - 1; b += 1)
+      w.push(d(o[b], o[b + 1], s[h], s[h + 1]));
+    g.push(w);
+  }
+  const v = {
+    areas: g,
+    rows: u,
+    columns: c,
+    gap: "0px"
+  }, T = 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);
+  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);
+  if (!t)
+    throw new Error("useDomRegistry must be used within DomRegistryProvider");
+  return t;
+}, ae = ({ children: t }) => {
+  const e = l.useRef(/* @__PURE__ */ new Map()), r = l.useCallback((c) => {
+    const u = e.current.get(c);
+    if (u)
+      return u;
+    const d = { group: null, tabbar: null, content: null };
+    return e.current.set(c, d), d;
+  }, []), n = l.useCallback(
+    (c, u) => {
+      const d = r(c);
+      if (d.group = u, u === null) {
+        const g = e.current.get(c);
+        (g ? g.tabbar === null && g.content === null : !1) && e.current.delete(c);
+      }
+    },
+    [r]
+  ), o = l.useCallback(
+    (c, u) => {
+      const d = r(c);
+      if (d.tabbar = u, u === null) {
+        const g = e.current.get(c);
+        (g ? g.group === null && g.content === null : !1) && e.current.delete(c);
+      }
+    },
+    [r]
+  ), s = l.useCallback(
+    (c, u) => {
+      const d = r(c);
+      if (d.content = u, u === null) {
+        const g = e.current.get(c);
+        (g ? g.group === null && g.tabbar === null : !1) && e.current.delete(c);
+      }
+    },
+    [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 = {
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  height: "100%"
+}, ue = {
+  flex: "1 1 auto",
+  minWidth: 0,
+  minHeight: 0,
+  position: "relative",
+  overflow: "hidden"
+};
+function le(t, e, r, n) {
+  return t ? l.cloneElement(t, r, n) : e ? /* @__PURE__ */ m(e, { ...r, children: n }) : /* @__PURE__ */ m("div", { ...r, children: n });
+}
+function de(t, e, r, n) {
+  return t ? l.cloneElement(t, r, n) : e ? /* @__PURE__ */ m(e, { ...r, children: n }) : /* @__PURE__ */ m("div", { ...r, children: n });
+}
+const pe = ({
+  group: t,
+  tabbar: e,
+  content: r,
+  onContentPointerDown: n,
+  groupRef: o,
+  contentRef: s,
+  component: a,
+  element: i,
+  contentComponent: c,
+  contentElement: u
+}) => {
+  const d = {
+    ref: o,
+    style: ce,
+    "data-group-id": t.id
+  }, v = le(u, c, {
+    ref: s,
+    style: ue,
+    "data-dnd-zone": "content",
+    onPointerDown: n
+  }, r);
+  return de(i, a, d, /* @__PURE__ */ H(et, { children: [
+    e,
+    v
+  ] }));
+}, gt = l.memo(pe, (t, e) => t.group.id !== e.group.id || t.group.activeTabId !== e.group.activeTabId || t.group.tabs.length !== e.group.tabs.length ? !1 : t.group.tabs === e.group.tabs);
+gt.displayName = "PanelGroupView";
+const V = (t, e, r) => {
+  const n = t.left, o = t.top, s = t.width, a = t.height, i = e - n, c = r - o, u = s / 3, d = a / 3;
+  return i > u && i < s - u && c > d && c < a - d ? "center" : i < c && i < s - i && c < a - c ? "left" : s - i < c && s - i < i && c < a - c ? "right" : c < i && c < a - c && i < s - i ? "top" : "bottom";
+};
+function A(t, e) {
+  if (!e) {
+    const n = (() => ({ type: t }));
+    return Object.defineProperty(n, "type", {
+      value: t,
+      writable: !1,
+      enumerable: !0
+    }), n;
+  }
+  const r = ((...n) => {
+    const o = e(...n);
+    return typeof o > "u" ? { type: t } : { type: t, payload: o };
+  });
+  return Object.defineProperty(r, "type", {
+    value: t,
+    writable: !1,
+    enumerable: !0
+  }), r;
+}
+const fe = (t, e) => {
+  const r = {};
+  return Object.keys(t).forEach((n) => {
+    const o = t[n];
+    r[n] = ((...s) => {
+      const a = o(...s);
+      return e(a), a;
+    });
+  }), r;
+}, ht = (t, e) => {
+  const r = {};
+  return Object.keys(e).forEach((n) => {
+    const o = e[n];
+    if (!o)
+      return;
+    const s = t[n];
+    if (!s)
+      throw new Error(`Missing action creator for key "${String(n)}"`);
+    r[s.type] = o;
+  }), r;
+}, mt = { phase: { kind: "idle" }, suggest: null, pointer: null, tabbarHover: null, draggingTabElement: null }, D = {
+  startContent: A(
+    "START_CONTENT",
+    (t) => t
+  ),
+  startTab: A(
+    "START_TAB",
+    (t) => t
+  ),
+  setSuggest: A("SET_SUGGEST", (t) => t),
+  setPointer: A("SET_POINTER", (t) => t),
+  setTabbarHover: A(
+    "SET_TABBAR_HOVER",
+    (t) => t
+  ),
+  reset: A("RESET")
+}, be = ht(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: () => mt
+}), ge = (t, e) => {
+  const r = be[e.type];
+  return r ? r(t, e, void 0) : t;
+}, vt = l.createContext(null), q = () => {
+  const t = l.useContext(vt);
+  if (!t)
+    throw new Error("usePanelInteractions must be used within InteractionsProvider");
+  return t;
+}, he = ({
+  containerRef: t,
+  dragThresholdPx: e,
+  onCommitContentDrop: r,
+  onCommitTabDrop: n,
+  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) => {
+    if (!t.current)
+      return;
+    const f = b.clientX, I = b.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) {
+      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 = V(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: R }) => f >= R.left && f <= R.right && I >= R.top && I <= R.bottom);
+      if (S) {
+        const k = Array.from(S.el.querySelectorAll("[role='tab']")).map((N) => N.getBoundingClientRect()), C = k.map((N) => N.left + N.width / 2), O = C.findIndex((N) => f < N), B = O === -1 ? C.length : O, Et = k.length === 0 ? S.rect.left + 8 : B === 0 ? k[0].left : B === k.length ? k[k.length - 1].right : (k[B - 1].right + k[B].left) / 2;
+        i(D.setTabbarHover({ groupId: S.gid, index: B, rect: S.rect, insertX: Et }));
+      } 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) {
+        i(D.setSuggest(null));
+        return;
+      }
+      const x = V(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 }));
+    }
+  }), g = J((b) => {
+    const y = t.current, f = a;
+    if (i(D.reset()), !y)
+      return;
+    const I = b.clientX, p = b.clientY;
+    if (f.phase.kind === "idle")
+      return;
+    const G = Math.abs(I - f.phase.startX), E = Math.abs(p - f.phase.startY);
+    if (!(G < e && E < e)) {
+      if (f.phase.kind === "content") {
+        const S = f.phase.cache.groups.find(({ rect: R }) => I >= R.left && I <= R.right && p >= R.top && p <= R.bottom);
+        if (!S)
+          return;
+        const P = S.gid ?? null;
+        if (!P)
+          return;
+        const x = V(S.rect, I, p);
+        if (o && !o({ targetGroupId: P, zone: x }))
+          return;
+        r({ 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 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 });
+          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 R = V(P.rect, I, p);
+          if (o && !o({ targetGroupId: x, zone: R }))
+            return;
+          r({ fromGroupId: f.phase.fromGroupId, tabId: f.phase.tabId, targetGroupId: x, zone: R });
+        }
+      }
+    }
+  }), v = 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);
+      };
+  }, [a.phase.kind]);
+  const T = l.useCallback((b, y, f) => {
+    if (f.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)
+      return;
+    const I = f.currentTarget;
+    I && I.setPointerCapture(f.pointerId);
+    const p = u();
+    i(D.startTab({ x: f.clientX, y: f.clientY, groupId: y, tabId: b, cache: p, element: I }));
+  }, [u]), w = l.useMemo(() => ({
+    suggest: a.suggest,
+    isTabDragging: a.phase.kind === "tab",
+    draggingTabId: a.phase.kind === "tab" ? a.phase.tabId : null,
+    dragPointer: a.pointer,
+    tabbarHover: a.tabbarHover,
+    draggingTabElement: a.draggingTabElement,
+    onStartContentDrag: T,
+    onStartTabDrag: h
+  }), [a.suggest, a.pointer, a.tabbarHover, a.phase, a.draggingTabElement, T, h]);
+  return /* @__PURE__ */ m(vt.Provider, { value: w, children: s });
+}, st = {
+  display: "inline-flex",
+  alignItems: "center",
+  userSelect: "none"
+}, me = ({
+  groupId: t,
+  tab: e,
+  active: r,
+  dragging: n,
+  onClickTab: o,
+  onStartDrag: s,
+  onCloseTab: a,
+  tabComponent: i,
+  tabElement: c,
+  onDoubleClick: u
+}) => {
+  const d = l.useEffectEvent(() => {
+    o(e.id);
+  }), g = l.useEffectEvent((w) => {
+    s && w.button === 0 && s(e.id, t, w);
+  }), v = () => {
+    const w = !!a;
+    return /* @__PURE__ */ m(l.Activity, { mode: w ? "visible" : "hidden", children: /* @__PURE__ */ m(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Close tab ${e.title}`,
+        onClick: (b) => {
+          a && (b.stopPropagation(), a(t, e.id));
+        },
+        style: { marginLeft: 6 },
+        tabIndex: w ? void 0 : -1,
+        disabled: !w,
+        "aria-hidden": w ? void 0 : !0,
+        children: "×"
+      }
+    ) });
+  }, T = {
+    role: "tab",
+    "aria-selected": r,
+    tabIndex: r ? 0 : -1,
+    style: st,
+    onClick: d,
+    onPointerDown: g,
+    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()
+    ] })
+  }, h = {
+    type: "button",
+    role: "tab",
+    "aria-selected": r,
+    tabIndex: r ? 0 : -1,
+    style: st,
+    onClick: () => {
+      o(e.id);
+    },
+    onPointerDown: (w) => {
+      s && w.button === 0 && s(e.id, t, w);
+    },
+    onDoubleClick: u,
+    children: /* @__PURE__ */ m("span", { children: e.title })
+  };
+  return c ? c(h) : i ? /* @__PURE__ */ m(i, { ...h }) : /* @__PURE__ */ m("div", { ...T });
+}, ve = {
+  display: "flex",
+  alignItems: "center"
+}, Ie = {
+  flex: "1 1 auto",
+  alignSelf: "stretch"
+}, we = ({
+  group: t,
+  onClickTab: e,
+  onStartDrag: r,
+  rootRef: n,
+  component: o,
+  element: s,
+  tabComponent: a,
+  tabElement: i,
+  onAddTab: c,
+  onCloseTab: u,
+  doubleClickToAdd: d
+}) => {
+  const { isTabDragging: g, draggingTabId: v } = q(), T = l.useRef(null), h = l.useCallback(
+    (p) => {
+      if (T.current = p, !!n) {
+        if (typeof n == "function") {
+          n(p);
+          return;
+        }
+        try {
+          n.current = p;
+        } catch {
+        }
+      }
+    },
+    [n]
+  ), w = l.useEffectEvent((p) => {
+    const G = T.current ?? p.currentTarget;
+    if (!G)
+      return;
+    const E = Array.from(G.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];
+      B && B.focus();
+    }, P = document.activeElement, x = P ? E.indexOf(P) : E.findIndex((C) => C.getAttribute("data-tab-id") === t.activeTabId);
+    if (p.key === "ArrowRight") {
+      p.preventDefault();
+      const C = x >= 0 ? x + 1 : 0;
+      S(C >= E.length ? 0 : C);
+      return;
+    }
+    if (p.key === "ArrowLeft") {
+      p.preventDefault();
+      const C = x >= 0 ? x - 1 : E.length - 1;
+      S(C < 0 ? E.length - 1 : C);
+      return;
+    }
+    if (p.key === "Home") {
+      p.preventDefault(), S(0);
+      return;
+    }
+    if (p.key === "End") {
+      p.preventDefault(), S(E.length - 1);
+      return;
+    }
+    if (p.key === "Enter" || p.key === " ") {
+      p.preventDefault();
+      const O = (x >= 0 ? E[x] : null)?.getAttribute("data-tab-id") ?? null;
+      O && e(O);
+      return;
+    }
+    if (p.key === "Delete" || p.key === "Backspace") {
+      if (u) {
+        p.preventDefault();
+        const O = (x >= 0 ? E[x] : null)?.getAttribute("data-tab-id") ?? null;
+        O && u(t.id, O);
+      }
+      return;
+    }
+    const R = (p.ctrlKey ? 1 : 0) + (p.metaKey ? 1 : 0) > 0, k = typeof p.key == "string" ? p.key.toLowerCase() : "";
+    if (R && k === "t") {
+      c && (p.preventDefault(), c(t.id));
+      return;
+    }
+  });
+  l.useEffect(() => {
+    const p = T.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 b = {
+    style: ve,
+    role: "tablist",
+    "data-tabbar": "true",
+    "data-group-id": t.id,
+    "data-dragging": g ? "true" : "false",
+    onKeyDown: w
+  }, y = Dt({
+    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__ */ H(y, { ...b, ref: h, onDoubleClick: I, children: [
+    t.tabs.map((p, G) => /* @__PURE__ */ m(
+      me,
+      {
+        groupId: t.id,
+        tab: p,
+        active: t.activeTabId === p.id,
+        dragging: v === p.id,
+        onClickTab: e,
+        onStartDrag: r,
+        onCloseTab: u,
+        tabComponent: a,
+        tabElement: i,
+        onDoubleClick: (E) => E.stopPropagation()
+      },
+      `${t.id}:${p.id}:${G}`
+    )),
+    /* @__PURE__ */ m("span", { style: Ie }),
+    f()
+  ] });
+}, 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);
+    },
+    [t, g]
+  ), w = l.useCallback(
+    (G) => {
+      T(t, G);
+    },
+    [t, T]
+  ), b = l.useCallback(
+    (G) => {
+      v(t, G);
+    },
+    [t, v]
+  ), y = n(t);
+  if (!y)
+    return null;
+  const f = o(t);
+  return /* @__PURE__ */ m(
+    r ?? ((G) => /* @__PURE__ */ m(gt, { ...G })),
+    {
+      group: y,
+      tabbar: /* @__PURE__ */ m(
+        e ?? we,
+        {
+          rootRef: b,
+          group: y,
+          onClickTab: (G) => s(t, G),
+          onAddTab: a,
+          onCloseTab: i,
+          onStartDrag: (G, E, S) => u(G, E, S),
+          doubleClickToAdd: d
+        }
+      ),
+      content: f,
+      groupRef: h,
+      contentRef: w,
+      onContentPointerDown: (G) => c(t, G)
+    }
+  );
+}, Te = (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) => {
+  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);
+  };
+  return Object.freeze({
+    translate: (n = 0, o = 0, s = 0) => r([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      n,
+      o,
+      s,
+      1
+    ]),
+    translate3d: (n, o, s) => r([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      n,
+      o,
+      s,
+      1
+    ]),
+    translateX: (n) => r([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      n,
+      0,
+      0,
+      1
+    ]),
+    translateY: (n) => r([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      n,
+      0,
+      1
+    ]),
+    translateZ: (n) => r([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      n,
+      1
+    ]),
+    scale: (n = 1, o = 1, s = 1) => r([
+      n,
+      0,
+      0,
+      0,
+      0,
+      o,
+      0,
+      0,
+      0,
+      0,
+      s,
+      0,
+      0,
+      0,
+      0,
+      1
+    ]),
+    scale3d: (n, o, s) => r([
+      n,
+      0,
+      0,
+      0,
+      0,
+      o,
+      0,
+      0,
+      0,
+      0,
+      s,
+      0,
+      0,
+      0,
+      0,
+      1
+    ]),
+    scaleX: (n) => r([
+      n,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1
+    ]),
+    scaleY: (n) => r([
+      1,
+      0,
+      0,
+      0,
+      0,
+      n,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      1
+    ]),
+    scaleZ: (n) => r([
+      1,
+      0,
+      0,
+      0,
+      0,
+      1,
+      0,
+      0,
+      0,
+      0,
+      n,
+      0,
+      0,
+      0,
+      0,
+      1
+    ]),
+    rotateX: (n) => {
+      const o = Math.cos(n), s = Math.sin(n);
+      return r([
+        1,
+        0,
+        0,
+        0,
+        0,
+        o,
+        s,
+        0,
+        0,
+        -s,
+        o,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    rotateY: (n) => {
+      const o = Math.cos(n), s = Math.sin(n);
+      return r([
+        o,
+        0,
+        -s,
+        0,
+        0,
+        1,
+        0,
+        0,
+        s,
+        0,
+        o,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    rotateZ: (n) => {
+      const o = Math.cos(n), s = Math.sin(n);
+      return r([
+        o,
+        s,
+        0,
+        0,
+        -s,
+        o,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    rotate: (n, o, s, a) => {
+      const i = Math.sqrt(o * o + s * s + a * a);
+      if (i === 0)
+        return K(e);
+      o /= i, s /= i, a /= i;
+      const c = Math.cos(n), u = Math.sin(n), d = 1 - c;
+      return r([
+        d * o * o + c,
+        d * o * s + u * a,
+        d * o * a - u * s,
+        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: (n, o, s, a) => {
+      const i = Math.sqrt(n * n + o * o + s * s);
+      if (i === 0)
+        return K(e);
+      n /= i, o /= i, s /= i;
+      const c = Math.cos(a), u = Math.sin(a), d = 1 - c;
+      return r([
+        d * n * n + c,
+        d * n * o + u * s,
+        d * n * s - u * o,
+        0,
+        d * n * o - u * s,
+        d * o * o + c,
+        d * o * s + u * n,
+        0,
+        d * n * s + u * o,
+        d * o * s - u * n,
+        d * s * s + c,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    skew: (n = 0, o = 0) => {
+      const s = Math.tan(n), a = Math.tan(o);
+      return r([
+        1,
+        a,
+        0,
+        0,
+        s,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    skewX: (n) => {
+      const o = Math.tan(n);
+      return r([
+        1,
+        0,
+        0,
+        0,
+        o,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    skewY: (n) => {
+      const o = Math.tan(n);
+      return r([
+        1,
+        o,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+    },
+    perspective: (n) => {
+      if (n === 0)
+        throw new Error("Perspective distance cannot be zero");
+      return r([
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        -1 / n,
+        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(`
+`)
+  });
+}, Ge = () => K([
+  1,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  1
+]), xe = {
+  position: "fixed",
+  inset: 0,
+  pointerEvents: "none",
+  zIndex: Lt
+}, Se = {
+  position: "absolute",
+  border: `${Nt} dashed ${zt}`,
+  background: Ht,
+  borderRadius: $t,
+  transformOrigin: "top left"
+}, L = (t, e) => e <= 0 ? 0 : _(t / e, 0), Ee = (t, e, r) => {
+  const { width: n, height: o } = t, s = r / 2, a = n > 0 ? n : 1, i = o > 0 ? o : 1, c = {
+    translateX: r,
+    translateY: r,
+    scaleX: L(_(n - r * 2, 0), a),
+    scaleY: L(_(o - r * 2, 0), i)
+  }, u = {
+    translateX: r,
+    translateY: r,
+    scaleX: L(_(n / 2 - r * 1.5, 0), a),
+    scaleY: L(_(o - r * 2, 0), i)
+  }, d = {
+    translateX: n / 2 + s,
+    translateY: r,
+    scaleX: L(_(n / 2 - r * 1.5, 0), a),
+    scaleY: L(_(o - r * 2, 0), i)
+  }, g = {
+    translateX: r,
+    translateY: r,
+    scaleX: L(_(n - r * 2, 0), a),
+    scaleY: L(_(o / 2 - r * 1.5, 0), i)
+  }, v = {
+    translateX: r,
+    translateY: o / 2 + s,
+    scaleX: L(_(n - r * 2, 0), a),
+    scaleY: L(_(o / 2 - r * 1.5, 0), i)
+  }, T = {
+    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;
+  return {
+    ...Se,
+    left: t.left,
+    top: t.top,
+    width: t.width,
+    height: t.height,
+    transform: Ee(t, e, r)
+  };
+}, Pe = ({ suggest: t }) => {
+  if (!t)
+    return null;
+  const { rect: e, zone: r } = t, n = Re(e, r);
+  return /* @__PURE__ */ m("div", { style: xe, children: /* @__PURE__ */ m("div", { style: n }) });
+}, Ce = typeof window < "u" && typeof document < "u", De = (t) => {
+  const [e, r] = l.useState(null), [n, o] = l.useState(null);
+  return At(() => {
+    if (!Ce || !t) {
+      r(null), o(null);
+      return;
+    }
+    const s = t.getBoundingClientRect();
+    r({ width: s.width, height: s.height }), o(t.outerHTML);
+  }, [t]), { html: n, size: e };
+}, Ae = {
+  position: "fixed",
+  inset: 0,
+  pointerEvents: "none",
+  zIndex: qt
+}, ke = {
+  position: "absolute",
+  width: Ut,
+  borderRadius: Kt,
+  background: Vt,
+  boxShadow: jt
+}, _e = () => {
+  const { isTabDragging: t, draggingTabId: e, dragPointer: r, tabbarHover: n, draggingTabElement: o } = q(), { html: s, size: a } = De(o), i = r !== null && e !== null, c = l.useMemo(() => {
+    if (!(!i || !r))
+      return {
+        position: "absolute",
+        left: r.x,
+        top: r.y,
+        transform: `translate(${Yt}, ${Ft})`,
+        pointerEvents: "none"
+      };
+  }, [i, r]), u = l.useMemo(() => {
+    if (!(!c || !o))
+      return a ? { ...c, width: a.width, height: a.height } : c;
+  }, [c, o, a]), d = l.useMemo(() => {
+    if (n)
+      return {
+        ...ke,
+        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: [
+    /* @__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;
+}, M = (t) => t.type === "group", Y = (t, e = []) => {
+  if (M(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) => {
+  if (e.length === 0)
+    return r;
+  const [n, ...o] = e;
+  return M(t) ? t : n === "a" ? { ...t, a: F(t.a, o, r) } : { ...t, b: F(t.b, o, r) };
+}, U = (t, e, r = []) => {
+  if (M(t))
+    return t.groupId === e ? { splitPath: null, side: null } : null;
+  if (M(t.a) && t.a.groupId === e)
+    return { splitPath: r, side: "a" };
+  if (M(t.b) && t.b.groupId === e)
+    return { splitPath: r, side: "b" };
+  const n = U(t.a, e, [...r, "a"]);
+  return n || U(t.b, e, [...r, "b"]);
+}, It = (t, e, r, n) => {
+  const o = n(), s = U(t, e), a = {
+    type: "split",
+    direction: r,
+    ratio: 0.5,
+    a: { type: "group", groupId: e },
+    b: { type: "group", groupId: o }
+  };
+  if (!s || s.splitPath === null)
+    return { tree: a, newGroupId: o };
+  const i = s.splitPath, c = W(t, i);
+  if (M(c))
+    return { tree: a, newGroupId: o };
+  const u = s.side === "a" ? { ...c, a } : { ...c, b: a };
+  return { tree: F(t, i, u), newGroupId: o };
+}, Me = (t, e) => {
+  const r = U(t, e);
+  if (!r || r.splitPath === null)
+    return { tree: t, survivorGroupId: e };
+  const n = r.splitPath, o = W(t, n);
+  if (M(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;
+  return { tree: a, survivorGroupId: i };
+}, Oe = (t, e, r) => {
+  const n = W(t, e);
+  if (M(n))
+    return t;
+  const o = { ...n, ratio: _(r, 0.05, 0.95) };
+  return F(t, e, o);
+}, Q = (t) => {
+  if (Object.keys(t.groups).filter((o) => t.groups[o].tabIds.length === 0).length === 0)
+    return t;
+  const n = (o, s) => {
+    const 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 };
+  };
+  return t.groupOrder.reduce((o, s) => n(o, s), t);
+}, Be = (t) => ({ id: t, tabIds: [], tabs: [], activeTabId: null }), it = (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 };
+  return o[e] = d, { ...t, panels: a, groups: o };
+}, Le = (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) => {
+  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 n = t.groups[e];
+  if (!n)
+    throw new Error(`setActiveTab: group ${e} not found.`);
+  if (!n.tabIds.some((s) => s === r))
+    throw new Error(`setActiveTab: tab ${r} not found in group ${e}.`);
+  const o = { ...t.groups, [e]: { ...n, activeTabId: r } };
+  return { ...t, groups: o, focusedGroupId: e };
+}, ct = (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) => {
+  if (!t.groups[e])
+    throw new Error(`setFocusedGroup: group ${e} not found.`);
+  return { ...t, focusedGroupId: e };
+}, $e = (t, e) => {
+  const r = e - 1, n = t.groupOrder[r];
+  return n ? $(t, n) : t;
+}, He = (t) => {
+  const e = t.groupOrder, r = t.focusedGroupId;
+  if (!r) {
+    const s = e[0];
+    return s ? $(t, s) : t;
+  }
+  const n = e.indexOf(r), o = e[(n + 1) % e.length];
+  return $(t, o);
+}, Ne = (t) => {
+  const e = t.groupOrder, r = t.focusedGroupId;
+  if (!r) {
+    const s = e[e.length - 1];
+    return s ? $(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 { ...t, tree: o, groups: a, groupOrder: i, focusedGroupId: s };
+}, br = (t) => {
+  const r = { type: "group", groupId: "g_1" }, n = Object.fromEntries(t.map((i) => [i.id, i])), s = { g_1: { id: "g_1", tabIds: t.map((i) => i.id), tabs: t, activeTabId: t[0]?.id ?? null } };
+  return { tree: r, panels: n, groups: s, groupOrder: ["g_1"], focusedGroupId: "g_1" };
+}, ze = l.createContext(null), Xe = ({ value: t, children: e }) => /* @__PURE__ */ m(ze.Provider, { value: t, children: e }), Tt = l.createContext(null), Ye = () => {
+  const t = l.useContext(Tt);
+  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) => {
+  if (!t)
+    return {
+      rows: Number.POSITIVE_INFINITY,
+      cols: Number.POSITIVE_INFINITY
+    };
+  if (typeof t == "number") {
+    const r = z(t);
+    return { rows: r, cols: r };
+  }
+  if (Ue(t))
+    return {
+      rows: z(t.rows),
+      cols: z(t.cols)
+    };
+  const e = t;
+  return {
+    rows: z(e.maxHorizontal),
+    cols: z(e.maxVertical)
+  };
+}, tt = (t) => {
+  if (M(t))
+    return { horizontal: 1, vertical: 1 };
+  const e = tt(t.a), r = tt(t.b);
+  return t.direction === "horizontal" ? { horizontal: e.horizontal + r.horizontal, vertical: Math.max(e.vertical, r.vertical) } : { horizontal: Math.max(e.horizontal, r.horizontal), vertical: e.vertical + r.vertical };
+}, qe = (t, e, r) => {
+  const { tree: n } = It(t, e, r, () => "__preview__");
+  return n;
+}, rt = (t, e, r, n) => {
+  if (!Number.isFinite(n.rows) && !Number.isFinite(n.cols))
+    return !0;
+  const o = qe(t, e, r), s = tt(o);
+  return !(s.horizontal > n.rows || s.vertical > n.cols);
+}, xt = {
+  splitFocused: A("panelState/splitFocused", (t) => ({ direction: t })),
+  focusGroupIndex: A("panelState/focusGroupIndex", (t) => ({ index1Based: t })),
+  focusNextGroup: A("panelState/focusNextGroup"),
+  focusPrevGroup: A("panelState/focusPrevGroup"),
+  setActiveTab: A("panelState/setActiveTab", (t, e) => ({ groupId: t, tabId: e })),
+  addTab: A(
+    "panelState/addTab",
+    (t) => t
+  ),
+  addNewTab: A(
+    "panelState/addNewTab",
+    (t) => t
+  ),
+  removeTab: A("panelState/removeTab", (t, e) => ({ groupId: t, tabId: e })),
+  contentDrop: A(
+    "panelState/contentDrop",
+    (t) => t
+  ),
+  tabDrop: A(
+    "panelState/tabDrop",
+    (t) => t
+  ),
+  adjustSplitRatio: A("panelState/adjustSplitRatio", (t) => t)
+}, We = (t, e, r) => {
+  const n = t.groups[e.fromGroupId], o = t.groups[e.targetGroupId];
+  if (!n || !o || !n.tabs.find((g) => g.id === e.tabId))
+    return t;
+  if (e.zone === "center" && e.fromGroupId === e.targetGroupId)
+    return wt(t, e.fromGroupId, e.tabId);
+  if (e.zone === "center") {
+    const g = at(t, e.fromGroupId, e.targetGroupId, e.tabId);
+    return $(g, e.targetGroupId);
+  }
+  const a = e.zone === "left" || e.zone === "right" ? "vertical" : "horizontal";
+  if (!rt(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 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 s = { ...t.groups }, a = r.tabIds.filter((v) => v !== e.tabId), i = a.map((v) => t.panels[v]);
+  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, {
+  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);
+  },
+  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),
+  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);
+  },
+  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);
+  },
+  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),
+  adjustSplitRatio: (t, e) => {
+    const r = W(t.tree, e.payload.path);
+    if (M(r))
+      return t;
+    const n = Oe(t.tree, e.payload.path, r.ratio + e.payload.deltaRatio);
+    return { ...t, tree: n };
+  }
+}), ut = (t, e, r) => {
+  const n = Je[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);
+  if (!t)
+    throw new Error("usePanelSystem must be used within PanelSystemProvider");
+  return t;
+}, Qe = ({
+  initialState: t,
+  createGroupId: e,
+  createPanelId: r,
+  state: n,
+  onStateChange: o,
+  splitLimits: s,
+  children: a
+}) => {
+  const i = l.useMemo(() => Q(t), [t]), c = l.useMemo(() => Gt(s), [s]), u = l.useRef({ createGroupId: e, splitLimits: c, createPanelId: r });
+  u.current.createGroupId = e, u.current.splitLimits = c, u.current.createPanelId = r;
+  const [d, g] = l.useReducer(
+    (G, E) => ut(G, E, u.current),
+    i
+  ), v = l.useMemo(
+    () => n ? Q(n) : d,
+    [n, d]
+  ), T = l.useRef(v);
+  T.current = v;
+  const h = n !== void 0, w = l.useCallback(
+    (G) => {
+      if (h) {
+        const E = ut(T.current, G, u.current);
+        o?.(E);
+        return;
+      }
+      g(G);
+    },
+    [h, o, g]
+  ), b = l.useMemo(() => fe(xt, w), [w]), y = l.useMemo(
+    () => ({
+      setActiveTab: b.setActiveTab,
+      tabDrop: b.tabDrop
+    }),
+    [b]
+  ), f = l.useMemo(
+    () => ({
+      adjustSplitRatio: b.adjustSplitRatio
+    }),
+    [b]
+  ), I = l.useMemo(
+    () => ({
+      focusGroupIndex: b.focusGroupIndex,
+      focusNextGroup: b.focusNextGroup,
+      focusPrevGroup: b.focusPrevGroup
+    }),
+    [b]
+  ), p = l.useMemo(
+    () => ({
+      state: v,
+      dispatch: w,
+      actions: b
+    }),
+    [v, w, b]
+  );
+  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 l.useMemo(
+    () => ({
+      splitFocused: (e) => {
+        t.splitFocused(e);
+      },
+      focusGroupIndex: (e) => {
+        t.focusGroupIndex(e);
+      },
+      focusNextGroup: () => {
+        t.focusNextGroup();
+      },
+      focusPrevGroup: () => {
+        t.focusPrevGroup();
+      },
+      closeFocusedGroup: () => {
+      }
+    }),
+    [t]
+  );
+}, er = () => {
+  const { actions: t } = j(), e = l.useCallback(
+    ({ fromGroupId: n, tabId: o, targetGroupId: s, zone: a }) => {
+      t.contentDrop({ fromGroupId: n, tabId: o, targetGroupId: s, zone: a });
+    },
+    [t]
+  ), r = l.useCallback(
+    ({ fromGroupId: n, tabId: o, targetGroupId: s, targetIndex: a }) => {
+      t.tabDrop({ fromGroupId: n, tabId: o, targetGroupId: s, targetIndex: a });
+    },
+    [t]
+  );
+  return { onCommitContentDrop: e, onCommitTabDrop: r };
+}, rr = () => {
+  const t = Jt(), e = tr();
+  return l.useEffect(() => {
+    ee(t, e);
+  }, [t, e]), null;
+}, nr = ({
+  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)
+        return null;
+      const f = y.tabIds.map((I) => o.panels[I]).filter(Boolean);
+      return { ...y, tabs: f };
+    },
+    [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, {});
+    },
+    [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]
+  );
+  return /* @__PURE__ */ m(ie, { value: w, children: t });
+}, X = (t, e, r, n) => {
+  if (M(t))
+    return n;
+  const o = t.direction, s = o === "vertical" ? r.x + r.w * t.ratio : r.y + r.h * t.ratio;
+  if (n.push({ path: e, direction: o, parentRect: r, linePos: s }), o === "vertical") {
+    const c = r.w * t.ratio, u = r.w - c;
+    return X(t.a, [...e, "a"], { x: r.x, y: r.y, w: c, h: r.h }, n), X(t.b, [...e, "b"], { x: r.x + c, y: r.y, w: u, h: r.h }, n), n;
+  }
+  const a = r.h * t.ratio, i = r.h - a;
+  return X(t.a, [...e, "a"], { x: r.x, y: r.y, w: r.w, h: a }, n), X(t.b, [...e, "b"], { x: r.x, y: r.y + a, w: r.w, h: i }, n), n;
+}, or = ({ containerRef: t }) => {
+  const { state: e } = j(), { adjustSplitRatio: r } = Ye(), n = l.useMemo(() => X(e.tree, [], { x: 0, y: 0, w: 100, h: 100 }, []), [e.tree]), [o, s] = l.useState(null);
+  if (l.useLayoutEffect(() => {
+    const 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 });
+    };
+    c();
+    function u() {
+      try {
+        const T = window.ResizeObserver;
+        return typeof T == "function" ? T : 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();
+    };
+  }, [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 = Wt;
+    if (i.direction === "vertical") {
+      const h = u.left + u.width * (i.linePos - i.parentRect.x) / i.parentRect.w, w = {
+        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: 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 });
+      } }) }, `split-${c}`);
+    }
+    const g = u.top + u.height * (i.linePos - i.parentRect.y) / i.parentRect.h, v = {
+      position: "fixed",
+      left: Math.round(u.left),
+      top: `calc(${Math.round(g)}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 });
+    } }) }, `split-${c}`);
+  };
+  return /* @__PURE__ */ m("div", { style: { position: "fixed", inset: 0, pointerEvents: "none" }, children: n.map((i, c) => a(i, c)) });
+}, sr = {
+  position: "relative",
+  display: "flex",
+  width: "100%",
+  height: "100%"
+}, ir = ({
+  state: t,
+  layoutMode: e,
+  gridTracksInteractive: r,
+  view: n,
+  tabBarComponent: o,
+  panelGroupComponent: s
+}) => {
+  const a = (c) => n ? /* @__PURE__ */ m(n, { groupId: c }) : /* @__PURE__ */ m(ye, { 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 i = ne(t, a);
+  return /* @__PURE__ */ m(ot, { config: i.config, layers: i.layers });
+}, ar = ({
+  containerRef: t,
+  layoutMode: e,
+  gridTracksInteractive: r,
+  dragThresholdPx: n,
+  view: o,
+  style: s,
+  className: a,
+  tabBarComponent: i,
+  panelGroupComponent: c,
+  splitLimits: u,
+  emptyContentComponent: d,
+  doubleClickToAdd: g
+}) => {
+  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")
+        return !0;
+      const I = f === "left" || f === "right" ? "vertical" : "horizontal";
+      return rt(v.tree, y, I, u);
+    },
+    [v.tree, u]
+  );
+  return /* @__PURE__ */ m(ae, { children: /* @__PURE__ */ H(
+    he,
+    {
+      containerRef: t,
+      dragThresholdPx: n,
+      onCommitContentDrop: T,
+      onCommitTabDrop: h,
+      isContentZoneAllowed: b,
+      children: [
+        /* @__PURE__ */ m(nr, { emptyContentComponent: d, doubleClickToAdd: g, children: /* @__PURE__ */ m("div", { ref: t, className: a, style: w, children: /* @__PURE__ */ m(
+          ir,
+          {
+            state: v,
+            layoutMode: e,
+            gridTracksInteractive: r,
+            view: o,
+            tabBarComponent: i,
+            panelGroupComponent: c
+          }
+        ) }) }),
+        /* @__PURE__ */ m(or, { containerRef: t }),
+        /* @__PURE__ */ m(cr, {})
+      ]
+    }
+  ) });
+}, cr = () => {
+  const t = q();
+  return /* @__PURE__ */ H(et, { children: [
+    /* @__PURE__ */ m(Pe, { suggest: t.suggest }),
+    /* @__PURE__ */ m(_e, {})
+  ] });
+}, gr = ({
+  initialState: t,
+  createGroupId: e,
+  createPanelId: r,
+  layoutMode: n,
+  gridTracksInteractive: o,
+  dragThresholdPx: s,
+  view: a,
+  emptyContentComponent: i,
+  state: c,
+  onStateChange: u,
+  className: d,
+  style: g,
+  tabBarComponent: v,
+  panelGroupComponent: T,
+  splitLimits: h,
+  doubleClickToAdd: w
+}) => {
+  if (!t)
+    throw new Error("PanelSystem requires initialState.");
+  if (!e)
+    throw new Error("PanelSystem requires explicit createGroupId function.");
+  if (!n)
+    throw new Error("PanelSystem requires explicit layoutMode ('absolute' | 'grid').");
+  if (n === "grid" && o === void 0)
+    throw new Error("PanelSystem(layoutMode='grid') requires explicit 'gridTracksInteractive' flag.");
+  if (s === void 0)
+    throw new Error("PanelSystem requires explicit 'dragThresholdPx' value.");
+  const b = l.useRef(null), y = l.useMemo(() => Gt(h), [h]);
+  return /* @__PURE__ */ m(
+    Qe,
+    {
+      initialState: t,
+      createGroupId: e,
+      createPanelId: r,
+      state: c,
+      onStateChange: u,
+      splitLimits: h,
+      children: /* @__PURE__ */ H(te, { children: [
+        /* @__PURE__ */ m(rr, {}),
+        /* @__PURE__ */ m(
+          ar,
+          {
+            containerRef: b,
+            layoutMode: n,
+            gridTracksInteractive: o,
+            dragThresholdPx: s,
+            view: a,
+            style: g,
+            className: d,
+            tabBarComponent: v,
+            panelGroupComponent: T,
+            splitLimits: y,
+            emptyContentComponent: i,
+            doubleClickToAdd: w
+          }
+        )
+      ] })
+    }
+  );
+};
+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
+};
+//# sourceMappingURL=index.js.map