react-resizable-panels 4.0.0-alpha.1 → 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 Pe, useLayoutEffect as Ee, useEffect as Ce, useRef as I, useCallback as fe, createContext as Me, useImperativeHandle as de, useState as M, useMemo as pe, useSyncExternalStore as Ge, useContext as Ie } from "react";
-function Oe(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 ke(e, t) {
+function We(e, t) {
   const n = getComputedStyle(e.ownerDocument.body), o = parseFloat(n.fontSize);
   return t * o;
 }
-function Ae(e) {
+function Ue(e) {
   return e / 100 * window.innerHeight;
 }
-function Ne(e) {
+function Be(e) {
   return e / 100 * window.innerWidth;
 }
-function $e(e) {
+function Ke(e) {
   switch (typeof e) {
     case "number":
       return [e, "px"];
@@ -25,13 +78,13 @@ function $e(e) {
     }
   }
 }
-function j({
+function Y({
   groupSize: e,
   panelElement: t,
   styleProp: n
 }) {
   let o;
-  const [s, i] = $e(n);
+  const [s, i] = Ke(n);
   switch (i) {
     case "%": {
       o = s / 100 * e;
@@ -42,72 +95,72 @@ function j({
       break;
     }
     case "rem": {
-      o = ke(t, s);
+      o = We(t, s);
       break;
     }
     case "em": {
-      o = Oe(t, s);
+      o = je(t, s);
       break;
     }
     case "vh": {
-      o = Ae(s);
+      o = Ue(s);
       break;
     }
     case "vw": {
-      o = Ne(s);
+      o = Be(s);
       break;
     }
   }
   return o;
 }
-function L(e) {
+function C(e) {
   return parseFloat(e.toFixed(3));
 }
-function Q({
+function le({
   group: e
 }) {
   const { orientation: t, panels: n } = e;
   return n.reduce((o, s) => (o += t === "horizontal" ? s.element.offsetWidth : s.element.offsetHeight, o), 0);
 }
-function ae(e) {
-  const { panels: t } = e, n = Q({ 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 = j({
+      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 = j({
+      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 = j({
+      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 = j({
+      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 ae(e) {
     };
   });
 }
-class De {
+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,83 +215,403 @@ class De {
     }
   }
 }
-let E = {
+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 T = new De();
-function O() {
-  return E;
+const A = new Ve();
+function k() {
+  return P;
 }
-function G(e) {
-  const t = typeof e == "function" ? e(E) : e;
-  return E === t || (E = {
-    ...E,
+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 && T.emit("cursorFlagsChange", E.cursorFlags), t.interactionState !== void 0 && T.emit("interactionStateChange", E.interactionState), t.mountedGroups !== void 0 && T.emit("mountedGroupsChange", E.mountedGroups)), E;
+  }, 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, V = () => {
-}, he = 1, me = 2, ve = 4, ge = 8, le = {
-  coarse: 10,
-  precise: 5
-};
-function X(e, t) {
-  return t.sort(
-    e === "horizontal" ? _e : Fe
-  );
+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 _e(e, t) {
-  const n = e.element.offsetLeft - t.element.offsetLeft;
-  return n !== 0 ? n : e.element.offsetWidth - t.element.offsetWidth;
+function W(e, t) {
+  return L(e, t) ? 0 : e > t ? 1 : -1;
 }
-function Fe(e, t) {
-  const n = e.element.offsetTop - t.element.offsetTop;
-  return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
+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 He(e) {
-  const { element: t, orientation: n, panels: o, separators: s } = e, i = X(
-    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(
-      (d) => d.element === c
+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 d = r.element.getBoundingClientRect(), p = c.getBoundingClientRect();
-        a.push({
-          group: e,
-          panels: [r, u],
-          separator: l,
-          rect: n === "horizontal" ? new DOMRect(
-            d.right,
-            p.top,
-            p.left - d.right,
-            p.height
-          ) : new DOMRect(
-            p.left,
-            d.bottom,
-            p.width,
-            p.top - d.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, l = void 0;
-    } else {
-      const d = s.find(
-        (p) => p.element === c
-      );
-      d ? l = d : (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 je(e, t) {
+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 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),
@@ -246,13 +623,13 @@ function je(e, t) {
     )
   };
 }
-function We(e, t, n) {
+function qe(e, t, n) {
   let o, s = {
     x: 1 / 0,
     y: 1 / 0
   };
   for (const i of t) {
-    const a = je(n, i.rect);
+    const a = Ze(n, i.rect);
     switch (e) {
       case "horizontal": {
         a.x <= s.x && (o = i, s = a);
@@ -269,33 +646,33 @@ function We(e, t, n) {
     hitRegion: o
   } : void 0;
 }
-let W;
-function Ue() {
-  return W === void 0 && (typeof matchMedia == "function" ? W = !!matchMedia("(pointer:coarse)").matches : W = !1), W;
+let Z;
+function Je() {
+  return Z === void 0 && (typeof matchMedia == "function" ? Z = !!matchMedia("(pointer:coarse)").matches : Z = !1), Z;
 }
-function ye(e, t) {
+function Ce(e, t) {
   const n = [];
   return t.forEach((o, s) => {
     if (s.disabled)
       return;
-    const i = Ue() ? le.coarse : le.precise, a = He(s), r = We(s.orientation, 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 ce(e) {
+function ve(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = O(), n = ye(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,
@@ -304,7 +681,7 @@ function ce(e) {
     }
   }), n.length && e.preventDefault();
 }
-function Be({
+function Qe({
   cursorFlags: e,
   groups: t,
   state: n
@@ -331,7 +708,7 @@ function Be({
     return null;
   switch (n) {
     case "active": {
-      const i = (e & he) !== 0, a = (e & me) !== 0, r = (e & ve) !== 0, l = (e & ge) !== 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";
@@ -347,174 +724,40 @@ function Be({
   }
   return o > 0 && s > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
 }
-let K = null, P;
-function Y() {
-  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 = Be({
+      const n = Qe({
         cursorFlags: e,
         groups: t.hitRegions.map((o) => o.group),
         state: t.state
       });
-      if (K === n)
+      if (ie === n)
         return;
-      K = 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": {
-      K = null, P.cssRules.length === 1 && P.deleteRule(0);
+      ie = null, I.cssRules.length === 1 && I.deleteRule(0);
       break;
     }
   }
 }
-function C(e, t = "Assertion error") {
-  if (!e)
-    throw console.error(t), Error(t);
-}
-function Ve(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, n = 0) {
-  return Math.abs(L(e) - L(t)) <= n;
-}
-function Z(e, t) {
-  return w(e, t) ? 0 : e > t ? 1 : -1;
-}
-function D({
-  panelConstraints: e,
-  size: t
-}) {
-  const {
-    collapsedSize: n = 0,
-    collapsible: o,
-    maxSize: s = 100,
-    minSize: i = 0
-  } = e;
-  if (Z(t, i) < 0)
-    if (o) {
-      const a = (n + i) / 2;
-      Z(t, a) < 0 ? t = n : t = i;
-    } else
-      t = i;
-  return t = Math.min(s, t), t = L(t), t;
-}
-function Ke({
-  delta: e,
-  initialLayout: t,
-  panelConstraints: n,
-  pivotIndices: o,
-  prevLayout: s,
-  trigger: i
-}) {
-  if (w(e, 0))
-    return t;
-  const a = Object.values(t), r = Object.values(s), l = [...a], [c, u] = o;
-  C(c != null, "Invalid first pivot index"), C(u != null, "Invalid second pivot index");
-  let d = 0;
-  {
-    const h = e < 0 ? 1 : -1;
-    let f = e < 0 ? u : c, v = 0;
-    for (; ; ) {
-      const x = a[f];
-      C(
-        x != null,
-        `Previous layout not found for panel index ${f}`
-      );
-      const S = D({
-        panelConstraints: n[f],
-        size: 100
-      }) - x;
-      if (v += S, f += h, f < 0 || f >= n.length)
-        break;
-    }
-    const g = Math.min(Math.abs(e), Math.abs(v));
-    e = e < 0 ? 0 - g : g;
-  }
-  {
-    let f = e < 0 ? c : u;
-    for (; f >= 0 && f < n.length; ) {
-      const v = Math.abs(e) - Math.abs(d), g = a[f];
-      C(
-        g != null,
-        `Previous layout not found for panel index ${f}`
-      );
-      const x = g - v, z = D({
-        panelConstraints: n[f],
-        size: x
-      });
-      if (!w(g, z) && (d += g - z, l[f] = z, d.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
-        numeric: !0
-      }) >= 0))
-        break;
-      e < 0 ? f-- : f++;
-    }
-  }
-  if (Ve(r, l))
-    return s;
-  {
-    const h = e < 0 ? u : c, f = a[h];
-    C(
-      f != null,
-      `Previous layout not found for panel index ${h}`
-    );
-    const v = f + d, g = D({
-      panelConstraints: n[h],
-      size: v
-    });
-    if (l[h] = g, !w(g, v)) {
-      let x = v - g, S = e < 0 ? u : c;
-      for (; S >= 0 && S < n.length; ) {
-        const R = l[S];
-        C(
-          R != null,
-          `Previous layout not found for panel index ${S}`
-        );
-        const k = R + x, A = D({
-          panelConstraints: n[S],
-          size: k
-        });
-        if (w(R, A) || (x -= A - R, l[S] = A), w(x, 0))
-          break;
-        e > 0 ? S-- : S++;
-      }
-    }
-  }
-  const p = Object.values(l).reduce(
-    (h, f) => f + h,
-    0
-  );
-  if (!w(p, 100, 0.1))
-    return s;
-  const m = Object.keys(s);
-  return l.reduce((h, f, v) => (h[m[v]] = f, h), {});
-}
-function ee(e, t) {
-  if (Object.keys(e).length !== Object.keys(t).length)
-    return !1;
-  for (const n in e)
-    if (Z(e[n], t[n]) !== 0)
-      return !1;
-  return !0;
-}
-function U(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: {
@@ -530,103 +773,108 @@ function U(e) {
         const { disableCursor: a, element: r, orientation: l, panels: c } = i.group;
         let u = 0;
         t.state === "active" && (l === "horizontal" ? u = (e.clientX - t.pointerDownAtPoint.x) / r.offsetWidth * 100 : u = (e.clientY - t.pointerDownAtPoint.y) / r.offsetHeight * 100);
-        const d = t.initialLayoutMap.get(
+        const f = t.initialLayoutMap.get(
           i.group
-        ), { derivedPanelConstraints: p, layout: m } = n.get(i.group) ?? {};
-        if (p && d && m) {
-          const h = Ke({
+        ), {
+          derivedPanelConstraints: m,
+          layout: g,
+          separatorToPanels: p
+        } = n.get(i.group) ?? {};
+        if (m && f && g && p) {
+          const d = Q({
             delta: u,
-            initialLayout: d,
-            panelConstraints: p,
-            pivotIndices: i.panels.map((f) => c.indexOf(f)),
-            prevLayout: m,
+            initialLayout: f,
+            panelConstraints: m,
+            pivotIndices: i.panels.map((h) => c.indexOf(h)),
+            prevLayout: g,
             trigger: "mouse-or-touch"
           });
-          if (ee(h, m)) {
+          if (ee(d, g)) {
             if (u !== 0 && !a)
               switch (l) {
                 case "horizontal": {
-                  o |= u < 0 ? he : me;
+                  o |= u < 0 ? Le : Pe;
                   break;
                 }
                 case "vertical": {
-                  o |= u < 0 ? ve : ge;
+                  o |= u < 0 ? Ee : Re;
                   break;
                 }
               }
           } else {
             s.set(i.group, {
-              derivedPanelConstraints: p,
-              layout: h
+              derivedPanelConstraints: m,
+              layout: d,
+              separatorToPanels: p
             });
-            const f = i.group.panels.map(({ id: v }) => v).join(",");
-            i.group.inMemoryLayouts[f] = h;
+            const h = i.group.panels.map(({ id: v }) => v).join(",");
+            i.group.inMemoryLayouts[h] = d;
           }
         }
-      }), G({
+      }), M({
         cursorFlags: o,
         mountedGroups: s
-      }), Y();
+      }), se();
       break;
     }
     default: {
-      const o = ye(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"
         }
-      }), Y();
+      }), se();
       break;
     }
   }
 }
-function ue(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"
         }
-      }), Y();
+      }), se();
   }
 }
-function Xe(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 Ye(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 = Q({ group: e });
+  const i = le({ group: e });
   s.onResize(
     {
-      asPercentage: L(
+      asPercentage: C(
         o.inlineSize / i * 100
       ),
       inPixels: o.inlineSize
@@ -634,105 +882,71 @@ function Ye(e, t, n) {
     s.id
   );
 }
-function q({
-  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 (!w(s, 100) && o.length > 0)
-    for (let r = 0; r < t.length; r++) {
-      const l = o[r];
-      C(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];
-    C(l != null, `No layout data found for index ${r}`);
-    const c = D({
-      panelConstraints: t[r],
-      size: l
-    });
-    l != c && (i += l - c, o[r] = c);
-  }
-  if (!w(i, 0))
-    for (let r = 0; r < t.length; r++) {
-      const l = o[r];
-      C(l != null, `No layout data found for index ${r}`);
-      const c = l + i, u = D({
-        panelConstraints: t[r],
-        size: c
-      });
-      if (l !== u && (i -= u - l, o[r] = u, w(i, 0)))
-        break;
-    }
-  const a = Object.keys(e);
-  return o.reduce((r, l, c) => (r[a[c]] = l, r), {});
-}
-function Ze(e) {
-  let t = !1;
-  const n = new ResizeObserver((l) => {
-    for (const c of l) {
-      const { borderBoxSize: u, target: d } = c;
-      d === e.element ? t && G((p) => {
-        const m = p.mountedGroups.get(e);
-        if (m) {
-          const h = ae(e), f = m.layout, v = q({
-            layout: f,
-            panelConstraints: h
+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(p.mountedGroups).set(e, {
-              derivedPanelConstraints: h,
-              layout: v
+            mountedGroups: new Map(g.mountedGroups).set(e, {
+              derivedPanelConstraints: d,
+              layout: v,
+              separatorToPanels: p.separatorToPanels
             })
           };
         }
-        return p;
-      }) : Ye(e, d, u);
+        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 = ae(e), s = e.panels.map(({ id: l }) => l).join(","), i = e.inMemoryLayouts[s] ?? e.defaultLayout ?? Xe(o), a = q({
+  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", ce), window.addEventListener("pointerleave", U), window.addEventListener("pointermove", U), window.addEventListener("pointerup", ue)), function() {
-    const c = G((u) => {
-      const d = new Map(u.mountedGroups);
-      return d.delete(e), { mountedGroups: d };
+  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", ce), window.removeEventListener("pointerleave", U), window.removeEventListener("pointermove", U), window.removeEventListener("pointerup", ue)), 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 te(e) {
-  const t = Pe();
+function ce(e) {
+  const t = De();
   return `${e ?? t}`;
 }
-const _ = typeof window < "u" ? Ee : Ce;
-function ne(e) {
-  const t = I(e);
-  return _(() => {
+const H = typeof window < "u" ? Te : Ae;
+function ue(e) {
+  const t = D(e);
+  return H(() => {
     t.current = e;
-  }, [e]), fe((n) => t.current?.(n), [t]);
+  }, [e]), ge((n) => t.current?.(n), [t]);
 }
-function oe(...e) {
-  return ne((t) => {
+function fe(...e) {
+  return ue((t) => {
     e.forEach((n) => {
       if (n)
         switch (typeof n) {
@@ -748,54 +962,25 @@ function oe(...e) {
     });
   });
 }
-const Se = "--react-resizable-panels--panel--pointer-events";
-function xe(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 ze = Me(null);
-function qe({
-  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 = q({
-        layout: n,
-        panelConstraints: o
-      });
-      return ee(i, a) || G((r) => ({
-        mountedGroups: new Map(r.mountedGroups).set(s, {
-          derivedPanelConstraints: o,
-          layout: a
-        })
-      })), a;
-    }
-  };
-}
-function Je(e, t) {
-  const n = I({
+const Ie = $e(null);
+function ot(e, t) {
+  const n = D({
     getLayout: () => ({}),
-    setLayout: Te
+    setLayout: Ye
   });
-  de(t, () => n.current, []), _(() => {
+  Se(t, () => n.current, []), H(() => {
     Object.assign(
       n.current,
-      qe({ groupId: e })
+      be({ groupId: e })
     );
   });
 }
-function rt({
+function ft({
   children: e,
   className: t,
   defaultLayout: n,
@@ -808,95 +993,97 @@ function rt({
   orientation: c = "horizontal",
   style: u
 }) {
-  const d = I({}), p = ne((y) => {
-    ee(d.current, y) || (d.current = y, l?.(y));
-  }), m = te(r), [h, f] = M(!1), [v, g] = M(null), x = I({}), [z, S] = M(n ?? {}), [R, k] = M([]), [A, re] = M([]), be = oe(g, i);
-  Je(m, a);
-  const we = pe(
+  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(
     () => ({
-      id: m,
+      id: g,
       orientation: c,
-      registerPanel: (y) => (k((b) => X(c, [...b, y])), () => {
-        k((b) => b.filter((N) => N !== y));
+      registerPanel: (b) => (w((E) => re(c, [...E, b])), () => {
+        w((E) => E.filter(($) => $ !== b));
       }),
-      registerSeparator: (y) => (re(
-        (b) => X(c, [...b, y])
+      registerSeparator: (b) => (O(
+        (E) => re(c, [...E, b])
       ), () => {
-        re(
-          (b) => b.filter((N) => N !== y)
+        O(
+          (E) => E.filter(($) => $ !== b)
         );
       })
     }),
-    [m, c]
+    [g, c]
   );
-  _(() => {
-    if (v !== null && R.length > 0) {
-      const y = {
+  H(() => {
+    if (h !== null && y.length > 0) {
+      const b = {
         defaultLayout: n,
         disableCursor: !!o,
         disabled: !!s,
-        element: v,
-        id: m,
-        inMemoryLayouts: x.current,
+        element: h,
+        id: g,
+        inMemoryLastExpandedPanelSizes: te.current,
+        inMemoryLayouts: U.current,
         orientation: c,
-        panels: R,
-        separators: A
-      }, b = Ze(y), B = O().mountedGroups.get(y);
-      B && (S(B.layout), p?.(B.layout));
-      const Le = T.addListener(
+        panels: y,
+        separators: G
+      }, E = nt(b), ne = k().mountedGroups.get(b);
+      ne && (x(ne.layout), m?.(ne.layout));
+      const ke = A.addListener(
         "interactionStateChange",
-        (H) => {
-          switch (H.state) {
+        (X) => {
+          switch (X.state) {
             case "active":
             case "hover": {
-              f(
-                H.hitRegions.some(
-                  ($) => $.group === y
+              d(
+                X.hitRegions.some(
+                  (N) => N.group === b
                 )
               );
               break;
             }
           }
         }
-      ), Re = T.addListener(
+      ), Oe = A.addListener(
         "mountedGroupsChange",
-        (H) => {
-          const $ = H.get(y);
-          $ && $.derivedPanelConstraints.length > 0 && (S($.layout), p?.($.layout));
+        (X) => {
+          const N = X.get(b);
+          N && N.derivedPanelConstraints.length > 0 && (x(N.layout), m?.(N.layout));
         }
       );
       return () => {
-        b(), Le(), Re();
+        E(), ke(), Oe();
       };
     }
   }, [
     n,
     o,
     s,
-    v,
+    h,
+    g,
     m,
-    p,
     c,
-    R,
-    A
+    y,
+    G
   ]);
-  const se = {
-    [Se]: h ? "none" : void 0
+  const V = {
+    [Me]: p ? "none" : void 0
   };
-  for (const y in z) {
-    const b = xe(m, y), N = z[y];
-    se[b] = N;
+  for (const b in z) {
+    const E = Ge(g, b), $ = z[b];
+    V[E] = $;
   }
-  return /* @__PURE__ */ F(ze.Provider, { value: we, children: /* @__PURE__ */ F(
+  return /* @__PURE__ */ j(Ie.Provider, { value: K, children: /* @__PURE__ */ j(
     "div",
     {
       "aria-orientation": c,
       className: t,
-      "data-group": m,
-      ref: be,
+      "data-group": !0,
+      "data-testid": r ?? void 0,
+      ref: B,
       style: {
         ...u,
-        ...se,
+        ...V,
         display: "flex",
         flexDirection: c === "horizontal" ? "row" : "column",
         flexWrap: "nowrap"
@@ -905,34 +1092,34 @@ function rt({
     }
   ) });
 }
-function J(e) {
+function ae(e) {
   return `react-resizable-panels:${e}`;
 }
-function Qe({
+function it({
   id: e,
   layout: t,
   storage: n
 }) {
   try {
-    const o = J(e);
+    const o = ae(e);
     n.setItem(o, JSON.stringify(t));
   } catch (o) {
     console.error(o);
   }
 }
-function st({
+function dt({
   groupId: e,
   storage: t
 }) {
-  const n = Ge(
-    et,
-    () => t.getItem(J(e)),
-    () => t.getItem(J(e))
-  ), o = pe(
+  const n = Ne(
+    rt,
+    () => t.getItem(ae(e)),
+    () => t.getItem(ae(e))
+  ), o = xe(
     () => n ? JSON.parse(n) : null,
     [n]
-  ), s = fe(
-    (i) => Qe({
+  ), s = ge(
+    (i) => it({
       id: e,
       layout: i,
       storage: t
@@ -944,26 +1131,26 @@ function st({
     onLayoutChange: s
   };
 }
-function et() {
+function rt() {
   return function() {
   };
 }
-function at() {
-  return M(null);
+function pt() {
+  return R(null);
 }
-function lt() {
-  return I(null);
+function mt() {
+  return D(null);
 }
-function ie() {
-  const e = Ie(ze);
-  return C(e, "Unexpected"), e;
+function de() {
+  const e = _e(Ie);
+  return S(e, "Unexpected"), e;
 }
-function tt({
+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 };
@@ -1004,39 +1191,39 @@ function tt({
     },
     isCollapsed: () => {
       const { collapsible: a, collapsedSize: r } = o(), l = i();
-      return a && w(r, l);
+      return a && L(r, l);
     },
     resize: (a) => {
       if (i() !== a)
         switch (typeof a) {
           case "number": {
-            const { group: l } = n(), c = Q({ group: l });
-            L(a / c * 100);
+            const { group: l } = n(), c = le({ group: l });
+            C(a / c * 100);
             break;
           }
         }
     }
   };
 }
-function nt(e, t) {
-  const { id: n } = ie(), o = I({
-    collapse: V,
-    expand: V,
+function at(e, t) {
+  const { id: n } = de(), o = D({
+    collapse: oe,
+    expand: oe,
     getSize: () => ({
       asPercentage: 0,
       inPixels: 0
     }),
     isCollapsed: () => !1,
-    resize: V
+    resize: oe
   });
-  de(t, () => o.current, []), _(() => {
+  Se(t, () => o.current, []), H(() => {
     Object.assign(
       o.current,
-      tt({ groupId: n, panelId: e })
+      st({ groupId: n, panelId: e })
     );
   });
 }
-function ct({
+function ht({
   children: e,
   className: t,
   collapsedSize: n = 0,
@@ -1048,18 +1235,18 @@ function ct({
   minSize: l = "0",
   onResize: c,
   panelRef: u,
-  style: d
+  style: f
 }) {
-  const p = !!a, m = te(a), [h, f] = M(null), v = oe(f, i), { id: g, registerPanel: x } = ie(), z = c !== null, S = ne((k) => {
-    c?.(k, a);
+  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);
   });
-  _(() => {
-    if (h !== null)
-      return x({
-        element: h,
-        id: m,
-        idIsStable: p,
-        onResize: z ? S : void 0,
+  H(() => {
+    if (p !== null)
+      return z({
+        element: p,
+        id: g,
+        idIsStable: m,
+        onResize: x ? y : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
@@ -1072,39 +1259,40 @@ function ct({
     n,
     o,
     s,
-    h,
-    z,
-    m,
     p,
+    x,
+    g,
+    m,
     r,
     l,
-    S,
-    x
-  ]), nt(m, u);
-  const R = xe(g, m);
-  return /* @__PURE__ */ F(
+    y,
+    z
+  ]), at(g, u);
+  const w = Ge(v, g);
+  return /* @__PURE__ */ j(
     "div",
     {
-      "data-panel": m,
-      ref: v,
+      "data-panel": !0,
+      "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(${Se})`
+        pointerEvents: `var(${Me})`
       },
-      children: /* @__PURE__ */ F(
+      children: /* @__PURE__ */ j(
         "div",
         {
           className: t,
           style: {
             width: "100%",
             height: "100%",
-            ...d
+            ...f
           },
           children: e
         }
@@ -1112,48 +1300,117 @@ function ct({
     }
   );
 }
-function ut() {
-  return M(null);
+function vt() {
+  return R(null);
 }
-function ft() {
-  return I(null);
+function yt() {
+  return D(null);
 }
-function dt({
+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 gt({
   children: e,
   className: t,
   elementRef: n,
   id: o,
   style: s
 }) {
-  const i = te(o), [a, r] = M(null), [l, c] = M("inactive"), u = oe(r, n), { orientation: d, registerSeparator: p } = ie(), m = d === "horizontal" ? "vertical" : "horizontal";
-  return _(() => {
-    if (a !== null) {
-      const h = {
-        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
-      }, f = p(h), v = T.addListener(
+      }, z = d(v), x = A.addListener(
         "interactionStateChange",
-        (g) => {
+        (w) => {
           c(
-            g.state !== "inactive" && g.hitRegions.some(
-              (x) => x.separator === h
-            ) ? g.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 () => {
-        f(), v();
+        x(), y(), z();
       };
     }
-  }, [a, i, p]), /* @__PURE__ */ F(
+  }, [u, g, i, d]), /* @__PURE__ */ j(
     "div",
     {
-      "aria-orientation": m,
+      "aria-orientation": h,
+      "aria-valuemax": a.valueMax,
+      "aria-valuemin": a.valueMin,
+      "aria-valuenow": a.valueNow,
       children: e,
       className: t,
-      "data-separator": i,
-      "data-separator-state": l,
-      ref: u,
+      "data-separator": l,
+      "data-testid": o ?? void 0,
+      ref: m,
       role: "separator",
       style: {
         flexBasis: "auto",
@@ -1166,13 +1423,13 @@ function dt({
   );
 }
 export {
-  rt as Group,
-  ct as Panel,
-  dt as Separator,
-  st as useDefaultLayout,
-  at as useGroupCallbackRef,
-  lt as useGroupRef,
-  ut as usePanelCallbackRef,
-  ft 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