react-resizable-panels 4.0.10 → 4.0.12

package/dist/react-resizable-panels.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as K } from "react/jsx-runtime";
-import { useId as Xe, useLayoutEffect as Ye, useEffect as Ce, useRef as O, useCallback as Ee, createContext as qe, useImperativeHandle as Me, useState as I, useMemo as Ie, useSyncExternalStore as Ze, useContext as Je } from "react";
+import { useId as Ve, useLayoutEffect as Ke, useEffect as Re, useRef as O, useCallback as Xe, createContext as Ye, useImperativeHandle as Ee, useState as k, useMemo as se, useSyncExternalStore as qe, useContext as Ze } from "react";
 function z(e, t = "Assertion error") {
   if (!e)
     throw Error(t);
@@ -11,20 +11,20 @@ function B({
   const { orientation: t, panels: n } = e;
   return n.reduce((o, r) => (o += t === "horizontal" ? r.element.offsetWidth : r.element.offsetHeight, o), 0);
 }
-function se(e, t) {
+function ae(e, t) {
   return t.sort(
-    e === "horizontal" ? Qe : et
+    e === "horizontal" ? Je : Qe
   );
 }
-function Qe(e, t) {
+function Je(e, t) {
   const n = e.element.offsetLeft - t.element.offsetLeft;
   return n !== 0 ? n : e.element.offsetWidth - t.element.offsetWidth;
 }
-function et(e, t) {
+function Qe(e, t) {
   const n = e.element.offsetTop - t.element.offsetTop;
   return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
 }
-function Ge(e, t) {
+function Me(e, t) {
   return {
     x: e.x >= t.left && e.x <= t.right ? 0 : Math.min(
       Math.abs(e.x - t.left),
@@ -36,7 +36,7 @@ function Ge(e, t) {
     )
   };
 }
-function tt({
+function et({
   orientation: e,
   rects: t,
   targetRect: n
@@ -47,13 +47,13 @@ function tt({
   };
   let r, a = Number.MAX_VALUE;
   for (const l of t) {
-    const { x: i, y: s } = Ge(o, l), u = e === "horizontal" ? i : s;
+    const { x: i, y: s } = Me(o, l), u = e === "horizontal" ? i : s;
     u < a && (a = u, r = l);
   }
   return z(r, "No rect found"), r;
 }
 function ke(e) {
-  const { element: t, orientation: n, panels: o, separators: r } = e, a = se(
+  const { element: t, orientation: n, panels: o, separators: r } = e, a = ae(
     n,
     Array.from(t.children).filter((c) => c instanceof HTMLElement).map((c) => ({ element: c }))
   ).map(({ element: c }) => c), l = [];
@@ -83,14 +83,14 @@ function ke(e) {
                 break;
               }
               case 1: {
-                const g = u[0], v = tt({
+                const v = u[0], S = et({
                   orientation: n,
                   rects: [m, p],
-                  targetRect: g.element.getBoundingClientRect()
+                  targetRect: v.element.getBoundingClientRect()
                 });
                 f = [
-                  g,
-                  v === m ? y : d
+                  v,
+                  S === m ? y : d
                 ];
                 break;
               }
@@ -133,21 +133,21 @@ function ke(e) {
       i = !0;
   return l;
 }
-function nt(e, t) {
+function tt(e, t) {
   const n = getComputedStyle(e), o = parseFloat(n.fontSize);
   return t * o;
 }
-function ot(e, t) {
+function nt(e, t) {
   const n = getComputedStyle(e.ownerDocument.body), o = parseFloat(n.fontSize);
   return t * o;
 }
-function it(e) {
+function ot(e) {
   return e / 100 * window.innerHeight;
 }
-function rt(e) {
+function it(e) {
   return e / 100 * window.innerWidth;
 }
-function st(e) {
+function rt(e) {
   switch (typeof e) {
     case "number":
       return [e, "px"];
@@ -163,7 +163,7 @@ function te({
   styleProp: n
 }) {
   let o;
-  const [r, a] = st(n);
+  const [r, a] = rt(n);
   switch (a) {
     case "%": {
       o = r / 100 * e;
@@ -174,25 +174,25 @@ function te({
       break;
     }
     case "rem": {
-      o = ot(t, r);
+      o = nt(t, r);
       break;
     }
     case "em": {
-      o = nt(t, r);
+      o = tt(t, r);
       break;
     }
     case "vh": {
-      o = it(r);
+      o = ot(r);
       break;
     }
     case "vw": {
-      o = rt(r);
+      o = it(r);
       break;
     }
   }
   return o;
 }
-function G(e) {
+function I(e) {
   return parseFloat(e.toFixed(3));
 }
 function ye(e) {
@@ -213,7 +213,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.collapsedSize
       });
-      l = G(c / n * 100);
+      l = I(c / n * 100);
     }
     let i;
     if (a.defaultSize) {
@@ -222,7 +222,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.defaultSize
       });
-      i = G(c / n * 100);
+      i = I(c / n * 100);
     }
     let s = 0;
     if (a.minSize) {
@@ -231,7 +231,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.minSize
       });
-      s = G(c / n * 100);
+      s = I(c / n * 100);
     }
     let u = 100;
     if (a.maxSize) {
@@ -240,7 +240,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.maxSize
       });
-      u = G(c / n * 100);
+      u = I(c / n * 100);
     }
     return {
       collapsedSize: l,
@@ -252,7 +252,7 @@ function ye(e) {
     };
   });
 }
-class at {
+class st {
   #e = {};
   addListener(t, n) {
     const o = this.#e[t];
@@ -292,28 +292,28 @@ class at {
   }
 }
 function P(e, t, n = 0) {
-  return Math.abs(G(e) - G(t)) <= n;
+  return Math.abs(I(e) - I(t)) <= n;
 }
-let C = {
+let R = {
   cursorFlags: 0,
   interactionState: {
     state: "inactive"
   },
   mountedGroups: /* @__PURE__ */ new Map()
 };
-const _ = new at();
+const _ = new st();
 function D() {
-  return C;
+  return R;
 }
 function E(e) {
-  const t = typeof e == "function" ? e(C) : e;
-  if (C === t)
-    return C;
-  const n = C;
-  return C = {
-    ...C,
+  const t = typeof e == "function" ? e(R) : e;
+  if (R === t)
+    return R;
+  const n = R;
+  return R = {
+    ...R,
     ...t
-  }, t.cursorFlags !== void 0 && _.emit("cursorFlagsChange", C.cursorFlags), t.interactionState !== void 0 && _.emit("interactionStateChange", C.interactionState), t.mountedGroups !== void 0 && (C.mountedGroups.forEach((o, r) => {
+  }, t.cursorFlags !== void 0 && _.emit("cursorFlagsChange", R.cursorFlags), t.interactionState !== void 0 && _.emit("interactionStateChange", R.interactionState), t.mountedGroups !== void 0 && (R.mountedGroups.forEach((o, r) => {
     o.derivedPanelConstraints.forEach((a) => {
       if (a.collapsible) {
         const { layout: l } = n.mountedGroups.get(r) ?? {};
@@ -329,14 +329,14 @@ function E(e) {
         }
       }
     });
-  }), _.emit("mountedGroupsChange", C.mountedGroups)), C;
+  }), _.emit("mountedGroupsChange", R.mountedGroups)), R;
 }
-const lt = (e) => e, ie = () => {
-}, De = 1, Oe = 2, Te = 4, _e = 8, ge = {
+const at = (e) => e, ie = () => {
+}, Ie = 1, Ge = 2, De = 4, Oe = 8, ge = {
   coarse: 10,
   precise: 5
 };
-function ut({
+function lt({
   cursorFlags: e,
   groups: t,
   state: n
@@ -363,7 +363,7 @@ function ut({
     return null;
   switch (n) {
     case "active": {
-      const a = (e & De) !== 0, l = (e & Oe) !== 0, i = (e & Te) !== 0, s = (e & _e) !== 0;
+      const a = (e & Ie) !== 0, l = (e & Ge) !== 0, i = (e & De) !== 0, s = (e & Oe) !== 0;
       if (e) {
         if (a)
           return i ? "se-resize" : s ? "ne-resize" : "e-resize";
@@ -379,30 +379,30 @@ function ut({
   }
   return o > 0 && r > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
 }
-let re, k;
+let re, G;
 function le() {
-  k === void 0 && (k = new CSSStyleSheet(), document.adoptedStyleSheets = [k]);
+  G === void 0 && (G = new CSSStyleSheet(), document.adoptedStyleSheets = [G]);
   const { cursorFlags: e, interactionState: t } = D();
   switch (t.state) {
     case "active":
     case "hover": {
-      const n = ut({
+      const n = lt({
         cursorFlags: e,
         groups: t.hitRegions.map((r) => r.group),
         state: t.state
       }), o = `*{cursor: ${n} !important; ${t.state === "active" ? "touch-action: none;" : ""} }`;
       if (re === o)
         return;
-      re = o, n ? k.cssRules.length === 0 ? k.insertRule(o) : k.replaceSync(o) : k.cssRules.length === 1 && k.deleteRule(0);
+      re = o, n ? G.cssRules.length === 0 ? G.insertRule(o) : G.replaceSync(o) : G.cssRules.length === 1 && G.deleteRule(0);
       break;
     }
     case "inactive": {
-      re = void 0, k.cssRules.length === 1 && k.deleteRule(0);
+      re = void 0, G.cssRules.length === 1 && G.deleteRule(0);
       break;
     }
   }
 }
-function ct(e, t) {
+function ut(e, t) {
   if (e.length !== t.length)
     return !1;
   for (let n = 0; n < e.length; n++)
@@ -413,7 +413,7 @@ function ct(e, t) {
 function X(e, t) {
   return P(e, t) ? 0 : e > t ? 1 : -1;
 }
-function j({
+function W({
   panelConstraints: e,
   size: t
 }) {
@@ -429,7 +429,7 @@ function j({
       X(t, l) < 0 ? t = n : t = a;
     } else
       t = a;
-  return t = Math.min(r, t), t = G(t), t;
+  return t = Math.min(r, t), t = I(t), t;
 }
 function Y({
   delta: e,
@@ -453,17 +453,17 @@ function Y({
       );
       const {
         collapsedSize: y = 0,
-        collapsible: g,
-        minSize: v = 0
+        collapsible: v,
+        minSize: S = 0
       } = d;
-      if (g) {
+      if (v) {
         const x = l[f];
         if (z(
           x != null,
           `Previous layout not found for panel index ${f}`
         ), P(x, y)) {
-          const S = v - x;
-          X(S, Math.abs(e)) > 0 && (e = e < 0 ? 0 - S : S);
+          const g = S - x;
+          X(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
@@ -475,17 +475,17 @@ function Y({
       );
       const {
         collapsedSize: y = 0,
-        collapsible: g,
-        minSize: v = 0
+        collapsible: v,
+        minSize: S = 0
       } = d;
-      if (g) {
+      if (v) {
         const x = l[f];
         if (z(
           x != null,
           `Previous layout not found for panel index ${f}`
-        ), P(x, v)) {
-          const S = x - y;
-          X(S, Math.abs(e)) > 0 && (e = e < 0 ? 0 - S : S);
+        ), P(x, S)) {
+          const g = x - y;
+          X(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
@@ -494,41 +494,41 @@ function Y({
     const f = e < 0 ? 1 : -1;
     let d = e < 0 ? c : u, y = 0;
     for (; ; ) {
-      const v = l[d];
+      const S = l[d];
       z(
-        v != null,
+        S != null,
         `Previous layout not found for panel index ${d}`
       );
-      const S = j({
+      const g = W({
         panelConstraints: n[d],
         size: 100
-      }) - v;
-      if (y += S, d += f, d < 0 || d >= n.length)
+      }) - S;
+      if (y += g, d += f, d < 0 || d >= n.length)
         break;
     }
-    const g = Math.min(Math.abs(e), Math.abs(y));
-    e = e < 0 ? 0 - g : g;
+    const v = Math.min(Math.abs(e), Math.abs(y));
+    e = e < 0 ? 0 - v : v;
   }
   {
     let d = e < 0 ? u : c;
     for (; d >= 0 && d < n.length; ) {
-      const y = Math.abs(e) - Math.abs(h), g = l[d];
+      const y = Math.abs(e) - Math.abs(h), v = l[d];
       z(
-        g != null,
+        v != null,
         `Previous layout not found for panel index ${d}`
       );
-      const v = g - y, x = j({
+      const S = v - y, x = W({
         panelConstraints: n[d],
-        size: v
+        size: S
       });
-      if (!P(g, x) && (h += g - x, s[d] = x, h.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+      if (!P(v, x) && (h += v - x, s[d] = x, h.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
         numeric: !0
       }) >= 0))
         break;
       e < 0 ? d-- : d++;
     }
   }
-  if (ct(i, s))
+  if (ut(i, s))
     return r;
   {
     const f = e < 0 ? c : u, d = l[f];
@@ -536,25 +536,25 @@ function Y({
       d != null,
       `Previous layout not found for panel index ${f}`
     );
-    const y = d + h, g = j({
+    const y = d + h, v = W({
       panelConstraints: n[f],
       size: y
     });
-    if (s[f] = g, !P(g, y)) {
-      let v = y - g, S = e < 0 ? c : u;
-      for (; S >= 0 && S < n.length; ) {
-        const b = s[S];
+    if (s[f] = v, !P(v, y)) {
+      let S = y - v, g = e < 0 ? c : u;
+      for (; g >= 0 && g < n.length; ) {
+        const b = s[g];
         z(
           b != null,
-          `Previous layout not found for panel index ${S}`
+          `Previous layout not found for panel index ${g}`
         );
-        const L = b + v, R = j({
-          panelConstraints: n[S],
+        const L = b + S, C = W({
+          panelConstraints: n[g],
           size: L
         });
-        if (P(b, R) || (v -= R - b, s[S] = R), P(v, 0))
+        if (P(b, C) || (S -= C - b, s[g] = C), P(S, 0))
           break;
-        e > 0 ? S-- : S++;
+        e > 0 ? g-- : g++;
       }
     }
   }
@@ -575,7 +575,7 @@ function U(e, t) {
       return !1;
   return !0;
 }
-function Ae({
+function Te({
   event: e,
   hitRegions: t,
   initialLayoutMap: n,
@@ -591,27 +591,27 @@ function Ae({
     const f = n.get(s), {
       defaultLayoutDeferred: d,
       derivedPanelConstraints: y,
-      layout: g,
-      separatorToPanels: v
+      layout: v,
+      separatorToPanels: S
     } = o.get(s) ?? { defaultLayoutDeferred: !1 };
-    if (y && f && g && v) {
+    if (y && f && v && S) {
       const x = Y({
         delta: p,
         initialLayout: f,
         panelConstraints: y,
-        pivotIndices: i.panels.map((S) => m.indexOf(S)),
-        prevLayout: g,
+        pivotIndices: i.panels.map((g) => m.indexOf(g)),
+        prevLayout: v,
         trigger: "mouse-or-touch"
       });
-      if (U(x, g)) {
+      if (U(x, v)) {
         if (p !== 0 && !c)
           switch (h) {
             case "horizontal": {
-              a |= p < 0 ? De : Oe;
+              a |= p < 0 ? Ie : Ge;
               break;
             }
             case "vertical": {
-              a |= p < 0 ? Te : _e;
+              a |= p < 0 ? De : Oe;
               break;
             }
           }
@@ -620,10 +620,10 @@ function Ae({
           defaultLayoutDeferred: d,
           derivedPanelConstraints: y,
           layout: x,
-          separatorToPanels: v
+          separatorToPanels: S
         });
-        const S = i.group.panels.map(({ id: b }) => b).join(",");
-        i.group.inMemoryLayouts[S] = x;
+        const g = i.group.panels.map(({ id: b }) => b).join(",");
+        i.group.inMemoryLayouts[g] = x;
       }
     }
   }), E({
@@ -642,7 +642,7 @@ function ve(e) {
   switch (t.state) {
     case "active":
       t.hitRegions.forEach((o) => {
-        e.currentTarget === o.group.element && Ae({
+        e.currentTarget === o.group.element && Te({
           event: e,
           hitRegions: t.hitRegions,
           initialLayoutMap: t.initialLayoutMap,
@@ -683,7 +683,7 @@ function A({
   for (let i = 0; i < t.length; i++) {
     const s = o[i];
     z(s != null, `No layout data found for index ${i}`);
-    const u = j({
+    const u = W({
       panelConstraints: t[i],
       size: s
     });
@@ -693,7 +693,7 @@ function A({
     for (let i = 0; i < t.length; i++) {
       const s = o[i];
       z(s != null, `No layout data found for index ${i}`);
-      const u = s + a, c = j({
+      const u = s + a, c = W({
         panelConstraints: t[i],
         size: u
       });
@@ -703,7 +703,7 @@ function A({
   const l = Object.keys(e);
   return o.reduce((i, s, u) => (i[l[u]] = s, i), {});
 }
-function Ne({
+function _e({
   groupId: e
 }) {
   const t = () => {
@@ -740,18 +740,18 @@ function Ne({
     }
   };
 }
-function $e(e) {
+function Ae(e) {
   const { mountedGroups: t } = D(), n = t.get(e);
   return z(n, `Mounted Group ${e.id} not found`), n;
 }
 function T(e, t) {
-  const n = oe(e), o = $e(n), r = n.separators.find(
+  const n = oe(e), o = Ae(n), r = n.separators.find(
     (h) => h.element === e
   );
   z(r, "Matching separator not found");
   const a = o.separatorToPanels.get(r);
   z(a, "Matching panels not found");
-  const l = a.map((h) => n.panels.indexOf(h)), s = Ne({ groupId: n.id }).getLayout(), u = Y({
+  const l = a.map((h) => n.panels.indexOf(h)), s = _e({ groupId: n.id }).getLayout(), u = Y({
     delta: t,
     initialLayout: s,
     panelConstraints: o.derivedPanelConstraints,
@@ -799,7 +799,7 @@ function Se(e) {
       }
       case "Enter": {
         e.preventDefault();
-        const o = oe(t), { derivedPanelConstraints: r, layout: a, separatorToPanels: l } = $e(o), i = o.separators.find(
+        const o = oe(t), { derivedPanelConstraints: r, layout: a, separatorToPanels: l } = Ae(o), i = o.separators.find(
           (h) => h.element === t
         );
         z(i, "Matching separator not found");
@@ -832,13 +832,13 @@ function Se(e) {
       }
     }
 }
-function ft(e, t, n) {
+function ct(e, t, n) {
   let o, r = {
     x: 1 / 0,
     y: 1 / 0
   };
   for (const a of t) {
-    const l = Ge(n, a.rect);
+    const l = Me(n, a.rect);
     switch (e) {
       case "horizontal": {
         l.x <= r.x && (o = a, r = l);
@@ -856,10 +856,10 @@ function ft(e, t, n) {
   } : void 0;
 }
 let ne;
-function dt() {
+function ft() {
   return ne === void 0 && (typeof matchMedia == "function" ? ne = !!matchMedia("(pointer:coarse)").matches : ne = !1), ne;
 }
-function pt(e, t) {
+function dt(e, t) {
   if (e === t) throw new Error("Cannot compare node with itself");
   const n = {
     a: we(e),
@@ -890,20 +890,20 @@ function pt(e, t) {
   }
   return Math.sign(r.a - r.b);
 }
-const ht = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
-function mt(e) {
-  const t = getComputedStyle(Fe(e) ?? e).display;
+const pt = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+function ht(e) {
+  const t = getComputedStyle(Ne(e) ?? e).display;
   return t === "flex" || t === "inline-flex";
 }
-function yt(e) {
+function mt(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" || pt.test(t.willChange) || t.webkitOverflowScrolling === "touch");
 }
 function xe(e) {
   let t = e.length;
   for (; t--; ) {
     const n = e[t];
-    if (z(n, "Missing node"), yt(n)) return n;
+    if (z(n, "Missing node"), mt(n)) return n;
   }
   return null;
 }
@@ -913,45 +913,45 @@ function ze(e) {
 function we(e) {
   const t = [];
   for (; e; )
-    t.push(e), e = Fe(e);
+    t.push(e), e = Ne(e);
   return t;
 }
-function Fe(e) {
+function Ne(e) {
   const { parentNode: t } = e;
   return t && t instanceof ShadowRoot ? t.host : t;
 }
-function gt(e, t) {
+function yt(e, t) {
   return e.x < t.x + t.width && e.x + e.width > t.x && e.y < t.y + t.height && e.y + e.height > t.y;
 }
-function vt({
+function gt({
   groupElement: e,
   hitRegion: t,
   pointerEventTarget: n
 }) {
   if (!(n instanceof HTMLElement) || n.contains(e) || e.contains(n))
     return !0;
-  if (pt(n, e) > 0) {
+  if (dt(n, e) > 0) {
     let o = n;
     for (; o; ) {
       if (o.contains(e))
         return !0;
-      if (gt(o.getBoundingClientRect(), t))
+      if (yt(o.getBoundingClientRect(), t))
         return !1;
       o = o.parentElement;
     }
   }
   return !0;
 }
-function He(e, t) {
+function $e(e, t) {
   const n = [];
   return t.forEach((o, r) => {
     if (r.disabled)
       return;
-    const a = dt() ? ge.coarse : ge.precise, l = ke(r), i = ft(r.orientation, l, {
+    const a = ft() ? ge.coarse : ge.precise, l = ke(r), i = ct(r.orientation, l, {
       x: e.clientX,
       y: e.clientY
     });
-    i && i.distance.x <= a && i.distance.y <= a && vt({
+    i && i.distance.x <= a && i.distance.y <= a && gt({
       groupElement: r.element,
       hitRegion: i.hitRegion.rect,
       pointerEventTarget: e.target
@@ -961,7 +961,7 @@ function He(e, t) {
 function be(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = D(), n = He(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map();
+  const { mountedGroups: t } = D(), n = $e(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map();
   let i = !1;
   n.forEach((s) => {
     o.add(s.group), s.panels.forEach((c) => {
@@ -998,7 +998,7 @@ function Le(e) {
         );
         return;
       }
-      Ae({
+      Te({
         event: e,
         hitRegions: t.hitRegions,
         initialLayoutMap: t.initialLayoutMap,
@@ -1008,7 +1008,7 @@ function Le(e) {
       break;
     }
     default: {
-      const o = He(e, n);
+      const o = $e(e, n);
       o.length === 0 ? t.state !== "inactive" && E({
         interactionState: { state: "inactive" }
       }) : E({
@@ -1036,25 +1036,25 @@ function Pe(e) {
       }), le();
   }
 }
-function Re(e) {
+function Ce(e) {
   let t = 0, n = 0;
   const o = {};
   for (const a of e)
     if (a.defaultSize !== void 0) {
       t++;
-      const l = G(a.defaultSize);
+      const l = I(a.defaultSize);
       n += l, o[a.panelId] = l;
     } else
       o[a.panelId] = void 0;
   const r = e.length - t;
   if (r !== 0) {
-    const a = G((100 - n) / r);
+    const a = I((100 - n) / r);
     for (const l of e)
       l.defaultSize === void 0 && (o[l.panelId] = a);
   }
   return o;
 }
-function St(e, t, n) {
+function vt(e, t, n) {
   const o = n[0];
   if (!o)
     return;
@@ -1064,7 +1064,7 @@ function St(e, t, n) {
   const a = B({ group: e });
   r.onResize(
     {
-      asPercentage: G(
+      asPercentage: I(
         o.inlineSize / a * 100
       ),
       inPixels: o.inlineSize
@@ -1072,6 +1072,14 @@ function St(e, t, n) {
     r.id
   );
 }
+function St(e, t) {
+  if (Object.keys(e).length !== Object.keys(t).length)
+    return !1;
+  for (const o in e)
+    if (e[o] !== t[o])
+      return !1;
+  return !0;
+}
 function xt(e) {
   let t = !0;
   const n = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), r = new ResizeObserver((p) => {
@@ -1081,27 +1089,30 @@ function xt(e) {
         if (t) {
           if (B({ group: e }) === 0)
             return;
-          E((v) => {
-            const x = v.mountedGroups.get(e);
+          E((S) => {
+            const x = S.mountedGroups.get(e);
             if (x) {
-              const S = ye(e), b = x.defaultLayoutDeferred ? Re(S) : x.layout, L = A({
+              const g = ye(e), b = x.defaultLayoutDeferred ? Ce(g) : x.layout, L = A({
                 layout: b,
-                panelConstraints: S
+                panelConstraints: g
               });
-              return !x.defaultLayoutDeferred && U(b, L) ? v : {
-                mountedGroups: new Map(v.mountedGroups).set(e, {
+              return !x.defaultLayoutDeferred && U(b, L) && St(
+                x.derivedPanelConstraints,
+                g
+              ) ? S : {
+                mountedGroups: new Map(S.mountedGroups).set(e, {
                   defaultLayoutDeferred: !1,
-                  derivedPanelConstraints: S,
+                  derivedPanelConstraints: g,
                   layout: L,
                   separatorToPanels: x.separatorToPanels
                 })
               };
             }
-            return v;
+            return S;
           });
         }
       } else
-        St(e, y, d);
+        vt(e, y, d);
     }
   });
   r.observe(e.element), e.panels.forEach((p) => {
@@ -1113,7 +1124,7 @@ function xt(e) {
   const a = B({ group: e }), l = ye(e), i = e.panels.map(({ id: p }) => p).join(",");
   let s = e.defaultLayout;
   s && e.panels.length !== Object.keys(s).length && (s = void 0);
-  const u = e.inMemoryLayouts[i] ?? s ?? Re(l), c = A({
+  const u = e.inMemoryLayouts[i] ?? s ?? Ce(l), c = A({
     layout: u,
     panelConstraints: l
   }), h = ke(e), m = E((p) => {
@@ -1146,15 +1157,15 @@ function xt(e) {
   };
 }
 function ue(e) {
-  const t = Xe();
+  const t = Ve();
   return `${e ?? t}`;
 }
-const N = typeof window < "u" ? Ye : Ce;
+const N = typeof window < "u" ? Ke : Re;
 function ce(e) {
   const t = O(e);
   return N(() => {
     t.current = e;
-  }, [e]), Ee((n) => t.current?.(n), [t]);
+  }, [e]), Xe((n) => t.current?.(n), [t]);
 }
 function fe(...e) {
   return ce((t) => {
@@ -1180,21 +1191,21 @@ function zt(e) {
       t.current[n] = e[n];
   }, [e]), t.current;
 }
-const We = "--react-resizable-panels--panel--pointer-events";
-function je(e, t) {
+const Fe = "--react-resizable-panels--panel--pointer-events";
+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 = qe(null);
+const je = Ye(null);
 function wt(e, t) {
   const n = O({
     getLayout: () => ({}),
-    setLayout: lt
+    setLayout: at
   });
-  Me(t, () => n.current, []), N(() => {
+  Ee(t, () => n.current, []), N(() => {
     Object.assign(
       n.current,
-      Ne({ groupId: e })
+      _e({ groupId: e })
     );
   });
 }
@@ -1214,20 +1225,20 @@ function Gt({
 }) {
   const m = O({}), p = ce((w) => {
     U(m.current, w) || (m.current = w, s?.(w));
-  }), f = ue(i), [d, y] = I(!1), [g, v] = I(null), [x, S] = I(n ?? {}), [b, L] = I([]), [R, q] = I([]), Z = O({
+  }), f = ue(i), [d, y] = k(!1), [v, S] = k(null), [x, g] = k(n ?? {}), [b, L] = k([]), [C, q] = k([]), Z = O({
     lastExpandedPanelSizes: {},
     layouts: {}
-  }), J = fe(v, a);
+  }), J = fe(S, a);
   wt(f, l);
-  const Q = Ie(
+  const Q = se(
     () => ({
       id: f,
       orientation: u,
-      registerPanel: (w) => (L((M) => se(u, [...M, w])), () => {
+      registerPanel: (w) => (L((M) => ae(u, [...M, w])), () => {
         L((M) => M.filter((F) => F !== w));
       }),
       registerSeparator: (w) => (q(
-        (M) => se(u, [...M, w])
+        (M) => ae(u, [...M, w])
       ), () => {
         q(
           (M) => M.filter((F) => F !== w)
@@ -1240,34 +1251,34 @@ function Gt({
     disableCursor: o
   }), V = O(null);
   N(() => {
-    if (g === null)
+    if (v === null)
       return;
     const w = {
       defaultLayout: $.defaultLayout,
       disableCursor: !!$.disableCursor,
       disabled: !!r,
-      element: g,
+      element: v,
       id: f,
       inMemoryLastExpandedPanelSizes: Z.current.lastExpandedPanelSizes,
       inMemoryLayouts: Z.current.layouts,
       orientation: u,
       panels: b,
-      separators: R
+      separators: C
     };
     V.current = w;
     const M = xt(w), he = D().mountedGroups.get(w);
     if (he) {
-      const { defaultLayoutDeferred: H, derivedPanelConstraints: W, layout: ee } = he;
-      !H && W.length > 0 && (S(ee), p?.(ee));
+      const { defaultLayoutDeferred: H, derivedPanelConstraints: j, layout: ee } = he;
+      !H && j.length > 0 && (g(ee), p?.(ee));
     }
-    const Ue = _.addListener(
+    const We = _.addListener(
       "interactionStateChange",
       (H) => {
         switch (H.state) {
           case "active": {
             y(
               H.hitRegions.some(
-                (W) => W.group === w
+                (j) => j.group === w
               )
             );
             break;
@@ -1278,42 +1289,42 @@ function Gt({
           }
         }
       }
-    ), Ve = _.addListener(
+    ), Be = _.addListener(
       "mountedGroupsChange",
       (H) => {
-        const W = H.get(w);
-        if (W) {
-          const { defaultLayoutDeferred: ee, derivedPanelConstraints: Ke, layout: me } = W;
-          if (ee || Ke.length === 0)
+        const j = H.get(w);
+        if (j) {
+          const { defaultLayoutDeferred: ee, derivedPanelConstraints: Ue, layout: me } = j;
+          if (ee || Ue.length === 0)
             return;
-          S(me), p?.(me);
+          g(me), p?.(me);
         }
       }
     );
     return () => {
-      V.current = null, M(), Ue(), Ve();
+      V.current = null, M(), We(), Be();
     };
   }, [
     r,
-    g,
+    v,
     f,
     p,
     u,
     b,
-    R,
+    C,
     $
-  ]), Ce(() => {
+  ]), Re(() => {
     const w = V.current;
     w && (w.defaultLayout = n, w.disableCursor = !!o);
   });
   const pe = {
-    [We]: d ? "none" : void 0
+    [Fe]: d ? "none" : void 0
   };
   for (const w in x) {
-    const M = je(f, w), F = x[w];
+    const M = He(f, w), F = x[w];
     pe[M] = F;
   }
-  return /* @__PURE__ */ K(Be.Provider, { value: Q, children: /* @__PURE__ */ K(
+  return /* @__PURE__ */ K(je.Provider, { value: Q, children: /* @__PURE__ */ K(
     "div",
     {
       ...h,
@@ -1334,63 +1345,62 @@ function Gt({
     }
   ) });
 }
-function ae(e) {
+function bt(e, t = 10) {
+  let n = null;
+  return (o) => {
+    n !== null && clearTimeout(n), n = setTimeout(() => {
+      e(o);
+    }, t);
+  };
+}
+function Lt(e) {
   return `react-resizable-panels:${e}`;
 }
-function bt({
-  id: e,
-  layout: t,
+function Dt({
+  debounceSaveMs: e = 100,
+  groupId: t,
   storage: n
 }) {
-  try {
-    const o = ae(e);
-    n.setItem(o, JSON.stringify(t));
-  } catch (o) {
-    console.error(o);
-  }
-}
-function kt({
-  groupId: e,
-  storage: t
-}) {
-  const n = Ze(
-    Lt,
-    () => t.getItem(ae(e)),
-    () => t.getItem(ae(e))
-  ), o = Ie(
-    () => n ? JSON.parse(n) : void 0,
-    [n]
-  ), r = Ee(
-    (a) => bt({
-      id: e,
-      layout: a,
-      storage: t
-    }),
-    [e, t]
-  );
+  const o = Lt(t), r = qe(
+    Pt,
+    () => n.getItem(o),
+    () => n.getItem(o)
+  ), a = se(
+    () => r ? JSON.parse(r) : void 0,
+    [r]
+  ), l = se(() => {
+    const i = (s) => {
+      try {
+        n.setItem(o, JSON.stringify(s));
+      } catch (u) {
+        console.error(u);
+      }
+    };
+    return e > 0 ? bt(i, e) : i;
+  }, [e, n, o]);
   return {
-    defaultLayout: o,
-    onLayoutChange: r
+    defaultLayout: a,
+    onLayoutChange: l
   };
 }
-function Lt() {
+function Pt() {
   return function() {
   };
 }
-function Dt() {
-  return I(null);
-}
 function Ot() {
+  return k(null);
+}
+function Tt() {
   return O(null);
 }
 function de() {
-  const e = Je(Be);
+  const e = Ze(je);
   return z(
     e,
     "Group Context not found; did you render a Panel or Separator outside of a Group?"
   ), e;
 }
-function Pt({
+function Ct({
   groupId: e,
   panelId: t
 }) {
@@ -1441,22 +1451,22 @@ function Pt({
       group: h,
       layout: m,
       separatorToPanels: p
-    } = n(), f = h.panels.findIndex((v) => v.id === t), d = f === h.panels.length - 1, y = Y({
+    } = n(), f = h.panels.findIndex((S) => S.id === t), d = f === h.panels.length - 1, y = Y({
       delta: d ? s - i : i - s,
       initialLayout: m,
       panelConstraints: c,
       pivotIndices: d ? [f - 1, f] : [f, f + 1],
       prevLayout: m,
       trigger: "imperative-api"
-    }), g = A({
+    }), v = A({
       layout: y,
       panelConstraints: c
     });
-    U(m, g) || E((v) => ({
-      mountedGroups: new Map(v.mountedGroups).set(h, {
+    U(m, v) || E((S) => ({
+      mountedGroups: new Map(S.mountedGroups).set(h, {
         defaultLayoutDeferred: u,
         derivedPanelConstraints: c,
-        layout: g,
+        layout: v,
         separatorToPanels: p
       })
     }));
@@ -1487,7 +1497,7 @@ function Pt({
         switch (typeof i) {
           case "number": {
             const { group: c } = n(), h = B({ group: c });
-            u = G(i / h * 100);
+            u = I(i / h * 100);
             break;
           }
           case "string": {
@@ -1511,14 +1521,14 @@ function Rt(e, t) {
     isCollapsed: () => !1,
     resize: ie
   });
-  Me(t, () => o.current, []), N(() => {
+  Ee(t, () => o.current, []), N(() => {
     Object.assign(
       o.current,
-      Pt({ groupId: n, panelId: e })
+      Ct({ groupId: n, panelId: e })
     );
   });
 }
-function Tt({
+function _t({
   children: e,
   className: t,
   collapsedSize: n = "0%",
@@ -1533,8 +1543,8 @@ function Tt({
   style: h,
   ...m
 }) {
-  const p = !!l, f = ue(l), [d, y] = I(null), g = fe(y, a), { id: v, registerPanel: x } = de(), S = u !== null, b = ce((R) => {
-    u?.(R, l);
+  const p = !!l, f = ue(l), [d, y] = k(null), v = fe(y, a), { id: S, registerPanel: x } = de(), g = u !== null, b = ce((C) => {
+    u?.(C, l);
   });
   N(() => {
     if (d !== null)
@@ -1542,7 +1552,7 @@ function Tt({
         element: d,
         id: f,
         idIsStable: p,
-        onResize: S ? b : void 0,
+        onResize: g ? b : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
@@ -1556,7 +1566,7 @@ function Tt({
     o,
     r,
     d,
-    S,
+    g,
     f,
     p,
     i,
@@ -1564,7 +1574,7 @@ function Tt({
     b,
     x
   ]), Rt(f, c);
-  const L = je(v, f);
+  const L = He(S, f);
   return /* @__PURE__ */ K(
     "div",
     {
@@ -1572,9 +1582,9 @@ function Tt({
       "data-panel": !0,
       "data-testid": f,
       id: f,
-      ref: g,
+      ref: v,
       style: {
-        ...Ct,
+        ...Et,
         flexBasis: 0,
         flexGrow: `var(${L}, 1)`,
         flexShrink: 1,
@@ -1582,7 +1592,7 @@ function Tt({
         overflow: "hidden",
         // Disable pointer events inside of a panel during resize
         // This avoid edge cases like nested iframes
-        pointerEvents: `var(${We})`
+        pointerEvents: `var(${Fe})`
       },
       children: /* @__PURE__ */ K(
         "div",
@@ -1599,7 +1609,7 @@ function Tt({
     }
   );
 }
-const Ct = {
+const Et = {
   minHeight: "unset",
   maxHeight: "unset",
   height: "unset",
@@ -1615,13 +1625,13 @@ const Ct = {
   padding: "unset",
   margin: "unset"
 };
-function _t() {
-  return I(null);
-}
 function At() {
+  return k(null);
+}
+function Nt() {
   return O(null);
 }
-function Et({
+function Mt({
   layout: e,
   panelConstraints: t,
   panelId: n,
@@ -1662,7 +1672,7 @@ function Et({
     valueNow: l
   };
 }
-function Nt({
+function $t({
   children: e,
   className: t,
   elementRef: n,
@@ -1670,22 +1680,22 @@ function Nt({
   style: r,
   ...a
 }) {
-  const l = ue(o), [i, s] = I({}), [u, c] = I("inactive"), [h, m] = I(null), p = fe(m, n), {
+  const l = ue(o), [i, s] = k({}), [u, c] = k("inactive"), [h, m] = k(null), p = fe(m, n), {
     id: f,
     orientation: d,
     registerSeparator: y
-  } = de(), g = d === "horizontal" ? "vertical" : "horizontal";
+  } = de(), v = d === "horizontal" ? "vertical" : "horizontal";
   return N(() => {
     if (h !== null) {
-      const v = {
+      const S = {
         element: h,
         id: l
-      }, x = y(v), S = _.addListener(
+      }, x = y(S), g = _.addListener(
         "interactionStateChange",
         (L) => {
           c(
             L.state !== "inactive" && L.hitRegions.some(
-              (R) => R.separator === v
+              (C) => C.separator === S
             ) ? L.state : "inactive"
           );
         }
@@ -1693,15 +1703,15 @@ function Nt({
         "mountedGroupsChange",
         (L) => {
           L.forEach(
-            ({ derivedPanelConstraints: R, layout: q, separatorToPanels: Z }, J) => {
+            ({ derivedPanelConstraints: C, layout: q, separatorToPanels: Z }, J) => {
               if (J.id === f) {
-                const Q = Z.get(v);
+                const Q = Z.get(S);
                 if (Q) {
                   const $ = Q[0], V = J.panels.indexOf($);
                   s(
-                    Et({
+                    Mt({
                       layout: q,
-                      panelConstraints: R,
+                      panelConstraints: C,
                       panelId: $.id,
                       panelIndex: V
                     })
@@ -1713,7 +1723,7 @@ function Nt({
         }
       );
       return () => {
-        S(), b(), x();
+        g(), b(), x();
       };
     }
   }, [h, f, l, y]), /* @__PURE__ */ K(
@@ -1721,7 +1731,7 @@ function Nt({
     {
       ...a,
       "aria-controls": i.valueControls,
-      "aria-orientation": g,
+      "aria-orientation": v,
       "aria-valuemax": i.valueMax,
       "aria-valuemin": i.valueMin,
       "aria-valuenow": i.valueNow,
@@ -1744,12 +1754,12 @@ function Nt({
 }
 export {
   Gt as Group,
-  Tt as Panel,
-  Nt as Separator,
-  kt as useDefaultLayout,
-  Dt as useGroupCallbackRef,
-  Ot as useGroupRef,
-  _t as usePanelCallbackRef,
-  At as usePanelRef
+  _t as Panel,
+  $t as Separator,
+  Dt as useDefaultLayout,
+  Ot as useGroupCallbackRef,
+  Tt as useGroupRef,
+  At as usePanelCallbackRef,
+  Nt as usePanelRef
 };
 //# sourceMappingURL=react-resizable-panels.js.map