react-resizable-panels 4.0.7 → 4.0.8-alpha.1

package/dist/react-resizable-panels.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as W } from "react/jsx-runtime";
-import { useId as $e, useLayoutEffect as Ne, useEffect as _e, useRef as T, useCallback as xe, createContext as Fe, useImperativeHandle as ze, useState as G, useMemo as be, useSyncExternalStore as He, useContext as We } from "react";
+import { useId as _e, useLayoutEffect as Fe, useEffect as He, useRef as T, useCallback as ze, createContext as We, useImperativeHandle as be, useSyncExternalStore as we, useState as G, useMemo as Le, useContext as je } from "react";
 function z(e, t = "Assertion error") {
   if (!e)
     throw Error(t);
 }
 function re(e, t) {
   return t.sort(
-    e === "horizontal" ? je : Be
+    e === "horizontal" ? Ve : Be
   );
 }
-function je(e, t) {
+function Ve(e, t) {
   const n = e.element.offsetLeft - t.element.offsetLeft;
   return n !== 0 ? n : e.element.offsetWidth - t.element.offsetWidth;
 }
@@ -18,13 +18,13 @@ function Be(e, t) {
   const n = e.element.offsetTop - t.element.offsetTop;
   return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
 }
-function te({
+function ee({
   group: e
 }) {
   const { orientation: t, panels: n } = e;
   return n.reduce((o, r) => (o += t === "horizontal" ? r.element.offsetWidth : r.element.offsetHeight, o), 0);
 }
-function we(e) {
+function Pe(e) {
   const { element: t, orientation: n, panels: o, separators: r } = e, s = re(
     n,
     Array.from(t.children).filter((l) => l instanceof HTMLElement).map((l) => ({ element: l }))
@@ -36,29 +36,29 @@ function we(e) {
     );
     if (f) {
       if (i) {
-        const u = i.element.getBoundingClientRect(), m = l.getBoundingClientRect();
+        const u = i.element.getBoundingClientRect(), h = l.getBoundingClientRect();
         c.push({
           group: e,
-          groupSize: te({ group: e }),
+          groupSize: ee({ group: e }),
           panels: [i, f],
           separator: a,
           rect: n === "horizontal" ? new DOMRect(
             u.right,
-            m.top,
-            m.left - u.right,
-            m.height
+            h.top,
+            h.left - u.right,
+            h.height
           ) : new DOMRect(
-            m.left,
+            h.left,
             u.bottom,
-            m.width,
-            m.top - u.bottom
+            h.width,
+            h.top - u.bottom
           )
         });
       }
       i = f, a = void 0;
     } else {
       const u = r.find(
-        (m) => m.element === l
+        (h) => h.element === l
       );
       u ? a = u : (i = void 0, a = void 0);
     }
@@ -73,13 +73,13 @@ function Ke(e, t) {
   const n = getComputedStyle(e.ownerDocument.body), o = parseFloat(n.fontSize);
   return t * o;
 }
-function Ve(e) {
+function Xe(e) {
   return e / 100 * window.innerHeight;
 }
-function Xe(e) {
+function Ye(e) {
   return e / 100 * window.innerWidth;
 }
-function Ye(e) {
+function qe(e) {
   switch (typeof e) {
     case "number":
       return [e, "px"];
@@ -89,13 +89,13 @@ function Ye(e) {
     }
   }
 }
-function J({
+function Z({
   groupSize: e,
   panelElement: t,
   styleProp: n
 }) {
   let o;
-  const [r, s] = Ye(n);
+  const [r, s] = qe(n);
   switch (s) {
     case "%": {
       o = r / 100 * e;
@@ -114,11 +114,11 @@ function J({
       break;
     }
     case "vh": {
-      o = Ve(r);
+      o = Xe(r);
       break;
     }
     case "vw": {
-      o = Xe(r);
+      o = Ye(r);
       break;
     }
   }
@@ -127,13 +127,20 @@ function J({
 function I(e) {
   return parseFloat(e.toFixed(3));
 }
-function pe(e) {
-  const { panels: t } = e, n = te({ group: e });
-  return t.map((o) => {
+function me(e) {
+  const { panels: t } = e, n = ee({ group: e });
+  return n === 0 ? t.map((o) => ({
+    collapsedSize: 0,
+    collapsible: o.panelConstraints.collapsible === !0,
+    defaultSize: void 0,
+    minSize: 0,
+    maxSize: 100,
+    panelId: o.id
+  })) : t.map((o) => {
     const { element: r, panelConstraints: s } = o;
     let c = 0;
     if (s.collapsedSize) {
-      const f = J({
+      const f = Z({
         groupSize: n,
         panelElement: r,
         styleProp: s.collapsedSize
@@ -142,7 +149,7 @@ function pe(e) {
     }
     let i;
     if (s.defaultSize) {
-      const f = J({
+      const f = Z({
         groupSize: n,
         panelElement: r,
         styleProp: s.defaultSize
@@ -151,7 +158,7 @@ function pe(e) {
     }
     let a = 0;
     if (s.minSize) {
-      const f = J({
+      const f = Z({
         groupSize: n,
         panelElement: r,
         styleProp: s.minSize
@@ -160,7 +167,7 @@ function pe(e) {
     }
     let l = 100;
     if (s.maxSize) {
-      const f = J({
+      const f = Z({
         groupSize: n,
         panelElement: r,
         styleProp: s.maxSize
@@ -177,7 +184,7 @@ function pe(e) {
     };
   });
 }
-class qe {
+class Ze {
   #e = {};
   addListener(t, n) {
     const o = this.#e[t];
@@ -226,7 +233,7 @@ let R = {
   },
   mountedGroups: /* @__PURE__ */ new Map()
 };
-const A = new qe();
+const A = new Ze();
 function O() {
   return R;
 }
@@ -256,12 +263,12 @@ function C(e) {
     });
   }), A.emit("mountedGroupsChange", R.mountedGroups)), R;
 }
-const Ze = (e) => e, ie = () => {
-}, Le = 1, Pe = 2, Ee = 4, Re = 8, me = {
+const Je = (e) => e, ie = () => {
+}, Ee = 1, Re = 2, Ce = 4, Me = 8, he = {
   coarse: 10,
   precise: 5
 };
-function Je({
+function Qe({
   cursorFlags: e,
   groups: t,
   state: n
@@ -288,7 +295,7 @@ function Je({
     return null;
   switch (n) {
     case "active": {
-      const s = (e & Le) !== 0, c = (e & Pe) !== 0, i = (e & Ee) !== 0, a = (e & Re) !== 0;
+      const s = (e & Ee) !== 0, c = (e & Re) !== 0, i = (e & Ce) !== 0, a = (e & Me) !== 0;
       if (e) {
         if (s)
           return i ? "se-resize" : a ? "ne-resize" : "e-resize";
@@ -311,7 +318,7 @@ function le() {
   switch (t.state) {
     case "active":
     case "hover": {
-      const n = Je({
+      const n = Qe({
         cursorFlags: e,
         groups: t.hitRegions.map((r) => r.group),
         state: t.state
@@ -327,7 +334,7 @@ function le() {
     }
   }
 }
-function Qe(e, t) {
+function et(e, t) {
   if (e.length !== t.length)
     return !1;
   for (let n = 0; n < e.length; n++)
@@ -356,7 +363,7 @@ function F({
       t = s;
   return t = Math.min(r, t), t = I(t), t;
 }
-function B({
+function V({
   delta: e,
   initialLayout: t,
   panelConstraints: n,
@@ -377,18 +384,18 @@ function B({
         `Panel constraints not found for index ${d}`
       );
       const {
-        collapsedSize: h = 0,
-        collapsible: v,
+        collapsedSize: v = 0,
+        collapsible: m,
         minSize: x = 0
       } = p;
-      if (v) {
+      if (m) {
         const S = c[d];
         if (z(
           S != null,
           `Previous layout not found for panel index ${d}`
-        ), w(S, h)) {
-          const y = x - S;
-          j(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
+        ), w(S, v)) {
+          const g = x - S;
+          j(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
@@ -399,61 +406,61 @@ function B({
         `No panel constraints found for index ${d}`
       );
       const {
-        collapsedSize: h = 0,
-        collapsible: v,
+        collapsedSize: v = 0,
+        collapsible: m,
         minSize: x = 0
       } = p;
-      if (v) {
+      if (m) {
         const S = c[d];
         if (z(
           S != null,
           `Previous layout not found for panel index ${d}`
         ), w(S, x)) {
-          const y = S - h;
-          j(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
+          const g = S - v;
+          j(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
   }
   {
     const d = e < 0 ? 1 : -1;
-    let p = e < 0 ? f : l, h = 0;
+    let p = e < 0 ? f : l, v = 0;
     for (; ; ) {
       const x = c[p];
       z(
         x != null,
         `Previous layout not found for panel index ${p}`
       );
-      const y = F({
+      const g = F({
         panelConstraints: n[p],
         size: 100
       }) - x;
-      if (h += y, p += d, p < 0 || p >= n.length)
+      if (v += g, p += d, p < 0 || p >= n.length)
         break;
     }
-    const v = Math.min(Math.abs(e), Math.abs(h));
-    e = e < 0 ? 0 - v : v;
+    const m = Math.min(Math.abs(e), Math.abs(v));
+    e = e < 0 ? 0 - m : m;
   }
   {
     let p = e < 0 ? l : f;
     for (; p >= 0 && p < n.length; ) {
-      const h = Math.abs(e) - Math.abs(u), v = c[p];
+      const v = Math.abs(e) - Math.abs(u), m = c[p];
       z(
-        v != null,
+        m != null,
         `Previous layout not found for panel index ${p}`
       );
-      const x = v - h, S = F({
+      const x = m - v, S = F({
         panelConstraints: n[p],
         size: x
       });
-      if (!w(v, S) && (u += v - S, a[p] = S, u.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+      if (!w(m, S) && (u += m - S, a[p] = S, u.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
         numeric: !0
       }) >= 0))
         break;
       e < 0 ? p-- : p++;
     }
   }
-  if (Qe(i, a))
+  if (et(i, a))
     return r;
   {
     const d = e < 0 ? f : l, p = c[d];
@@ -461,38 +468,38 @@ function B({
       p != null,
       `Previous layout not found for panel index ${d}`
     );
-    const h = p + u, v = F({
+    const v = p + u, m = F({
       panelConstraints: n[d],
-      size: h
+      size: v
     });
-    if (a[d] = v, !w(v, h)) {
-      let x = h - v, y = e < 0 ? f : l;
-      for (; y >= 0 && y < n.length; ) {
-        const L = a[y];
+    if (a[d] = m, !w(m, v)) {
+      let x = v - m, g = e < 0 ? f : l;
+      for (; g >= 0 && g < n.length; ) {
+        const L = a[g];
         z(
           L != null,
-          `Previous layout not found for panel index ${y}`
+          `Previous layout not found for panel index ${g}`
         );
         const P = L + x, E = F({
-          panelConstraints: n[y],
+          panelConstraints: n[g],
           size: P
         });
-        if (w(L, E) || (x -= E - L, a[y] = E), w(x, 0))
+        if (w(L, E) || (x -= E - L, a[g] = E), w(x, 0))
           break;
-        e > 0 ? y-- : y++;
+        e > 0 ? g-- : g++;
       }
     }
   }
-  const m = Object.values(a).reduce(
+  const h = Object.values(a).reduce(
     (d, p) => p + d,
     0
   );
-  if (!w(m, 100, 0.1))
+  if (!w(h, 100, 0.1))
     return r;
-  const g = Object.keys(r);
-  return a.reduce((d, p, h) => (d[g[h]] = p, d), {});
+  const y = Object.keys(r);
+  return a.reduce((d, p, v) => (d[y[v]] = p, d), {});
 }
-function U(e, t) {
+function B(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
     return !1;
   for (const n in e)
@@ -500,7 +507,7 @@ function U(e, t) {
       return !1;
   return !0;
 }
-function Ce({
+function Ge({
   event: e,
   hitRegions: t,
   initialLayoutMap: n,
@@ -510,32 +517,32 @@ function Ce({
   let s = 0;
   const c = new Map(o);
   t.forEach((i) => {
-    const { group: a, groupSize: l } = i, { disableCursor: f, orientation: u, panels: m } = a;
-    let g = 0;
-    r ? u === "horizontal" ? g = (e.clientX - r.x) / l * 100 : g = (e.clientY - r.y) / l * 100 : u === "horizontal" ? g = e.clientX < 0 ? -100 : 100 : g = e.clientY < 0 ? -100 : 100;
+    const { group: a, groupSize: l } = i, { disableCursor: f, orientation: u, panels: h } = a;
+    let y = 0;
+    r ? u === "horizontal" ? y = (e.clientX - r.x) / l * 100 : y = (e.clientY - r.y) / l * 100 : u === "horizontal" ? y = e.clientX < 0 ? -100 : 100 : y = e.clientY < 0 ? -100 : 100;
     const d = n.get(a), {
       derivedPanelConstraints: p,
-      layout: h,
-      separatorToPanels: v
+      layout: v,
+      separatorToPanels: m
     } = o.get(a) ?? {};
-    if (p && d && h && v) {
-      const x = B({
-        delta: g,
+    if (p && d && v && m) {
+      const x = V({
+        delta: y,
         initialLayout: d,
         panelConstraints: p,
-        pivotIndices: i.panels.map((S) => m.indexOf(S)),
-        prevLayout: h,
+        pivotIndices: i.panels.map((S) => h.indexOf(S)),
+        prevLayout: v,
         trigger: "mouse-or-touch"
       });
-      if (U(x, h)) {
-        if (g !== 0 && !f)
+      if (B(x, v)) {
+        if (y !== 0 && !f)
           switch (u) {
             case "horizontal": {
-              s |= g < 0 ? Le : Pe;
+              s |= y < 0 ? Ee : Re;
               break;
             }
             case "vertical": {
-              s |= g < 0 ? Ee : Re;
+              s |= y < 0 ? Ce : Me;
               break;
             }
           }
@@ -543,9 +550,9 @@ function Ce({
         c.set(i.group, {
           derivedPanelConstraints: p,
           layout: x,
-          separatorToPanels: v
+          separatorToPanels: m
         });
-        const S = i.group.panels.map(({ id: y }) => y).join(",");
+        const S = i.group.panels.map(({ id: g }) => g).join(",");
         i.group.inMemoryLayouts[S] = x;
       }
     }
@@ -554,7 +561,7 @@ function Ce({
     mountedGroups: c
   }), le();
 }
-function he(e) {
+function ve(e) {
   if (e.defaultPrevented)
     return;
   if (e.relatedTarget !== null)
@@ -565,7 +572,7 @@ function he(e) {
   switch (t.state) {
     case "active":
       t.hitRegions.forEach((o) => {
-        e.currentTarget === o.group.element && Ce({
+        e.currentTarget === o.group.element && Ge({
           event: e,
           hitRegions: t.hitRegions,
           initialLayoutMap: t.initialLayoutMap,
@@ -574,7 +581,7 @@ function he(e) {
       });
   }
 }
-function ee(e) {
+function Q(e) {
   const t = e.parentElement;
   z(t, "Parent group element not found");
   const { mountedGroups: n } = O();
@@ -626,7 +633,7 @@ function $({
   const c = Object.keys(e);
   return o.reduce((i, a, l) => (i[c[l]] = a, i), {});
 }
-function Me({
+function Ie({
   groupId: e
 }) {
   const t = () => {
@@ -651,7 +658,7 @@ function Me({
         layout: n,
         panelConstraints: o
       });
-      return U(s, i) || C((a) => ({
+      return B(s, i) || C((a) => ({
         mountedGroups: new Map(a.mountedGroups).set(r, {
           derivedPanelConstraints: o,
           layout: i,
@@ -661,18 +668,18 @@ function Me({
     }
   };
 }
-function Ge(e) {
+function ke(e) {
   const { mountedGroups: t } = O(), n = t.get(e);
   return z(n, `Mounted Group ${e.id} not found`), n;
 }
 function D(e, t) {
-  const n = ee(e), o = Ge(n), r = n.separators.find(
+  const n = Q(e), o = ke(n), r = n.separators.find(
     (u) => u.element === e
   );
   z(r, "Matching separator not found");
   const s = o.separatorToPanels.get(r);
   z(s, "Matching panels not found");
-  const c = s.map((u) => n.panels.indexOf(u)), a = Me({ groupId: n.id }).getLayout(), l = B({
+  const c = s.map((u) => n.panels.indexOf(u)), a = Ie({ groupId: n.id }).getLayout(), l = V({
     delta: t,
     initialLayout: a,
     panelConstraints: o.derivedPanelConstraints,
@@ -683,7 +690,7 @@ function D(e, t) {
     layout: l,
     panelConstraints: o.derivedPanelConstraints
   });
-  U(a, f) || C((u) => ({
+  B(a, f) || C((u) => ({
     mountedGroups: new Map(u.mountedGroups).set(n, {
       derivedPanelConstraints: o.derivedPanelConstraints,
       layout: f,
@@ -691,10 +698,10 @@ function D(e, t) {
     })
   }));
 }
-function ve(e) {
+function ye(e) {
   if (e.defaultPrevented)
     return;
-  const t = e.currentTarget, n = ee(t);
+  const t = e.currentTarget, n = Q(t);
   if (!n.disabled)
     switch (e.key) {
       case "ArrowDown": {
@@ -719,7 +726,7 @@ function ve(e) {
       }
       case "Enter": {
         e.preventDefault();
-        const o = ee(t), { derivedPanelConstraints: r, layout: s, separatorToPanels: c } = Ge(o), i = o.separators.find(
+        const o = Q(t), { derivedPanelConstraints: r, layout: s, separatorToPanels: c } = ke(o), i = o.separators.find(
           (u) => u.element === t
         );
         z(i, "Matching separator not found");
@@ -729,14 +736,14 @@ function ve(e) {
           (u) => u.panelId === l.id
         );
         if (z(f, "Panel metadata not found"), f.collapsible) {
-          const u = s[l.id], m = f.collapsedSize === u ? o.inMemoryLastExpandedPanelSizes[l.id] ?? f.minSize : f.collapsedSize;
-          D(t, m - u);
+          const u = s[l.id], h = f.collapsedSize === u ? o.inMemoryLastExpandedPanelSizes[l.id] ?? f.minSize : f.collapsedSize;
+          D(t, h - u);
         }
         break;
       }
       case "F6": {
         e.preventDefault();
-        const r = ee(t).separators.map(
+        const r = Q(t).separators.map(
           (a) => a.element
         ), s = Array.from(r).findIndex(
           (a) => a === e.currentTarget
@@ -752,7 +759,7 @@ function ve(e) {
       }
     }
 }
-function et(e, t) {
+function tt(e, t) {
   return {
     x: e.x >= t.left && e.x <= t.right ? 0 : Math.min(
       Math.abs(e.x - t.left),
@@ -764,13 +771,13 @@ function et(e, t) {
     )
   };
 }
-function tt(e, t, n) {
+function nt(e, t, n) {
   let o, r = {
     x: 1 / 0,
     y: 1 / 0
   };
   for (const s of t) {
-    const c = et(n, s.rect);
+    const c = tt(n, s.rect);
     switch (e) {
       case "horizontal": {
         c.x <= r.x && (o = s, r = c);
@@ -787,16 +794,16 @@ function tt(e, t, n) {
     hitRegion: o
   } : void 0;
 }
-let Q;
-function nt() {
-  return Q === void 0 && (typeof matchMedia == "function" ? Q = !!matchMedia("(pointer:coarse)").matches : Q = !1), Q;
+let J;
+function ot() {
+  return J === void 0 && (typeof matchMedia == "function" ? J = !!matchMedia("(pointer:coarse)").matches : J = !1), J;
 }
-function Ie(e, t) {
+function Oe(e, t) {
   const n = [];
   return t.forEach((o, r) => {
     if (r.disabled)
       return;
-    const s = nt() ? me.coarse : me.precise, c = we(r), i = tt(r.orientation, c, {
+    const s = ot() ? he.coarse : he.precise, c = Pe(r), i = nt(r.orientation, c, {
       x: e.clientX,
       y: e.clientY
     });
@@ -806,7 +813,7 @@ function Ie(e, t) {
 function ge(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = O(), n = Ie(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Map();
+  const { mountedGroups: t } = O(), n = Oe(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Map();
   let i = !1;
   n.forEach((a) => {
     o.add(a.group), a.panels.forEach((f) => {
@@ -823,7 +830,7 @@ function ge(e) {
     }
   }), n.length && e.preventDefault();
 }
-function ye(e) {
+function Se(e) {
   if (e.defaultPrevented)
     return;
   const { interactionState: t, mountedGroups: n } = O();
@@ -843,7 +850,7 @@ function ye(e) {
         );
         return;
       }
-      Ce({
+      Ge({
         event: e,
         hitRegions: t.hitRegions,
         initialLayoutMap: t.initialLayoutMap,
@@ -853,7 +860,7 @@ function ye(e) {
       break;
     }
     default: {
-      const o = Ie(e, n);
+      const o = Oe(e, n);
       o.length === 0 ? t.state !== "inactive" && C({
         interactionState: { state: "inactive" }
       }) : C({
@@ -866,7 +873,7 @@ function ye(e) {
     }
   }
 }
-function Se(e) {
+function xe(e) {
   if (e.defaultPrevented)
     return;
   e.preventDefault();
@@ -881,7 +888,7 @@ function Se(e) {
       }), le();
   }
 }
-function ot(e) {
+function it(e) {
   let t = 0, n = 0;
   const o = {};
   for (const s of e)
@@ -899,14 +906,14 @@ function ot(e) {
   }
   return o;
 }
-function it(e, t, n) {
+function st(e, t, n) {
   const o = n[0];
   if (!o)
     return;
   const r = e.panels.find((c) => c.element === t);
   if (!r || !r.onResize)
     return;
-  const s = te({ group: e });
+  const s = ee({ group: e });
   r.onResize(
     {
       asPercentage: I(
@@ -917,32 +924,32 @@ function it(e, t, n) {
     r.id
   );
 }
-function st(e) {
+function rt(e) {
   let t = !0;
   z(
     e.separators.length === 0 || e.separators.length < e.panels.length,
     "Invalid Group configuration; too many Separator components"
   );
   const n = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), r = new ResizeObserver((u) => {
-    for (const m of u) {
-      const { borderBoxSize: g, target: d } = m;
+    for (const h of u) {
+      const { borderBoxSize: y, target: d } = h;
       d === e.element ? t && C((p) => {
-        const h = p.mountedGroups.get(e);
-        if (h) {
-          const v = pe(e), x = h.layout, S = $({
+        const v = p.mountedGroups.get(e);
+        if (v) {
+          const m = me(e), x = v.layout, S = $({
             layout: x,
-            panelConstraints: v
+            panelConstraints: m
           });
           return {
             mountedGroups: new Map(p.mountedGroups).set(e, {
-              derivedPanelConstraints: v,
+              derivedPanelConstraints: m,
               layout: S,
-              separatorToPanels: h.separatorToPanels
+              separatorToPanels: v.separatorToPanels
             })
           };
         }
         return p;
-      }) : it(e, d, g);
+      }) : st(e, d, y);
     }
   });
   r.observe(e.element), e.panels.forEach((u) => {
@@ -951,44 +958,44 @@ function st(e) {
       `Panel ids must be unique; id "${u.id}" was used more than once`
     ), n.add(u.id), u.onResize && r.observe(u.element);
   });
-  const s = pe(e), c = e.panels.map(({ id: u }) => u).join(","), i = e.inMemoryLayouts[c] ?? e.defaultLayout ?? ot(s), a = $({
+  const s = me(e), c = e.panels.map(({ id: u }) => u).join(","), i = e.inMemoryLayouts[c] ?? e.defaultLayout ?? it(s), a = $({
     layout: i,
     panelConstraints: s
-  }), l = we(e), f = C((u) => ({
+  }), l = Pe(e), f = C((u) => ({
     mountedGroups: new Map(u.mountedGroups).set(e, {
       derivedPanelConstraints: s,
       layout: a,
       separatorToPanels: new Map(
-        l.filter((m) => m.separator).map((m) => [m.separator, m.panels])
+        l.filter((h) => h.separator).map((h) => [h.separator, h.panels])
       )
     })
   }));
-  return e.element.addEventListener("pointerleave", he), e.separators.forEach((u) => {
+  return e.element.addEventListener("pointerleave", ve), e.separators.forEach((u) => {
     z(
       !o.has(u.id),
       `Separator ids must be unique; id "${u.id}" was used more than once`
-    ), o.add(u.id), u.element.addEventListener("keydown", ve);
-  }), f.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ge), window.addEventListener("pointermove", ye), window.addEventListener("pointerup", Se)), function() {
+    ), o.add(u.id), u.element.addEventListener("keydown", ye);
+  }), f.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ge), window.addEventListener("pointermove", Se), window.addEventListener("pointerup", xe)), function() {
     t = !1;
-    const m = C((g) => {
-      const d = new Map(g.mountedGroups);
+    const h = C((y) => {
+      const d = new Map(y.mountedGroups);
       return d.delete(e), { mountedGroups: d };
     });
-    e.element.removeEventListener("pointerleave", he), e.separators.forEach((g) => {
-      g.element.removeEventListener("keydown", ve);
-    }), m.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ge), window.removeEventListener("pointermove", ye), window.removeEventListener("pointerup", Se)), r.disconnect();
+    e.element.removeEventListener("pointerleave", ve), e.separators.forEach((y) => {
+      y.element.removeEventListener("keydown", ye);
+    }), h.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ge), window.removeEventListener("pointermove", Se), window.removeEventListener("pointerup", xe)), r.disconnect();
   };
 }
 function ce(e) {
-  const t = $e();
+  const t = _e();
   return `${e ?? t}`;
 }
-const H = typeof window < "u" ? Ne : _e;
+const H = typeof window < "u" ? Fe : He;
 function ue(e) {
   const t = T(e);
   return H(() => {
     t.current = e;
-  }, [e]), xe((n) => t.current?.(n), [t]);
+  }, [e]), ze((n) => t.current?.(n), [t]);
 }
 function fe(...e) {
   return ue((t) => {
@@ -1007,25 +1014,40 @@ function fe(...e) {
     });
   });
 }
-const ke = "--react-resizable-panels--panel--pointer-events";
-function Oe(e, t) {
+const Te = "--react-resizable-panels--panel--pointer-events";
+function De(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 Te = Fe(null);
-function rt(e, t) {
+const Ae = We(null);
+function at(e, t) {
   const n = T({
     getLayout: () => ({}),
-    setLayout: Ze
+    setLayout: Je
   });
-  ze(t, () => n.current, []), H(() => {
+  be(t, () => n.current, []), H(() => {
     Object.assign(
       n.current,
-      Me({ groupId: e })
+      Ie({ groupId: e })
     );
   });
 }
-function ht({
+function lt(e) {
+  return we(
+    (t) => (e?.addEventListener(
+      "contentvisibilityautostatechange",
+      t
+    ), () => {
+      e?.removeEventListener(
+        "contentvisibilityautostatechange",
+        t
+      );
+    }),
+    () => typeof e?.checkVisibility == "function" ? e.checkVisibility() : !0,
+    () => !0
+  );
+}
+function yt({
   children: e,
   className: t,
   defaultLayout: n,
@@ -1039,21 +1061,21 @@ function ht({
   style: f,
   ...u
 }) {
-  const m = T({}), g = ue((b) => {
-    U(m.current, b) || (m.current = b, a?.(b));
-  }), d = ce(i), [p, h] = G(!1), [v, x] = G(null), [S, y] = G(n ?? {}), [L, P] = G([]), [E, K] = G([]), ne = T({}), V = T({}), X = fe(x, s);
-  rt(d, c);
-  const Y = be(
+  const h = T({}), y = ue((b) => {
+    B(h.current, b) || (h.current = b, a?.(b));
+  }), d = ce(i), [p, v] = G(!1), [m, x] = G(null), [S, g] = G(n ?? {}), [L, P] = G([]), [E, U] = G([]), te = lt(m), K = T({}), X = T({}), Y = fe(x, s);
+  at(d, c);
+  const ne = Le(
     () => ({
       id: d,
       orientation: l,
       registerPanel: (b) => (P((M) => re(l, [...M, b])), () => {
         P((M) => M.filter((N) => N !== b));
       }),
-      registerSeparator: (b) => (K(
+      registerSeparator: (b) => (U(
         (M) => re(l, [...M, b])
       ), () => {
-        K(
+        U(
           (M) => M.filter((N) => N !== b)
         );
       })
@@ -1061,68 +1083,69 @@ function ht({
     [d, l]
   );
   H(() => {
-    if (v !== null && L.length > 0) {
-      const b = {
-        defaultLayout: n,
-        disableCursor: !!o,
-        disabled: !!r,
-        element: v,
-        id: d,
-        inMemoryLastExpandedPanelSizes: ne.current,
-        inMemoryLayouts: V.current,
-        orientation: l,
-        panels: L,
-        separators: E
-      }, M = st(b), oe = O().mountedGroups.get(b);
-      oe && (y(oe.layout), g?.(oe.layout));
-      const De = A.addListener(
-        "interactionStateChange",
-        (Z) => {
-          switch (Z.state) {
-            case "active": {
-              h(
-                Z.hitRegions.some(
-                  (_) => _.group === b
-                )
-              );
-              break;
-            }
-            default: {
-              h(!1);
-              break;
-            }
+    if (m === null || L.length === 0)
+      return;
+    const b = {
+      defaultLayout: n,
+      disableCursor: !!o,
+      disabled: !!r,
+      element: m,
+      id: d,
+      inMemoryLastExpandedPanelSizes: K.current,
+      inMemoryLayouts: X.current,
+      orientation: l,
+      panels: L,
+      separators: E
+    }, M = rt(b), oe = O().mountedGroups.get(b);
+    oe && (g(oe.layout), y?.(oe.layout));
+    const $e = A.addListener(
+      "interactionStateChange",
+      (q) => {
+        switch (q.state) {
+          case "active": {
+            v(
+              q.hitRegions.some(
+                (_) => _.group === b
+              )
+            );
+            break;
+          }
+          default: {
+            v(!1);
+            break;
           }
         }
-      ), Ae = A.addListener(
-        "mountedGroupsChange",
-        (Z) => {
-          const _ = Z.get(b);
-          _ && _.derivedPanelConstraints.length > 0 && (y(_.layout), g?.(_.layout));
-        }
-      );
-      return () => {
-        M(), De(), Ae();
-      };
-    }
+      }
+    ), Ne = A.addListener(
+      "mountedGroupsChange",
+      (q) => {
+        const _ = q.get(b);
+        _ && _.derivedPanelConstraints.length > 0 && (g(_.layout), y?.(_.layout));
+      }
+    );
+    return () => {
+      M(), $e(), Ne();
+    };
   }, [
     n,
     o,
     r,
-    v,
+    m,
     d,
-    g,
+    te,
+    y,
     l,
     L,
     E
   ]);
-  const q = {
-    [ke]: p ? "none" : void 0
+  const pe = {
+    [Te]: p ? "none" : void 0
   };
   for (const b in S) {
-    const M = Oe(d, b), N = S[b];
-    q[M] = N;
+    const M = De(d, b), N = S[b];
+    pe[M] = N;
   }
-  return /* @__PURE__ */ W(Te.Provider, { value: Y, children: /* @__PURE__ */ W(
+  return /* @__PURE__ */ W(Ae.Provider, { value: ne, children: /* @__PURE__ */ W(
     "div",
     {
       ...u,
@@ -1131,10 +1154,11 @@ function ht({
       "data-group": !0,
       "data-testid": d,
       id: d,
-      ref: X,
+      ref: Y,
       style: {
         ...f,
-        ...q,
+        ...pe,
+        contentVisibility: "auto",
         display: "flex",
         flexDirection: l === "horizontal" ? "row" : "column",
         flexWrap: "nowrap"
@@ -1146,7 +1170,7 @@ function ht({
 function ae(e) {
   return `react-resizable-panels:${e}`;
 }
-function at({
+function ct({
   id: e,
   layout: t,
   storage: n
@@ -1158,19 +1182,19 @@ function at({
     console.error(o);
   }
 }
-function vt({
+function gt({
   groupId: e,
   storage: t
 }) {
-  const n = He(
-    lt,
+  const n = we(
+    ut,
     () => t.getItem(ae(e)),
     () => t.getItem(ae(e))
-  ), o = be(
+  ), o = Le(
     () => n ? JSON.parse(n) : void 0,
     [n]
-  ), r = xe(
-    (s) => at({
+  ), r = ze(
+    (s) => ct({
       id: e,
       layout: s,
       storage: t
@@ -1182,24 +1206,24 @@ function vt({
     onLayoutChange: r
   };
 }
-function lt() {
+function ut() {
   return function() {
   };
 }
-function gt() {
+function St() {
   return G(null);
 }
-function yt() {
+function xt() {
   return T(null);
 }
 function de() {
-  const e = We(Te);
+  const e = je(Ae);
   return z(
     e,
     "Group Context not found; did you render a Panel or Separator outside of a Group?"
   ), e;
 }
-function ct({
+function ft({
   groupId: e,
   panelId: t
 }) {
@@ -1237,23 +1261,23 @@ function ct({
       derivedPanelConstraints: l,
       group: f,
       layout: u,
-      separatorToPanels: m
-    } = n(), g = f.panels.findIndex((v) => v.id === t), d = g === f.panels.length - 1, p = B({
+      separatorToPanels: h
+    } = n(), y = f.panels.findIndex((m) => m.id === t), d = y === f.panels.length - 1, p = V({
       delta: d ? a - i : i - a,
       initialLayout: u,
       panelConstraints: l,
-      pivotIndices: d ? [g - 1, g] : [g, g + 1],
+      pivotIndices: d ? [y - 1, y] : [y, y + 1],
       prevLayout: u,
       trigger: "imperative-api"
-    }), h = $({
+    }), v = $({
       layout: p,
       panelConstraints: l
     });
-    U(u, h) || C((v) => ({
-      mountedGroups: new Map(v.mountedGroups).set(f, {
+    B(u, v) || C((m) => ({
+      mountedGroups: new Map(m.mountedGroups).set(f, {
         derivedPanelConstraints: l,
-        layout: h,
-        separatorToPanels: m
+        layout: v,
+        separatorToPanels: h
       })
     }));
   };
@@ -1282,7 +1306,7 @@ function ct({
         let l;
         switch (typeof i) {
           case "number": {
-            const { group: f } = n(), u = te({ group: f });
+            const { group: f } = n(), u = ee({ group: f });
             l = I(i / u * 100);
             break;
           }
@@ -1296,7 +1320,7 @@ function ct({
     }
   };
 }
-function ut(e, t) {
+function dt(e, t) {
   const { id: n } = de(), o = T({
     collapse: ie,
     expand: ie,
@@ -1307,14 +1331,14 @@ function ut(e, t) {
     isCollapsed: () => !1,
     resize: ie
   });
-  ze(t, () => o.current, []), H(() => {
+  be(t, () => o.current, []), H(() => {
     Object.assign(
       o.current,
-      ct({ groupId: n, panelId: e })
+      ft({ groupId: n, panelId: e })
     );
   });
 }
-function St({
+function zt({
   children: e,
   className: t,
   collapsedSize: n = "0%",
@@ -1327,9 +1351,9 @@ function St({
   onResize: l,
   panelRef: f,
   style: u,
-  ...m
+  ...h
 }) {
-  const g = !!c, d = ce(c), [p, h] = G(null), v = fe(h, s), { id: x, registerPanel: S } = de(), y = l !== null, L = ue((E) => {
+  const y = !!c, d = ce(c), [p, v] = G(null), m = fe(v, s), { id: x, registerPanel: S } = de(), g = l !== null, L = ue((E) => {
     l?.(E, c);
   });
   H(() => {
@@ -1337,8 +1361,8 @@ function St({
       return S({
         element: p,
         id: d,
-        idIsStable: g,
-        onResize: y ? L : void 0,
+        idIsStable: y,
+        onResize: g ? L : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
@@ -1352,25 +1376,25 @@ function St({
     o,
     r,
     p,
-    y,
-    d,
     g,
+    d,
+    y,
     i,
     a,
     L,
     S
-  ]), ut(d, f);
-  const P = Oe(x, d);
+  ]), dt(d, f);
+  const P = De(x, d);
   return /* @__PURE__ */ W(
     "div",
     {
-      ...m,
+      ...h,
       "data-panel": !0,
       "data-testid": d,
       id: d,
-      ref: v,
+      ref: m,
       style: {
-        ...ft,
+        ...pt,
         flexBasis: 0,
         flexGrow: `var(${P}, 1)`,
         flexShrink: 1,
@@ -1378,7 +1402,7 @@ function St({
         overflow: "hidden",
         // Disable pointer events inside of a panel during resize
         // This avoid edge cases like nested iframes
-        pointerEvents: `var(${ke})`
+        pointerEvents: `var(${Te})`
       },
       children: /* @__PURE__ */ W(
         "div",
@@ -1395,7 +1419,7 @@ function St({
     }
   );
 }
-const ft = {
+const pt = {
   minHeight: "unset",
   maxHeight: "unset",
   height: "unset",
@@ -1411,13 +1435,13 @@ const ft = {
   padding: "unset",
   margin: "unset"
 };
-function xt() {
+function bt() {
   return G(null);
 }
-function zt() {
+function wt() {
   return T(null);
 }
-function dt({
+function mt({
   layout: e,
   panelConstraints: t,
   panelId: n,
@@ -1430,7 +1454,7 @@ function dt({
   if (i) {
     const a = i.maxSize, l = s = i.collapsible ? i.collapsedSize : i.minSize, f = [o, o + 1];
     s = $({
-      layout: B({
+      layout: V({
         delta: l - c,
         initialLayout: e,
         panelConstraints: t,
@@ -1440,7 +1464,7 @@ function dt({
       }),
       panelConstraints: t
     })[n], r = $({
-      layout: B({
+      layout: V({
         delta: a - c,
         initialLayout: e,
         panelConstraints: t,
@@ -1458,7 +1482,7 @@ function dt({
     valueNow: c
   };
 }
-function bt({
+function Lt({
   children: e,
   className: t,
   elementRef: n,
@@ -1466,17 +1490,17 @@ function bt({
   style: r,
   ...s
 }) {
-  const c = ce(o), [i, a] = G({}), [l, f] = G("inactive"), [u, m] = G(null), g = fe(m, n), {
+  const c = ce(o), [i, a] = G({}), [l, f] = G("inactive"), [u, h] = G(null), y = fe(h, n), {
     id: d,
     orientation: p,
-    registerSeparator: h
-  } = de(), v = p === "horizontal" ? "vertical" : "horizontal";
+    registerSeparator: v
+  } = de(), m = p === "horizontal" ? "vertical" : "horizontal";
   return H(() => {
     if (u !== null) {
       const x = {
         element: u,
         id: c
-      }, S = h(x), y = A.addListener(
+      }, S = v(x), g = A.addListener(
         "interactionStateChange",
         (P) => {
           f(
@@ -1489,17 +1513,17 @@ function bt({
         "mountedGroupsChange",
         (P) => {
           P.forEach(
-            ({ derivedPanelConstraints: E, layout: K, separatorToPanels: ne }, V) => {
-              if (V.id === d) {
-                const X = ne.get(x);
+            ({ derivedPanelConstraints: E, layout: U, separatorToPanels: te }, K) => {
+              if (K.id === d) {
+                const X = te.get(x);
                 if (X) {
-                  const Y = X[0], q = V.panels.indexOf(Y);
+                  const Y = X[0], ne = K.panels.indexOf(Y);
                   a(
-                    dt({
-                      layout: K,
+                    mt({
+                      layout: U,
                       panelConstraints: E,
                       panelId: Y.id,
-                      panelIndex: q
+                      panelIndex: ne
                     })
                   );
                 }
@@ -1509,15 +1533,15 @@ function bt({
         }
       );
       return () => {
-        y(), L(), S();
+        g(), L(), S();
       };
     }
-  }, [u, d, c, h]), /* @__PURE__ */ W(
+  }, [u, d, c, v]), /* @__PURE__ */ W(
     "div",
     {
       ...s,
       "aria-controls": i.valueControls,
-      "aria-orientation": v,
+      "aria-orientation": m,
       "aria-valuemax": i.valueMax,
       "aria-valuemin": i.valueMin,
       "aria-valuenow": i.valueNow,
@@ -1526,7 +1550,7 @@ function bt({
       "data-separator": l,
       "data-testid": c,
       id: c,
-      ref: g,
+      ref: y,
       role: "separator",
       style: {
         flexBasis: "auto",
@@ -1539,13 +1563,13 @@ function bt({
   );
 }
 export {
-  ht as Group,
-  St as Panel,
-  bt as Separator,
-  vt as useDefaultLayout,
-  gt as useGroupCallbackRef,
-  yt as useGroupRef,
-  xt as usePanelCallbackRef,
-  zt as usePanelRef
+  yt as Group,
+  zt as Panel,
+  Lt as Separator,
+  gt as useDefaultLayout,
+  St as useGroupCallbackRef,
+  xt as useGroupRef,
+  bt as usePanelCallbackRef,
+  wt as usePanelRef
 };
 //# sourceMappingURL=react-resizable-panels.js.map