react-resizable-panels 4.0.0-alpha.2 → 4.0.0-alpha.3

package/dist/react-resizable-panels.js

@@ -1,6 +1,10 @@
 "use client";
 import { jsx as j } from "react/jsx-runtime";
-import { useId as De, useLayoutEffect as Te, useEffect as Ae, useRef as D, useCallback as ge, createContext as $e, useImperativeHandle as Se, useState as R, useMemo as xe, useSyncExternalStore as Ne, useContext as _e } from "react";
+import { useId as Te, useLayoutEffect as De, useEffect as Ae, useRef as T, useCallback as ge, createContext as $e, useImperativeHandle as Se, useState as M, useMemo as xe, useSyncExternalStore as Ne, useContext as _e } from "react";
+function S(e, t = "Assertion error") {
+  if (!e)
+    throw Error(t);
+}
 function re(e, t) {
   return t.sort(
     e === "horizontal" ? Fe : He
@@ -15,22 +19,22 @@ function He(e, t) {
   return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
 }
 function ze(e) {
-  const { element: t, orientation: n, panels: o, separators: s } = e, i = re(
+  const { element: t, orientation: n, panels: o, separators: s } = e, r = re(
     n,
-    Array.from(t.children).filter((c) => c instanceof HTMLElement).map((c) => ({ element: c }))
-  ).map(({ element: c }) => c), a = [];
-  let r, l;
-  for (const c of i) {
+    Array.from(t.children).filter((l) => l instanceof HTMLElement).map((l) => ({ element: l }))
+  ).map(({ element: l }) => l), c = [];
+  let i, a;
+  for (const l of r) {
     const u = o.find(
-      (f) => f.element === c
+      (f) => f.element === l
     );
     if (u) {
-      if (r) {
-        const f = r.element.getBoundingClientRect(), m = c.getBoundingClientRect();
-        a.push({
+      if (i) {
+        const f = i.element.getBoundingClientRect(), m = l.getBoundingClientRect();
+        c.push({
           group: e,
-          panels: [r, u],
-          separator: l,
+          panels: [i, u],
+          separator: a,
           rect: n === "horizontal" ? new DOMRect(
             f.right,
             m.top,
@@ -44,15 +48,15 @@ function ze(e) {
           )
         });
       }
-      r = u, l = void 0;
+      i = u, a = void 0;
     } else {
       const f = s.find(
-        (m) => m.element === c
+        (m) => m.element === l
       );
-      f ? l = f : (r = void 0, l = void 0);
+      f ? a = f : (i = void 0, a = void 0);
     }
   }
-  return a;
+  return c;
 }
 function je(e, t) {
   const n = getComputedStyle(e), o = parseFloat(n.fontSize);
@@ -78,14 +82,14 @@ function Ke(e) {
     }
   }
 }
-function Y({
+function Z({
   groupSize: e,
   panelElement: t,
   styleProp: n
 }) {
   let o;
-  const [s, i] = Ke(n);
-  switch (i) {
+  const [s, r] = Ke(n);
+  switch (r) {
     case "%": {
       o = s / 100 * e;
       break;
@@ -113,7 +117,7 @@ function Y({
   }
   return o;
 }
-function C(e) {
+function R(e) {
   return parseFloat(e.toFixed(3));
 }
 function le({
@@ -125,57 +129,53 @@ function le({
 function pe(e) {
   const { panels: t } = e, n = le({ group: e });
   return t.map((o) => {
-    const { element: s, panelConstraints: i } = o;
-    let a = 0;
-    if (i.collapsedSize) {
-      const u = Y({
+    const { element: s, panelConstraints: r } = o;
+    let c = 0;
+    if (r.collapsedSize) {
+      const u = Z({
         groupSize: n,
         panelElement: s,
-        styleProp: i.collapsedSize
+        styleProp: r.collapsedSize
       });
-      a = C(u / n * 100);
+      c = R(u / n * 100);
     }
-    let r;
-    if (i.defaultSize) {
-      const u = Y({
+    let i;
+    if (r.defaultSize) {
+      const u = Z({
         groupSize: n,
         panelElement: s,
-        styleProp: i.defaultSize
+        styleProp: r.defaultSize
       });
-      r = C(u / n * 100);
+      i = R(u / n * 100);
     }
-    let l = 0;
-    if (i.minSize) {
-      const u = Y({
+    let a = 0;
+    if (r.minSize) {
+      const u = Z({
         groupSize: n,
         panelElement: s,
-        styleProp: i.minSize
+        styleProp: r.minSize
       });
-      l = C(u / n * 100);
+      a = R(u / n * 100);
     }
-    let c = 100;
-    if (i.maxSize) {
-      const u = Y({
+    let l = 100;
+    if (r.maxSize) {
+      const u = Z({
         groupSize: n,
         panelElement: s,
-        styleProp: i.maxSize
+        styleProp: r.maxSize
       });
-      c = C(u / n * 100);
+      l = R(u / n * 100);
     }
     return {
-      collapsedSize: a,
-      collapsible: i.collapsible === !0,
-      defaultSize: r,
-      minSize: l,
-      maxSize: c,
+      collapsedSize: c,
+      collapsible: r.collapsible === !0,
+      defaultSize: i,
+      minSize: a,
+      maxSize: l,
       panelId: o.id
     };
   });
 }
-function S(e, t = "Assertion error") {
-  if (!e)
-    throw console.error(t), Error(t);
-}
 class Ve {
   #e = {};
   addListener(t, n) {
@@ -190,18 +190,18 @@ class Ve {
       if (o.length === 1)
         o[0].call(null, n);
       else {
-        let s = !1, i = null;
-        const a = Array.from(o);
-        for (let r = 0; r < a.length; r++) {
-          const l = a[r];
+        let s = !1, r = null;
+        const c = Array.from(o);
+        for (let i = 0; i < c.length; i++) {
+          const a = c[i];
           try {
-            l.call(null, n);
-          } catch (c) {
-            i === null && (s = !0, i = c);
+            a.call(null, n);
+          } catch (l) {
+            r === null && (s = !0, r = l);
           }
         }
         if (s)
-          throw i;
+          throw r;
       }
   }
   removeAllListeners() {
@@ -216,7 +216,7 @@ class Ve {
   }
 }
 function L(e, t, n = 0) {
-  return Math.abs(C(e) - C(t)) <= n;
+  return Math.abs(R(e) - R(t)) <= n;
 }
 let P = {
   cursorFlags: 0,
@@ -229,7 +229,7 @@ const A = new Ve();
 function k() {
   return P;
 }
-function M(e) {
+function E(e) {
   const t = typeof e == "function" ? e(P) : e;
   if (P === t)
     return P;
@@ -238,24 +238,24 @@ function M(e) {
     ...P,
     ...t
   }, t.cursorFlags !== void 0 && A.emit("cursorFlagsChange", P.cursorFlags), t.interactionState !== void 0 && A.emit("interactionStateChange", P.interactionState), t.mountedGroups !== void 0 && (P.mountedGroups.forEach((o, s) => {
-    o.derivedPanelConstraints.forEach((i) => {
-      if (i.collapsible) {
-        const { layout: a } = n.mountedGroups.get(s) ?? {};
-        if (a) {
-          const r = L(
-            i.collapsedSize,
-            o.layout[i.panelId]
-          ), l = L(
-            i.collapsedSize,
-            a[i.panelId]
+    o.derivedPanelConstraints.forEach((r) => {
+      if (r.collapsible) {
+        const { layout: c } = n.mountedGroups.get(s) ?? {};
+        if (c) {
+          const i = L(
+            r.collapsedSize,
+            o.layout[r.panelId]
+          ), a = L(
+            r.collapsedSize,
+            c[r.panelId]
           );
-          r && !l && (s.inMemoryLastExpandedPanelSizes[i.panelId] = a[i.panelId]);
+          i && !a && (s.inMemoryLastExpandedPanelSizes[r.panelId] = c[r.panelId]);
         }
       }
     });
   }), A.emit("mountedGroupsChange", P.mountedGroups)), P;
 }
-function Xe(e, t) {
+function qe(e, t) {
   if (e.length !== t.length)
     return !1;
   for (let n = 0; n < e.length; n++)
@@ -266,7 +266,7 @@ function Xe(e, t) {
 function W(e, t) {
   return L(e, t) ? 0 : e > t ? 1 : -1;
 }
-function _({
+function F({
   panelConstraints: e,
   size: t
 }) {
@@ -274,153 +274,153 @@ function _({
     collapsedSize: n = 0,
     collapsible: o,
     maxSize: s = 100,
-    minSize: i = 0
+    minSize: r = 0
   } = e;
-  if (W(t, i) < 0)
+  if (W(t, r) < 0)
     if (o) {
-      const a = (n + i) / 2;
-      W(t, a) < 0 ? t = n : t = i;
+      const c = (n + r) / 2;
+      W(t, c) < 0 ? t = n : t = r;
     } else
-      t = i;
-  return t = Math.min(s, t), t = C(t), t;
+      t = r;
+  return t = Math.min(s, t), t = R(t), t;
 }
-function Q({
+function U({
   delta: e,
   initialLayout: t,
   panelConstraints: n,
   pivotIndices: o,
   prevLayout: s,
-  trigger: i
+  trigger: r
 }) {
   if (L(e, 0))
     return t;
-  const a = Object.values(t), r = Object.values(s), l = [...a], [c, u] = o;
-  S(c != null, "Invalid first pivot index"), S(u != null, "Invalid second pivot index");
+  const c = Object.values(t), i = Object.values(s), a = [...c], [l, u] = o;
+  S(l != null, "Invalid first pivot index"), S(u != null, "Invalid second pivot index");
   let f = 0;
-  if (i === "keyboard") {
+  if (r === "keyboard") {
     {
-      const p = e < 0 ? u : c, d = n[p];
+      const p = e < 0 ? u : l, d = n[p];
       S(
         d,
         `Panel constraints not found for index ${p}`
       );
       const {
         collapsedSize: h = 0,
-        collapsible: v,
+        collapsible: y,
         minSize: z = 0
       } = d;
-      if (v) {
-        const x = a[p];
+      if (y) {
+        const x = c[p];
         if (S(
           x != null,
           `Previous layout not found for panel index ${p}`
         ), L(x, h)) {
-          const y = z - x;
-          W(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
+          const g = z - x;
+          W(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
     {
-      const p = e < 0 ? c : u, d = n[p];
+      const p = e < 0 ? l : u, d = n[p];
       S(
         d,
         `No panel constraints found for index ${p}`
       );
       const {
         collapsedSize: h = 0,
-        collapsible: v,
+        collapsible: y,
         minSize: z = 0
       } = d;
-      if (v) {
-        const x = a[p];
+      if (y) {
+        const x = c[p];
         if (S(
           x != null,
           `Previous layout not found for panel index ${p}`
         ), L(x, z)) {
-          const y = x - h;
-          W(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
+          const g = x - h;
+          W(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
   }
   {
     const p = e < 0 ? 1 : -1;
-    let d = e < 0 ? u : c, h = 0;
+    let d = e < 0 ? u : l, h = 0;
     for (; ; ) {
-      const z = a[d];
+      const z = c[d];
       S(
         z != null,
         `Previous layout not found for panel index ${d}`
       );
-      const y = _({
+      const g = F({
         panelConstraints: n[d],
         size: 100
       }) - z;
-      if (h += y, d += p, d < 0 || d >= n.length)
+      if (h += g, d += p, d < 0 || d >= n.length)
         break;
     }
-    const v = Math.min(Math.abs(e), Math.abs(h));
-    e = e < 0 ? 0 - v : v;
+    const y = Math.min(Math.abs(e), Math.abs(h));
+    e = e < 0 ? 0 - y : y;
   }
   {
-    let d = e < 0 ? c : u;
+    let d = e < 0 ? l : u;
     for (; d >= 0 && d < n.length; ) {
-      const h = Math.abs(e) - Math.abs(f), v = a[d];
+      const h = Math.abs(e) - Math.abs(f), y = c[d];
       S(
-        v != null,
+        y != null,
         `Previous layout not found for panel index ${d}`
       );
-      const z = v - h, x = _({
+      const z = y - h, x = F({
         panelConstraints: n[d],
         size: z
       });
-      if (!L(v, x) && (f += v - x, l[d] = x, f.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+      if (!L(y, x) && (f += y - x, a[d] = x, f.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
         numeric: !0
       }) >= 0))
         break;
       e < 0 ? d-- : d++;
     }
   }
-  if (Xe(r, l))
+  if (qe(i, a))
     return s;
   {
-    const p = e < 0 ? u : c, d = a[p];
+    const p = e < 0 ? u : l, d = c[p];
     S(
       d != null,
       `Previous layout not found for panel index ${p}`
     );
-    const h = d + f, v = _({
+    const h = d + f, y = F({
       panelConstraints: n[p],
       size: h
     });
-    if (l[p] = v, !L(v, h)) {
-      let z = h - v, y = e < 0 ? u : c;
-      for (; y >= 0 && y < n.length; ) {
-        const w = l[y];
+    if (a[p] = y, !L(y, h)) {
+      let z = h - y, g = e < 0 ? u : l;
+      for (; g >= 0 && g < n.length; ) {
+        const w = a[g];
         S(
           w != null,
-          `Previous layout not found for panel index ${y}`
+          `Previous layout not found for panel index ${g}`
         );
-        const G = w + z, O = _({
-          panelConstraints: n[y],
+        const G = w + z, O = F({
+          panelConstraints: n[g],
           size: G
         });
-        if (L(w, O) || (z -= O - w, l[y] = O), L(z, 0))
+        if (L(w, O) || (z -= O - w, a[g] = O), L(z, 0))
           break;
-        e > 0 ? y-- : y++;
+        e > 0 ? g-- : g++;
       }
     }
   }
-  const m = Object.values(l).reduce(
+  const m = Object.values(a).reduce(
     (p, d) => d + p,
     0
   );
   if (!L(m, 100, 0.1))
     return s;
-  const g = Object.keys(s);
-  return l.reduce((p, d, h) => (p[g[h]] = d, p), {});
+  const v = Object.keys(s);
+  return a.reduce((p, d, h) => (p[v[h]] = d, p), {});
 }
-function J(e) {
+function ee(e) {
   const t = e.parentElement;
   S(t, "Parent group element not found");
   const { mountedGroups: n } = k();
@@ -429,7 +429,7 @@ function J(e) {
       return o;
   throw Error("Could not find parent Group for separator element");
 }
-function ee(e, t) {
+function B(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
     return !1;
   for (const n in e)
@@ -437,48 +437,48 @@ function ee(e, t) {
       return !1;
   return !0;
 }
-function F({
+function $({
   layout: e,
   panelConstraints: t
 }) {
   const o = [...Object.values(e)], s = o.reduce(
-    (r, l) => r + l,
+    (i, a) => i + a,
     0
   );
   if (o.length !== t.length)
     throw Error(
-      `Invalid ${t.length} panel layout: ${o.map((r) => `${r}%`).join(", ")}`
+      `Invalid ${t.length} panel layout: ${o.map((i) => `${i}%`).join(", ")}`
     );
   if (!L(s, 100) && o.length > 0)
-    for (let r = 0; r < t.length; r++) {
-      const l = o[r];
-      S(l != null, `No layout data found for index ${r}`);
-      const c = 100 / s * l;
-      o[r] = c;
+    for (let i = 0; i < t.length; i++) {
+      const a = o[i];
+      S(a != null, `No layout data found for index ${i}`);
+      const l = 100 / s * a;
+      o[i] = l;
     }
-  let i = 0;
-  for (let r = 0; r < t.length; r++) {
-    const l = o[r];
-    S(l != null, `No layout data found for index ${r}`);
-    const c = _({
-      panelConstraints: t[r],
-      size: l
+  let r = 0;
+  for (let i = 0; i < t.length; i++) {
+    const a = o[i];
+    S(a != null, `No layout data found for index ${i}`);
+    const l = F({
+      panelConstraints: t[i],
+      size: a
     });
-    l != c && (i += l - c, o[r] = c);
+    a != l && (r += a - l, o[i] = l);
   }
-  if (!L(i, 0))
-    for (let r = 0; r < t.length; r++) {
-      const l = o[r];
-      S(l != null, `No layout data found for index ${r}`);
-      const c = l + i, u = _({
-        panelConstraints: t[r],
-        size: c
+  if (!L(r, 0))
+    for (let i = 0; i < t.length; i++) {
+      const a = o[i];
+      S(a != null, `No layout data found for index ${i}`);
+      const l = a + r, u = F({
+        panelConstraints: t[i],
+        size: l
       });
-      if (l !== u && (i -= u - l, o[r] = u, L(i, 0)))
+      if (a !== u && (r -= u - a, o[i] = u, L(r, 0)))
         break;
     }
-  const a = Object.keys(e);
-  return o.reduce((r, l, c) => (r[a[c]] = l, r), {});
+  const c = Object.keys(e);
+  return o.reduce((i, a, l) => (i[c[l]] = a, i), {});
 }
 function be({
   groupId: e
@@ -499,19 +499,19 @@ function be({
       const {
         derivedPanelConstraints: o,
         group: s,
-        layout: i,
-        separatorToPanels: a
-      } = t(), r = F({
+        layout: r,
+        separatorToPanels: c
+      } = t(), i = $({
         layout: n,
         panelConstraints: o
       });
-      return ee(i, r) || M((l) => ({
-        mountedGroups: new Map(l.mountedGroups).set(s, {
+      return B(r, i) || E((a) => ({
+        mountedGroups: new Map(a.mountedGroups).set(s, {
           derivedPanelConstraints: o,
-          layout: r,
-          separatorToPanels: a
+          layout: i,
+          separatorToPanels: c
         })
-      })), r;
+      })), i;
     }
   };
 }
@@ -519,25 +519,25 @@ function we(e) {
   const { mountedGroups: t } = k(), n = t.get(e);
   return S(n, `Mounted Group ${e.id} not found`), n;
 }
-function T(e, t) {
-  const n = J(e), o = we(n), s = n.separators.find(
+function D(e, t) {
+  const n = ee(e), o = we(n), s = n.separators.find(
     (f) => f.element === e
   );
   S(s, "Matching separator not found");
-  const i = o.separatorToPanels.get(s);
-  S(i, "Matching panels not found");
-  const a = i.map((f) => n.panels.indexOf(f)), l = be({ groupId: n.id }).getLayout(), c = Q({
+  const r = o.separatorToPanels.get(s);
+  S(r, "Matching panels not found");
+  const c = r.map((f) => n.panels.indexOf(f)), a = be({ groupId: n.id }).getLayout(), l = U({
     delta: t,
-    initialLayout: l,
+    initialLayout: a,
     panelConstraints: o.derivedPanelConstraints,
-    pivotIndices: a,
-    prevLayout: l,
+    pivotIndices: c,
+    prevLayout: a,
     trigger: "keyboard"
-  }), u = F({
-    layout: c,
+  }), u = $({
+    layout: l,
     panelConstraints: o.derivedPanelConstraints
   });
-  ee(l, u) || M((f) => ({
+  B(a, u) || E((f) => ({
     mountedGroups: new Map(f.mountedGroups).set(n, {
       derivedPanelConstraints: o.derivedPanelConstraints,
       layout: u,
@@ -548,70 +548,70 @@ function T(e, t) {
 function me(e) {
   if (e.defaultPrevented)
     return;
-  const t = e.currentTarget, n = J(t);
+  const t = e.currentTarget, n = ee(t);
   if (!n.disabled)
     switch (e.key) {
       case "ArrowDown": {
-        e.preventDefault(), n.orientation === "vertical" && T(t, 5);
+        e.preventDefault(), n.orientation === "vertical" && D(t, 5);
         break;
       }
       case "ArrowLeft": {
-        e.preventDefault(), n.orientation === "horizontal" && T(t, -5);
+        e.preventDefault(), n.orientation === "horizontal" && D(t, -5);
         break;
       }
       case "ArrowRight": {
-        e.preventDefault(), n.orientation === "horizontal" && T(t, 5);
+        e.preventDefault(), n.orientation === "horizontal" && D(t, 5);
         break;
       }
       case "ArrowUp": {
-        e.preventDefault(), n.orientation === "vertical" && T(t, -5);
+        e.preventDefault(), n.orientation === "vertical" && D(t, -5);
         break;
       }
       case "End": {
-        e.preventDefault(), T(t, 100);
+        e.preventDefault(), D(t, 100);
         break;
       }
       case "Enter": {
         e.preventDefault();
-        const o = J(t), { derivedPanelConstraints: s, layout: i, separatorToPanels: a } = we(o), r = o.separators.find(
+        const o = ee(t), { derivedPanelConstraints: s, layout: r, separatorToPanels: c } = we(o), i = o.separators.find(
           (f) => f.element === t
         );
-        S(r, "Matching separator not found");
-        const l = a.get(r);
-        S(l, "Matching panels not found");
-        const c = l[0], u = s.find(
-          (f) => f.panelId === c.id
+        S(i, "Matching separator not found");
+        const a = c.get(i);
+        S(a, "Matching panels not found");
+        const l = a[0], u = s.find(
+          (f) => f.panelId === l.id
         );
         if (S(u, "Panel metadata not found"), u.collapsible) {
-          const f = i[c.id], m = u.collapsedSize === f ? o.inMemoryLastExpandedPanelSizes[c.id] ?? u.minSize : u.collapsedSize;
-          T(t, m - f);
+          const f = r[l.id], m = u.collapsedSize === f ? o.inMemoryLastExpandedPanelSizes[l.id] ?? u.minSize : u.collapsedSize;
+          D(t, m - f);
         }
         break;
       }
       case "F6": {
         e.preventDefault();
-        const s = J(t).separators.map(
-          (l) => l.element
-        ), i = Array.from(s).findIndex(
-          (l) => l === e.currentTarget
+        const s = ee(t).separators.map(
+          (a) => a.element
+        ), r = Array.from(s).findIndex(
+          (a) => a === e.currentTarget
         );
-        S(i !== null, "Index not found");
-        const a = e.shiftKey ? i > 0 ? i - 1 : s.length - 1 : i + 1 < s.length ? i + 1 : 0;
-        s[a].focus();
+        S(r !== null, "Index not found");
+        const c = e.shiftKey ? r > 0 ? r - 1 : s.length - 1 : r + 1 < s.length ? r + 1 : 0;
+        s[c].focus();
         break;
       }
       case "Home": {
-        e.preventDefault(), T(t, -100);
+        e.preventDefault(), D(t, -100);
         break;
       }
     }
 }
-const Ye = (e) => e, oe = () => {
-}, Le = 1, Pe = 2, Ee = 4, Re = 8, he = {
+const Xe = (e) => e, oe = () => {
+}, Le = 1, Pe = 2, Ee = 4, Ce = 8, he = {
   coarse: 10,
   precise: 5
 };
-function Ze(e, t) {
+function Ye(e, t) {
   return {
     x: e.x >= t.left && e.x <= t.right ? 0 : Math.min(
       Math.abs(e.x - t.left),
@@ -623,20 +623,20 @@ function Ze(e, t) {
     )
   };
 }
-function qe(e, t, n) {
+function Ze(e, t, n) {
   let o, s = {
     x: 1 / 0,
     y: 1 / 0
   };
-  for (const i of t) {
-    const a = Ze(n, i.rect);
+  for (const r of t) {
+    const c = Ye(n, r.rect);
     switch (e) {
       case "horizontal": {
-        a.x <= s.x && (o = i, s = a);
+        c.x <= s.x && (o = r, s = c);
         break;
       }
       case "vertical": {
-        a.y <= s.y && (o = i, s = a);
+        c.y <= s.y && (o = r, s = c);
         break;
       }
     }
@@ -646,36 +646,36 @@ function qe(e, t, n) {
     hitRegion: o
   } : void 0;
 }
-let Z;
+let J;
 function Je() {
-  return Z === void 0 && (typeof matchMedia == "function" ? Z = !!matchMedia("(pointer:coarse)").matches : Z = !1), Z;
+  return J === void 0 && (typeof matchMedia == "function" ? J = !!matchMedia("(pointer:coarse)").matches : J = !1), J;
 }
-function Ce(e, t) {
+function Me(e, t) {
   const n = [];
   return t.forEach((o, s) => {
     if (s.disabled)
       return;
-    const i = Je() ? he.coarse : he.precise, a = ze(s), r = qe(s.orientation, a, {
+    const r = Je() ? he.coarse : he.precise, c = ze(s), i = Ze(s.orientation, c, {
       x: e.clientX,
       y: e.clientY
     });
-    r && r.distance.x <= i && r.distance.y <= i && n.push(r.hitRegion);
+    i && i.distance.x <= r && i.distance.y <= r && n.push(i.hitRegion);
   }), n;
 }
 function ve(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = k(), n = Ce(e, t), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map();
-  n.forEach((r) => {
-    o.add(r.group), r.panels.forEach((c) => {
-      s.add(c);
-    }), r.separator && i.add(r.separator);
-    const l = t.get(r.group);
-    l && a.set(r.group, l.layout);
-  }), M({
+  const { mountedGroups: t } = k(), n = Me(e, t), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Map();
+  n.forEach((i) => {
+    o.add(i.group), i.panels.forEach((l) => {
+      s.add(l);
+    }), i.separator && r.add(i.separator);
+    const a = t.get(i.group);
+    a && c.set(i.group, a.layout);
+  }), E({
     interactionState: {
       hitRegions: n,
-      initialLayoutMap: a,
+      initialLayoutMap: c,
       pointerDownAtPoint: { x: e.clientX, y: e.clientY },
       state: "active"
     }
@@ -690,9 +690,9 @@ function Qe({
   switch (n) {
     case "active":
     case "hover":
-      t.forEach((i) => {
-        if (!i.disableCursor)
-          switch (i.orientation) {
+      t.forEach((r) => {
+        if (!r.disableCursor)
+          switch (r.orientation) {
             case "horizontal": {
               o++;
               break;
@@ -708,15 +708,15 @@ function Qe({
     return null;
   switch (n) {
     case "active": {
-      const i = (e & Le) !== 0, a = (e & Pe) !== 0, r = (e & Ee) !== 0, l = (e & Re) !== 0;
+      const r = (e & Le) !== 0, c = (e & Pe) !== 0, i = (e & Ee) !== 0, a = (e & Ce) !== 0;
       if (e) {
-        if (i)
-          return r ? "se-resize" : l ? "ne-resize" : "e-resize";
-        if (a)
-          return r ? "sw-resize" : l ? "nw-resize" : "w-resize";
         if (r)
+          return i ? "se-resize" : a ? "ne-resize" : "e-resize";
+        if (c)
+          return i ? "sw-resize" : a ? "nw-resize" : "w-resize";
+        if (i)
           return "s-resize";
-        if (l)
+        if (a)
           return "n-resize";
       }
       break;
@@ -747,7 +747,7 @@ function se() {
     }
   }
 }
-function q(e) {
+function Q(e) {
   if (e.defaultPrevented)
     return;
   const { interactionState: t, mountedGroups: n } = k();
@@ -757,8 +757,8 @@ function q(e) {
         // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
         e.type !== "pointerleave" && e.buttons === 0
       ) {
-        M(
-          (i) => i.interactionState.state === "inactive" ? i : {
+        E(
+          (r) => r.interactionState.state === "inactive" ? r : {
             cursorFlags: 0,
             interactionState: {
               state: "inactive"
@@ -769,59 +769,59 @@ function q(e) {
       }
       let o = 0;
       const s = new Map(n);
-      t.hitRegions.forEach((i) => {
-        const { disableCursor: a, element: r, orientation: l, panels: c } = i.group;
+      t.hitRegions.forEach((r) => {
+        const { disableCursor: c, element: i, orientation: a, panels: l } = r.group;
         let u = 0;
-        t.state === "active" && (l === "horizontal" ? u = (e.clientX - t.pointerDownAtPoint.x) / r.offsetWidth * 100 : u = (e.clientY - t.pointerDownAtPoint.y) / r.offsetHeight * 100);
+        t.state === "active" && (a === "horizontal" ? u = (e.clientX - t.pointerDownAtPoint.x) / i.offsetWidth * 100 : u = (e.clientY - t.pointerDownAtPoint.y) / i.offsetHeight * 100);
         const f = t.initialLayoutMap.get(
-          i.group
+          r.group
         ), {
           derivedPanelConstraints: m,
-          layout: g,
+          layout: v,
           separatorToPanels: p
-        } = n.get(i.group) ?? {};
-        if (m && f && g && p) {
-          const d = Q({
+        } = n.get(r.group) ?? {};
+        if (m && f && v && p) {
+          const d = U({
             delta: u,
             initialLayout: f,
             panelConstraints: m,
-            pivotIndices: i.panels.map((h) => c.indexOf(h)),
-            prevLayout: g,
+            pivotIndices: r.panels.map((h) => l.indexOf(h)),
+            prevLayout: v,
             trigger: "mouse-or-touch"
           });
-          if (ee(d, g)) {
-            if (u !== 0 && !a)
-              switch (l) {
+          if (B(d, v)) {
+            if (u !== 0 && !c)
+              switch (a) {
                 case "horizontal": {
                   o |= u < 0 ? Le : Pe;
                   break;
                 }
                 case "vertical": {
-                  o |= u < 0 ? Ee : Re;
+                  o |= u < 0 ? Ee : Ce;
                   break;
                 }
               }
           } else {
-            s.set(i.group, {
+            s.set(r.group, {
               derivedPanelConstraints: m,
               layout: d,
               separatorToPanels: p
             });
-            const h = i.group.panels.map(({ id: v }) => v).join(",");
-            i.group.inMemoryLayouts[h] = d;
+            const h = r.group.panels.map(({ id: y }) => y).join(",");
+            r.group.inMemoryLayouts[h] = d;
           }
         }
-      }), M({
+      }), E({
         cursorFlags: o,
         mountedGroups: s
       }), se();
       break;
     }
     default: {
-      const o = Ce(e, n);
-      o.length === 0 ? t.state !== "inactive" && M({
+      const o = Me(e, n);
+      o.length === 0 ? t.state !== "inactive" && E({
         interactionState: { state: "inactive" }
-      }) : M({
+      }) : E({
         interactionState: {
           hitRegions: o,
           state: "hover"
@@ -838,7 +838,7 @@ function ye(e) {
   const { interactionState: t } = k();
   switch (t.state) {
     case "active":
-      M({
+      E({
         cursorFlags: 0,
         interactionState: {
           state: "inactive"
@@ -849,18 +849,18 @@ function ye(e) {
 function et(e) {
   let t = 0, n = 0;
   const o = {};
-  for (const i of e)
-    if (i.defaultSize !== void 0) {
+  for (const r of e)
+    if (r.defaultSize !== void 0) {
       t++;
-      const a = C(i.defaultSize);
-      n += a, o[i.panelId] = a;
+      const c = R(r.defaultSize);
+      n += c, o[r.panelId] = c;
     } else
-      o[i.panelId] = void 0;
+      o[r.panelId] = void 0;
   const s = e.length - t;
   if (s !== 0) {
-    const i = C((100 - n) / s);
-    for (const a of e)
-      a.defaultSize === void 0 && (o[a.panelId] = i);
+    const r = R((100 - n) / s);
+    for (const c of e)
+      c.defaultSize === void 0 && (o[c.panelId] = r);
   }
   return o;
 }
@@ -868,14 +868,14 @@ function tt(e, t, n) {
   const o = n[0];
   if (!o)
     return;
-  const s = e.panels.find((a) => a.element === t);
+  const s = e.panels.find((c) => c.element === t);
   if (!s || !s.onResize)
     return;
-  const i = le({ group: e });
+  const r = le({ group: e });
   s.onResize(
     {
-      asPercentage: C(
-        o.inlineSize / i * 100
+      asPercentage: R(
+        o.inlineSize / r * 100
       ),
       inPixels: o.inlineSize
     },
@@ -884,63 +884,73 @@ function tt(e, t, n) {
 }
 function nt(e) {
   let t = !0;
-  const n = new ResizeObserver((c) => {
-    for (const u of c) {
-      const { borderBoxSize: f, target: m } = u;
-      m === e.element ? t && M((g) => {
-        const p = g.mountedGroups.get(e);
-        if (p) {
-          const d = pe(e), h = p.layout, v = F({
-            layout: h,
-            panelConstraints: d
+  S(
+    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(), s = new ResizeObserver((f) => {
+    for (const m of f) {
+      const { borderBoxSize: v, target: p } = m;
+      p === e.element ? t && E((d) => {
+        const h = d.mountedGroups.get(e);
+        if (h) {
+          const y = pe(e), z = h.layout, x = $({
+            layout: z,
+            panelConstraints: y
           });
           return {
-            mountedGroups: new Map(g.mountedGroups).set(e, {
-              derivedPanelConstraints: d,
-              layout: v,
-              separatorToPanels: p.separatorToPanels
+            mountedGroups: new Map(d.mountedGroups).set(e, {
+              derivedPanelConstraints: y,
+              layout: x,
+              separatorToPanels: h.separatorToPanels
             })
           };
         }
-        return g;
-      }) : tt(e, m, f);
+        return d;
+      }) : tt(e, p, v);
     }
   });
-  n.observe(e.element), e.panels.forEach((c) => {
-    c.onResize && n.observe(c.element);
+  s.observe(e.element), e.panels.forEach((f) => {
+    S(
+      !n.has(f.id),
+      `Panel ids must be unique; id "${f.id}" was used more than once`
+    ), n.add(f.id), f.onResize && s.observe(f.element);
   });
-  const o = pe(e), s = e.panels.map(({ id: c }) => c).join(","), i = e.inMemoryLayouts[s] ?? e.defaultLayout ?? et(o), a = F({
+  const r = pe(e), c = e.panels.map(({ id: f }) => f).join(","), i = e.inMemoryLayouts[c] ?? e.defaultLayout ?? et(r), a = $({
     layout: i,
-    panelConstraints: o
-  }), r = ze(e), l = M((c) => ({
-    mountedGroups: new Map(c.mountedGroups).set(e, {
-      derivedPanelConstraints: o,
+    panelConstraints: r
+  }), l = ze(e), u = E((f) => ({
+    mountedGroups: new Map(f.mountedGroups).set(e, {
+      derivedPanelConstraints: r,
       layout: a,
       separatorToPanels: new Map(
-        r.filter((u) => u.separator).map((u) => [u.separator, u.panels])
+        l.filter((m) => m.separator).map((m) => [m.separator, m.panels])
       )
     })
   }));
-  return e.separators.forEach((c) => {
-    c.element.addEventListener("keydown", me);
-  }), l.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ve), window.addEventListener("pointerleave", q), window.addEventListener("pointermove", q), window.addEventListener("pointerup", ye)), function() {
+  return e.separators.forEach((f) => {
+    S(
+      !o.has(f.id),
+      `Separator ids must be unique; id "${f.id}" was used more than once`
+    ), o.add(f.id), f.element.addEventListener("keydown", me);
+  }), u.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ve), window.addEventListener("pointerleave", Q), window.addEventListener("pointermove", Q), window.addEventListener("pointerup", ye)), function() {
     t = !1;
-    const u = M((f) => {
-      const m = new Map(f.mountedGroups);
-      return m.delete(e), { mountedGroups: m };
+    const m = E((v) => {
+      const p = new Map(v.mountedGroups);
+      return p.delete(e), { mountedGroups: p };
     });
-    e.separators.forEach((f) => {
-      f.element.removeEventListener("keydown", me);
-    }), u.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ve), window.removeEventListener("pointerleave", q), window.removeEventListener("pointermove", q), window.removeEventListener("pointerup", ye)), n.disconnect();
+    e.separators.forEach((v) => {
+      v.element.removeEventListener("keydown", me);
+    }), m.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ve), window.removeEventListener("pointerleave", Q), window.removeEventListener("pointermove", Q), window.removeEventListener("pointerup", ye)), s.disconnect();
   };
 }
 function ce(e) {
-  const t = De();
+  const t = Te();
   return `${e ?? t}`;
 }
-const H = typeof window < "u" ? Te : Ae;
+const H = typeof window < "u" ? De : Ae;
 function ue(e) {
-  const t = D(e);
+  const t = T(e);
   return H(() => {
     t.current = e;
   }, [e]), ge((n) => t.current?.(n), [t]);
@@ -962,16 +972,16 @@ function fe(...e) {
     });
   });
 }
-const Me = "--react-resizable-panels--panel--pointer-events";
+const Re = "--react-resizable-panels--panel--pointer-events";
 function Ge(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 Ie = $e(null);
 function ot(e, t) {
-  const n = D({
+  const n = T({
     getLayout: () => ({}),
-    setLayout: Ye
+    setLayout: Xe
   });
   Se(t, () => n.current, []), H(() => {
     Object.assign(
@@ -986,58 +996,58 @@ function ft({
   defaultLayout: n,
   disableCursor: o,
   disabled: s,
-  elementRef: i,
-  groupRef: a,
-  id: r,
-  onLayoutChange: l,
-  orientation: c = "horizontal",
+  elementRef: r,
+  groupRef: c,
+  id: i,
+  onLayoutChange: a,
+  orientation: l = "horizontal",
   style: u
 }) {
-  const f = D({}), m = ue((b) => {
-    ee(f.current, b) || (f.current = b, l?.(b));
-  }), g = ce(r), [p, d] = R(!1), [h, v] = R(null), [z, x] = R(n ?? {}), [y, w] = R([]), [G, O] = R([]), te = D({}), U = D({}), B = fe(v, i);
-  ot(g, a);
-  const K = xe(
+  const f = T({}), m = ue((b) => {
+    B(f.current, b) || (f.current = b, a?.(b));
+  }), v = ce(i), [p, d] = M(!1), [h, y] = M(null), [z, x] = M(n ?? {}), [g, w] = M([]), [G, O] = M([]), te = T({}), K = T({}), V = fe(y, r);
+  ot(v, c);
+  const q = xe(
     () => ({
-      id: g,
-      orientation: c,
-      registerPanel: (b) => (w((E) => re(c, [...E, b])), () => {
-        w((E) => E.filter(($) => $ !== b));
+      id: v,
+      orientation: l,
+      registerPanel: (b) => (w((C) => re(l, [...C, b])), () => {
+        w((C) => C.filter((N) => N !== b));
       }),
       registerSeparator: (b) => (O(
-        (E) => re(c, [...E, b])
+        (C) => re(l, [...C, b])
       ), () => {
         O(
-          (E) => E.filter(($) => $ !== b)
+          (C) => C.filter((N) => N !== b)
         );
       })
     }),
-    [g, c]
+    [v, l]
   );
   H(() => {
-    if (h !== null && y.length > 0) {
+    if (h !== null && g.length > 0) {
       const b = {
         defaultLayout: n,
         disableCursor: !!o,
         disabled: !!s,
         element: h,
-        id: g,
+        id: v,
         inMemoryLastExpandedPanelSizes: te.current,
-        inMemoryLayouts: U.current,
-        orientation: c,
-        panels: y,
+        inMemoryLayouts: K.current,
+        orientation: l,
+        panels: g,
         separators: G
-      }, E = nt(b), ne = k().mountedGroups.get(b);
+      }, C = nt(b), ne = k().mountedGroups.get(b);
       ne && (x(ne.layout), m?.(ne.layout));
       const ke = A.addListener(
         "interactionStateChange",
-        (X) => {
-          switch (X.state) {
+        (Y) => {
+          switch (Y.state) {
             case "active":
             case "hover": {
               d(
-                X.hitRegions.some(
-                  (N) => N.group === b
+                Y.hitRegions.some(
+                  (_) => _.group === b
                 )
               );
               break;
@@ -1046,13 +1056,13 @@ function ft({
         }
       ), Oe = A.addListener(
         "mountedGroupsChange",
-        (X) => {
-          const N = X.get(b);
-          N && N.derivedPanelConstraints.length > 0 && (x(N.layout), m?.(N.layout));
+        (Y) => {
+          const _ = Y.get(b);
+          _ && _.derivedPanelConstraints.length > 0 && (x(_.layout), m?.(_.layout));
         }
       );
       return () => {
-        E(), ke(), Oe();
+        C(), ke(), Oe();
       };
     }
   }, [
@@ -1060,32 +1070,32 @@ function ft({
     o,
     s,
     h,
-    g,
+    v,
     m,
-    c,
-    y,
+    l,
+    g,
     G
   ]);
-  const V = {
-    [Me]: p ? "none" : void 0
+  const X = {
+    [Re]: p ? "none" : void 0
   };
   for (const b in z) {
-    const E = Ge(g, b), $ = z[b];
-    V[E] = $;
+    const C = Ge(v, b), N = z[b];
+    X[C] = N;
   }
-  return /* @__PURE__ */ j(Ie.Provider, { value: K, children: /* @__PURE__ */ j(
+  return /* @__PURE__ */ j(Ie.Provider, { value: q, children: /* @__PURE__ */ j(
     "div",
     {
-      "aria-orientation": c,
+      "aria-orientation": l,
       className: t,
       "data-group": !0,
-      "data-testid": r ?? void 0,
-      ref: B,
+      "data-testid": i ?? void 0,
+      ref: V,
       style: {
         ...u,
-        ...V,
+        ...X,
         display: "flex",
-        flexDirection: c === "horizontal" ? "row" : "column",
+        flexDirection: l === "horizontal" ? "row" : "column",
         flexWrap: "nowrap"
       },
       children: e
@@ -1119,9 +1129,9 @@ function dt({
     () => n ? JSON.parse(n) : null,
     [n]
   ), s = ge(
-    (i) => it({
+    (r) => it({
       id: e,
-      layout: i,
+      layout: r,
       storage: t
     }),
     [e, t]
@@ -1136,77 +1146,117 @@ function rt() {
   };
 }
 function pt() {
-  return R(null);
+  return M(null);
 }
 function mt() {
-  return D(null);
+  return T(null);
 }
 function de() {
   const e = _e(Ie);
-  return S(e, "Unexpected"), e;
+  return S(
+    e,
+    "Group Context not found; did you render a Panel or Separator outside of a Group?"
+  ), e;
 }
 function st({
   groupId: e,
   panelId: t
 }) {
   const n = () => {
-    const { mountedGroups: a } = k();
-    for (const [r, { derivedPanelConstraints: l, layout: c }] of a)
-      if (r.id === e)
-        return { derivedPanelConstraints: l, group: r, layout: c };
+    const { mountedGroups: i } = k();
+    for (const [
+      a,
+      { derivedPanelConstraints: l, layout: u, separatorToPanels: f }
+    ] of i)
+      if (a.id === e)
+        return { derivedPanelConstraints: l, group: a, layout: u, separatorToPanels: f };
     throw Error(`Group ${e} not found`);
   }, o = () => {
-    const a = n().derivedPanelConstraints.find(
-      (r) => r.panelId === t
+    const i = n().derivedPanelConstraints.find(
+      (a) => a.panelId === t
     );
-    if (a !== void 0)
-      return a;
+    if (i !== void 0)
+      return i;
     throw Error(`Panel constraints not found for Panel ${t}`);
   }, s = () => {
-    const a = n().group.panels.find((r) => r.id === t);
-    if (a !== void 0)
-      return a;
+    const i = n().group.panels.find((a) => a.id === t);
+    if (i !== void 0)
+      return i;
     throw Error(`Layout not found for Panel ${t}`);
-  }, i = () => {
-    const a = n().layout[t];
-    if (a !== void 0)
-      return a;
+  }, r = () => {
+    const i = n().layout[t];
+    if (i !== void 0)
+      return i;
     throw Error(`Layout not found for Panel ${t}`);
+  }, c = (i) => {
+    const a = r();
+    if (i === a)
+      return;
+    const {
+      derivedPanelConstraints: l,
+      group: u,
+      layout: f,
+      separatorToPanels: m
+    } = n(), v = u.panels.findIndex((y) => y.id === t), p = v === u.panels.length - 1, d = U({
+      delta: p ? a - i : i - a,
+      initialLayout: f,
+      panelConstraints: l,
+      pivotIndices: p ? [v - 1, v] : [v, v + 1],
+      prevLayout: f,
+      trigger: "imperative-api"
+    }), h = $({
+      layout: d,
+      panelConstraints: l
+    });
+    B(f, h) || E((y) => ({
+      mountedGroups: new Map(y.mountedGroups).set(u, {
+        derivedPanelConstraints: l,
+        layout: h,
+        separatorToPanels: m
+      })
+    }));
   };
   return {
     collapse: () => {
-      const { collapsible: a, collapsedSize: r } = o();
-      i();
+      const { collapsible: i, collapsedSize: a } = o(), l = r();
+      i && l !== a && c(a);
     },
     expand: () => {
-      const { collapsible: a, collapsedSize: r, minSize: l } = o();
-      i();
+      const { collapsible: i, collapsedSize: a, minSize: l } = o(), u = r();
+      i && u === a && c(l);
     },
     getSize: () => {
-      const { group: a } = n(), r = i(), { element: l } = s(), c = a.orientation === "horizontal" ? l.offsetWidth : l.offsetHeight;
+      const { group: i } = n(), a = r(), { element: l } = s(), u = i.orientation === "horizontal" ? l.offsetWidth : l.offsetHeight;
       return {
-        asPercentage: r,
-        inPixels: c
+        asPercentage: a,
+        inPixels: u
       };
     },
     isCollapsed: () => {
-      const { collapsible: a, collapsedSize: r } = o(), l = i();
-      return a && L(r, l);
+      const { collapsible: i, collapsedSize: a } = o(), l = r();
+      return i && L(a, l);
     },
-    resize: (a) => {
-      if (i() !== a)
-        switch (typeof a) {
+    resize: (i) => {
+      if (r() !== i) {
+        let l;
+        switch (typeof i) {
           case "number": {
-            const { group: l } = n(), c = le({ group: l });
-            C(a / c * 100);
+            const { group: u } = n(), f = le({ group: u });
+            l = R(i / f * 100);
+            break;
+          }
+          case "string": {
+            l = parseFloat(i);
             break;
           }
         }
+        c(l);
+      }
     }
   };
 }
 function at(e, t) {
-  const { id: n } = de(), o = D({
+  const { id: n } = de(), o = T({
     collapse: oe,
     expand: oe,
     getSize: () => ({
@@ -1229,30 +1279,30 @@ function ht({
   collapsedSize: n = 0,
   collapsible: o = !1,
   defaultSize: s,
-  elementRef: i,
-  id: a,
-  maxSize: r = "100",
-  minSize: l = "0",
-  onResize: c,
+  elementRef: r,
+  id: c,
+  maxSize: i = "100",
+  minSize: a = "0",
+  onResize: l,
   panelRef: u,
   style: f
 }) {
-  const m = !!a, g = ce(a), [p, d] = R(null), h = fe(d, i), { id: v, registerPanel: z } = de(), x = c !== null, y = ue((G) => {
-    c?.(G, a);
+  const m = !!c, v = ce(c), [p, d] = M(null), h = fe(d, r), { id: y, registerPanel: z } = de(), x = l !== null, g = ue((G) => {
+    l?.(G, c);
   });
   H(() => {
     if (p !== null)
       return z({
         element: p,
-        id: g,
+        id: v,
         idIsStable: m,
-        onResize: x ? y : void 0,
+        onResize: x ? g : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
           defaultSize: s,
-          maxSize: r,
-          minSize: l
+          maxSize: i,
+          minSize: a
         }
       });
   }, [
@@ -1261,19 +1311,19 @@ function ht({
     s,
     p,
     x,
-    g,
+    v,
     m,
-    r,
-    l,
-    y,
+    i,
+    a,
+    g,
     z
-  ]), at(g, u);
-  const w = Ge(v, g);
+  ]), at(v, u);
+  const w = Ge(y, v);
   return /* @__PURE__ */ j(
     "div",
     {
       "data-panel": !0,
-      "data-testid": a ?? void 0,
+      "data-testid": c ?? void 0,
       ref: h,
       style: {
         flexBasis: 0,
@@ -1283,7 +1333,7 @@ function ht({
         overflow: "hidden",
         // Disable pointer events inside of a panel during resize
         // This avoid edge cases like nested iframes
-        pointerEvents: `var(${Me})`
+        pointerEvents: `var(${Re})`
       },
       children: /* @__PURE__ */ j(
         "div",
@@ -1301,10 +1351,10 @@ function ht({
   );
 }
 function vt() {
-  return R(null);
+  return M(null);
 }
 function yt() {
-  return D(null);
+  return T(null);
 }
 function lt({
   layout: e,
@@ -1312,15 +1362,15 @@ function lt({
   panelId: n,
   panelIndex: o
 }) {
-  let s, i;
-  const a = e[n], r = t.find(
-    (l) => l.panelId === n
+  let s, r;
+  const c = e[n], i = t.find(
+    (a) => a.panelId === n
   );
-  if (r) {
-    const l = r.maxSize, c = i = r.collapsible ? r.collapsedSize : r.minSize, u = [o, o + 1];
-    i = F({
-      layout: Q({
-        delta: c - a,
+  if (i) {
+    const a = i.maxSize, l = r = i.collapsible ? i.collapsedSize : i.minSize, u = [o, o + 1];
+    r = $({
+      layout: U({
+        delta: l - c,
         initialLayout: e,
         panelConstraints: t,
         pivotIndices: u,
@@ -1328,9 +1378,9 @@ function lt({
         trigger: "keyboard"
       }),
       panelConstraints: t
-    })[n], s = F({
-      layout: Q({
-        delta: l - a,
+    })[n], s = $({
+      layout: U({
+        delta: a - c,
         initialLayout: e,
         panelConstraints: t,
         pivotIndices: u,
@@ -1342,8 +1392,8 @@ function lt({
   }
   return {
     valueMax: s,
-    valueMin: i,
-    valueNow: a
+    valueMin: r,
+    valueNow: c
   };
 }
 function gt({
@@ -1353,40 +1403,40 @@ function gt({
   id: o,
   style: s
 }) {
-  const i = ce(o), [a, r] = R({}), [l, c] = R("inactive"), [u, f] = R(null), m = fe(f, n), {
-    id: g,
+  const r = ce(o), [c, i] = M({}), [a, l] = M("inactive"), [u, f] = M(null), m = fe(f, n), {
+    id: v,
     orientation: p,
     registerSeparator: d
   } = de(), h = p === "horizontal" ? "vertical" : "horizontal";
   return H(() => {
     if (u !== null) {
-      const v = {
+      const y = {
         element: u,
-        id: i
-      }, z = d(v), x = A.addListener(
+        id: r
+      }, z = d(y), x = A.addListener(
         "interactionStateChange",
         (w) => {
-          c(
+          l(
             w.state !== "inactive" && w.hitRegions.some(
-              (G) => G.separator === v
+              (G) => G.separator === y
             ) ? w.state : "inactive"
           );
         }
-      ), y = A.addListener(
+      ), g = A.addListener(
         "mountedGroupsChange",
         (w) => {
           w.forEach(
-            ({ derivedPanelConstraints: G, layout: O, separatorToPanels: te }, U) => {
-              if (U.id === g) {
-                const B = te.get(v);
-                if (B) {
-                  const K = B[0], V = U.panels.indexOf(K);
-                  r(
+            ({ derivedPanelConstraints: G, layout: O, separatorToPanels: te }, K) => {
+              if (K.id === v) {
+                const V = te.get(y);
+                if (V) {
+                  const q = V[0], X = K.panels.indexOf(q);
+                  i(
                     lt({
                       layout: O,
                       panelConstraints: G,
-                      panelId: K.id,
-                      panelIndex: V
+                      panelId: q.id,
+                      panelIndex: X
                     })
                   );
                 }
@@ -1396,19 +1446,19 @@ function gt({
         }
       );
       return () => {
-        x(), y(), z();
+        x(), g(), z();
       };
     }
-  }, [u, g, i, d]), /* @__PURE__ */ j(
+  }, [u, v, r, d]), /* @__PURE__ */ j(
     "div",
     {
       "aria-orientation": h,
-      "aria-valuemax": a.valueMax,
-      "aria-valuemin": a.valueMin,
-      "aria-valuenow": a.valueNow,
+      "aria-valuemax": c.valueMax,
+      "aria-valuemin": c.valueMin,
+      "aria-valuenow": c.valueNow,
       children: e,
       className: t,
-      "data-separator": l,
+      "data-separator": a,
       "data-testid": o ?? void 0,
       ref: m,
       role: "separator",