react-resizable-panels 4.0.16 → 4.1.1

package/dist/react-resizable-panels.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as K } from "react/jsx-runtime";
-import { useId as Ke, useLayoutEffect as Xe, useEffect as Ce, useRef as D, useCallback as qe, createContext as Ye, useImperativeHandle as Ee, useState as I, useMemo as ie, useSyncExternalStore as Ze, useContext as Je } from "react";
+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 V({
+function W({
   group: e
 }) {
   const { orientation: t, panels: n } = e;
   return n.reduce((o, i) => (o += t === "horizontal" ? i.element.offsetWidth : i.element.offsetHeight, o), 0);
 }
-function se(e, t) {
+function ae(e, t) {
   return t.sort(
     e === "horizontal" ? Qe : et
   );
@@ -56,7 +56,7 @@ function tt({
   return z(i, "No rect found"), i;
 }
 function ke(e) {
-  const { element: t, orientation: n, panels: o, separators: i } = e, s = se(
+  const { element: t, orientation: n, panels: o, separators: i } = e, s = ae(
     n,
     Array.from(t.children).filter(Me).map((f) => ({ element: f }))
   ).map(({ element: f }) => f), l = [];
@@ -119,7 +119,7 @@ function ke(e) {
           for (const d of c)
             l.push({
               group: e,
-              groupSize: V({ group: e }),
+              groupSize: W({ group: e }),
               panels: [a, p],
               separator: "width" in d ? void 0 : d,
               rect: "width" in d ? d : d.element.getBoundingClientRect()
@@ -160,7 +160,7 @@ function st(e) {
     }
   }
 }
-function te({
+function ee({
   groupSize: e,
   panelElement: t,
   styleProp: n
@@ -199,7 +199,7 @@ function k(e) {
   return parseFloat(e.toFixed(3));
 }
 function me(e) {
-  const { panels: t } = e, n = V({ group: e });
+  const { panels: t } = e, n = W({ group: e });
   return n === 0 ? t.map((o) => ({
     collapsedSize: 0,
     collapsible: o.panelConstraints.collapsible === !0,
@@ -211,7 +211,7 @@ function me(e) {
     const { element: i, panelConstraints: s } = o;
     let l = 0;
     if (s.collapsedSize) {
-      const f = te({
+      const f = ee({
         groupSize: n,
         panelElement: i,
         styleProp: s.collapsedSize
@@ -220,7 +220,7 @@ function me(e) {
     }
     let r;
     if (s.defaultSize) {
-      const f = te({
+      const f = ee({
         groupSize: n,
         panelElement: i,
         styleProp: s.defaultSize
@@ -229,7 +229,7 @@ function me(e) {
     }
     let a = 0;
     if (s.minSize) {
-      const f = te({
+      const f = ee({
         groupSize: n,
         panelElement: i,
         styleProp: s.minSize
@@ -238,7 +238,7 @@ function me(e) {
     }
     let u = 100;
     if (s.maxSize) {
-      const f = te({
+      const f = ee({
         groupSize: n,
         panelElement: i,
         styleProp: s.maxSize
@@ -297,26 +297,26 @@ class at {
 function R(e, t, n = 0) {
   return Math.abs(k(e) - k(t)) <= n;
 }
-let C = {
+let E = {
   cursorFlags: 0,
   interactionState: {
     state: "inactive"
   },
   mountedGroups: /* @__PURE__ */ new Map()
 };
-const O = new at();
+const _ = new at();
 function G() {
-  return C;
-}
-function E(e) {
-  const t = typeof e == "function" ? e(C) : e;
-  if (C === t)
-    return C;
-  const n = C;
-  return C = {
-    ...C,
+  return E;
+}
+function M(e) {
+  const t = typeof e == "function" ? e(E) : e;
+  if (E === t)
+    return E;
+  const n = E;
+  return E = {
+    ...E,
     ...t
-  }, t.cursorFlags !== void 0 && O.emit("cursorFlagsChange", C.cursorFlags), t.interactionState !== void 0 && O.emit("interactionStateChange", C.interactionState), t.mountedGroups !== void 0 && (C.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, i) => {
     o.derivedPanelConstraints.forEach((s) => {
       if (s.collapsible) {
         const { layout: l } = n.mountedGroups.get(i) ?? {};
@@ -332,7 +332,7 @@ function E(e) {
         }
       }
     });
-  }), O.emit("mountedGroupsChange", C.mountedGroups)), C;
+  }), _.emit("mountedGroupsChange", E.mountedGroups)), E;
 }
 function lt(e, t) {
   if (e.length !== t.length)
@@ -345,7 +345,7 @@ function lt(e, t) {
 function X(e, t) {
   return R(e, t) ? 0 : e > t ? 1 : -1;
 }
-function B({
+function V({
   panelConstraints: e,
   size: t
 }) {
@@ -431,7 +431,7 @@ function q({
         S != null,
         `Previous layout not found for panel index ${d}`
       );
-      const g = B({
+      const g = V({
         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 = B({
+      const S = v - y, x = V({
         panelConstraints: n[d],
         size: S
       });
@@ -468,23 +468,23 @@ function q({
       d != null,
       `Previous layout not found for panel index ${c}`
     );
-    const y = d + p, v = B({
+    const y = d + p, v = V({
       panelConstraints: n[c],
       size: y
     });
     if (a[c] = v, !R(v, y)) {
       let S = y - v, g = e < 0 ? f : u;
       for (; g >= 0 && g < n.length; ) {
-        const w = a[g];
+        const b = a[g];
         z(
-          w != null,
+          b != null,
           `Previous layout not found for panel index ${g}`
         );
-        const L = w + S, P = B({
+        const w = b + S, C = V({
           panelConstraints: n[g],
-          size: L
+          size: w
         });
-        if (R(w, P) || (S -= P - w, a[g] = P), R(S, 0))
+        if (R(b, C) || (S -= C - b, a[g] = C), R(S, 0))
           break;
         e > 0 ? g-- : g++;
       }
@@ -499,7 +499,7 @@ function q({
   const m = Object.keys(i);
   return a.reduce((c, d, y) => (c[m[y]] = d, c), {});
 }
-function oe(e) {
+function ne(e) {
   const t = e.parentElement;
   z(t, "Parent group element not found");
   const { mountedGroups: n } = G();
@@ -508,7 +508,7 @@ function oe(e) {
       return o;
   throw Error("Could not find parent Group for separator element");
 }
-function W(e, t) {
+function U(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
     return !1;
   for (const n in e)
@@ -516,7 +516,7 @@ function W(e, t) {
       return !1;
   return !0;
 }
-function _({
+function N({
   layout: e,
   panelConstraints: t
 }) {
@@ -539,7 +539,7 @@ function _({
   for (let r = 0; r < t.length; r++) {
     const a = o[r];
     z(a != null, `No layout data found for index ${r}`);
-    const u = B({
+    const u = V({
       panelConstraints: t[r],
       size: a
     });
@@ -549,7 +549,7 @@ function _({
     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 = B({
+      const u = a + s, f = V({
         panelConstraints: t[r],
         size: u
       });
@@ -581,11 +581,11 @@ function Ge({
         group: s,
         layout: l,
         separatorToPanels: r
-      } = t(), a = _({
+      } = t(), a = N({
         layout: n,
         panelConstraints: i
       });
-      return o ? l : (W(l, a) || E((u) => ({
+      return o ? l : (U(l, a) || M((u) => ({
         mountedGroups: new Map(u.mountedGroups).set(s, {
           defaultLayoutDeferred: o,
           derivedPanelConstraints: i,
@@ -601,7 +601,7 @@ function De(e) {
   return z(n, `Mounted Group ${e.id} not found`), n;
 }
 function T(e, t) {
-  const n = oe(e), o = De(n), i = n.separators.find(
+  const n = ne(e), o = De(n), i = n.separators.find(
     (p) => p.element === e
   );
   z(i, "Matching separator not found");
@@ -614,11 +614,11 @@ function T(e, t) {
     pivotIndices: l,
     prevLayout: a,
     trigger: "keyboard"
-  }), f = _({
+  }), f = N({
     layout: u,
     panelConstraints: o.derivedPanelConstraints
   });
-  W(a, f) || E((p) => ({
+  U(a, f) || M((p) => ({
     mountedGroups: new Map(p.mountedGroups).set(n, {
       defaultLayoutDeferred: o.defaultLayoutDeferred,
       derivedPanelConstraints: o.derivedPanelConstraints,
@@ -630,7 +630,7 @@ function T(e, t) {
 function ye(e) {
   if (e.defaultPrevented)
     return;
-  const t = e.currentTarget, n = oe(t);
+  const t = e.currentTarget, n = ne(t);
   if (!n.disabled)
     switch (e.key) {
       case "ArrowDown": {
@@ -655,7 +655,7 @@ function ye(e) {
       }
       case "Enter": {
         e.preventDefault();
-        const o = oe(t), { derivedPanelConstraints: i, layout: s, separatorToPanels: l } = De(o), r = o.separators.find(
+        const o = ne(t), { derivedPanelConstraints: i, layout: s, separatorToPanels: l } = De(o), r = o.separators.find(
           (p) => p.element === t
         );
         z(r, "Matching separator not found");
@@ -672,7 +672,7 @@ function ye(e) {
       }
       case "F6": {
         e.preventDefault();
-        const i = oe(t).separators.map(
+        const i = ne(t).separators.map(
           (a) => a.element
         ), s = Array.from(i).findIndex(
           (a) => a === e.currentTarget
@@ -689,7 +689,7 @@ function ye(e) {
     }
 }
 const ut = (e) => e, re = () => {
-}, Te = 1, Oe = 2, _e = 4, Ne = 8, ge = {
+}, Oe = 1, Te = 2, _e = 4, Ne = 8, ge = {
   coarse: 10,
   precise: 5
 };
@@ -716,9 +716,9 @@ function ct(e, t, n) {
     hitRegion: o
   } : void 0;
 }
-let ne;
+let te;
 function ft() {
-  return ne === void 0 && (typeof matchMedia == "function" ? ne = !!matchMedia("(pointer:coarse)").matches : ne = !1), ne;
+  return te === void 0 && (typeof matchMedia == "function" ? te = !!matchMedia("(pointer:coarse)").matches : te = !1), te;
 }
 function dt(e) {
   return e !== null && typeof e == "object" && "nodeType" in e && e.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
@@ -833,7 +833,7 @@ function ze(e) {
     }), a.separator && (s.add(a.separator), r || (r = !0, a.separator.element.focus()));
     const u = t.get(a.group);
     u && l.set(a.group, u.layout);
-  }), E({
+  }), M({
     interactionState: {
       hitRegions: n,
       initialLayoutMap: l,
@@ -869,7 +869,7 @@ function St({
     return null;
   switch (n) {
     case "active": {
-      const s = (e & Te) !== 0, l = (e & Oe) !== 0, r = (e & _e) !== 0, a = (e & Ne) !== 0;
+      const s = (e & Oe) !== 0, l = (e & Te) !== 0, r = (e & _e) !== 0, a = (e & Ne) !== 0;
       if (e) {
         if (s)
           return r ? "se-resize" : a ? "ne-resize" : "e-resize";
@@ -886,7 +886,7 @@ function St({
   return o > 0 && i > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
 }
 const be = /* @__PURE__ */ new WeakMap();
-function ae(e) {
+function le(e) {
   if (e.defaultView === null || e.defaultView === void 0)
     return;
   let { prevStyle: t, styleSheet: n } = be.get(e) ?? {};
@@ -940,15 +940,15 @@ function Fe({
         delta: c,
         initialLayout: d,
         panelConstraints: v,
-        pivotIndices: a.panels.map((w) => m.indexOf(w)),
+        pivotIndices: a.panels.map((b) => m.indexOf(b)),
         prevLayout: S,
         trigger: "mouse-or-touch"
       });
-      if (W(g, S)) {
+      if (U(g, S)) {
         if (c !== 0 && !p)
           switch (h) {
             case "horizontal": {
-              l |= c < 0 ? Te : Oe;
+              l |= c < 0 ? Oe : Te;
               break;
             }
             case "vertical": {
@@ -963,14 +963,14 @@ function Fe({
           layout: g,
           separatorToPanels: x
         });
-        const w = a.group.panels.map(({ id: L }) => L).join(",");
-        a.group.inMemoryLayouts[w] = g;
+        const b = a.group.panels.map(({ id: w }) => w).join(",");
+        a.group.inMemoryLayouts[b] = g;
       }
     }
-  }), E({
+  }), M({
     cursorFlags: l,
     mountedGroups: r
-  }), ae(e);
+  }), le(e);
 }
 function we(e) {
   const { interactionState: t, mountedGroups: n } = G();
@@ -995,7 +995,7 @@ function Le(e) {
         // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
         e.buttons === 0
       ) {
-        E(
+        M(
           (o) => o.interactionState.state === "inactive" ? o : {
             cursorFlags: 0,
             interactionState: {
@@ -1017,14 +1017,14 @@ function Le(e) {
     }
     default: {
       const o = $e(e, n);
-      o.length === 0 ? t.state !== "inactive" && E({
+      o.length === 0 ? t.state !== "inactive" && M({
         interactionState: { state: "inactive" }
-      }) : E({
+      }) : M({
         interactionState: {
           hitRegions: o,
           state: "hover"
         }
-      }), ae(e.currentTarget);
+      }), le(e.currentTarget);
       break;
     }
   }
@@ -1036,12 +1036,12 @@ function Pe(e) {
   const { interactionState: t } = G();
   switch (t.state) {
     case "active":
-      E({
+      M({
         cursorFlags: 0,
         interactionState: {
           state: "inactive"
         }
-      }), ae(e.currentTarget);
+      }), le(e.currentTarget);
   }
 }
 function Re(e) {
@@ -1069,7 +1069,7 @@ function xt(e, t, n) {
   const i = e.panels.find((l) => l.element === t);
   if (!i || !i.onResize)
     return;
-  const s = V({ group: e });
+  const s = W({ group: e });
   i.onResize(
     {
       asPercentage: k(
@@ -1097,7 +1097,7 @@ function bt(e, t) {
       return !1;
   return !0;
 }
-const j = /* @__PURE__ */ new Map();
+const B = /* @__PURE__ */ new Map();
 function wt(e) {
   let t = !0;
   z(
@@ -1109,23 +1109,23 @@ function wt(e) {
       const { borderBoxSize: y, target: v } = d;
       if (v === e.element) {
         if (t) {
-          if (V({ group: e }) === 0)
+          if (W({ group: e }) === 0)
             return;
-          E((x) => {
+          M((x) => {
             const g = x.mountedGroups.get(e);
             if (g) {
-              const w = me(e), L = g.defaultLayoutDeferred ? Re(w) : g.layout, P = _({
-                layout: L,
-                panelConstraints: w
+              const b = me(e), w = g.defaultLayoutDeferred ? Re(b) : g.layout, C = N({
+                layout: w,
+                panelConstraints: b
               });
-              return !g.defaultLayoutDeferred && W(L, P) && zt(
+              return !g.defaultLayoutDeferred && U(w, C) && zt(
                 g.derivedPanelConstraints,
-                w
+                b
               ) ? x : {
                 mountedGroups: new Map(x.mountedGroups).set(e, {
                   defaultLayoutDeferred: !1,
-                  derivedPanelConstraints: w,
-                  layout: P,
+                  derivedPanelConstraints: b,
+                  layout: C,
                   separatorToPanels: g.separatorToPanels
                 })
               };
@@ -1143,18 +1143,18 @@ 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 = V({ group: e }), r = me(e), a = e.panels.map(({ id: c }) => c).join(",");
+  const l = W({ group: e }), r = me(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 = _({
+  const f = e.inMemoryLayouts[a] ?? u ?? Re(r), p = N({
     layout: f,
     panelConstraints: r
   }), h = ke(e), m = e.element.ownerDocument;
-  return E((c) => {
+  return M((c) => {
     const d = /* @__PURE__ */ new Map();
-    return j.set(
+    return B.set(
       m,
-      (j.get(m) ?? 0) + 1
+      (B.get(m) ?? 0) + 1
     ), h.forEach((y) => {
       y.separator && d.set(y.separator, y.panels);
     }), {
@@ -1170,31 +1170,31 @@ function wt(e) {
       !i.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);
-  }), j.get(m) === 1 && (m.addEventListener("pointerdown", ze), m.addEventListener("pointerleave", we), m.addEventListener("pointermove", Le), m.addEventListener("pointerup", Pe)), function() {
-    t = !1, j.set(
+  }), B.get(m) === 1 && (m.addEventListener("pointerdown", ze), m.addEventListener("pointerleave", we), m.addEventListener("pointermove", Le), m.addEventListener("pointerup", Pe)), function() {
+    t = !1, B.set(
       m,
-      Math.max(0, (j.get(m) ?? 0) - 1)
-    ), E((d) => {
+      Math.max(0, (B.get(m) ?? 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);
-    }), j.get(m) || (m.removeEventListener("pointerdown", ze), m.removeEventListener("pointerleave", we), m.removeEventListener("pointermove", Le), m.removeEventListener("pointerup", Pe)), s.disconnect();
+    }), B.get(m) || (m.removeEventListener("pointerdown", ze), m.removeEventListener("pointerleave", we), m.removeEventListener("pointermove", Le), m.removeEventListener("pointerup", Pe)), s.disconnect();
   };
 }
-function le(e) {
+function ue(e) {
   const t = Ke();
   return `${e ?? t}`;
 }
-const N = typeof window < "u" ? Xe : Ce;
-function ue(e) {
-  const t = D(e);
-  return N(() => {
+const A = typeof window < "u" ? Xe : Ce;
+function ce(e) {
+  const t = I(e);
+  return A(() => {
     t.current = e;
   }, [e]), qe((n) => t.current?.(n), [t]);
 }
-function ce(...e) {
-  return ue((t) => {
+function fe(...e) {
+  return ce((t) => {
     e.forEach((n) => {
       if (n)
         switch (typeof n) {
@@ -1211,31 +1211,31 @@ function ce(...e) {
   });
 }
 function Lt(e) {
-  const t = D({ ...e });
-  return N(() => {
+  const t = I({ ...e });
+  return A(() => {
     for (const n in e)
       t.current[n] = e[n];
   }, [e]), t.current;
 }
-const He = "--react-resizable-panels--panel--pointer-events";
-function je(e, t) {
+const je = "--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 = Ye(null);
 function Pt(e, t) {
-  const n = D({
+  const n = I({
     getLayout: () => ({}),
     setLayout: ut
   });
-  Ee(t, () => n.current, []), N(() => {
+  Ee(t, () => n.current, []), A(() => {
     Object.assign(
       n.current,
       Ge({ groupId: e })
     );
   });
 }
-function Ot({
+function Tt({
   children: e,
   className: t,
   defaultLayout: n,
@@ -1249,62 +1249,63 @@ function Ot({
   style: f,
   ...p
 }) {
-  const h = D({}), m = ue((b) => {
-    W(h.current, b) || (h.current = b, a?.(b));
-  }), c = le(r), [d, y] = I(!1), [v, S] = I(null), [x, g] = I(n ?? {}), [w, L] = I([]), [P, Y] = I([]), Z = D({
+  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({
     lastExpandedPanelSizes: {},
     layouts: {}
-  }), J = ce(S, s);
+  }), oe = fe(v, s);
   Pt(c, l);
-  const Q = ie(
+  const Z = se(
     () => ({
       id: c,
       orientation: u,
-      registerPanel: (b) => (L((M) => se(u, [...M, b])), () => {
-        L((M) => M.filter(($) => $ !== b));
+      registerPanel: (L) => (b((P) => ae(u, [...P, L])), () => {
+        b((P) => P.filter((O) => O !== L));
       }),
-      registerSeparator: (b) => (Y(
-        (M) => se(u, [...M, b])
+      registerSeparator: (L) => (C(
+        (P) => ae(u, [...P, L])
       ), () => {
-        Y(
-          (M) => M.filter(($) => $ !== b)
+        C(
+          (P) => P.filter((O) => O !== L)
         );
       })
     }),
     [c, u]
-  ), A = Lt({
+  ), $ = Lt({
     defaultLayout: n,
     disableCursor: o
-  }), U = D(null);
-  N(() => {
-    if (v === null)
+  }), F = I(null);
+  A(() => {
+    const L = v.current;
+    if (L === null)
       return;
-    const b = {
-      defaultLayout: A.defaultLayout,
-      disableCursor: !!A.disableCursor,
+    const P = {
+      defaultLayout: $.defaultLayout,
+      disableCursor: !!$.disableCursor,
       disabled: !!i,
-      element: v,
+      element: L,
       id: c,
-      inMemoryLastExpandedPanelSizes: Z.current.lastExpandedPanelSizes,
-      inMemoryLayouts: Z.current.layouts,
+      inMemoryLastExpandedPanelSizes: Y.current.lastExpandedPanelSizes,
+      inMemoryLayouts: Y.current.layouts,
       orientation: u,
-      panels: w,
-      separators: P
+      panels: g,
+      separators: w
     };
-    U.current = b;
-    const M = wt(b), pe = G().mountedGroups.get(b);
+    F.current = P;
+    const O = wt(P), pe = G().mountedGroups.get(P);
     if (pe) {
-      const { defaultLayoutDeferred: F, derivedPanelConstraints: H, layout: ee } = pe;
-      !F && H.length > 0 && (g(ee), m?.(ee));
+      const { defaultLayoutDeferred: j, derivedPanelConstraints: H, layout: Q } = pe;
+      !j && H.length > 0 && (x(Q), m?.(Q));
     }
-    const Ve = O.addListener(
+    const Ve = _.addListener(
       "interactionStateChange",
-      (F) => {
-        switch (F.state) {
+      (j) => {
+        switch (j.state) {
           case "active": {
             y(
-              F.hitRegions.some(
-                (H) => H.group === b
+              j.hitRegions.some(
+                (H) => H.group === P
               )
             );
             break;
@@ -1315,42 +1316,41 @@ function Ot({
           }
         }
       }
-    ), We = O.addListener(
+    ), We = _.addListener(
       "mountedGroupsChange",
-      (F) => {
-        const H = F.get(b);
+      (j) => {
+        const H = j.get(P);
         if (H) {
-          const { defaultLayoutDeferred: ee, derivedPanelConstraints: Ue, layout: he } = H;
-          if (ee || Ue.length === 0)
+          const { defaultLayoutDeferred: Q, derivedPanelConstraints: Ue, layout: he } = H;
+          if (Q || Ue.length === 0)
             return;
-          g(he), m?.(he);
+          x(he), m?.(he);
         }
       }
     );
     return () => {
-      U.current = null, M(), Ve(), We();
+      F.current = null, O(), Ve(), We();
     };
   }, [
     i,
-    v,
     c,
     m,
     u,
+    g,
     w,
-    P,
-    A
+    $
   ]), Ce(() => {
-    const b = U.current;
-    b && (b.defaultLayout = n, b.disableCursor = !!o);
+    const L = F.current;
+    L && (L.defaultLayout = n, L.disableCursor = !!o);
   });
-  const de = {
-    [He]: d ? "none" : void 0
+  const J = {
+    [je]: d ? "none" : void 0
   };
-  for (const b in x) {
-    const M = je(c, b), $ = x[b];
-    de[M] = $;
+  for (const L in S) {
+    const P = He(c, L), O = S[L];
+    J[P] = O;
   }
-  return /* @__PURE__ */ K(Be.Provider, { value: Q, children: /* @__PURE__ */ K(
+  return /* @__PURE__ */ K(Be.Provider, { value: Z, children: /* @__PURE__ */ K(
     "div",
     {
       ...p,
@@ -1359,10 +1359,10 @@ function Ot({
       "data-group": !0,
       "data-testid": c,
       id: c,
-      ref: J,
+      ref: oe,
       style: {
         ...f,
-        ...de,
+        ...J,
         display: "flex",
         flexDirection: u === "horizontal" ? "row" : "column",
         flexWrap: "nowrap"
@@ -1379,54 +1379,57 @@ function Rt(e, t = 10) {
     }, t);
   };
 }
-function Ct(e) {
-  return `react-resizable-panels:${e}`;
+function ie(e, t) {
+  return `react-resizable-panels:${[e, ...t].join(":")}`;
 }
 function _t({
   debounceSaveMs: e = 100,
-  storage: t,
-  ...n
+  panelIds: t,
+  storage: n,
+  ...o
 }) {
-  const o = "id" in n ? n.id : n.groupId, i = Ct(o), s = Ze(
-    Et,
-    () => t.getItem(i),
-    () => t.getItem(i)
-  ), l = ie(
-    () => s ? JSON.parse(s) : void 0,
-    [s]
-  ), r = ie(() => {
-    const a = (u) => {
+  const i = t !== void 0, s = "id" in o ? o.id : o.groupId, l = ie(s, t ?? []), r = Ze(
+    Ct,
+    () => n.getItem(l),
+    () => n.getItem(l)
+  ), a = se(
+    () => r ? JSON.parse(r) : void 0,
+    [r]
+  ), u = se(() => {
+    const f = (p) => {
+      let h;
+      i ? h = ie(s, Object.keys(p)) : h = ie(s, []);
       try {
-        t.setItem(i, JSON.stringify(u));
-      } catch (f) {
-        console.error(f);
+        n.setItem(h, JSON.stringify(p));
+      } catch (m) {
+        console.error(m);
       }
     };
-    return e > 0 ? Rt(a, e) : a;
-  }, [e, t, i]);
+    return e > 0 ? Rt(f, e) : f;
+  }, [e, i, s, n]);
   return {
-    defaultLayout: l,
-    onLayoutChange: r
+    defaultLayout: a,
+    onLayoutChange: u
   };
 }
-function Et() {
+function Ct() {
   return function() {
   };
 }
 function Nt() {
-  return I(null);
+  return D(null);
 }
 function At() {
-  return D(null);
+  return I(null);
 }
-function fe() {
+function de() {
   const e = Je(Be);
   return z(
     e,
     "Group Context not found; did you render a Panel or Separator outside of a Group?"
   ), e;
 }
-function Mt({
+function Et({
   groupId: e,
   panelId: t
 }) {
@@ -1484,11 +1487,11 @@ function Mt({
       pivotIndices: d ? [c - 1, c] : [c, c + 1],
       prevLayout: h,
       trigger: "imperative-api"
-    }), v = _({
+    }), v = N({
       layout: y,
       panelConstraints: f
     });
-    W(h, v) || E((S) => ({
+    U(h, v) || M((S) => ({
       mountedGroups: new Map(S.mountedGroups).set(p, {
         defaultLayoutDeferred: u,
         derivedPanelConstraints: f,
@@ -1525,7 +1528,7 @@ function Mt({
         let u;
         switch (typeof r) {
           case "number": {
-            const { group: f } = n(), p = V({ group: f });
+            const { group: f } = n(), p = W({ group: f });
             u = k(r / p * 100);
             break;
           }
@@ -1539,8 +1542,8 @@ function Mt({
     }
   };
 }
-function It(e, t) {
-  const { id: n } = fe(), o = D({
+function Mt(e, t) {
+  const { id: n } = de(), o = I({
     collapse: re,
     expand: re,
     getSize: () => ({
@@ -1550,10 +1553,10 @@ function It(e, t) {
     isCollapsed: () => !1,
     resize: re
   });
-  Ee(t, () => o.current, []), N(() => {
+  Ee(t, () => o.current, []), A(() => {
     Object.assign(
       o.current,
-      Mt({ groupId: n, panelId: e })
+      Et({ groupId: n, panelId: e })
     );
   });
 }
@@ -1572,17 +1575,18 @@ function $t({
   style: p,
   ...h
 }) {
-  const m = !!l, c = le(l), [d, y] = I(null), v = ce(y, s), { id: S, registerPanel: x } = fe(), g = u !== null, w = ue((P) => {
-    u?.(P, l);
+  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);
   });
-  N(() => {
-    if (d !== null)
-      return x({
-        element: d,
+  A(() => {
+    const w = d.current;
+    if (w !== null)
+      return S({
+        element: w,
         expandToSizeRef: { current: void 0 },
         id: c,
         idIsStable: m,
-        onResize: g ? w : void 0,
+        onResize: x ? g : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
@@ -1595,16 +1599,15 @@ function $t({
     n,
     o,
     i,
-    d,
-    g,
+    x,
     c,
     m,
     r,
     a,
-    w,
-    x
-  ]), It(c, f);
-  const L = je(S, c);
+    g,
+    S
+  ]), Mt(c, f);
+  const b = He(v, c);
   return /* @__PURE__ */ K(
     "div",
     {
@@ -1612,17 +1615,17 @@ function $t({
       "data-panel": !0,
       "data-testid": c,
       id: c,
-      ref: v,
+      ref: y,
       style: {
-        ...kt,
+        ...It,
         flexBasis: 0,
-        flexGrow: `var(${L}, 1)`,
+        flexGrow: `var(${b}, 1)`,
         flexShrink: 1,
         // Prevent Panel content from interfering with panel size
         overflow: "hidden",
         // Disable pointer events inside of a panel during resize
         // This avoid edge cases like nested iframes
-        pointerEvents: `var(${He})`
+        pointerEvents: `var(${je})`
       },
       children: /* @__PURE__ */ K(
         "div",
@@ -1639,7 +1642,7 @@ function $t({
     }
   );
 }
-const kt = {
+const It = {
   minHeight: "unset",
   maxHeight: "unset",
   height: "unset",
@@ -1656,12 +1659,12 @@ const kt = {
   margin: "unset"
 };
 function Ft() {
-  return I(null);
-}
-function Ht() {
   return D(null);
 }
-function Gt({
+function jt() {
+  return I(null);
+}
+function kt({
   layout: e,
   panelConstraints: t,
   panelId: n,
@@ -1673,7 +1676,7 @@ function Gt({
   );
   if (r) {
     const a = r.maxSize, u = s = r.collapsible ? r.collapsedSize : r.minSize, f = [o, o + 1];
-    s = _({
+    s = N({
       layout: q({
         delta: u - l,
         initialLayout: e,
@@ -1683,7 +1686,7 @@ function Gt({
         trigger: "keyboard"
       }),
       panelConstraints: t
-    })[n], i = _({
+    })[n], i = N({
       layout: q({
         delta: a - l,
         initialLayout: e,
@@ -1702,7 +1705,7 @@ function Gt({
     valueNow: l
   };
 }
-function jt({
+function Ht({
   children: e,
   className: t,
   elementRef: n,
@@ -1710,40 +1713,40 @@ function jt({
   style: i,
   ...s
 }) {
-  const l = le(o), [r, a] = I({}), [u, f] = I("inactive"), [p, h] = I(null), m = ce(h, n), {
+  const l = ue(o), [r, a] = D({}), [u, f] = D("inactive"), [p, h] = D(null), m = fe(h, n), {
     id: c,
     orientation: d,
     registerSeparator: y
-  } = fe(), v = d === "horizontal" ? "vertical" : "horizontal";
-  return N(() => {
+  } = de(), v = d === "horizontal" ? "vertical" : "horizontal";
+  return A(() => {
     if (p !== null) {
       const S = {
         element: p,
         id: l
-      }, x = y(S), g = O.addListener(
+      }, x = y(S), g = _.addListener(
         "interactionStateChange",
-        (L) => {
+        (w) => {
           f(
-            L.state !== "inactive" && L.hitRegions.some(
-              (P) => P.separator === S
-            ) ? L.state : "inactive"
+            w.state !== "inactive" && w.hitRegions.some(
+              (C) => C.separator === S
+            ) ? w.state : "inactive"
           );
         }
-      ), w = O.addListener(
+      ), b = _.addListener(
         "mountedGroupsChange",
-        (L) => {
-          L.forEach(
-            ({ derivedPanelConstraints: P, layout: Y, separatorToPanels: Z }, J) => {
-              if (J.id === c) {
-                const Q = Z.get(S);
-                if (Q) {
-                  const A = Q[0], U = J.panels.indexOf(A);
+        (w) => {
+          w.forEach(
+            ({ derivedPanelConstraints: C, layout: Y, separatorToPanels: oe }, Z) => {
+              if (Z.id === c) {
+                const $ = oe.get(S);
+                if ($) {
+                  const F = $[0], J = Z.panels.indexOf(F);
                   a(
-                    Gt({
+                    kt({
                       layout: Y,
-                      panelConstraints: P,
-                      panelId: A.id,
-                      panelIndex: U
+                      panelConstraints: C,
+                      panelId: F.id,
+                      panelIndex: J
                     })
                   );
                 }
@@ -1753,7 +1756,7 @@ function jt({
         }
       );
       return () => {
-        g(), w(), x();
+        g(), b(), x();
       };
     }
   }, [p, c, l, y]), /* @__PURE__ */ K(
@@ -1783,13 +1786,13 @@ function jt({
   );
 }
 export {
-  Ot as Group,
+  Tt as Group,
   $t as Panel,
-  jt as Separator,
+  Ht as Separator,
   _t as useDefaultLayout,
   Nt as useGroupCallbackRef,
   At as useGroupRef,
   Ft as usePanelCallbackRef,
-  Ht as usePanelRef
+  jt as usePanelRef
 };
 //# sourceMappingURL=react-resizable-panels.js.map