react-resizable-panels 4.0.11 → 4.0.13

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 Re, useRef as O, useCallback as Ee, createContext as qe, useImperativeHandle as Me, useState as k, useMemo as ke, 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 I, 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 Ie(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 Ie(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 } = Ie(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 Ge(e) {
-  const { element: t, orientation: n, panels: o, separators: r } = e, a = se(
+function Ie(e) {
+  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 = [];
@@ -73,24 +73,24 @@ function Ge(e) {
               m.bottom,
               m.width,
               0
-            ), y = n === "horizontal" ? new DOMRect(p.left, p.top, 0, p.height) : new DOMRect(p.left, p.top, p.width, 0);
+            ), g = n === "horizontal" ? new DOMRect(p.left, p.top, 0, p.height) : new DOMRect(p.left, p.top, p.width, 0);
             switch (u.length) {
               case 0: {
                 f = [
                   d,
-                  y
+                  g
                 ];
                 break;
               }
               case 1: {
-                const v = u[0], S = tt({
+                const v = u[0], S = et({
                   orientation: n,
                   rects: [m, p],
                   targetRect: v.element.getBoundingClientRect()
                 });
                 f = [
                   v,
-                  S === m ? y : d
+                  S === m ? g : d
                 ];
                 break;
               }
@@ -133,21 +133,21 @@ function Ge(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,28 +174,28 @@ 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 I(e) {
+function k(e) {
   return parseFloat(e.toFixed(3));
 }
-function ye(e) {
+function ge(e) {
   const { panels: t } = e, n = B({ group: e });
   return n === 0 ? t.map((o) => ({
     collapsedSize: 0,
@@ -213,7 +213,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.collapsedSize
       });
-      l = I(c / n * 100);
+      l = k(c / n * 100);
     }
     let i;
     if (a.defaultSize) {
@@ -222,7 +222,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.defaultSize
       });
-      i = I(c / n * 100);
+      i = k(c / n * 100);
     }
     let s = 0;
     if (a.minSize) {
@@ -231,7 +231,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.minSize
       });
-      s = I(c / n * 100);
+      s = k(c / n * 100);
     }
     let u = 100;
     if (a.maxSize) {
@@ -240,7 +240,7 @@ function ye(e) {
         panelElement: r,
         styleProp: a.maxSize
       });
-      u = I(c / n * 100);
+      u = k(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,7 +292,7 @@ class at {
   }
 }
 function P(e, t, n = 0) {
-  return Math.abs(I(e) - I(t)) <= n;
+  return Math.abs(k(e) - k(t)) <= n;
 }
 let R = {
   cursorFlags: 0,
@@ -301,7 +301,7 @@ let R = {
   },
   mountedGroups: /* @__PURE__ */ new Map()
 };
-const _ = new at();
+const _ = new st();
 function D() {
   return R;
 }
@@ -331,12 +331,12 @@ function E(e) {
     });
   }), _.emit("mountedGroupsChange", R.mountedGroups)), R;
 }
-const lt = (e) => e, ie = () => {
-}, De = 1, Oe = 2, Te = 4, _e = 8, ge = {
+const at = (e) => e, ie = () => {
+}, ke = 1, Ge = 2, De = 4, Oe = 8, ye = {
   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 & ke) !== 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";
@@ -386,7 +386,7 @@ function le() {
   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
@@ -402,7 +402,7 @@ function le() {
     }
   }
 }
-function ct(e, t) {
+function ut(e, t) {
   if (e.length !== t.length)
     return !1;
   for (let n = 0; n < e.length; n++)
@@ -429,7 +429,7 @@ function W({
       X(t, l) < 0 ? t = n : t = a;
     } else
       t = a;
-  return t = Math.min(r, t), t = I(t), t;
+  return t = Math.min(r, t), t = k(t), t;
 }
 function Y({
   delta: e,
@@ -452,7 +452,7 @@ function Y({
         `Panel constraints not found for index ${f}`
       );
       const {
-        collapsedSize: y = 0,
+        collapsedSize: g = 0,
         collapsible: v,
         minSize: S = 0
       } = d;
@@ -461,9 +461,9 @@ function Y({
         if (z(
           x != null,
           `Previous layout not found for panel index ${f}`
-        ), P(x, y)) {
-          const g = S - x;
-          X(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
+        ), P(x, g)) {
+          const y = S - x;
+          X(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
         }
       }
     }
@@ -474,7 +474,7 @@ function Y({
         `No panel constraints found for index ${f}`
       );
       const {
-        collapsedSize: y = 0,
+        collapsedSize: g = 0,
         collapsible: v,
         minSize: S = 0
       } = d;
@@ -484,40 +484,40 @@ function Y({
           x != null,
           `Previous layout not found for panel index ${f}`
         ), P(x, S)) {
-          const g = x - y;
-          X(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
+          const y = x - g;
+          X(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
         }
       }
     }
   }
   {
     const f = e < 0 ? 1 : -1;
-    let d = e < 0 ? c : u, y = 0;
+    let d = e < 0 ? c : u, g = 0;
     for (; ; ) {
       const S = l[d];
       z(
         S != null,
         `Previous layout not found for panel index ${d}`
       );
-      const g = W({
+      const y = W({
         panelConstraints: n[d],
         size: 100
       }) - S;
-      if (y += g, d += f, d < 0 || d >= n.length)
+      if (g += y, d += f, d < 0 || d >= n.length)
         break;
     }
-    const v = Math.min(Math.abs(e), Math.abs(y));
+    const v = Math.min(Math.abs(e), Math.abs(g));
     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), v = l[d];
+      const g = Math.abs(e) - Math.abs(h), v = l[d];
       z(
         v != null,
         `Previous layout not found for panel index ${d}`
       );
-      const S = v - y, x = W({
+      const S = v - g, x = W({
         panelConstraints: n[d],
         size: S
       });
@@ -528,7 +528,7 @@ function Y({
       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, v = W({
+    const g = d + h, v = W({
       panelConstraints: n[f],
-      size: y
+      size: g
     });
-    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];
+    if (s[f] = v, !P(v, g)) {
+      let S = g - v, y = e < 0 ? c : u;
+      for (; y >= 0 && y < n.length; ) {
+        const b = s[y];
         z(
           b != null,
-          `Previous layout not found for panel index ${g}`
+          `Previous layout not found for panel index ${y}`
         );
         const L = b + S, C = W({
-          panelConstraints: n[g],
+          panelConstraints: n[y],
           size: L
         });
-        if (P(b, C) || (S -= C - b, s[g] = C), P(S, 0))
+        if (P(b, C) || (S -= C - b, s[y] = C), P(S, 0))
           break;
-        e > 0 ? g-- : g++;
+        e > 0 ? y-- : y++;
       }
     }
   }
@@ -565,7 +565,7 @@ function Y({
   if (!P(m, 100, 0.1))
     return r;
   const p = Object.keys(r);
-  return s.reduce((f, d, y) => (f[p[y]] = d, f), {});
+  return s.reduce((f, d, g) => (f[p[g]] = d, f), {});
 }
 function U(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
@@ -575,7 +575,7 @@ function U(e, t) {
       return !1;
   return !0;
 }
-function Ae({
+function Te({
   event: e,
   hitRegions: t,
   initialLayoutMap: n,
@@ -590,16 +590,16 @@ function Ae({
     r ? h === "horizontal" ? p = (e.clientX - r.x) / u * 100 : p = (e.clientY - r.y) / u * 100 : h === "horizontal" ? p = e.clientX < 0 ? -100 : 100 : p = e.clientY < 0 ? -100 : 100;
     const f = n.get(s), {
       defaultLayoutDeferred: d,
-      derivedPanelConstraints: y,
+      derivedPanelConstraints: g,
       layout: v,
       separatorToPanels: S
     } = o.get(s) ?? { defaultLayoutDeferred: !1 };
-    if (y && f && v && S) {
+    if (g && f && v && S) {
       const x = Y({
         delta: p,
         initialLayout: f,
-        panelConstraints: y,
-        pivotIndices: i.panels.map((g) => m.indexOf(g)),
+        panelConstraints: g,
+        pivotIndices: i.panels.map((y) => m.indexOf(y)),
         prevLayout: v,
         trigger: "mouse-or-touch"
       });
@@ -607,23 +607,23 @@ function Ae({
         if (p !== 0 && !c)
           switch (h) {
             case "horizontal": {
-              a |= p < 0 ? De : Oe;
+              a |= p < 0 ? ke : Ge;
               break;
             }
             case "vertical": {
-              a |= p < 0 ? Te : _e;
+              a |= p < 0 ? De : Oe;
               break;
             }
           }
       } else {
         l.set(i.group, {
           defaultLayoutDeferred: d,
-          derivedPanelConstraints: y,
+          derivedPanelConstraints: g,
           layout: x,
           separatorToPanels: S
         });
-        const g = i.group.panels.map(({ id: b }) => b).join(",");
-        i.group.inMemoryLayouts[g] = x;
+        const y = i.group.panels.map(({ id: b }) => b).join(",");
+        i.group.inMemoryLayouts[y] = 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,
@@ -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 = Ie(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,24 +913,24 @@ 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) {
   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 yt({
   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))
@@ -942,16 +942,16 @@ function vt({
   }
   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 = Ge(r), i = ft(r.orientation, l, {
+    const a = ft() ? ye.coarse : ye.precise, l = Ie(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 && yt({
       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({
@@ -1042,19 +1042,19 @@ function Ce(e) {
   for (const a of e)
     if (a.defaultSize !== void 0) {
       t++;
-      const l = I(a.defaultSize);
+      const l = k(a.defaultSize);
       n += l, o[a.panelId] = l;
     } else
       o[a.panelId] = void 0;
   const r = e.length - t;
   if (r !== 0) {
-    const a = I((100 - n) / r);
+    const a = k((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: I(
+      asPercentage: k(
         o.inlineSize / a * 100
       ),
       inPixels: o.inlineSize
@@ -1072,7 +1072,7 @@ function St(e, t, n) {
     r.id
   );
 }
-function xt(e, t) {
+function St(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
     return !1;
   for (const o in e)
@@ -1080,29 +1080,29 @@ function xt(e, t) {
       return !1;
   return !0;
 }
-function zt(e) {
+function xt(e) {
   let t = !0;
   const n = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), r = new ResizeObserver((p) => {
     for (const f of p) {
-      const { borderBoxSize: d, target: y } = f;
-      if (y === e.element) {
+      const { borderBoxSize: d, target: g } = f;
+      if (g === e.element) {
         if (t) {
           if (B({ group: e }) === 0)
             return;
           E((S) => {
             const x = S.mountedGroups.get(e);
             if (x) {
-              const g = ye(e), b = x.defaultLayoutDeferred ? Ce(g) : x.layout, L = A({
+              const y = ge(e), b = x.defaultLayoutDeferred ? Ce(y) : x.layout, L = A({
                 layout: b,
-                panelConstraints: g
+                panelConstraints: y
               });
-              return !x.defaultLayoutDeferred && U(b, L) && xt(
+              return !x.defaultLayoutDeferred && U(b, L) && St(
                 x.derivedPanelConstraints,
-                g
+                y
               ) ? S : {
                 mountedGroups: new Map(S.mountedGroups).set(e, {
                   defaultLayoutDeferred: !1,
-                  derivedPanelConstraints: g,
+                  derivedPanelConstraints: y,
                   layout: L,
                   separatorToPanels: x.separatorToPanels
                 })
@@ -1112,7 +1112,7 @@ function zt(e) {
           });
         }
       } else
-        St(e, y, d);
+        vt(e, g, d);
     }
   });
   r.observe(e.element), e.panels.forEach((p) => {
@@ -1121,13 +1121,13 @@ function zt(e) {
       `Panel ids must be unique; id "${p.id}" was used more than once`
     ), n.add(p.id), p.onResize && r.observe(p.element);
   });
-  const a = B({ group: e }), l = ye(e), i = e.panels.map(({ id: p }) => p).join(",");
+  const a = B({ group: e }), l = ge(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 ?? Ce(l), c = A({
     layout: u,
     panelConstraints: l
-  }), h = Ge(e), m = E((p) => {
+  }), h = Ie(e), m = E((p) => {
     const f = /* @__PURE__ */ new Map();
     return h.forEach((d) => {
       d.separator && f.set(d.separator, d.panels);
@@ -1148,8 +1148,8 @@ function zt(e) {
   }), m.mountedGroups.size === 1 && (window.addEventListener("pointerdown", be), window.addEventListener("pointermove", Le), window.addEventListener("pointerup", Pe)), function() {
     t = !1;
     const f = E((d) => {
-      const y = new Map(d.mountedGroups);
-      return y.delete(e), { mountedGroups: y };
+      const g = new Map(d.mountedGroups);
+      return g.delete(e), { mountedGroups: g };
     });
     e.element.removeEventListener("pointerleave", ve), e.separators.forEach((d) => {
       d.element.removeEventListener("keydown", Se);
@@ -1157,15 +1157,15 @@ function zt(e) {
   };
 }
 function ue(e) {
-  const t = Xe();
+  const t = Ve();
   return `${e ?? t}`;
 }
-const N = typeof window < "u" ? Ye : Re;
+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) => {
@@ -1184,28 +1184,28 @@ function fe(...e) {
     });
   });
 }
-function wt(e) {
+function zt(e) {
   const t = O({ ...e });
   return N(() => {
     for (const n in e)
       t.current[n] = e[n];
   }, [e]), t.current;
 }
-const je = "--react-resizable-panels--panel--pointer-events";
-function We(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);
-function bt(e, t) {
+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 })
     );
   });
 }
@@ -1225,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] = k(!1), [v, S] = k(null), [x, g] = k(n ?? {}), [b, L] = k([]), [C, q] = k([]), Z = O({
+  }), f = ue(i), [d, g] = I(!1), [v, S] = I(null), [x, y] = I(n ?? {}), [b, L] = I([]), [C, q] = I([]), Z = O({
     lastExpandedPanelSizes: {},
     layouts: {}
   }), J = fe(S, a);
-  bt(f, l);
-  const Q = ke(
+  wt(f, l);
+  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)
@@ -1246,7 +1246,7 @@ function Gt({
       })
     }),
     [f, u]
-  ), $ = wt({
+  ), $ = zt({
     defaultLayout: n,
     disableCursor: o
   }), V = O(null);
@@ -1266,17 +1266,17 @@ function Gt({
       separators: C
     };
     V.current = w;
-    const M = zt(w), he = D().mountedGroups.get(w);
+    const M = xt(w), he = D().mountedGroups.get(w);
     if (he) {
       const { defaultLayoutDeferred: H, derivedPanelConstraints: j, layout: ee } = he;
-      !H && j.length > 0 && (g(ee), p?.(ee));
+      !H && j.length > 0 && (y(ee), p?.(ee));
     }
-    const Ue = _.addListener(
+    const We = _.addListener(
       "interactionStateChange",
       (H) => {
         switch (H.state) {
           case "active": {
-            y(
+            g(
               H.hitRegions.some(
                 (j) => j.group === w
               )
@@ -1284,25 +1284,25 @@ function Gt({
             break;
           }
           default: {
-            y(!1);
+            g(!1);
             break;
           }
         }
       }
-    ), Ve = _.addListener(
+    ), Be = _.addListener(
       "mountedGroupsChange",
       (H) => {
         const j = H.get(w);
         if (j) {
-          const { defaultLayoutDeferred: ee, derivedPanelConstraints: Ke, layout: me } = j;
-          if (ee || Ke.length === 0)
+          const { defaultLayoutDeferred: ee, derivedPanelConstraints: Ue, layout: me } = j;
+          if (ee || Ue.length === 0)
             return;
-          g(me), p?.(me);
+          y(me), p?.(me);
         }
       }
     );
     return () => {
-      V.current = null, M(), Ue(), Ve();
+      V.current = null, M(), We(), Be();
     };
   }, [
     r,
@@ -1318,13 +1318,13 @@ function Gt({
     w && (w.defaultLayout = n, w.disableCursor = !!o);
   });
   const pe = {
-    [je]: d ? "none" : void 0
+    [Fe]: d ? "none" : void 0
   };
   for (const w in x) {
-    const M = We(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,
@@ -1345,43 +1345,42 @@ function Gt({
     }
   ) });
 }
-function ae(e) {
-  return `react-resizable-panels:${e}`;
+function bt(e, t = 10) {
+  let n = null;
+  return (o) => {
+    n !== null && clearTimeout(n), n = setTimeout(() => {
+      e(o);
+    }, t);
+  };
 }
-function Lt({
-  id: e,
-  layout: t,
-  storage: n
-}) {
-  try {
-    const o = ae(e);
-    n.setItem(o, JSON.stringify(t));
-  } catch (o) {
-    console.error(o);
-  }
+function Lt(e) {
+  return `react-resizable-panels:${e}`;
 }
 function Dt({
-  groupId: e,
-  storage: t
+  debounceSaveMs: e = 100,
+  storage: t,
+  ...n
 }) {
-  const n = Ze(
+  const o = "id" in n ? n.id : n.groupId, r = Lt(o), a = qe(
     Pt,
-    () => t.getItem(ae(e)),
-    () => t.getItem(ae(e))
-  ), o = ke(
-    () => n ? JSON.parse(n) : void 0,
-    [n]
-  ), r = Ee(
-    (a) => Lt({
-      id: e,
-      layout: a,
-      storage: t
-    }),
-    [e, t]
-  );
+    () => t.getItem(r),
+    () => t.getItem(r)
+  ), l = se(
+    () => a ? JSON.parse(a) : void 0,
+    [a]
+  ), i = se(() => {
+    const s = (u) => {
+      try {
+        t.setItem(r, JSON.stringify(u));
+      } catch (c) {
+        console.error(c);
+      }
+    };
+    return e > 0 ? bt(s, e) : s;
+  }, [e, t, r]);
   return {
-    defaultLayout: o,
-    onLayoutChange: r
+    defaultLayout: l,
+    onLayoutChange: i
   };
 }
 function Pt() {
@@ -1389,13 +1388,13 @@ function Pt() {
   };
 }
 function Ot() {
-  return k(null);
+  return I(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?"
@@ -1452,7 +1451,7 @@ function Ct({
       group: h,
       layout: m,
       separatorToPanels: p
-    } = n(), f = h.panels.findIndex((S) => S.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, g = Y({
       delta: d ? s - i : i - s,
       initialLayout: m,
       panelConstraints: c,
@@ -1460,7 +1459,7 @@ function Ct({
       prevLayout: m,
       trigger: "imperative-api"
     }), v = A({
-      layout: y,
+      layout: g,
       panelConstraints: c
     });
     U(m, v) || E((S) => ({
@@ -1498,7 +1497,7 @@ function Ct({
         switch (typeof i) {
           case "number": {
             const { group: c } = n(), h = B({ group: c });
-            u = I(i / h * 100);
+            u = k(i / h * 100);
             break;
           }
           case "string": {
@@ -1522,7 +1521,7 @@ function Rt(e, t) {
     isCollapsed: () => !1,
     resize: ie
   });
-  Me(t, () => o.current, []), N(() => {
+  Ee(t, () => o.current, []), N(() => {
     Object.assign(
       o.current,
       Ct({ groupId: n, panelId: e })
@@ -1544,7 +1543,7 @@ function _t({
   style: h,
   ...m
 }) {
-  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) => {
+  const p = !!l, f = ue(l), [d, g] = I(null), v = fe(g, a), { id: S, registerPanel: x } = de(), y = u !== null, b = ce((C) => {
     u?.(C, l);
   });
   N(() => {
@@ -1553,7 +1552,7 @@ function _t({
         element: d,
         id: f,
         idIsStable: p,
-        onResize: g ? b : void 0,
+        onResize: y ? b : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
@@ -1567,7 +1566,7 @@ function _t({
     o,
     r,
     d,
-    g,
+    y,
     f,
     p,
     i,
@@ -1575,7 +1574,7 @@ function _t({
     b,
     x
   ]), Rt(f, c);
-  const L = We(S, f);
+  const L = He(S, f);
   return /* @__PURE__ */ K(
     "div",
     {
@@ -1593,7 +1592,7 @@ function _t({
         overflow: "hidden",
         // Disable pointer events inside of a panel during resize
         // This avoid edge cases like nested iframes
-        pointerEvents: `var(${je})`
+        pointerEvents: `var(${Fe})`
       },
       children: /* @__PURE__ */ K(
         "div",
@@ -1627,7 +1626,7 @@ const Et = {
   margin: "unset"
 };
 function At() {
-  return k(null);
+  return I(null);
 }
 function Nt() {
   return O(null);
@@ -1681,17 +1680,17 @@ function $t({
   style: r,
   ...a
 }) {
-  const l = ue(o), [i, s] = k({}), [u, c] = k("inactive"), [h, m] = k(null), p = fe(m, n), {
+  const l = ue(o), [i, s] = I({}), [u, c] = I("inactive"), [h, m] = I(null), p = fe(m, n), {
     id: f,
     orientation: d,
-    registerSeparator: y
+    registerSeparator: g
   } = de(), v = d === "horizontal" ? "vertical" : "horizontal";
   return N(() => {
     if (h !== null) {
       const S = {
         element: h,
         id: l
-      }, x = y(S), g = _.addListener(
+      }, x = g(S), y = _.addListener(
         "interactionStateChange",
         (L) => {
           c(
@@ -1724,10 +1723,10 @@ function $t({
         }
       );
       return () => {
-        g(), b(), x();
+        y(), b(), x();
       };
     }
-  }, [h, f, l, y]), /* @__PURE__ */ K(
+  }, [h, f, l, g]), /* @__PURE__ */ K(
     "div",
     {
       ...a,