react-resizable-panels 4.0.0-alpha.0 → 4.0.0-alpha.2

package/dist/react-resizable-panels.js

@@ -1,21 +1,74 @@
 "use client";
-import { jsx as F } from "react/jsx-runtime";
-import { useId as Re, useLayoutEffect as Pe, useEffect as Ce, useRef as I, useCallback as ce, createContext as Ee, useImperativeHandle as ue, useState as M, useMemo as Me, useContext as Ge } from "react";
-function Ie(e, t) {
+import { jsx as j } from "react/jsx-runtime";
+import { useId as De, useLayoutEffect as Te, useEffect as Ae, useRef as D, useCallback as ge, createContext as $e, useImperativeHandle as Se, useState as R, useMemo as xe, useSyncExternalStore as Ne, useContext as _e } from "react";
+function re(e, t) {
+  return t.sort(
+    e === "horizontal" ? Fe : He
+  );
+}
+function Fe(e, t) {
+  const n = e.element.offsetLeft - t.element.offsetLeft;
+  return n !== 0 ? n : e.element.offsetWidth - t.element.offsetWidth;
+}
+function He(e, t) {
+  const n = e.element.offsetTop - t.element.offsetTop;
+  return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
+}
+function ze(e) {
+  const { element: t, orientation: n, panels: o, separators: s } = e, i = re(
+    n,
+    Array.from(t.children).filter((c) => c instanceof HTMLElement).map((c) => ({ element: c }))
+  ).map(({ element: c }) => c), a = [];
+  let r, l;
+  for (const c of i) {
+    const u = o.find(
+      (f) => f.element === c
+    );
+    if (u) {
+      if (r) {
+        const f = r.element.getBoundingClientRect(), m = c.getBoundingClientRect();
+        a.push({
+          group: e,
+          panels: [r, u],
+          separator: l,
+          rect: n === "horizontal" ? new DOMRect(
+            f.right,
+            m.top,
+            m.left - f.right,
+            m.height
+          ) : new DOMRect(
+            m.left,
+            f.bottom,
+            m.width,
+            m.top - f.bottom
+          )
+        });
+      }
+      r = u, l = void 0;
+    } else {
+      const f = s.find(
+        (m) => m.element === c
+      );
+      f ? l = f : (r = void 0, l = void 0);
+    }
+  }
+  return a;
+}
+function je(e, t) {
   const n = getComputedStyle(e), o = parseFloat(n.fontSize);
   return t * o;
 }
-function Oe(e, t) {
+function We(e, t) {
   const n = getComputedStyle(e.ownerDocument.body), o = parseFloat(n.fontSize);
   return t * o;
 }
-function ke(e) {
+function Ue(e) {
   return e / 100 * window.innerHeight;
 }
-function Ae(e) {
+function Be(e) {
   return e / 100 * window.innerWidth;
 }
-function Ne(e) {
+function Ke(e) {
   switch (typeof e) {
     case "number":
       return [e, "px"];
@@ -25,13 +78,13 @@ function Ne(e) {
     }
   }
 }
-function H({
+function Y({
   groupSize: e,
   panelElement: t,
   styleProp: n
 }) {
   let o;
-  const [s, i] = Ne(n);
+  const [s, i] = Ke(n);
   switch (i) {
     case "%": {
       o = s / 100 * e;
@@ -42,72 +95,72 @@ function H({
       break;
     }
     case "rem": {
-      o = Oe(t, s);
+      o = We(t, s);
       break;
     }
     case "em": {
-      o = Ie(t, s);
+      o = je(t, s);
       break;
     }
     case "vh": {
-      o = ke(s);
+      o = Ue(s);
       break;
     }
     case "vw": {
-      o = Ae(s);
+      o = Be(s);
       break;
     }
   }
   return o;
 }
-function L(e) {
+function C(e) {
   return parseFloat(e.toFixed(3));
 }
-function Z({
+function le({
   group: e
 }) {
-  const { direction: t, panels: n } = e;
+  const { orientation: t, panels: n } = e;
   return n.reduce((o, s) => (o += t === "horizontal" ? s.element.offsetWidth : s.element.offsetHeight, o), 0);
 }
-function ie(e) {
-  const { panels: t } = e, n = Z({ group: e });
+function pe(e) {
+  const { panels: t } = e, n = le({ group: e });
   return t.map((o) => {
     const { element: s, panelConstraints: i } = o;
     let a = 0;
     if (i.collapsedSize) {
-      const u = H({
+      const u = Y({
         groupSize: n,
         panelElement: s,
         styleProp: i.collapsedSize
       });
-      a = L(u / n * 100);
+      a = C(u / n * 100);
     }
     let r;
     if (i.defaultSize) {
-      const u = H({
+      const u = Y({
         groupSize: n,
         panelElement: s,
         styleProp: i.defaultSize
       });
-      r = L(u / n * 100);
+      r = C(u / n * 100);
     }
     let l = 0;
     if (i.minSize) {
-      const u = H({
+      const u = Y({
         groupSize: n,
         panelElement: s,
         styleProp: i.minSize
       });
-      l = L(u / n * 100);
+      l = C(u / n * 100);
     }
     let c = 100;
     if (i.maxSize) {
-      const u = H({
+      const u = Y({
         groupSize: n,
         panelElement: s,
         styleProp: i.maxSize
       });
-      c = L(u / n * 100);
+      c = C(u / n * 100);
     }
     return {
       collapsedSize: a,
@@ -119,7 +172,11 @@ function ie(e) {
     };
   });
 }
-class $e {
+function S(e, t = "Assertion error") {
+  if (!e)
+    throw console.error(t), Error(t);
+}
+class Ve {
   #e = {};
   addListener(t, n) {
     const o = this.#e[t];
@@ -158,70 +215,403 @@ class $e {
     }
   }
 }
-let C = {
+function L(e, t, n = 0) {
+  return Math.abs(C(e) - C(t)) <= n;
+}
+let P = {
   cursorFlags: 0,
   interactionState: {
     state: "inactive"
   },
   mountedGroups: /* @__PURE__ */ new Map()
 };
-const _ = new $e();
-function O() {
-  return C;
+const A = new Ve();
+function k() {
+  return P;
 }
-function G(e) {
-  const t = typeof e == "function" ? e(C) : e;
-  return C === t || (C = {
-    ...C,
+function M(e) {
+  const t = typeof e == "function" ? e(P) : e;
+  if (P === t)
+    return P;
+  const n = P;
+  return P = {
+    ...P,
     ...t
-  }, t.cursorFlags !== void 0 && _.emit("cursorFlagsChange", C.cursorFlags), t.interactionState !== void 0 && _.emit("interactionStateChange", C.interactionState), t.mountedGroups !== void 0 && _.emit("mountedGroupsChange", C.mountedGroups)), C;
+  }, t.cursorFlags !== void 0 && A.emit("cursorFlagsChange", P.cursorFlags), t.interactionState !== void 0 && A.emit("interactionStateChange", P.interactionState), t.mountedGroups !== void 0 && (P.mountedGroups.forEach((o, s) => {
+    o.derivedPanelConstraints.forEach((i) => {
+      if (i.collapsible) {
+        const { layout: a } = n.mountedGroups.get(s) ?? {};
+        if (a) {
+          const r = L(
+            i.collapsedSize,
+            o.layout[i.panelId]
+          ), l = L(
+            i.collapsedSize,
+            a[i.panelId]
+          );
+          r && !l && (s.inMemoryLastExpandedPanelSizes[i.panelId] = a[i.panelId]);
+        }
+      }
+    });
+  }), A.emit("mountedGroupsChange", P.mountedGroups)), P;
 }
-const Te = (e) => e, K = () => {
-}, fe = 1, de = 2, pe = 4, he = 8, re = {
-  coarse: 10,
-  precise: 5
-};
-function _e(e) {
-  const { direction: t, element: n, panels: o, separators: s } = e, i = Array.from(n.children).filter((c) => c instanceof HTMLElement).sort((c, u) => {
-    const f = c.getBoundingClientRect(), p = u.getBoundingClientRect();
-    return t === "horizontal" ? f.left - p.left : f.top - p.top;
-  }), a = [];
-  let r, l;
-  for (const c of i) {
-    const u = o.find(
-      (f) => f.element === c
+function Xe(e, t) {
+  if (e.length !== t.length)
+    return !1;
+  for (let n = 0; n < e.length; n++)
+    if (e[n] != t[n])
+      return !1;
+  return !0;
+}
+function W(e, t) {
+  return L(e, t) ? 0 : e > t ? 1 : -1;
+}
+function _({
+  panelConstraints: e,
+  size: t
+}) {
+  const {
+    collapsedSize: n = 0,
+    collapsible: o,
+    maxSize: s = 100,
+    minSize: i = 0
+  } = e;
+  if (W(t, i) < 0)
+    if (o) {
+      const a = (n + i) / 2;
+      W(t, a) < 0 ? t = n : t = i;
+    } else
+      t = i;
+  return t = Math.min(s, t), t = C(t), t;
+}
+function Q({
+  delta: e,
+  initialLayout: t,
+  panelConstraints: n,
+  pivotIndices: o,
+  prevLayout: s,
+  trigger: i
+}) {
+  if (L(e, 0))
+    return t;
+  const a = Object.values(t), r = Object.values(s), l = [...a], [c, u] = o;
+  S(c != null, "Invalid first pivot index"), S(u != null, "Invalid second pivot index");
+  let f = 0;
+  if (i === "keyboard") {
+    {
+      const p = e < 0 ? u : c, d = n[p];
+      S(
+        d,
+        `Panel constraints not found for index ${p}`
+      );
+      const {
+        collapsedSize: h = 0,
+        collapsible: v,
+        minSize: z = 0
+      } = d;
+      if (v) {
+        const x = a[p];
+        if (S(
+          x != null,
+          `Previous layout not found for panel index ${p}`
+        ), L(x, h)) {
+          const y = z - x;
+          W(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
+        }
+      }
+    }
+    {
+      const p = e < 0 ? c : u, d = n[p];
+      S(
+        d,
+        `No panel constraints found for index ${p}`
+      );
+      const {
+        collapsedSize: h = 0,
+        collapsible: v,
+        minSize: z = 0
+      } = d;
+      if (v) {
+        const x = a[p];
+        if (S(
+          x != null,
+          `Previous layout not found for panel index ${p}`
+        ), L(x, z)) {
+          const y = x - h;
+          W(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
+        }
+      }
+    }
+  }
+  {
+    const p = e < 0 ? 1 : -1;
+    let d = e < 0 ? u : c, h = 0;
+    for (; ; ) {
+      const z = a[d];
+      S(
+        z != null,
+        `Previous layout not found for panel index ${d}`
+      );
+      const y = _({
+        panelConstraints: n[d],
+        size: 100
+      }) - z;
+      if (h += y, d += p, d < 0 || d >= n.length)
+        break;
+    }
+    const v = Math.min(Math.abs(e), Math.abs(h));
+    e = e < 0 ? 0 - v : v;
+  }
+  {
+    let d = e < 0 ? c : u;
+    for (; d >= 0 && d < n.length; ) {
+      const h = Math.abs(e) - Math.abs(f), v = a[d];
+      S(
+        v != null,
+        `Previous layout not found for panel index ${d}`
+      );
+      const z = v - h, x = _({
+        panelConstraints: n[d],
+        size: z
+      });
+      if (!L(v, x) && (f += v - x, l[d] = x, f.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+        numeric: !0
+      }) >= 0))
+        break;
+      e < 0 ? d-- : d++;
+    }
+  }
+  if (Xe(r, l))
+    return s;
+  {
+    const p = e < 0 ? u : c, d = a[p];
+    S(
+      d != null,
+      `Previous layout not found for panel index ${p}`
     );
-    if (u) {
-      if (r) {
-        const f = r.element.getBoundingClientRect(), p = c.getBoundingClientRect();
-        a.push({
-          group: e,
-          panels: [r, u],
-          separator: l,
-          rect: t === "horizontal" ? new DOMRect(
-            f.right,
-            p.top,
-            p.left - f.right,
-            p.height
-          ) : new DOMRect(
-            p.left,
-            f.bottom,
-            p.width,
-            p.top - f.bottom
-          )
+    const h = d + f, v = _({
+      panelConstraints: n[p],
+      size: h
+    });
+    if (l[p] = v, !L(v, h)) {
+      let z = h - v, y = e < 0 ? u : c;
+      for (; y >= 0 && y < n.length; ) {
+        const w = l[y];
+        S(
+          w != null,
+          `Previous layout not found for panel index ${y}`
+        );
+        const G = w + z, O = _({
+          panelConstraints: n[y],
+          size: G
         });
+        if (L(w, O) || (z -= O - w, l[y] = O), L(z, 0))
+          break;
+        e > 0 ? y-- : y++;
       }
-      r = u;
-    } else {
-      const f = s.find(
-        (p) => p.element === c
-      );
-      f ? l = f : (r = void 0, l = void 0);
     }
   }
-  return a;
+  const m = Object.values(l).reduce(
+    (p, d) => d + p,
+    0
+  );
+  if (!L(m, 100, 0.1))
+    return s;
+  const g = Object.keys(s);
+  return l.reduce((p, d, h) => (p[g[h]] = d, p), {});
+}
+function J(e) {
+  const t = e.parentElement;
+  S(t, "Parent group element not found");
+  const { mountedGroups: n } = k();
+  for (const [o] of n)
+    if (o.element === t)
+      return o;
+  throw Error("Could not find parent Group for separator element");
+}
+function ee(e, t) {
+  if (Object.keys(e).length !== Object.keys(t).length)
+    return !1;
+  for (const n in e)
+    if (W(e[n], t[n]) !== 0)
+      return !1;
+  return !0;
+}
+function F({
+  layout: e,
+  panelConstraints: t
+}) {
+  const o = [...Object.values(e)], s = o.reduce(
+    (r, l) => r + l,
+    0
+  );
+  if (o.length !== t.length)
+    throw Error(
+      `Invalid ${t.length} panel layout: ${o.map((r) => `${r}%`).join(", ")}`
+    );
+  if (!L(s, 100) && o.length > 0)
+    for (let r = 0; r < t.length; r++) {
+      const l = o[r];
+      S(l != null, `No layout data found for index ${r}`);
+      const c = 100 / s * l;
+      o[r] = c;
+    }
+  let i = 0;
+  for (let r = 0; r < t.length; r++) {
+    const l = o[r];
+    S(l != null, `No layout data found for index ${r}`);
+    const c = _({
+      panelConstraints: t[r],
+      size: l
+    });
+    l != c && (i += l - c, o[r] = c);
+  }
+  if (!L(i, 0))
+    for (let r = 0; r < t.length; r++) {
+      const l = o[r];
+      S(l != null, `No layout data found for index ${r}`);
+      const c = l + i, u = _({
+        panelConstraints: t[r],
+        size: c
+      });
+      if (l !== u && (i -= u - l, o[r] = u, L(i, 0)))
+        break;
+    }
+  const a = Object.keys(e);
+  return o.reduce((r, l, c) => (r[a[c]] = l, r), {});
 }
-function De(e, t) {
+function be({
+  groupId: e
+}) {
+  const t = () => {
+    const { mountedGroups: n } = k();
+    for (const [o, s] of n)
+      if (o.id === e)
+        return { group: o, ...s };
+    throw Error(`Group ${e} not found`);
+  };
+  return {
+    getLayout() {
+      const { layout: n } = t();
+      return n;
+    },
+    setLayout(n) {
+      const {
+        derivedPanelConstraints: o,
+        group: s,
+        layout: i,
+        separatorToPanels: a
+      } = t(), r = F({
+        layout: n,
+        panelConstraints: o
+      });
+      return ee(i, r) || M((l) => ({
+        mountedGroups: new Map(l.mountedGroups).set(s, {
+          derivedPanelConstraints: o,
+          layout: r,
+          separatorToPanels: a
+        })
+      })), r;
+    }
+  };
+}
+function we(e) {
+  const { mountedGroups: t } = k(), n = t.get(e);
+  return S(n, `Mounted Group ${e.id} not found`), n;
+}
+function T(e, t) {
+  const n = J(e), o = we(n), s = n.separators.find(
+    (f) => f.element === e
+  );
+  S(s, "Matching separator not found");
+  const i = o.separatorToPanels.get(s);
+  S(i, "Matching panels not found");
+  const a = i.map((f) => n.panels.indexOf(f)), l = be({ groupId: n.id }).getLayout(), c = Q({
+    delta: t,
+    initialLayout: l,
+    panelConstraints: o.derivedPanelConstraints,
+    pivotIndices: a,
+    prevLayout: l,
+    trigger: "keyboard"
+  }), u = F({
+    layout: c,
+    panelConstraints: o.derivedPanelConstraints
+  });
+  ee(l, u) || M((f) => ({
+    mountedGroups: new Map(f.mountedGroups).set(n, {
+      derivedPanelConstraints: o.derivedPanelConstraints,
+      layout: u,
+      separatorToPanels: o.separatorToPanels
+    })
+  }));
+}
+function me(e) {
+  if (e.defaultPrevented)
+    return;
+  const t = e.currentTarget, n = J(t);
+  if (!n.disabled)
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault(), n.orientation === "vertical" && T(t, 5);
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault(), n.orientation === "horizontal" && T(t, -5);
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault(), n.orientation === "horizontal" && T(t, 5);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault(), n.orientation === "vertical" && T(t, -5);
+        break;
+      }
+      case "End": {
+        e.preventDefault(), T(t, 100);
+        break;
+      }
+      case "Enter": {
+        e.preventDefault();
+        const o = J(t), { derivedPanelConstraints: s, layout: i, separatorToPanels: a } = we(o), r = o.separators.find(
+          (f) => f.element === t
+        );
+        S(r, "Matching separator not found");
+        const l = a.get(r);
+        S(l, "Matching panels not found");
+        const c = l[0], u = s.find(
+          (f) => f.panelId === c.id
+        );
+        if (S(u, "Panel metadata not found"), u.collapsible) {
+          const f = i[c.id], m = u.collapsedSize === f ? o.inMemoryLastExpandedPanelSizes[c.id] ?? u.minSize : u.collapsedSize;
+          T(t, m - f);
+        }
+        break;
+      }
+      case "F6": {
+        e.preventDefault();
+        const s = J(t).separators.map(
+          (l) => l.element
+        ), i = Array.from(s).findIndex(
+          (l) => l === e.currentTarget
+        );
+        S(i !== null, "Index not found");
+        const a = e.shiftKey ? i > 0 ? i - 1 : s.length - 1 : i + 1 < s.length ? i + 1 : 0;
+        s[a].focus();
+        break;
+      }
+      case "Home": {
+        e.preventDefault(), T(t, -100);
+        break;
+      }
+    }
+}
+const Ye = (e) => e, oe = () => {
+}, Le = 1, Pe = 2, Ee = 4, Re = 8, he = {
+  coarse: 10,
+  precise: 5
+};
+function Ze(e, t) {
   return {
     x: e.x >= t.left && e.x <= t.right ? 0 : Math.min(
       Math.abs(e.x - t.left),
@@ -233,13 +623,13 @@ function De(e, t) {
     )
   };
 }
-function Fe(e, t, n) {
+function qe(e, t, n) {
   let o, s = {
     x: 1 / 0,
     y: 1 / 0
   };
   for (const i of t) {
-    const a = De(n, i.rect);
+    const a = Ze(n, i.rect);
     switch (e) {
       case "horizontal": {
         a.x <= s.x && (o = i, s = a);
@@ -256,33 +646,33 @@ function Fe(e, t, n) {
     hitRegion: o
   } : void 0;
 }
-let B;
-function je() {
-  return B === void 0 && (typeof matchMedia == "function" ? B = !!matchMedia("(pointer:coarse)").matches : B = !1), B;
+let Z;
+function Je() {
+  return Z === void 0 && (typeof matchMedia == "function" ? Z = !!matchMedia("(pointer:coarse)").matches : Z = !1), Z;
 }
-function me(e, t) {
+function Ce(e, t) {
   const n = [];
   return t.forEach((o, s) => {
     if (s.disabled)
       return;
-    const i = je() ? re.coarse : re.precise, a = _e(s), r = Fe(s.direction, a, {
+    const i = Je() ? he.coarse : he.precise, a = ze(s), r = qe(s.orientation, a, {
       x: e.clientX,
       y: e.clientY
     });
     r && r.distance.x <= i && r.distance.y <= i && n.push(r.hitRegion);
   }), n;
 }
-function se(e) {
+function ve(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = O(), n = me(e, t), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map();
+  const { mountedGroups: t } = k(), n = Ce(e, t), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map();
   n.forEach((r) => {
     o.add(r.group), r.panels.forEach((c) => {
       s.add(c);
     }), r.separator && i.add(r.separator);
     const l = t.get(r.group);
     l && a.set(r.group, l.layout);
-  }), G({
+  }), M({
     interactionState: {
       hitRegions: n,
       initialLayoutMap: a,
@@ -291,7 +681,7 @@ function se(e) {
     }
   }), n.length && e.preventDefault();
 }
-function He({
+function Qe({
   cursorFlags: e,
   groups: t,
   state: n
@@ -302,7 +692,7 @@ function He({
     case "hover":
       t.forEach((i) => {
         if (!i.disableCursor)
-          switch (i.direction) {
+          switch (i.orientation) {
             case "horizontal": {
               o++;
               break;
@@ -318,7 +708,7 @@ function He({
     return null;
   switch (n) {
     case "active": {
-      const i = (e & fe) !== 0, a = (e & de) !== 0, r = (e & pe) !== 0, l = (e & he) !== 0;
+      const i = (e & Le) !== 0, a = (e & Pe) !== 0, r = (e & Ee) !== 0, l = (e & Re) !== 0;
       if (e) {
         if (i)
           return r ? "se-resize" : l ? "ne-resize" : "e-resize";
@@ -334,174 +724,40 @@ function He({
   }
   return o > 0 && s > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
 }
-let V = null, P;
-function X() {
-  P === void 0 && (P = new CSSStyleSheet(), document.adoptedStyleSheets = [P]);
-  const { cursorFlags: e, interactionState: t } = O();
+let ie = null, I;
+function se() {
+  I === void 0 && (I = new CSSStyleSheet(), document.adoptedStyleSheets = [I]);
+  const { cursorFlags: e, interactionState: t } = k();
   switch (t.state) {
     case "active":
     case "hover": {
-      const n = He({
+      const n = Qe({
         cursorFlags: e,
         groups: t.hitRegions.map((o) => o.group),
         state: t.state
       });
-      if (V === n)
+      if (ie === n)
         return;
-      V = n, n ? P.cssRules.length === 0 ? P.insertRule(`*{cursor: ${n} !important;}`) : P.replaceSync(`*{cursor: ${n} !important;}`) : P.cssRules.length === 1 && P.deleteRule(0);
+      ie = n, n ? I.cssRules.length === 0 ? I.insertRule(`*{cursor: ${n} !important;}`) : I.replaceSync(`*{cursor: ${n} !important;}`) : I.cssRules.length === 1 && I.deleteRule(0);
       break;
     }
     case "inactive": {
-      V = null, P.cssRules.length === 1 && P.deleteRule(0);
+      ie = null, I.cssRules.length === 1 && I.deleteRule(0);
       break;
     }
   }
 }
-function E(e, t = "Assertion error") {
-  if (!e)
-    throw console.error(t), Error(t);
-}
-function Be(e, t) {
-  if (e.length !== t.length)
-    return !1;
-  for (let n = 0; n < e.length; n++)
-    if (e[n] != t[n])
-      return !1;
-  return !0;
-}
-function b(e, t, n = 0) {
-  return Math.abs(L(e) - L(t)) <= n;
-}
-function Y(e, t) {
-  return b(e, t) ? 0 : e > t ? 1 : -1;
-}
-function T({
-  panelConstraints: e,
-  size: t
-}) {
-  const {
-    collapsedSize: n = 0,
-    collapsible: o,
-    maxSize: s = 100,
-    minSize: i = 0
-  } = e;
-  if (Y(t, i) < 0)
-    if (o) {
-      const a = (n + i) / 2;
-      Y(t, a) < 0 ? t = n : t = i;
-    } else
-      t = i;
-  return t = Math.min(s, t), t = L(t), t;
-}
-function We({
-  delta: e,
-  initialLayout: t,
-  panelConstraints: n,
-  pivotIndices: o,
-  prevLayout: s,
-  trigger: i
-}) {
-  if (b(e, 0))
-    return t;
-  const a = Object.values(t), r = Object.values(s), l = [...a], [c, u] = o;
-  E(c != null, "Invalid first pivot index"), E(u != null, "Invalid second pivot index");
-  let f = 0;
-  {
-    const m = e < 0 ? 1 : -1;
-    let d = e < 0 ? u : c, v = 0;
-    for (; ; ) {
-      const x = a[d];
-      E(
-        x != null,
-        `Previous layout not found for panel index ${d}`
-      );
-      const y = T({
-        panelConstraints: n[d],
-        size: 100
-      }) - x;
-      if (v += y, d += m, d < 0 || d >= n.length)
-        break;
-    }
-    const S = Math.min(Math.abs(e), Math.abs(v));
-    e = e < 0 ? 0 - S : S;
-  }
-  {
-    let d = e < 0 ? c : u;
-    for (; d >= 0 && d < n.length; ) {
-      const v = Math.abs(e) - Math.abs(f), S = a[d];
-      E(
-        S != null,
-        `Previous layout not found for panel index ${d}`
-      );
-      const x = S - v, z = T({
-        panelConstraints: n[d],
-        size: x
-      });
-      if (!b(S, z) && (f += S - z, l[d] = z, f.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
-        numeric: !0
-      }) >= 0))
-        break;
-      e < 0 ? d-- : d++;
-    }
-  }
-  if (Be(r, l))
-    return s;
-  {
-    const m = e < 0 ? u : c, d = a[m];
-    E(
-      d != null,
-      `Previous layout not found for panel index ${m}`
-    );
-    const v = d + f, S = T({
-      panelConstraints: n[m],
-      size: v
-    });
-    if (l[m] = S, !b(S, v)) {
-      let x = v - S, y = e < 0 ? u : c;
-      for (; y >= 0 && y < n.length; ) {
-        const R = l[y];
-        E(
-          R != null,
-          `Previous layout not found for panel index ${y}`
-        );
-        const k = R + x, A = T({
-          panelConstraints: n[y],
-          size: k
-        });
-        if (b(R, A) || (x -= A - R, l[y] = A), b(x, 0))
-          break;
-        e > 0 ? y-- : y++;
-      }
-    }
-  }
-  const p = Object.values(l).reduce(
-    (m, d) => d + m,
-    0
-  );
-  if (!b(p, 100, 0.1))
-    return s;
-  const h = Object.keys(s);
-  return l.reduce((m, d, v) => (m[h[v]] = d, m), {});
-}
-function q(e, t) {
-  if (Object.keys(e).length !== Object.keys(t).length)
-    return !1;
-  for (const n in e)
-    if (Y(e[n], t[n]) !== 0)
-      return !1;
-  return !0;
-}
-function W(e) {
+function q(e) {
   if (e.defaultPrevented)
     return;
-  const { interactionState: t, mountedGroups: n } = O();
+  const { interactionState: t, mountedGroups: n } = k();
   switch (t.state) {
     case "active": {
       if (
         // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
         e.type !== "pointerleave" && e.buttons === 0
       ) {
-        G(
+        M(
           (i) => i.interactionState.state === "inactive" ? i : {
             cursorFlags: 0,
             interactionState: {
@@ -514,202 +770,183 @@ function W(e) {
       let o = 0;
       const s = new Map(n);
       t.hitRegions.forEach((i) => {
-        const { direction: a, disableCursor: r, element: l, panels: c } = i.group;
+        const { disableCursor: a, element: r, orientation: l, panels: c } = i.group;
         let u = 0;
-        t.state === "active" && (a === "horizontal" ? u = (e.clientX - t.pointerDownAtPoint.x) / l.offsetWidth * 100 : u = (e.clientY - t.pointerDownAtPoint.y) / l.offsetHeight * 100);
+        t.state === "active" && (l === "horizontal" ? u = (e.clientX - t.pointerDownAtPoint.x) / r.offsetWidth * 100 : u = (e.clientY - t.pointerDownAtPoint.y) / r.offsetHeight * 100);
         const f = t.initialLayoutMap.get(
           i.group
-        ), { derivedPanelConstraints: p, layout: h } = n.get(i.group) ?? {};
-        if (p && f && h) {
-          const m = We({
+        ), {
+          derivedPanelConstraints: m,
+          layout: g,
+          separatorToPanels: p
+        } = n.get(i.group) ?? {};
+        if (m && f && g && p) {
+          const d = Q({
             delta: u,
             initialLayout: f,
-            panelConstraints: p,
-            pivotIndices: i.panels.map((d) => c.indexOf(d)),
-            prevLayout: h,
+            panelConstraints: m,
+            pivotIndices: i.panels.map((h) => c.indexOf(h)),
+            prevLayout: g,
             trigger: "mouse-or-touch"
           });
-          if (q(m, h)) {
-            if (u !== 0 && !r)
-              switch (a) {
+          if (ee(d, g)) {
+            if (u !== 0 && !a)
+              switch (l) {
                 case "horizontal": {
-                  o |= u < 0 ? fe : de;
+                  o |= u < 0 ? Le : Pe;
                   break;
                 }
                 case "vertical": {
-                  o |= u < 0 ? pe : he;
+                  o |= u < 0 ? Ee : Re;
                   break;
                 }
               }
           } else {
             s.set(i.group, {
-              derivedPanelConstraints: p,
-              layout: m
+              derivedPanelConstraints: m,
+              layout: d,
+              separatorToPanels: p
             });
-            const d = i.group.panels.map(({ id: v }) => v).join(",");
-            i.group.inMemoryLayouts[d] = m;
+            const h = i.group.panels.map(({ id: v }) => v).join(",");
+            i.group.inMemoryLayouts[h] = d;
           }
         }
-      }), G({
+      }), M({
         cursorFlags: o,
         mountedGroups: s
-      }), X();
+      }), se();
       break;
     }
     default: {
-      const o = me(e, n);
-      o.length === 0 ? t.state !== "inactive" && G({
+      const o = Ce(e, n);
+      o.length === 0 ? t.state !== "inactive" && M({
         interactionState: { state: "inactive" }
-      }) : G({
+      }) : M({
         interactionState: {
           hitRegions: o,
           state: "hover"
         }
-      }), X();
+      }), se();
       break;
     }
   }
 }
-function ae(e) {
+function ye(e) {
   if (e.defaultPrevented)
     return;
   e.preventDefault();
-  const { interactionState: t } = O();
+  const { interactionState: t } = k();
   switch (t.state) {
     case "active":
-      G({
+      M({
         cursorFlags: 0,
         interactionState: {
           state: "inactive"
         }
-      }), X();
+      }), se();
   }
 }
-function Ue(e) {
+function et(e) {
   let t = 0, n = 0;
   const o = {};
   for (const i of e)
     if (i.defaultSize !== void 0) {
       t++;
-      const a = L(i.defaultSize);
+      const a = C(i.defaultSize);
       n += a, o[i.panelId] = a;
     } else
       o[i.panelId] = void 0;
   const s = e.length - t;
   if (s !== 0) {
-    const i = L((100 - n) / s);
+    const i = C((100 - n) / s);
     for (const a of e)
       a.defaultSize === void 0 && (o[a.panelId] = i);
   }
   return o;
 }
-function Ke(e, t, n) {
+function tt(e, t, n) {
   const o = n[0];
   if (!o)
     return;
   const s = e.panels.find((a) => a.element === t);
   if (!s || !s.onResize)
     return;
-  const i = Z({ group: e });
-  s.onResize({
-    asPercentage: L(
-      o.inlineSize / i * 100
-    ),
-    inPixels: o.inlineSize
-  });
-}
-function ve({
-  layout: e,
-  panelConstraints: t
-}) {
-  const o = [...Object.values(e)], s = o.reduce(
-    (r, l) => r + l,
-    0
+  const i = le({ group: e });
+  s.onResize(
+    {
+      asPercentage: C(
+        o.inlineSize / i * 100
+      ),
+      inPixels: o.inlineSize
+    },
+    s.id
   );
-  if (o.length !== t.length)
-    throw Error(
-      `Invalid ${t.length} panel layout: ${o.map((r) => `${r}%`).join(", ")}`
-    );
-  if (!b(s, 100) && o.length > 0)
-    for (let r = 0; r < t.length; r++) {
-      const l = o[r];
-      E(l != null, `No layout data found for index ${r}`);
-      const c = 100 / s * l;
-      o[r] = c;
-    }
-  let i = 0;
-  for (let r = 0; r < t.length; r++) {
-    const l = o[r];
-    E(l != null, `No layout data found for index ${r}`);
-    const c = T({
-      panelConstraints: t[r],
-      size: l
-    });
-    l != c && (i += l - c, o[r] = c);
-  }
-  if (!b(i, 0))
-    for (let r = 0; r < t.length; r++) {
-      const l = o[r];
-      E(l != null, `No layout data found for index ${r}`);
-      const c = l + i, u = T({
-        panelConstraints: t[r],
-        size: c
-      });
-      if (l !== u && (i -= u - l, o[r] = u, b(i, 0)))
-        break;
-    }
-  const a = Object.keys(e);
-  return o.reduce((r, l, c) => (r[a[c]] = l, r), {});
 }
-function Ve(e) {
-  let t = !1;
-  const n = new ResizeObserver((l) => {
-    for (const c of l) {
-      const { borderBoxSize: u, target: f } = c;
-      f === e.element ? t && G((p) => {
-        const h = p.mountedGroups.get(e);
-        return h ? {
-          mountedGroups: new Map(p.mountedGroups).set(e, {
-            derivedPanelConstraints: ie(e),
-            layout: h.layout
-          })
-        } : p;
-      }) : Ke(e, f, u);
+function nt(e) {
+  let t = !0;
+  const n = new ResizeObserver((c) => {
+    for (const u of c) {
+      const { borderBoxSize: f, target: m } = u;
+      m === e.element ? t && M((g) => {
+        const p = g.mountedGroups.get(e);
+        if (p) {
+          const d = pe(e), h = p.layout, v = F({
+            layout: h,
+            panelConstraints: d
+          });
+          return {
+            mountedGroups: new Map(g.mountedGroups).set(e, {
+              derivedPanelConstraints: d,
+              layout: v,
+              separatorToPanels: p.separatorToPanels
+            })
+          };
+        }
+        return g;
+      }) : tt(e, m, f);
     }
   });
-  n.observe(e.element), e.panels.forEach((l) => {
-    l.onResize && n.observe(l.element);
+  n.observe(e.element), e.panels.forEach((c) => {
+    c.onResize && n.observe(c.element);
   });
-  const o = ie(e), s = e.panels.map(({ id: l }) => l).join(","), i = e.inMemoryLayouts[s] ?? e.defaultLayout ?? Ue(o), a = ve({
+  const o = pe(e), s = e.panels.map(({ id: c }) => c).join(","), i = e.inMemoryLayouts[s] ?? e.defaultLayout ?? et(o), a = F({
     layout: i,
     panelConstraints: o
-  }), r = G((l) => ({
-    mountedGroups: new Map(l.mountedGroups).set(e, {
+  }), r = ze(e), l = M((c) => ({
+    mountedGroups: new Map(c.mountedGroups).set(e, {
       derivedPanelConstraints: o,
-      layout: a
+      layout: a,
+      separatorToPanels: new Map(
+        r.filter((u) => u.separator).map((u) => [u.separator, u.panels])
+      )
     })
   }));
-  return t = !0, r.mountedGroups.size === 1 && (window.addEventListener("pointerdown", se), window.addEventListener("pointerleave", W), window.addEventListener("pointermove", W), window.addEventListener("pointerup", ae)), function() {
-    const c = G((u) => {
-      const f = new Map(u.mountedGroups);
-      return f.delete(e), { mountedGroups: f };
+  return e.separators.forEach((c) => {
+    c.element.addEventListener("keydown", me);
+  }), l.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ve), window.addEventListener("pointerleave", q), window.addEventListener("pointermove", q), window.addEventListener("pointerup", ye)), function() {
+    t = !1;
+    const u = M((f) => {
+      const m = new Map(f.mountedGroups);
+      return m.delete(e), { mountedGroups: m };
     });
-    t = !1, c.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", se), window.removeEventListener("pointerleave", W), window.removeEventListener("pointermove", W), window.removeEventListener("pointerup", ae)), n.disconnect();
+    e.separators.forEach((f) => {
+      f.element.removeEventListener("keydown", me);
+    }), u.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ve), window.removeEventListener("pointerleave", q), window.removeEventListener("pointermove", q), window.removeEventListener("pointerup", ye)), n.disconnect();
   };
 }
-function J(e) {
-  const t = Re();
+function ce(e) {
+  const t = De();
   return `${e ?? t}`;
 }
-const D = typeof window < "u" ? Pe : Ce;
-function Q(e) {
-  const t = I(e);
-  return D(() => {
+const H = typeof window < "u" ? Te : Ae;
+function ue(e) {
+  const t = D(e);
+  return H(() => {
     t.current = e;
-  }, [e]), ce((n) => t.current?.(n), [t]);
+  }, [e]), ge((n) => t.current?.(n), [t]);
 }
-function ee(...e) {
-  return Q((t) => {
+function fe(...e) {
+  return ue((t) => {
     e.forEach((n) => {
       if (n)
         switch (typeof n) {
@@ -725,235 +962,195 @@ function ee(...e) {
     });
   });
 }
-const ge = "--react-resizable-panels--panel--pointer-events";
-function ye(e, t) {
+const Me = "--react-resizable-panels--panel--pointer-events";
+function Ge(e, t) {
   const n = e.replace(/[^a-zA-Z0-9\-_]/g, ""), o = t.replace(/[^a-zA-Z0-9\-_]/g, "");
   return `--react-resizable-panels--${n}--${o}`;
 }
-const Se = Ee(null);
-function le(e, t) {
-  return t.sort(
-    e === "horizontal" ? (n, o) => n.element.offsetLeft - o.element.offsetLeft : (n, o) => n.element.offsetTop - o.element.offsetTop
-  );
-}
-function Xe({
-  groupId: e
-}) {
-  const t = () => {
-    const { mountedGroups: n } = O();
-    for (const [o, { derivedPanelConstraints: s, layout: i }] of n)
-      if (o.id === e)
-        return { derivedPanelConstraints: s, group: o, layout: i };
-    throw Error(`Group ${e} not found`);
-  };
-  return {
-    getLayout() {
-      const { layout: n } = t();
-      return n;
-    },
-    setLayout(n) {
-      const { derivedPanelConstraints: o, group: s, layout: i } = t(), a = ve({
-        layout: n,
-        panelConstraints: o
-      });
-      return q(i, a) || G((r) => ({
-        mountedGroups: new Map(r.mountedGroups).set(s, {
-          derivedPanelConstraints: o,
-          layout: a
-        })
-      })), a;
-    }
-  };
-}
-function Ye(e, t) {
-  const n = I({
+const Ie = $e(null);
+function ot(e, t) {
+  const n = D({
     getLayout: () => ({}),
-    setLayout: Te
+    setLayout: Ye
   });
-  ue(t, () => n.current, []), D(() => {
+  Se(t, () => n.current, []), H(() => {
     Object.assign(
       n.current,
-      Xe({ groupId: e })
+      be({ groupId: e })
     );
   });
 }
-function nt({
+function ft({
   children: e,
   className: t,
   defaultLayout: n,
-  direction: o = "horizontal",
-  disableCursor: s,
-  disabled: i,
-  elementRef: a,
-  groupRef: r,
-  id: l,
-  onLayoutChange: c,
+  disableCursor: o,
+  disabled: s,
+  elementRef: i,
+  groupRef: a,
+  id: r,
+  onLayoutChange: l,
+  orientation: c = "horizontal",
   style: u
 }) {
-  const f = I({}), p = Q((g) => {
-    q(f.current, g) || (f.current = g, c?.(g));
-  }), h = J(l), [m, d] = M(!1), [v, S] = M(null), x = I({}), [z, y] = M(n ?? {}), [R, k] = M([]), [A, ne] = M([]), ze = ee(S, a);
-  Ye(h, r);
-  const we = Me(
+  const f = D({}), m = ue((b) => {
+    ee(f.current, b) || (f.current = b, l?.(b));
+  }), g = ce(r), [p, d] = R(!1), [h, v] = R(null), [z, x] = R(n ?? {}), [y, w] = R([]), [G, O] = R([]), te = D({}), U = D({}), B = fe(v, i);
+  ot(g, a);
+  const K = xe(
     () => ({
-      direction: o,
-      id: h,
-      registerPanel: (g) => (k((w) => le(o, [...w, g])), () => {
-        k((w) => w.filter((N) => N !== g));
+      id: g,
+      orientation: c,
+      registerPanel: (b) => (w((E) => re(c, [...E, b])), () => {
+        w((E) => E.filter(($) => $ !== b));
       }),
-      registerSeparator: (g) => (ne(
-        (w) => le(o, [...w, g])
+      registerSeparator: (b) => (O(
+        (E) => re(c, [...E, b])
       ), () => {
-        ne(
-          (w) => w.filter((N) => N !== g)
+        O(
+          (E) => E.filter(($) => $ !== b)
         );
       })
     }),
-    [o, h]
+    [g, c]
   );
-  D(() => {
-    if (v !== null && R.length > 0) {
-      const g = {
+  H(() => {
+    if (h !== null && y.length > 0) {
+      const b = {
         defaultLayout: n,
-        direction: o,
-        disableCursor: !!s,
-        disabled: !!i,
-        element: v,
-        id: h,
-        inMemoryLayouts: x.current,
-        panels: R,
-        separators: A
-      }, w = Ve(g), U = O().mountedGroups.get(g);
-      U && (y(U.layout), p?.(U.layout));
-      const be = _.addListener(
+        disableCursor: !!o,
+        disabled: !!s,
+        element: h,
+        id: g,
+        inMemoryLastExpandedPanelSizes: te.current,
+        inMemoryLayouts: U.current,
+        orientation: c,
+        panels: y,
+        separators: G
+      }, E = nt(b), ne = k().mountedGroups.get(b);
+      ne && (x(ne.layout), m?.(ne.layout));
+      const ke = A.addListener(
         "interactionStateChange",
-        (j) => {
-          switch (j.state) {
+        (X) => {
+          switch (X.state) {
             case "active":
             case "hover": {
               d(
-                j.hitRegions.some(
-                  ($) => $.group === g
+                X.hitRegions.some(
+                  (N) => N.group === b
                 )
               );
               break;
             }
           }
         }
-      ), Le = _.addListener(
+      ), Oe = A.addListener(
         "mountedGroupsChange",
-        (j) => {
-          const $ = j.get(g);
-          $ && $.derivedPanelConstraints.length > 0 && (y($.layout), p?.($.layout));
+        (X) => {
+          const N = X.get(b);
+          N && N.derivedPanelConstraints.length > 0 && (x(N.layout), m?.(N.layout));
         }
       );
       return () => {
-        w(), be(), Le();
+        E(), ke(), Oe();
       };
     }
   }, [
     n,
     o,
     s,
-    i,
-    v,
     h,
-    p,
-    R,
-    A
+    g,
+    m,
+    c,
+    y,
+    G
   ]);
-  const oe = {
-    [ge]: m ? "none" : void 0
+  const V = {
+    [Me]: p ? "none" : void 0
   };
-  for (const g in z) {
-    const w = ye(h, g), N = z[g];
-    oe[w] = N;
+  for (const b in z) {
+    const E = Ge(g, b), $ = z[b];
+    V[E] = $;
   }
-  return /* @__PURE__ */ F(Se.Provider, { value: we, children: /* @__PURE__ */ F(
+  return /* @__PURE__ */ j(Ie.Provider, { value: K, children: /* @__PURE__ */ j(
     "div",
     {
+      "aria-orientation": c,
       className: t,
       "data-group": !0,
-      "data-group-id": h,
-      "data-group-direction": o,
-      ref: ze,
+      "data-testid": r ?? void 0,
+      ref: B,
       style: {
         ...u,
-        ...oe,
+        ...V,
         display: "flex",
-        flexDirection: o === "horizontal" ? "row" : "column",
-        flexWrap: "nowrap",
-        overflow: "hidden"
+        flexDirection: c === "horizontal" ? "row" : "column",
+        flexWrap: "nowrap"
       },
       children: e
     }
   ) });
 }
-function xe(e) {
+function ae(e) {
   return `react-resizable-panels:${e}`;
 }
-function Ze({
-  id: e,
-  storage: t
-}) {
-  try {
-    const n = xe(e), o = t.getItem(n);
-    if (o)
-      return JSON.parse(o);
-  } catch (n) {
-    console.error(n);
-  }
-}
-function qe({
+function it({
   id: e,
   layout: t,
   storage: n
 }) {
   try {
-    const o = xe(e);
+    const o = ae(e);
     n.setItem(o, JSON.stringify(t));
   } catch (o) {
     console.error(o);
   }
 }
-function ot({
+function dt({
   groupId: e,
-  storage: t = localStorage
+  storage: t
 }) {
-  const n = I(null);
-  n.current === null && (n.current = Ze({
-    id: e,
-    storage: t
-  }));
-  const o = ce(
-    (s) => qe({
+  const n = Ne(
+    rt,
+    () => t.getItem(ae(e)),
+    () => t.getItem(ae(e))
+  ), o = xe(
+    () => n ? JSON.parse(n) : null,
+    [n]
+  ), s = ge(
+    (i) => it({
       id: e,
-      layout: s,
+      layout: i,
       storage: t
     }),
     [e, t]
   );
   return {
-    defaultLayout: n.current,
-    onLayoutChange: o
+    defaultLayout: o,
+    onLayoutChange: s
   };
 }
-function it() {
-  return M(null);
-}
 function rt() {
-  return I(null);
+  return function() {
+  };
+}
+function pt() {
+  return R(null);
+}
+function mt() {
+  return D(null);
 }
-function te() {
-  const e = Ge(Se);
-  return E(e, "Unexpected"), e;
+function de() {
+  const e = _e(Ie);
+  return S(e, "Unexpected"), e;
 }
-function Je({
+function st({
   groupId: e,
   panelId: t
 }) {
   const n = () => {
-    const { mountedGroups: a } = O();
+    const { mountedGroups: a } = k();
     for (const [r, { derivedPanelConstraints: l, layout: c }] of a)
       if (r.id === e)
         return { derivedPanelConstraints: l, group: r, layout: c };
@@ -986,7 +1183,7 @@ function Je({
       i();
     },
     getSize: () => {
-      const { group: a } = n(), r = i(), { element: l } = s(), c = a.direction === "horizontal" ? l.offsetWidth : l.offsetHeight;
+      const { group: a } = n(), r = i(), { element: l } = s(), c = a.orientation === "horizontal" ? l.offsetWidth : l.offsetHeight;
       return {
         asPercentage: r,
         inPixels: c
@@ -994,39 +1191,39 @@ function Je({
     },
     isCollapsed: () => {
       const { collapsible: a, collapsedSize: r } = o(), l = i();
-      return a && b(r, l);
+      return a && L(r, l);
     },
     resize: (a) => {
       if (i() !== a)
         switch (typeof a) {
           case "number": {
-            const { group: l } = n(), c = Z({ group: l });
-            L(a / c * 100);
+            const { group: l } = n(), c = le({ group: l });
+            C(a / c * 100);
             break;
           }
         }
     }
   };
 }
-function Qe(e, t) {
-  const { id: n } = te(), o = I({
-    collapse: K,
-    expand: K,
+function at(e, t) {
+  const { id: n } = de(), o = D({
+    collapse: oe,
+    expand: oe,
     getSize: () => ({
       asPercentage: 0,
       inPixels: 0
     }),
     isCollapsed: () => !1,
-    resize: K
+    resize: oe
   });
-  ue(t, () => o.current, []), D(() => {
+  Se(t, () => o.current, []), H(() => {
     Object.assign(
       o.current,
-      Je({ groupId: n, panelId: e })
+      st({ groupId: n, panelId: e })
     );
   });
 }
-function st({
+function ht({
   children: e,
   className: t,
   collapsedSize: n = 0,
@@ -1040,16 +1237,16 @@ function st({
   panelRef: u,
   style: f
 }) {
-  const p = !!a, h = J(a), [m, d] = M(null), v = ee(d, i), { id: S, registerPanel: x } = te(), z = c !== null, y = Q((k) => {
-    c?.(k);
+  const m = !!a, g = ce(a), [p, d] = R(null), h = fe(d, i), { id: v, registerPanel: z } = de(), x = c !== null, y = ue((G) => {
+    c?.(G, a);
   });
-  D(() => {
-    if (m !== null)
-      return x({
-        element: m,
-        id: h,
-        idIsStable: p,
-        onResize: z ? y : void 0,
+  H(() => {
+    if (p !== null)
+      return z({
+        element: p,
+        id: g,
+        idIsStable: m,
+        onResize: x ? y : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
@@ -1062,33 +1259,33 @@ function st({
     n,
     o,
     s,
-    m,
-    z,
-    h,
     p,
+    x,
+    g,
+    m,
     r,
     l,
     y,
-    x
-  ]), Qe(h, u);
-  const R = ye(S, h);
-  return /* @__PURE__ */ F(
+    z
+  ]), at(g, u);
+  const w = Ge(v, g);
+  return /* @__PURE__ */ j(
     "div",
     {
       "data-panel": !0,
-      "data-panel-id": h,
-      ref: v,
+      "data-testid": a ?? void 0,
+      ref: h,
       style: {
         flexBasis: 0,
-        flexGrow: `var(${R}, 1)`,
+        flexGrow: `var(${w}, 1)`,
         flexShrink: 1,
         // Prevent Panel content from interfering with panel size
         overflow: "hidden",
         // Disable pointer events inside of a panel during resize
         // This avoid edge cases like nested iframes
-        pointerEvents: `var(${ge})`
+        pointerEvents: `var(${Me})`
       },
-      children: /* @__PURE__ */ F(
+      children: /* @__PURE__ */ j(
         "div",
         {
           className: t,
@@ -1103,65 +1300,136 @@ function st({
     }
   );
 }
-function at() {
-  return M(null);
+function vt() {
+  return R(null);
+}
+function yt() {
+  return D(null);
 }
-function lt() {
-  return I(null);
+function lt({
+  layout: e,
+  panelConstraints: t,
+  panelId: n,
+  panelIndex: o
+}) {
+  let s, i;
+  const a = e[n], r = t.find(
+    (l) => l.panelId === n
+  );
+  if (r) {
+    const l = r.maxSize, c = i = r.collapsible ? r.collapsedSize : r.minSize, u = [o, o + 1];
+    i = F({
+      layout: Q({
+        delta: c - a,
+        initialLayout: e,
+        panelConstraints: t,
+        pivotIndices: u,
+        prevLayout: e,
+        trigger: "keyboard"
+      }),
+      panelConstraints: t
+    })[n], s = F({
+      layout: Q({
+        delta: l - a,
+        initialLayout: e,
+        panelConstraints: t,
+        pivotIndices: u,
+        prevLayout: e,
+        trigger: "keyboard"
+      }),
+      panelConstraints: t
+    })[n];
+  }
+  return {
+    valueMax: s,
+    valueMin: i,
+    valueNow: a
+  };
 }
-function ct({
+function gt({
   children: e,
   className: t,
   elementRef: n,
   id: o,
   style: s
 }) {
-  const i = J(o), [a, r] = M(null), [l, c] = M("inactive"), u = ee(r, n), { registerSeparator: f } = te();
-  return D(() => {
-    if (a !== null) {
-      const p = {
-        element: a,
+  const i = ce(o), [a, r] = R({}), [l, c] = R("inactive"), [u, f] = R(null), m = fe(f, n), {
+    id: g,
+    orientation: p,
+    registerSeparator: d
+  } = de(), h = p === "horizontal" ? "vertical" : "horizontal";
+  return H(() => {
+    if (u !== null) {
+      const v = {
+        element: u,
         id: i
-      }, h = f(p), m = _.addListener(
+      }, z = d(v), x = A.addListener(
         "interactionStateChange",
-        (d) => {
+        (w) => {
           c(
-            d.state !== "inactive" && d.hitRegions.some(
-              (v) => v.separator === p
-            ) ? d.state : "inactive"
+            w.state !== "inactive" && w.hitRegions.some(
+              (G) => G.separator === v
+            ) ? w.state : "inactive"
+          );
+        }
+      ), y = A.addListener(
+        "mountedGroupsChange",
+        (w) => {
+          w.forEach(
+            ({ derivedPanelConstraints: G, layout: O, separatorToPanels: te }, U) => {
+              if (U.id === g) {
+                const B = te.get(v);
+                if (B) {
+                  const K = B[0], V = U.panels.indexOf(K);
+                  r(
+                    lt({
+                      layout: O,
+                      panelConstraints: G,
+                      panelId: K.id,
+                      panelIndex: V
+                    })
+                  );
+                }
+              }
+            }
           );
         }
       );
       return () => {
-        h(), m();
+        x(), y(), z();
       };
     }
-  }, [a, i, f]), /* @__PURE__ */ F(
+  }, [u, g, i, d]), /* @__PURE__ */ j(
     "div",
     {
+      "aria-orientation": h,
+      "aria-valuemax": a.valueMax,
+      "aria-valuemin": a.valueMin,
+      "aria-valuenow": a.valueNow,
       children: e,
       className: t,
-      "data-separator": !0,
-      "data-separator-id": i,
-      "data-separator-state": l,
-      ref: u,
+      "data-separator": l,
+      "data-testid": o ?? void 0,
+      ref: m,
+      role: "separator",
       style: {
         flexBasis: "auto",
         ...s,
         flexGrow: 0,
         flexShrink: 0
-      }
+      },
+      tabIndex: 0
     }
   );
 }
 export {
-  nt as Group,
-  st as Panel,
-  ct as Separator,
-  ot as useDefaultLayout,
-  it as useGroupCallbackRef,
-  rt as useGroupRef,
-  at as usePanelCallbackRef,
-  lt as usePanelRef
+  ft as Group,
+  ht as Panel,
+  gt as Separator,
+  dt as useDefaultLayout,
+  pt as useGroupCallbackRef,
+  mt as useGroupRef,
+  vt as usePanelCallbackRef,
+  yt as usePanelRef
 };
 //# sourceMappingURL=react-resizable-panels.js.map