react-resizable-panels 4.1.1 → 4.2.0

package/dist/react-resizable-panels.js

@@ -1,15 +1,15 @@
 "use client";
-import { jsx as K } from "react/jsx-runtime";
+import { jsx as X } from "react/jsx-runtime";
 import { useId as Ke, useLayoutEffect as Xe, useEffect as Ce, useRef as I, useCallback as qe, createContext as Ye, useImperativeHandle as Ee, useState as D, useMemo as se, useSyncExternalStore as Ze, useContext as Je } from "react";
 function z(e, t = "Assertion error") {
   if (!e)
     throw Error(t);
 }
-function W({
+function U({
   group: e
 }) {
   const { orientation: t, panels: n } = e;
-  return n.reduce((o, i) => (o += t === "horizontal" ? i.element.offsetWidth : i.element.offsetHeight, o), 0);
+  return n.reduce((o, r) => (o += t === "horizontal" ? r.element.offsetWidth : r.element.offsetHeight, o), 0);
 }
 function ae(e, t) {
   return t.sort(
@@ -48,35 +48,35 @@ function tt({
     x: n.x + n.width / 2,
     y: n.y + n.height / 2
   };
-  let i, s = Number.MAX_VALUE;
+  let r, s = Number.MAX_VALUE;
   for (const l of t) {
-    const { x: r, y: a } = Ie(o, l), u = e === "horizontal" ? r : a;
-    u < s && (s = u, i = l);
+    const { x: i, y: a } = Ie(o, l), u = e === "horizontal" ? i : a;
+    u < s && (s = u, r = l);
   }
-  return z(i, "No rect found"), i;
+  return z(r, "No rect found"), r;
 }
 function ke(e) {
-  const { element: t, orientation: n, panels: o, separators: i } = e, s = ae(
+  const { element: t, orientation: n, panels: o, separators: r } = e, s = ae(
     n,
     Array.from(t.children).filter(Me).map((f) => ({ element: f }))
   ).map(({ element: f }) => f), l = [];
-  let r = !1, a, u = [];
+  let i = !1, a, u = [];
   for (const f of s)
     if (f.hasAttribute("data-panel")) {
       const p = o.find(
-        (h) => h.element === f
+        (m) => m.element === f
       );
       if (p) {
         if (a) {
-          const h = a.element.getBoundingClientRect(), m = f.getBoundingClientRect();
+          const m = a.element.getBoundingClientRect(), h = f.getBoundingClientRect();
           let c;
-          if (r) {
-            const d = n === "horizontal" ? new DOMRect(h.right, h.top, 0, h.height) : new DOMRect(
-              h.left,
-              h.bottom,
-              h.width,
+          if (i) {
+            const d = n === "horizontal" ? new DOMRect(m.right, m.top, 0, m.height) : new DOMRect(
+              m.left,
+              m.bottom,
+              m.width,
               0
-            ), y = n === "horizontal" ? new DOMRect(m.left, m.top, 0, m.height) : new DOMRect(m.left, m.top, m.width, 0);
+            ), y = n === "horizontal" ? new DOMRect(h.left, h.top, 0, h.height) : new DOMRect(h.left, h.top, h.width, 0);
             switch (u.length) {
               case 0: {
                 c = [
@@ -88,12 +88,12 @@ function ke(e) {
               case 1: {
                 const v = u[0], S = tt({
                   orientation: n,
-                  rects: [h, m],
+                  rects: [m, h],
                   targetRect: v.element.getBoundingClientRect()
                 });
                 c = [
                   v,
-                  S === h ? y : d
+                  S === m ? y : d
                 ];
                 break;
               }
@@ -105,35 +105,35 @@ function ke(e) {
           } else
             u.length ? c = u : c = [
               n === "horizontal" ? new DOMRect(
-                h.right,
-                m.top,
-                m.left - h.right,
-                m.height
+                m.right,
+                h.top,
+                h.left - m.right,
+                h.height
               ) : new DOMRect(
-                m.left,
-                h.bottom,
-                m.width,
-                m.top - h.bottom
+                h.left,
+                m.bottom,
+                h.width,
+                h.top - m.bottom
               )
             ];
           for (const d of c)
             l.push({
               group: e,
-              groupSize: W({ group: e }),
+              groupSize: U({ group: e }),
               panels: [a, p],
               separator: "width" in d ? void 0 : d,
               rect: "width" in d ? d : d.element.getBoundingClientRect()
             });
         }
-        r = !1, a = p, u = [];
+        i = !1, a = p, u = [];
       }
     } else if (f.hasAttribute("data-separator")) {
-      const p = i.find(
-        (h) => h.element === f
+      const p = r.find(
+        (m) => m.element === f
       );
       p ? u.push(p) : (a = void 0, u = []);
     } else
-      r = !0;
+      i = !0;
   return l;
 }
 function nt(e, t) {
@@ -144,10 +144,10 @@ function ot(e, t) {
   const n = getComputedStyle(e.ownerDocument.body), o = parseFloat(n.fontSize);
   return t * o;
 }
-function rt(e) {
+function it(e) {
   return e / 100 * window.innerHeight;
 }
-function it(e) {
+function rt(e) {
   return e / 100 * window.innerWidth;
 }
 function st(e) {
@@ -166,30 +166,30 @@ function ee({
   styleProp: n
 }) {
   let o;
-  const [i, s] = st(n);
+  const [r, s] = st(n);
   switch (s) {
     case "%": {
-      o = i / 100 * e;
+      o = r / 100 * e;
       break;
     }
     case "px": {
-      o = i;
+      o = r;
       break;
     }
     case "rem": {
-      o = ot(t, i);
+      o = ot(t, r);
       break;
     }
     case "em": {
-      o = nt(t, i);
+      o = nt(t, r);
       break;
     }
     case "vh": {
-      o = rt(i);
+      o = it(r);
       break;
     }
     case "vw": {
-      o = it(i);
+      o = rt(r);
       break;
     }
   }
@@ -198,8 +198,8 @@ function ee({
 function k(e) {
   return parseFloat(e.toFixed(3));
 }
-function me(e) {
-  const { panels: t } = e, n = W({ group: e });
+function he(e) {
+  const { panels: t } = e, n = U({ group: e });
   return n === 0 ? t.map((o) => ({
     collapsedSize: 0,
     collapsible: o.panelConstraints.collapsible === !0,
@@ -208,30 +208,30 @@ function me(e) {
     maxSize: 100,
     panelId: o.id
   })) : t.map((o) => {
-    const { element: i, panelConstraints: s } = o;
+    const { element: r, panelConstraints: s } = o;
     let l = 0;
     if (s.collapsedSize) {
       const f = ee({
         groupSize: n,
-        panelElement: i,
+        panelElement: r,
         styleProp: s.collapsedSize
       });
       l = k(f / n * 100);
     }
-    let r;
+    let i;
     if (s.defaultSize) {
       const f = ee({
         groupSize: n,
-        panelElement: i,
+        panelElement: r,
         styleProp: s.defaultSize
       });
-      r = k(f / n * 100);
+      i = k(f / n * 100);
     }
     let a = 0;
     if (s.minSize) {
       const f = ee({
         groupSize: n,
-        panelElement: i,
+        panelElement: r,
         styleProp: s.minSize
       });
       a = k(f / n * 100);
@@ -240,7 +240,7 @@ function me(e) {
     if (s.maxSize) {
       const f = ee({
         groupSize: n,
-        panelElement: i,
+        panelElement: r,
         styleProp: s.maxSize
       });
       u = k(f / n * 100);
@@ -248,7 +248,7 @@ function me(e) {
     return {
       collapsedSize: l,
       collapsible: s.collapsible === !0,
-      defaultSize: r,
+      defaultSize: i,
       minSize: a,
       maxSize: u,
       panelId: o.id
@@ -269,17 +269,17 @@ class at {
       if (o.length === 1)
         o[0].call(null, n);
       else {
-        let i = !1, s = null;
+        let r = !1, s = null;
         const l = Array.from(o);
-        for (let r = 0; r < l.length; r++) {
-          const a = l[r];
+        for (let i = 0; i < l.length; i++) {
+          const a = l[i];
           try {
             a.call(null, n);
           } catch (u) {
-            s === null && (i = !0, s = u);
+            s === null && (r = !0, s = u);
           }
         }
-        if (i)
+        if (r)
           throw s;
       }
   }
@@ -289,8 +289,8 @@ class at {
   removeListener(t, n) {
     const o = this.#e[t];
     if (o !== void 0) {
-      const i = o.indexOf(n);
-      i >= 0 && o.splice(i, 1);
+      const r = o.indexOf(n);
+      r >= 0 && o.splice(r, 1);
     }
   }
 }
@@ -316,19 +316,19 @@ function M(e) {
   return E = {
     ...E,
     ...t
-  }, t.cursorFlags !== void 0 && _.emit("cursorFlagsChange", E.cursorFlags), t.interactionState !== void 0 && _.emit("interactionStateChange", E.interactionState), t.mountedGroups !== void 0 && (E.mountedGroups.forEach((o, i) => {
+  }, t.cursorFlags !== void 0 && _.emit("cursorFlagsChange", E.cursorFlags), t.interactionState !== void 0 && _.emit("interactionStateChange", E.interactionState), t.mountedGroups !== void 0 && (E.mountedGroups.forEach((o, r) => {
     o.derivedPanelConstraints.forEach((s) => {
       if (s.collapsible) {
-        const { layout: l } = n.mountedGroups.get(i) ?? {};
+        const { layout: l } = n.mountedGroups.get(r) ?? {};
         if (l) {
-          const r = R(
+          const i = R(
             s.collapsedSize,
             o.layout[s.panelId]
           ), a = R(
             s.collapsedSize,
             l[s.panelId]
           );
-          r && !a && (i.inMemoryLastExpandedPanelSizes[s.panelId] = l[s.panelId]);
+          i && !a && (r.inMemoryLastExpandedPanelSizes[s.panelId] = l[s.panelId]);
         }
       }
     });
@@ -342,38 +342,38 @@ function lt(e, t) {
       return !1;
   return !0;
 }
-function X(e, t) {
+function q(e, t) {
   return R(e, t) ? 0 : e > t ? 1 : -1;
 }
-function V({
+function W({
   panelConstraints: e,
   size: t
 }) {
   const {
     collapsedSize: n = 0,
     collapsible: o,
-    maxSize: i = 100,
+    maxSize: r = 100,
     minSize: s = 0
   } = e;
-  if (X(t, s) < 0)
+  if (q(t, s) < 0)
     if (o) {
       const l = (n + s) / 2;
-      X(t, l) < 0 ? t = n : t = s;
+      q(t, l) < 0 ? t = n : t = s;
     } else
       t = s;
-  return t = Math.min(i, t), t = k(t), t;
+  return t = Math.min(r, t), t = k(t), t;
 }
-function q({
+function Y({
   delta: e,
   initialLayout: t,
   panelConstraints: n,
   pivotIndices: o,
-  prevLayout: i,
+  prevLayout: r,
   trigger: s
 }) {
   if (R(e, 0))
     return t;
-  const l = Object.values(t), r = Object.values(i), a = [...l], [u, f] = o;
+  const l = Object.values(t), i = Object.values(r), a = [...l], [u, f] = o;
   z(u != null, "Invalid first pivot index"), z(f != null, "Invalid second pivot index");
   let p = 0;
   if (s === "keyboard") {
@@ -395,7 +395,7 @@ function q({
           `Previous layout not found for panel index ${c}`
         ), R(x, y)) {
           const g = S - x;
-          X(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
+          q(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
@@ -417,7 +417,7 @@ function q({
           `Previous layout not found for panel index ${c}`
         ), R(x, S)) {
           const g = x - y;
-          X(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
+          q(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
@@ -431,7 +431,7 @@ function q({
         S != null,
         `Previous layout not found for panel index ${d}`
       );
-      const g = V({
+      const g = W({
         panelConstraints: n[d],
         size: 100
       }) - S;
@@ -449,7 +449,7 @@ function q({
         v != null,
         `Previous layout not found for panel index ${d}`
       );
-      const S = v - y, x = V({
+      const S = v - y, x = W({
         panelConstraints: n[d],
         size: S
       });
@@ -460,15 +460,15 @@ function q({
       e < 0 ? d-- : d++;
     }
   }
-  if (lt(r, a))
-    return i;
+  if (lt(i, a))
+    return r;
   {
     const c = e < 0 ? f : u, d = l[c];
     z(
       d != null,
       `Previous layout not found for panel index ${c}`
     );
-    const y = d + p, v = V({
+    const y = d + p, v = W({
       panelConstraints: n[c],
       size: y
     });
@@ -480,7 +480,7 @@ function q({
           b != null,
           `Previous layout not found for panel index ${g}`
         );
-        const w = b + S, C = V({
+        const w = b + S, C = W({
           panelConstraints: n[g],
           size: w
         });
@@ -490,14 +490,14 @@ function q({
       }
     }
   }
-  const h = Object.values(a).reduce(
+  const m = Object.values(a).reduce(
     (c, d) => d + c,
     0
   );
-  if (!R(h, 100, 0.1))
-    return i;
-  const m = Object.keys(i);
-  return a.reduce((c, d, y) => (c[m[y]] = d, c), {});
+  if (!R(m, 100, 0.1))
+    return r;
+  const h = Object.keys(r);
+  return a.reduce((c, d, y) => (c[h[y]] = d, c), {});
 }
 function ne(e) {
   const t = e.parentElement;
@@ -508,11 +508,11 @@ function ne(e) {
       return o;
   throw Error("Could not find parent Group for separator element");
 }
-function U(e, t) {
+function K(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
     return !1;
   for (const n in e)
-    if (t[n] === void 0 || X(e[n], t[n]) !== 0)
+    if (t[n] === void 0 || q(e[n], t[n]) !== 0)
       return !1;
   return !0;
 }
@@ -520,53 +520,53 @@ function N({
   layout: e,
   panelConstraints: t
 }) {
-  const o = [...Object.values(e)], i = o.reduce(
-    (r, a) => r + a,
+  const o = [...Object.values(e)], r = o.reduce(
+    (i, a) => i + a,
     0
   );
   if (o.length !== t.length)
     throw Error(
-      `Invalid ${t.length} panel layout: ${o.map((r) => `${r}%`).join(", ")}`
+      `Invalid ${t.length} panel layout: ${o.map((i) => `${i}%`).join(", ")}`
     );
-  if (!R(i, 100) && o.length > 0)
-    for (let r = 0; r < t.length; r++) {
-      const a = o[r];
-      z(a != null, `No layout data found for index ${r}`);
-      const u = 100 / i * a;
-      o[r] = u;
+  if (!R(r, 100) && o.length > 0)
+    for (let i = 0; i < t.length; i++) {
+      const a = o[i];
+      z(a != null, `No layout data found for index ${i}`);
+      const u = 100 / r * a;
+      o[i] = u;
     }
   let s = 0;
-  for (let r = 0; r < t.length; r++) {
-    const a = o[r];
-    z(a != null, `No layout data found for index ${r}`);
-    const u = V({
-      panelConstraints: t[r],
+  for (let i = 0; i < t.length; i++) {
+    const a = o[i];
+    z(a != null, `No layout data found for index ${i}`);
+    const u = W({
+      panelConstraints: t[i],
       size: a
     });
-    a != u && (s += a - u, o[r] = u);
+    a != u && (s += a - u, o[i] = u);
   }
   if (!R(s, 0))
-    for (let r = 0; r < t.length; r++) {
-      const a = o[r];
-      z(a != null, `No layout data found for index ${r}`);
-      const u = a + s, f = V({
-        panelConstraints: t[r],
+    for (let i = 0; i < t.length; i++) {
+      const a = o[i];
+      z(a != null, `No layout data found for index ${i}`);
+      const u = a + s, f = W({
+        panelConstraints: t[i],
         size: u
       });
-      if (a !== f && (s -= f - a, o[r] = f, R(s, 0)))
+      if (a !== f && (s -= f - a, o[i] = f, R(s, 0)))
         break;
     }
   const l = Object.keys(e);
-  return o.reduce((r, a, u) => (r[l[u]] = a, r), {});
+  return o.reduce((i, a, u) => (i[l[u]] = a, i), {});
 }
 function Ge({
   groupId: e
 }) {
   const t = () => {
     const { mountedGroups: n } = G();
-    for (const [o, i] of n)
+    for (const [o, r] of n)
       if (o.id === e)
-        return { group: o, ...i };
+        return { group: o, ...r };
     throw Error(`Could not find Group with id "${e}"`);
   };
   return {
@@ -577,20 +577,20 @@ function Ge({
     setLayout(n) {
       const {
         defaultLayoutDeferred: o,
-        derivedPanelConstraints: i,
+        derivedPanelConstraints: r,
         group: s,
         layout: l,
-        separatorToPanels: r
+        separatorToPanels: i
       } = t(), a = N({
         layout: n,
-        panelConstraints: i
+        panelConstraints: r
       });
-      return o ? l : (U(l, a) || M((u) => ({
+      return o ? l : (K(l, a) || M((u) => ({
         mountedGroups: new Map(u.mountedGroups).set(s, {
           defaultLayoutDeferred: o,
-          derivedPanelConstraints: i,
+          derivedPanelConstraints: r,
           layout: a,
-          separatorToPanels: r
+          separatorToPanels: i
         })
       })), a);
     }
@@ -601,13 +601,13 @@ function De(e) {
   return z(n, `Mounted Group ${e.id} not found`), n;
 }
 function T(e, t) {
-  const n = ne(e), o = De(n), i = n.separators.find(
+  const n = ne(e), o = De(n), r = n.separators.find(
     (p) => p.element === e
   );
-  z(i, "Matching separator not found");
-  const s = o.separatorToPanels.get(i);
+  z(r, "Matching separator not found");
+  const s = o.separatorToPanels.get(r);
   z(s, "Matching panels not found");
-  const l = s.map((p) => n.panels.indexOf(p)), a = Ge({ groupId: n.id }).getLayout(), u = q({
+  const l = s.map((p) => n.panels.indexOf(p)), a = Ge({ groupId: n.id }).getLayout(), u = Y({
     delta: t,
     initialLayout: a,
     panelConstraints: o.derivedPanelConstraints,
@@ -618,7 +618,7 @@ function T(e, t) {
     layout: u,
     panelConstraints: o.derivedPanelConstraints
   });
-  U(a, f) || M((p) => ({
+  K(a, f) || M((p) => ({
     mountedGroups: new Map(p.mountedGroups).set(n, {
       defaultLayoutDeferred: o.defaultLayoutDeferred,
       derivedPanelConstraints: o.derivedPanelConstraints,
@@ -655,31 +655,31 @@ function ye(e) {
       }
       case "Enter": {
         e.preventDefault();
-        const o = ne(t), { derivedPanelConstraints: i, layout: s, separatorToPanels: l } = De(o), r = o.separators.find(
+        const o = ne(t), { derivedPanelConstraints: r, layout: s, separatorToPanels: l } = De(o), i = o.separators.find(
           (p) => p.element === t
         );
-        z(r, "Matching separator not found");
-        const a = l.get(r);
+        z(i, "Matching separator not found");
+        const a = l.get(i);
         z(a, "Matching panels not found");
-        const u = a[0], f = i.find(
+        const u = a[0], f = r.find(
           (p) => p.panelId === u.id
         );
         if (z(f, "Panel metadata not found"), f.collapsible) {
-          const p = s[u.id], h = f.collapsedSize === p ? o.inMemoryLastExpandedPanelSizes[u.id] ?? f.minSize : f.collapsedSize;
-          T(t, h - p);
+          const p = s[u.id], m = f.collapsedSize === p ? o.inMemoryLastExpandedPanelSizes[u.id] ?? f.minSize : f.collapsedSize;
+          T(t, m - p);
         }
         break;
       }
       case "F6": {
         e.preventDefault();
-        const i = ne(t).separators.map(
+        const r = ne(t).separators.map(
           (a) => a.element
-        ), s = Array.from(i).findIndex(
+        ), s = Array.from(r).findIndex(
           (a) => a === e.currentTarget
         );
         z(s !== null, "Index not found");
-        const l = e.shiftKey ? s > 0 ? s - 1 : i.length - 1 : s + 1 < i.length ? s + 1 : 0;
-        i[l].focus();
+        const l = e.shiftKey ? s > 0 ? s - 1 : r.length - 1 : s + 1 < r.length ? s + 1 : 0;
+        r[l].focus();
         break;
       }
       case "Home": {
@@ -688,13 +688,13 @@ function ye(e) {
       }
     }
 }
-const ut = (e) => e, re = () => {
+const ut = (e) => e, ie = () => {
 }, Oe = 1, Te = 2, _e = 4, Ne = 8, ge = {
   coarse: 10,
   precise: 5
 };
 function ct(e, t, n) {
-  let o, i = {
+  let o, r = {
     x: 1 / 0,
     y: 1 / 0
   };
@@ -702,17 +702,17 @@ function ct(e, t, n) {
     const l = Ie(n, s.rect);
     switch (e) {
       case "horizontal": {
-        l.x <= i.x && (o = s, i = l);
+        l.x <= r.x && (o = s, r = l);
         break;
       }
       case "vertical": {
-        l.y <= i.y && (o = s, i = l);
+        l.y <= r.y && (o = s, r = l);
         break;
       }
     }
   }
   return o ? {
-    distance: i,
+    distance: r,
     hitRegion: o
   } : void 0;
 }
@@ -736,32 +736,32 @@ function pt(e, t) {
     o,
     "Stacking order can only be calculated for elements with a common ancestor"
   );
-  const i = {
+  const r = {
     a: Se(ve(n.a)),
     b: Se(ve(n.b))
   };
-  if (i.a === i.b) {
+  if (r.a === r.b) {
     const s = o.childNodes, l = {
       a: n.a.at(-1),
       b: n.b.at(-1)
     };
-    let r = s.length;
-    for (; r--; ) {
-      const a = s[r];
+    let i = s.length;
+    for (; i--; ) {
+      const a = s[i];
       if (a === l.a) return 1;
       if (a === l.b) return -1;
     }
   }
-  return Math.sign(i.a - i.b);
+  return Math.sign(r.a - r.b);
 }
-const ht = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
-function mt(e) {
+const mt = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+function ht(e) {
   const t = getComputedStyle(Ae(e) ?? e).display;
   return t === "flex" || t === "inline-flex";
 }
 function yt(e) {
   const t = getComputedStyle(e);
-  return !!(t.position === "fixed" || t.zIndex !== "auto" && (t.position !== "static" || mt(e)) || +t.opacity < 1 || "transform" in t && t.transform !== "none" || "webkitTransform" in t && t.webkitTransform !== "none" || "mixBlendMode" in t && t.mixBlendMode !== "normal" || "filter" in t && t.filter !== "none" || "webkitFilter" in t && t.webkitFilter !== "none" || "isolation" in t && t.isolation === "isolate" || ht.test(t.willChange) || t.webkitOverflowScrolling === "touch");
+  return !!(t.position === "fixed" || t.zIndex !== "auto" && (t.position !== "static" || ht(e)) || +t.opacity < 1 || "transform" in t && t.transform !== "none" || "webkitTransform" in t && t.webkitTransform !== "none" || "mixBlendMode" in t && t.mixBlendMode !== "normal" || "filter" in t && t.filter !== "none" || "webkitFilter" in t && t.webkitFilter !== "none" || "isolation" in t && t.isolation === "isolate" || mt.test(t.willChange) || t.webkitOverflowScrolling === "touch");
 }
 function ve(e) {
   let t = e.length;
@@ -808,29 +808,29 @@ function vt({
 }
 function $e(e, t) {
   const n = [];
-  return t.forEach((o, i) => {
-    if (i.disabled)
+  return t.forEach((o, r) => {
+    if (r.disabled)
       return;
-    const s = ft() ? ge.coarse : ge.precise, l = ke(i), r = ct(i.orientation, l, {
+    const s = ft() ? ge.coarse : ge.precise, l = ke(r), i = ct(r.orientation, l, {
       x: e.clientX,
       y: e.clientY
     });
-    r && r.distance.x <= s && r.distance.y <= s && vt({
-      groupElement: i.element,
-      hitRegion: r.hitRegion.rect,
+    i && i.distance.x <= s && i.distance.y <= s && vt({
+      groupElement: r.element,
+      hitRegion: i.hitRegion.rect,
       pointerEventTarget: e.target
-    }) && n.push(r.hitRegion);
+    }) && n.push(i.hitRegion);
   }), n;
 }
 function ze(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = G(), n = $e(e, t), o = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map();
-  let r = !1;
+  const { mountedGroups: t } = G(), n = $e(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map();
+  let i = !1;
   n.forEach((a) => {
     o.add(a.group), a.panels.forEach((f) => {
-      i.add(f);
-    }), a.separator && (s.add(a.separator), r || (r = !0, a.separator.element.focus()));
+      r.add(f);
+    }), a.separator && (s.add(a.separator), i || (i = !0, a.separator.element.focus()));
     const u = t.get(a.group);
     u && l.set(a.group, u.layout);
   }), M({
@@ -847,7 +847,7 @@ function St({
   groups: t,
   state: n
 }) {
-  let o = 0, i = 0;
+  let o = 0, r = 0;
   switch (n) {
     case "active":
     case "hover":
@@ -859,23 +859,23 @@ function St({
               break;
             }
             case "vertical": {
-              i++;
+              r++;
               break;
             }
           }
       });
   }
-  if (o === 0 && i === 0)
+  if (o === 0 && r === 0)
     return null;
   switch (n) {
     case "active": {
-      const s = (e & Oe) !== 0, l = (e & Te) !== 0, r = (e & _e) !== 0, a = (e & Ne) !== 0;
+      const s = (e & Oe) !== 0, l = (e & Te) !== 0, i = (e & _e) !== 0, a = (e & Ne) !== 0;
       if (e) {
         if (s)
-          return r ? "se-resize" : a ? "ne-resize" : "e-resize";
+          return i ? "se-resize" : a ? "ne-resize" : "e-resize";
         if (l)
-          return r ? "sw-resize" : a ? "nw-resize" : "w-resize";
-        if (r)
+          return i ? "sw-resize" : a ? "nw-resize" : "w-resize";
+        if (i)
           return "s-resize";
         if (a)
           return "n-resize";
@@ -883,7 +883,7 @@ function St({
       break;
     }
   }
-  return o > 0 && i > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
+  return o > 0 && r > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
 }
 const be = /* @__PURE__ */ new WeakMap();
 function le(e) {
@@ -891,15 +891,15 @@ function le(e) {
     return;
   let { prevStyle: t, styleSheet: n } = be.get(e) ?? {};
   n === void 0 && (n = new e.defaultView.CSSStyleSheet(), e.adoptedStyleSheets = [n]);
-  const { cursorFlags: o, interactionState: i } = G();
-  switch (i.state) {
+  const { cursorFlags: o, interactionState: r } = G();
+  switch (r.state) {
     case "active":
     case "hover": {
       const s = St({
         cursorFlags: o,
-        groups: i.hitRegions.map((r) => r.group),
-        state: i.state
-      }), l = `*{cursor: ${s} !important; ${i.state === "active" ? "touch-action: none;" : ""} }`;
+        groups: r.hitRegions.map((i) => i.group),
+        state: r.state
+      }), l = `*{cursor: ${s} !important; ${r.state === "active" ? "touch-action: none;" : ""} }`;
       if (t === l)
         return;
       t = l, s ? n.cssRules.length === 0 ? n.insertRule(l) : n.replaceSync(l) : n.cssRules.length === 1 && n.deleteRule(0);
@@ -920,33 +920,33 @@ function Fe({
   event: t,
   hitRegions: n,
   initialLayoutMap: o,
-  mountedGroups: i,
+  mountedGroups: r,
   pointerDownAtPoint: s
 }) {
   let l = 0;
-  const r = new Map(i);
+  const i = new Map(r);
   n.forEach((a) => {
-    const { group: u, groupSize: f } = a, { disableCursor: p, orientation: h, panels: m } = u;
+    const { group: u, groupSize: f } = a, { disableCursor: p, orientation: m, panels: h } = u;
     let c = 0;
-    s ? h === "horizontal" ? c = (t.clientX - s.x) / f * 100 : c = (t.clientY - s.y) / f * 100 : h === "horizontal" ? c = t.clientX < 0 ? -100 : 100 : c = t.clientY < 0 ? -100 : 100;
+    s ? m === "horizontal" ? c = (t.clientX - s.x) / f * 100 : c = (t.clientY - s.y) / f * 100 : m === "horizontal" ? c = t.clientX < 0 ? -100 : 100 : c = t.clientY < 0 ? -100 : 100;
     const d = o.get(u), {
       defaultLayoutDeferred: y,
       derivedPanelConstraints: v,
       layout: S,
       separatorToPanels: x
-    } = i.get(u) ?? { defaultLayoutDeferred: !1 };
+    } = r.get(u) ?? { defaultLayoutDeferred: !1 };
     if (v && d && S && x) {
-      const g = q({
+      const g = Y({
         delta: c,
         initialLayout: d,
         panelConstraints: v,
-        pivotIndices: a.panels.map((b) => m.indexOf(b)),
+        pivotIndices: a.panels.map((b) => h.indexOf(b)),
         prevLayout: S,
         trigger: "mouse-or-touch"
       });
-      if (U(g, S)) {
+      if (K(g, S)) {
         if (c !== 0 && !p)
-          switch (h) {
+          switch (m) {
             case "horizontal": {
               l |= c < 0 ? Oe : Te;
               break;
@@ -957,7 +957,7 @@ function Fe({
             }
           }
       } else {
-        r.set(a.group, {
+        i.set(a.group, {
           defaultLayoutDeferred: y,
           derivedPanelConstraints: v,
           layout: g,
@@ -969,7 +969,7 @@ function Fe({
     }
   }), M({
     cursorFlags: l,
-    mountedGroups: r
+    mountedGroups: i
   }), le(e);
 }
 function we(e) {
@@ -1054,9 +1054,9 @@ function Re(e) {
       n += l, o[s.panelId] = l;
     } else
       o[s.panelId] = void 0;
-  const i = e.length - t;
-  if (i !== 0) {
-    const s = k((100 - n) / i);
+  const r = e.length - t;
+  if (r !== 0) {
+    const s = k((100 - n) / r);
     for (const l of e)
       l.defaultSize === void 0 && (o[l.panelId] = s);
   }
@@ -1066,19 +1066,16 @@ function xt(e, t, n) {
   const o = n[0];
   if (!o)
     return;
-  const i = e.panels.find((l) => l.element === t);
-  if (!i || !i.onResize)
+  const r = e.panels.find((a) => a.element === t);
+  if (!r || !r.onResize)
     return;
-  const s = W({ group: e });
-  i.onResize(
-    {
-      asPercentage: k(
-        o.inlineSize / s * 100
-      ),
-      inPixels: o.inlineSize
-    },
-    i.id
-  );
+  const s = U({ group: e }), l = r.mutableValues.prevSize, i = {
+    asPercentage: k(
+      o.inlineSize / s * 100
+    ),
+    inPixels: o.inlineSize
+  };
+  r.mutableValues.prevSize = i, r.onResize(i, r.id, l);
 }
 function zt(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
@@ -1089,11 +1086,11 @@ function zt(e, t) {
   return !0;
 }
 function bt(e, t) {
-  const n = e.map((i) => i.id), o = Object.keys(t);
+  const n = e.map((r) => r.id), o = Object.keys(t);
   if (n.length !== o.length)
     return !1;
-  for (const i of n)
-    if (!o.includes(i))
+  for (const r of n)
+    if (!o.includes(r))
       return !1;
   return !0;
 }
@@ -1104,21 +1101,21 @@ function wt(e) {
     e.element.ownerDocument.defaultView,
     "Cannot register an unmounted Group"
   );
-  const n = e.element.ownerDocument.defaultView.ResizeObserver, o = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), s = new n((c) => {
+  const n = e.element.ownerDocument.defaultView.ResizeObserver, o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = new n((c) => {
     for (const d of c) {
       const { borderBoxSize: y, target: v } = d;
       if (v === e.element) {
         if (t) {
-          if (W({ group: e }) === 0)
+          if (U({ group: e }) === 0)
             return;
           M((x) => {
             const g = x.mountedGroups.get(e);
             if (g) {
-              const b = me(e), w = g.defaultLayoutDeferred ? Re(b) : g.layout, C = N({
+              const b = he(e), w = g.defaultLayoutDeferred ? Re(b) : g.layout, C = N({
                 layout: w,
                 panelConstraints: b
               });
-              return !g.defaultLayoutDeferred && U(w, C) && zt(
+              return !g.defaultLayoutDeferred && K(w, C) && zt(
                 g.derivedPanelConstraints,
                 b
               ) ? x : {
@@ -1143,43 +1140,43 @@ function wt(e) {
       `Panel ids must be unique; id "${c.id}" was used more than once`
     ), o.add(c.id), c.onResize && s.observe(c.element);
   });
-  const l = W({ group: e }), r = me(e), a = e.panels.map(({ id: c }) => c).join(",");
+  const l = U({ group: e }), i = he(e), a = e.panels.map(({ id: c }) => c).join(",");
   let u = e.defaultLayout;
   u && (bt(e.panels, u) || (u = void 0));
-  const f = e.inMemoryLayouts[a] ?? u ?? Re(r), p = N({
+  const f = e.inMemoryLayouts[a] ?? u ?? Re(i), p = N({
     layout: f,
-    panelConstraints: r
-  }), h = ke(e), m = e.element.ownerDocument;
+    panelConstraints: i
+  }), m = ke(e), h = e.element.ownerDocument;
   return M((c) => {
     const d = /* @__PURE__ */ new Map();
     return B.set(
-      m,
-      (B.get(m) ?? 0) + 1
-    ), h.forEach((y) => {
+      h,
+      (B.get(h) ?? 0) + 1
+    ), m.forEach((y) => {
       y.separator && d.set(y.separator, y.panels);
     }), {
       mountedGroups: new Map(c.mountedGroups).set(e, {
         defaultLayoutDeferred: l === 0,
-        derivedPanelConstraints: r,
+        derivedPanelConstraints: i,
         layout: p,
         separatorToPanels: d
       })
     };
   }), e.separators.forEach((c) => {
     z(
-      !i.has(c.id),
+      !r.has(c.id),
       `Separator ids must be unique; id "${c.id}" was used more than once`
-    ), i.add(c.id), c.element.addEventListener("keydown", ye);
-  }), B.get(m) === 1 && (m.addEventListener("pointerdown", ze), m.addEventListener("pointerleave", we), m.addEventListener("pointermove", Le), m.addEventListener("pointerup", Pe)), function() {
+    ), r.add(c.id), c.element.addEventListener("keydown", ye);
+  }), B.get(h) === 1 && (h.addEventListener("pointerdown", ze), h.addEventListener("pointerleave", we), h.addEventListener("pointermove", Le), h.addEventListener("pointerup", Pe)), function() {
     t = !1, B.set(
-      m,
-      Math.max(0, (B.get(m) ?? 0) - 1)
+      h,
+      Math.max(0, (B.get(h) ?? 0) - 1)
     ), M((d) => {
       const y = new Map(d.mountedGroups);
       return y.delete(e), { mountedGroups: y };
     }), e.separators.forEach((d) => {
       d.element.removeEventListener("keydown", ye);
-    }), B.get(m) || (m.removeEventListener("pointerdown", ze), m.removeEventListener("pointerleave", we), m.removeEventListener("pointermove", Le), m.removeEventListener("pointerup", Pe)), s.disconnect();
+    }), B.get(h) || (h.removeEventListener("pointerdown", ze), h.removeEventListener("pointerleave", we), h.removeEventListener("pointermove", Le), h.removeEventListener("pointerup", Pe)), s.disconnect();
   };
 }
 function ue(e) {
@@ -1191,7 +1188,10 @@ function ce(e) {
   const t = I(e);
   return A(() => {
     t.current = e;
-  }, [e]), qe((n) => t.current?.(n), [t]);
+  }, [e]), qe(
+    (...n) => t.current?.(...n),
+    [t]
+  );
 }
 function fe(...e) {
   return ce((t) => {
@@ -1222,7 +1222,7 @@ function He(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 Be = Ye(null);
+const Ve = Ye(null);
 function Pt(e, t) {
   const n = I({
     getLayout: () => ({}),
@@ -1240,18 +1240,18 @@ function Tt({
   className: t,
   defaultLayout: n,
   disableCursor: o,
-  disabled: i,
+  disabled: r,
   elementRef: s,
   groupRef: l,
-  id: r,
+  id: i,
   onLayoutChange: a,
   orientation: u = "horizontal",
   style: f,
   ...p
 }) {
-  const h = I({}), m = ce((L) => {
-    U(h.current, L) || (h.current = L, a?.(L));
-  }), c = ue(r), [d, y] = D(!1), v = I(null), [S, x] = D(n ?? {}), [g, b] = D([]), [w, C] = D([]), Y = I({
+  const m = I({}), h = ce((L) => {
+    K(m.current, L) || (m.current = L, a?.(L));
+  }), c = ue(i), [d, y] = D(!1), v = I(null), [S, x] = D(n ?? {}), [g, b] = D([]), [w, C] = D([]), $ = I({
     lastExpandedPanelSizes: {},
     layouts: {}
   }), oe = fe(v, s);
@@ -1272,40 +1272,40 @@ function Tt({
       })
     }),
     [c, u]
-  ), $ = Lt({
+  ), F = Lt({
     defaultLayout: n,
     disableCursor: o
-  }), F = I(null);
+  }), j = I(null);
   A(() => {
     const L = v.current;
     if (L === null)
       return;
     const P = {
-      defaultLayout: $.defaultLayout,
-      disableCursor: !!$.disableCursor,
-      disabled: !!i,
+      defaultLayout: F.defaultLayout,
+      disableCursor: !!F.disableCursor,
+      disabled: !!r,
       element: L,
       id: c,
-      inMemoryLastExpandedPanelSizes: Y.current.lastExpandedPanelSizes,
-      inMemoryLayouts: Y.current.layouts,
+      inMemoryLastExpandedPanelSizes: $.current.lastExpandedPanelSizes,
+      inMemoryLayouts: $.current.layouts,
       orientation: u,
       panels: g,
       separators: w
     };
-    F.current = P;
+    j.current = P;
     const O = wt(P), pe = G().mountedGroups.get(P);
     if (pe) {
-      const { defaultLayoutDeferred: j, derivedPanelConstraints: H, layout: Q } = pe;
-      !j && H.length > 0 && (x(Q), m?.(Q));
+      const { defaultLayoutDeferred: H, derivedPanelConstraints: V, layout: Q } = pe;
+      !H && V.length > 0 && (x(Q), h?.(Q));
     }
-    const Ve = _.addListener(
+    const Be = _.addListener(
       "interactionStateChange",
-      (j) => {
-        switch (j.state) {
+      (H) => {
+        switch (H.state) {
           case "active": {
             y(
-              j.hitRegions.some(
-                (H) => H.group === P
+              H.hitRegions.some(
+                (V) => V.group === P
               )
             );
             break;
@@ -1318,29 +1318,29 @@ function Tt({
       }
     ), We = _.addListener(
       "mountedGroupsChange",
-      (j) => {
-        const H = j.get(P);
-        if (H) {
-          const { defaultLayoutDeferred: Q, derivedPanelConstraints: Ue, layout: he } = H;
+      (H) => {
+        const V = H.get(P);
+        if (V) {
+          const { defaultLayoutDeferred: Q, derivedPanelConstraints: Ue, layout: me } = V;
           if (Q || Ue.length === 0)
             return;
-          x(he), m?.(he);
+          x(me), h?.(me);
         }
       }
     );
     return () => {
-      F.current = null, O(), Ve(), We();
+      j.current = null, O(), Be(), We();
     };
   }, [
-    i,
+    r,
     c,
-    m,
+    h,
     u,
     g,
     w,
-    $
+    F
   ]), Ce(() => {
-    const L = F.current;
+    const L = j.current;
     L && (L.defaultLayout = n, L.disableCursor = !!o);
   });
   const J = {
@@ -1350,7 +1350,7 @@ function Tt({
     const P = He(c, L), O = S[L];
     J[P] = O;
   }
-  return /* @__PURE__ */ K(Be.Provider, { value: Z, children: /* @__PURE__ */ K(
+  return /* @__PURE__ */ X(Ve.Provider, { value: Z, children: /* @__PURE__ */ X(
     "div",
     {
       ...p,
@@ -1379,7 +1379,7 @@ function Rt(e, t = 10) {
     }, t);
   };
 }
-function ie(e, t) {
+function re(e, t) {
   return `react-resizable-panels:${[e, ...t].join(":")}`;
 }
 function _t({
@@ -1388,25 +1388,25 @@ function _t({
   storage: n,
   ...o
 }) {
-  const i = t !== void 0, s = "id" in o ? o.id : o.groupId, l = ie(s, t ?? []), r = Ze(
+  const r = t !== void 0, s = "id" in o ? o.id : o.groupId, l = re(s, t ?? []), i = Ze(
     Ct,
     () => n.getItem(l),
     () => n.getItem(l)
   ), a = se(
-    () => r ? JSON.parse(r) : void 0,
-    [r]
+    () => i ? JSON.parse(i) : void 0,
+    [i]
   ), u = se(() => {
     const f = (p) => {
-      let h;
-      i ? h = ie(s, Object.keys(p)) : h = ie(s, []);
+      let m;
+      r ? m = re(s, Object.keys(p)) : m = re(s, []);
       try {
-        n.setItem(h, JSON.stringify(p));
-      } catch (m) {
-        console.error(m);
+        n.setItem(m, JSON.stringify(p));
+      } catch (h) {
+        console.error(h);
       }
     };
     return e > 0 ? Rt(f, e) : f;
-  }, [e, i, s, n]);
+  }, [e, r, s, n]);
   return {
     defaultLayout: a,
     onLayoutChange: u
@@ -1423,7 +1423,7 @@ function At() {
   return I(null);
 }
 function de() {
-  const e = Je(Be);
+  const e = Je(Ve);
   return z(
     e,
     "Group Context not found; did you render a Panel or Separator outside of a Group?"
@@ -1434,106 +1434,106 @@ function Et({
   panelId: t
 }) {
   const n = () => {
-    const { mountedGroups: r } = G();
+    const { mountedGroups: i } = G();
     for (const [
       a,
       {
         defaultLayoutDeferred: u,
         derivedPanelConstraints: f,
         layout: p,
-        separatorToPanels: h
+        separatorToPanels: m
       }
-    ] of r)
+    ] of i)
       if (a.id === e)
         return {
           defaultLayoutDeferred: u,
           derivedPanelConstraints: f,
           group: a,
           layout: p,
-          separatorToPanels: h
+          separatorToPanels: m
         };
     throw Error(`Group ${e} not found`);
   }, o = () => {
-    const r = n().derivedPanelConstraints.find(
+    const i = n().derivedPanelConstraints.find(
       (a) => a.panelId === t
     );
-    if (r !== void 0)
-      return r;
+    if (i !== void 0)
+      return i;
     throw Error(`Panel constraints not found for Panel ${t}`);
-  }, i = () => {
-    const r = n().group.panels.find((a) => a.id === t);
-    if (r !== void 0)
-      return r;
+  }, r = () => {
+    const i = n().group.panels.find((a) => a.id === t);
+    if (i !== void 0)
+      return i;
     throw Error(`Layout not found for Panel ${t}`);
   }, s = () => {
-    const r = n().layout[t];
-    if (r !== void 0)
-      return r;
+    const i = n().layout[t];
+    if (i !== void 0)
+      return i;
     throw Error(`Layout not found for Panel ${t}`);
-  }, l = (r) => {
+  }, l = (i) => {
     const a = s();
-    if (r === a)
+    if (i === a)
       return;
     const {
       defaultLayoutDeferred: u,
       derivedPanelConstraints: f,
       group: p,
-      layout: h,
-      separatorToPanels: m
-    } = n(), c = p.panels.findIndex((S) => S.id === t), d = c === p.panels.length - 1, y = q({
-      delta: d ? a - r : r - a,
-      initialLayout: h,
+      layout: m,
+      separatorToPanels: h
+    } = n(), c = p.panels.findIndex((S) => S.id === t), d = c === p.panels.length - 1, y = Y({
+      delta: d ? a - i : i - a,
+      initialLayout: m,
       panelConstraints: f,
       pivotIndices: d ? [c - 1, c] : [c, c + 1],
-      prevLayout: h,
+      prevLayout: m,
       trigger: "imperative-api"
     }), v = N({
       layout: y,
       panelConstraints: f
     });
-    U(h, v) || M((S) => ({
+    K(m, v) || M((S) => ({
       mountedGroups: new Map(S.mountedGroups).set(p, {
         defaultLayoutDeferred: u,
         derivedPanelConstraints: f,
         layout: v,
-        separatorToPanels: m
+        separatorToPanels: h
       })
     }));
   };
   return {
     collapse: () => {
-      const { collapsible: r, collapsedSize: a } = o(), { expandToSizeRef: u } = i(), f = s();
-      r && f !== a && (u.current = f, l(a));
+      const { collapsible: i, collapsedSize: a } = o(), { mutableValues: u } = r(), f = s();
+      i && f !== a && (u.expandToSize = f, l(a));
     },
     expand: () => {
-      const { collapsible: r, collapsedSize: a, minSize: u } = o(), { expandToSizeRef: f } = i(), p = s();
-      if (r && p === a) {
-        let h = f.current ?? u;
-        h === 0 && (h = 1), l(h);
+      const { collapsible: i, collapsedSize: a, minSize: u } = o(), { mutableValues: f } = r(), p = s();
+      if (i && p === a) {
+        let m = f.expandToSize ?? u;
+        m === 0 && (m = 1), l(m);
       }
     },
     getSize: () => {
-      const { group: r } = n(), a = s(), { element: u } = i(), f = r.orientation === "horizontal" ? u.offsetWidth : u.offsetHeight;
+      const { group: i } = n(), a = s(), { element: u } = r(), f = i.orientation === "horizontal" ? u.offsetWidth : u.offsetHeight;
       return {
         asPercentage: a,
         inPixels: f
       };
     },
     isCollapsed: () => {
-      const { collapsible: r, collapsedSize: a } = o(), u = s();
-      return r && R(a, u);
+      const { collapsible: i, collapsedSize: a } = o(), u = s();
+      return i && R(a, u);
     },
-    resize: (r) => {
-      if (s() !== r) {
+    resize: (i) => {
+      if (s() !== i) {
         let u;
-        switch (typeof r) {
+        switch (typeof i) {
           case "number": {
-            const { group: f } = n(), p = W({ group: f });
-            u = k(r / p * 100);
+            const { group: f } = n(), p = U({ group: f });
+            u = k(i / p * 100);
             break;
           }
           case "string": {
-            u = parseFloat(r);
+            u = parseFloat(i);
             break;
           }
         }
@@ -1544,14 +1544,14 @@ function Et({
 }
 function Mt(e, t) {
   const { id: n } = de(), o = I({
-    collapse: re,
-    expand: re,
+    collapse: ie,
+    expand: ie,
     getSize: () => ({
       asPercentage: 0,
       inPixels: 0
     }),
     isCollapsed: () => !1,
-    resize: re
+    resize: ie
   });
   Ee(t, () => o.current, []), A(() => {
     Object.assign(
@@ -1565,53 +1565,58 @@ function $t({
   className: t,
   collapsedSize: n = "0%",
   collapsible: o = !1,
-  defaultSize: i,
+  defaultSize: r,
   elementRef: s,
   id: l,
-  maxSize: r = "100%",
+  maxSize: i = "100%",
   minSize: a = "0%",
   onResize: u,
   panelRef: f,
   style: p,
-  ...h
+  ...m
 }) {
-  const m = !!l, c = ue(l), d = I(null), y = fe(d, s), { id: v, registerPanel: S } = de(), x = u !== null, g = ce((w) => {
-    u?.(w, l);
-  });
+  const h = !!l, c = ue(l), d = I(null), y = fe(d, s), { id: v, registerPanel: S } = de(), x = u !== null, g = ce(
+    (w, C, $) => {
+      u?.(w, l, $);
+    }
+  );
   A(() => {
     const w = d.current;
     if (w !== null)
       return S({
         element: w,
-        expandToSizeRef: { current: void 0 },
         id: c,
-        idIsStable: m,
+        idIsStable: h,
+        mutableValues: {
+          expandToSize: void 0,
+          prevSize: void 0
+        },
         onResize: x ? g : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
-          defaultSize: i,
-          maxSize: r,
+          defaultSize: r,
+          maxSize: i,
           minSize: a
         }
       });
   }, [
     n,
     o,
-    i,
+    r,
     x,
     c,
-    m,
-    r,
+    h,
+    i,
     a,
     g,
     S
   ]), Mt(c, f);
   const b = He(v, c);
-  return /* @__PURE__ */ K(
+  return /* @__PURE__ */ X(
     "div",
     {
-      ...h,
+      ...m,
       "data-panel": !0,
       "data-testid": c,
       id: c,
@@ -1627,7 +1632,7 @@ function $t({
         // This avoid edge cases like nested iframes
         pointerEvents: `var(${je})`
       },
-      children: /* @__PURE__ */ K(
+      children: /* @__PURE__ */ X(
         "div",
         {
           className: t,
@@ -1670,14 +1675,14 @@ function kt({
   panelId: n,
   panelIndex: o
 }) {
-  let i, s;
-  const l = e[n], r = t.find(
+  let r, s;
+  const l = e[n], i = t.find(
     (a) => a.panelId === n
   );
-  if (r) {
-    const a = r.maxSize, u = s = r.collapsible ? r.collapsedSize : r.minSize, f = [o, o + 1];
+  if (i) {
+    const a = i.maxSize, u = s = i.collapsible ? i.collapsedSize : i.minSize, f = [o, o + 1];
     s = N({
-      layout: q({
+      layout: Y({
         delta: u - l,
         initialLayout: e,
         panelConstraints: t,
@@ -1686,8 +1691,8 @@ function kt({
         trigger: "keyboard"
       }),
       panelConstraints: t
-    })[n], i = N({
-      layout: q({
+    })[n], r = N({
+      layout: Y({
         delta: a - l,
         initialLayout: e,
         panelConstraints: t,
@@ -1700,7 +1705,7 @@ function kt({
   }
   return {
     valueControls: n,
-    valueMax: i,
+    valueMax: r,
     valueMin: s,
     valueNow: l
   };
@@ -1710,10 +1715,10 @@ function Ht({
   className: t,
   elementRef: n,
   id: o,
-  style: i,
+  style: r,
   ...s
 }) {
-  const l = ue(o), [r, a] = D({}), [u, f] = D("inactive"), [p, h] = D(null), m = fe(h, n), {
+  const l = ue(o), [i, a] = D({}), [u, f] = D("inactive"), [p, m] = D(null), h = fe(m, n), {
     id: c,
     orientation: d,
     registerSeparator: y
@@ -1736,16 +1741,16 @@ function Ht({
         "mountedGroupsChange",
         (w) => {
           w.forEach(
-            ({ derivedPanelConstraints: C, layout: Y, separatorToPanels: oe }, Z) => {
+            ({ derivedPanelConstraints: C, layout: $, separatorToPanels: oe }, Z) => {
               if (Z.id === c) {
-                const $ = oe.get(S);
-                if ($) {
-                  const F = $[0], J = Z.panels.indexOf(F);
+                const F = oe.get(S);
+                if (F) {
+                  const j = F[0], J = Z.panels.indexOf(j);
                   a(
                     kt({
-                      layout: Y,
+                      layout: $,
                       panelConstraints: C,
-                      panelId: F.id,
+                      panelId: j.id,
                       panelIndex: J
                     })
                   );
@@ -1759,25 +1764,25 @@ function Ht({
         g(), b(), x();
       };
     }
-  }, [p, c, l, y]), /* @__PURE__ */ K(
+  }, [p, c, l, y]), /* @__PURE__ */ X(
     "div",
     {
       ...s,
-      "aria-controls": r.valueControls,
+      "aria-controls": i.valueControls,
       "aria-orientation": v,
-      "aria-valuemax": r.valueMax,
-      "aria-valuemin": r.valueMin,
-      "aria-valuenow": r.valueNow,
+      "aria-valuemax": i.valueMax,
+      "aria-valuemin": i.valueMin,
+      "aria-valuenow": i.valueNow,
       children: e,
       className: t,
       "data-separator": u,
       "data-testid": l,
       id: l,
-      ref: m,
+      ref: h,
       role: "separator",
       style: {
         flexBasis: "auto",
-        ...i,
+        ...r,
         flexGrow: 0,
         flexShrink: 0
       },