react-resizable-panels 4.0.0-alpha.5 → 4.0.1

package/dist/react-resizable-panels.js

@@ -1,25 +1,25 @@
 "use client";
-import { jsx as j } from "react/jsx-runtime";
-import { useId as De, useLayoutEffect as Ae, useEffect as $e, useRef as T, useCallback as Se, createContext as Ne, useImperativeHandle as xe, useState as G, useMemo as ze, useSyncExternalStore as _e, useContext as Fe } from "react";
-function S(e, t = "Assertion error") {
+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 He, useImperativeHandle as ze, useState as G, useMemo as be, useSyncExternalStore as Fe, useContext as We } from "react";
+function z(e, t = "Assertion error") {
   if (!e)
     throw Error(t);
 }
-function re(e, t) {
+function se(e, t) {
   return t.sort(
-    e === "horizontal" ? He : je
+    e === "horizontal" ? je : Be
   );
 }
-function He(e, t) {
+function je(e, t) {
   const n = e.element.offsetLeft - t.element.offsetLeft;
   return n !== 0 ? n : e.element.offsetWidth - t.element.offsetWidth;
 }
-function je(e, t) {
+function Be(e, t) {
   const n = e.element.offsetTop - t.element.offsetTop;
   return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
 }
-function be(e) {
-  const { element: t, orientation: n, panels: o, separators: r } = e, s = re(
+function we(e) {
+  const { element: t, orientation: n, panels: o, separators: r } = e, s = se(
     n,
     Array.from(t.children).filter((l) => l instanceof HTMLElement).map((l) => ({ element: l }))
   ).map(({ element: l }) => l), u = [];
@@ -58,21 +58,21 @@ function be(e) {
   }
   return u;
 }
-function We(e, t) {
+function Ue(e, t) {
   const n = getComputedStyle(e), o = parseFloat(n.fontSize);
   return t * o;
 }
-function Be(e, t) {
+function Ke(e, t) {
   const n = getComputedStyle(e.ownerDocument.body), o = parseFloat(n.fontSize);
   return t * o;
 }
-function Ue(e) {
+function Ve(e) {
   return e / 100 * window.innerHeight;
 }
-function Ke(e) {
+function Xe(e) {
   return e / 100 * window.innerWidth;
 }
-function Ve(e) {
+function Ye(e) {
   switch (typeof e) {
     case "number":
       return [e, "px"];
@@ -88,7 +88,7 @@ function J({
   styleProp: n
 }) {
   let o;
-  const [r, s] = Ve(n);
+  const [r, s] = Ye(n);
   switch (s) {
     case "%": {
       o = r / 100 * e;
@@ -99,19 +99,19 @@ function J({
       break;
     }
     case "rem": {
-      o = Be(t, r);
+      o = Ke(t, r);
       break;
     }
     case "em": {
-      o = We(t, r);
+      o = Ue(t, r);
       break;
     }
     case "vh": {
-      o = Ue(r);
+      o = Ve(r);
       break;
     }
     case "vw": {
-      o = Ke(r);
+      o = Xe(r);
       break;
     }
   }
@@ -120,14 +120,14 @@ function J({
 function I(e) {
   return parseFloat(e.toFixed(3));
 }
-function ue({
+function ae({
   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 me(e) {
-  const { panels: t } = e, n = ue({ group: e });
+function pe(e) {
+  const { panels: t } = e, n = ae({ group: e });
   return t.map((o) => {
     const { element: r, panelConstraints: s } = o;
     let u = 0;
@@ -218,7 +218,7 @@ class qe {
 function w(e, t, n = 0) {
   return Math.abs(I(e) - I(t)) <= n;
 }
-let C = {
+let R = {
   cursorFlags: 0,
   interactionState: {
     state: "inactive"
@@ -227,17 +227,17 @@ let C = {
 };
 const A = new qe();
 function O() {
-  return C;
+  return R;
 }
-function R(e) {
-  const t = typeof e == "function" ? e(C) : e;
-  if (C === t)
-    return C;
-  const n = C;
-  return C = {
-    ...C,
+function C(e) {
+  const t = typeof e == "function" ? e(R) : e;
+  if (R === t)
+    return R;
+  const n = R;
+  return R = {
+    ...R,
     ...t
-  }, t.cursorFlags !== void 0 && A.emit("cursorFlagsChange", C.cursorFlags), t.interactionState !== void 0 && A.emit("interactionStateChange", C.interactionState), t.mountedGroups !== void 0 && (C.mountedGroups.forEach((o, r) => {
+  }, t.cursorFlags !== void 0 && A.emit("cursorFlagsChange", R.cursorFlags), t.interactionState !== void 0 && A.emit("interactionStateChange", R.interactionState), t.mountedGroups !== void 0 && (R.mountedGroups.forEach((o, r) => {
     o.derivedPanelConstraints.forEach((s) => {
       if (s.collapsible) {
         const { layout: u } = n.mountedGroups.get(r) ?? {};
@@ -253,9 +253,80 @@ function R(e) {
         }
       }
     });
-  }), A.emit("mountedGroupsChange", C.mountedGroups)), C;
+  }), A.emit("mountedGroupsChange", R.mountedGroups)), R;
 }
-function Xe(e, t) {
+const Ze = (e) => e, oe = () => {
+}, Le = 1, Pe = 2, Ee = 4, Re = 8, me = {
+  coarse: 10,
+  precise: 5
+};
+function Je({
+  cursorFlags: e,
+  groups: t,
+  state: n
+}) {
+  let o = 0, r = 0;
+  switch (n) {
+    case "active":
+    case "hover":
+      t.forEach((s) => {
+        if (!s.disableCursor)
+          switch (s.orientation) {
+            case "horizontal": {
+              o++;
+              break;
+            }
+            case "vertical": {
+              r++;
+              break;
+            }
+          }
+      });
+  }
+  if (o === 0 && r === 0)
+    return null;
+  switch (n) {
+    case "active": {
+      const s = (e & Le) !== 0, u = (e & Pe) !== 0, i = (e & Ee) !== 0, a = (e & Re) !== 0;
+      if (e) {
+        if (s)
+          return i ? "se-resize" : a ? "ne-resize" : "e-resize";
+        if (u)
+          return i ? "sw-resize" : a ? "nw-resize" : "w-resize";
+        if (i)
+          return "s-resize";
+        if (a)
+          return "n-resize";
+      }
+      break;
+    }
+  }
+  return o > 0 && r > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
+}
+let ie = null, k;
+function le() {
+  k === void 0 && (k = new CSSStyleSheet(), document.adoptedStyleSheets = [k]);
+  const { cursorFlags: e, interactionState: t } = O();
+  switch (t.state) {
+    case "active":
+    case "hover": {
+      const n = Je({
+        cursorFlags: e,
+        groups: t.hitRegions.map((o) => o.group),
+        state: t.state
+      });
+      if (ie === n)
+        return;
+      ie = n, n ? k.cssRules.length === 0 ? k.insertRule(`*{cursor: ${n} !important;}`) : k.replaceSync(`*{cursor: ${n} !important;}`) : k.cssRules.length === 1 && k.deleteRule(0);
+      break;
+    }
+    case "inactive": {
+      ie = null, k.cssRules.length === 1 && k.deleteRule(0);
+      break;
+    }
+  }
+}
+function Qe(e, t) {
   if (e.length !== t.length)
     return !1;
   for (let n = 0; n < e.length; n++)
@@ -263,10 +334,10 @@ function Xe(e, t) {
       return !1;
   return !0;
 }
-function W(e, t) {
+function j(e, t) {
   return w(e, t) ? 0 : e > t ? 1 : -1;
 }
-function F({
+function H({
   panelConstraints: e,
   size: t
 }) {
@@ -276,10 +347,10 @@ function F({
     maxSize: r = 100,
     minSize: s = 0
   } = e;
-  if (W(t, s) < 0)
+  if (j(t, s) < 0)
     if (o) {
       const u = (n + s) / 2;
-      W(t, u) < 0 ? t = n : t = s;
+      j(t, u) < 0 ? t = n : t = s;
     } else
       t = s;
   return t = Math.min(r, t), t = I(t), t;
@@ -295,117 +366,117 @@ function B({
   if (w(e, 0))
     return t;
   const u = Object.values(t), i = Object.values(r), a = [...u], [l, f] = o;
-  S(l != null, "Invalid first pivot index"), S(f != null, "Invalid second pivot index");
+  z(l != null, "Invalid first pivot index"), z(f != null, "Invalid second pivot index");
   let c = 0;
   if (s === "keyboard") {
     {
       const d = e < 0 ? f : l, p = n[d];
-      S(
+      z(
         p,
         `Panel constraints not found for index ${d}`
       );
       const {
-        collapsedSize: h = 0,
-        collapsible: v,
-        minSize: z = 0
+        collapsedSize: v = 0,
+        collapsible: h,
+        minSize: g = 0
       } = p;
-      if (v) {
+      if (h) {
         const x = u[d];
-        if (S(
+        if (z(
           x != null,
           `Previous layout not found for panel index ${d}`
-        ), w(x, h)) {
-          const y = z - x;
-          W(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
+        ), w(x, v)) {
+          const y = g - x;
+          j(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
         }
       }
     }
     {
       const d = e < 0 ? l : f, p = n[d];
-      S(
+      z(
         p,
         `No panel constraints found for index ${d}`
       );
       const {
-        collapsedSize: h = 0,
-        collapsible: v,
-        minSize: z = 0
+        collapsedSize: v = 0,
+        collapsible: h,
+        minSize: g = 0
       } = p;
-      if (v) {
+      if (h) {
         const x = u[d];
-        if (S(
+        if (z(
           x != null,
           `Previous layout not found for panel index ${d}`
-        ), w(x, z)) {
-          const y = x - h;
-          W(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
+        ), w(x, g)) {
+          const y = x - v;
+          j(y, Math.abs(e)) > 0 && (e = e < 0 ? 0 - y : y);
         }
       }
     }
   }
   {
     const d = e < 0 ? 1 : -1;
-    let p = e < 0 ? f : l, h = 0;
+    let p = e < 0 ? f : l, v = 0;
     for (; ; ) {
-      const z = u[p];
-      S(
-        z != null,
+      const g = u[p];
+      z(
+        g != null,
         `Previous layout not found for panel index ${p}`
       );
-      const y = F({
+      const y = H({
         panelConstraints: n[p],
         size: 100
-      }) - z;
-      if (h += y, p += d, p < 0 || p >= n.length)
+      }) - g;
+      if (v += y, 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 h = Math.min(Math.abs(e), Math.abs(v));
+    e = e < 0 ? 0 - h : h;
   }
   {
     let p = e < 0 ? l : f;
     for (; p >= 0 && p < n.length; ) {
-      const h = Math.abs(e) - Math.abs(c), v = u[p];
-      S(
-        v != null,
+      const v = Math.abs(e) - Math.abs(c), h = u[p];
+      z(
+        h != null,
         `Previous layout not found for panel index ${p}`
       );
-      const z = v - h, x = F({
+      const g = h - v, x = H({
         panelConstraints: n[p],
-        size: z
+        size: g
       });
-      if (!w(v, x) && (c += v - x, a[p] = x, c.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+      if (!w(h, x) && (c += h - x, a[p] = x, c.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
         numeric: !0
       }) >= 0))
         break;
       e < 0 ? p-- : p++;
     }
   }
-  if (Xe(i, a))
+  if (Qe(i, a))
     return r;
   {
     const d = e < 0 ? f : l, p = u[d];
-    S(
+    z(
       p != null,
       `Previous layout not found for panel index ${d}`
     );
-    const h = p + c, v = F({
+    const v = p + c, h = H({
       panelConstraints: n[d],
-      size: h
+      size: v
     });
-    if (a[d] = v, !w(v, h)) {
-      let z = h - v, y = e < 0 ? f : l;
+    if (a[d] = h, !w(h, v)) {
+      let g = v - h, y = e < 0 ? f : l;
       for (; y >= 0 && y < n.length; ) {
-        const P = a[y];
-        S(
-          P != null,
+        const L = a[y];
+        z(
+          L != null,
           `Previous layout not found for panel index ${y}`
         );
-        const L = P + z, E = F({
+        const P = L + g, E = H({
           panelConstraints: n[y],
-          size: L
+          size: P
         });
-        if (w(P, E) || (z -= E - P, a[y] = E), w(z, 0))
+        if (w(L, E) || (g -= E - L, a[y] = E), w(g, 0))
           break;
         e > 0 ? y-- : y++;
       }
@@ -417,26 +488,98 @@ function B({
   );
   if (!w(m, 100, 0.1))
     return r;
-  const g = Object.keys(r);
-  return a.reduce((d, p, h) => (d[g[h]] = p, d), {});
-}
-function te(e) {
-  const t = e.parentElement;
-  S(t, "Parent group element not found");
-  const { mountedGroups: n } = O();
-  for (const [o] of n)
-    if (o.element === t)
-      return o;
-  throw Error("Could not find parent Group for separator element");
+  const S = Object.keys(r);
+  return a.reduce((d, p, v) => (d[S[v]] = p, d), {});
 }
 function U(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
     return !1;
   for (const n in e)
-    if (W(e[n], t[n]) !== 0)
+    if (j(e[n], t[n]) !== 0)
       return !1;
   return !0;
 }
+function Ce({
+  event: e,
+  hitRegions: t,
+  initialLayoutMap: n,
+  mountedGroups: o,
+  pointerDownAtPoint: r
+}) {
+  let s = 0;
+  const u = new Map(o);
+  t.forEach((i) => {
+    const { disableCursor: a, element: l, orientation: f, panels: c } = i.group;
+    let m = 0;
+    r ? f === "horizontal" ? m = (e.clientX - r.x) / l.offsetWidth * 100 : m = (e.clientY - r.y) / l.offsetHeight * 100 : f === "horizontal" ? m = e.clientX < 0 ? -100 : 100 : m = e.clientY < 0 ? -100 : 100;
+    const S = n.get(i.group), {
+      derivedPanelConstraints: d,
+      layout: p,
+      separatorToPanels: v
+    } = o.get(i.group) ?? {};
+    if (d && S && p && v) {
+      const h = B({
+        delta: m,
+        initialLayout: S,
+        panelConstraints: d,
+        pivotIndices: i.panels.map((g) => c.indexOf(g)),
+        prevLayout: p,
+        trigger: "mouse-or-touch"
+      });
+      if (U(h, p)) {
+        if (m !== 0 && !a)
+          switch (f) {
+            case "horizontal": {
+              s |= m < 0 ? Le : Pe;
+              break;
+            }
+            case "vertical": {
+              s |= m < 0 ? Ee : Re;
+              break;
+            }
+          }
+      } else {
+        u.set(i.group, {
+          derivedPanelConstraints: d,
+          layout: h,
+          separatorToPanels: v
+        });
+        const g = i.group.panels.map(({ id: x }) => x).join(",");
+        i.group.inMemoryLayouts[g] = h;
+      }
+    }
+  }), C({
+    cursorFlags: s,
+    mountedGroups: u
+  }), le();
+}
+function he(e) {
+  if (e.defaultPrevented)
+    return;
+  if (e.relatedTarget !== null)
+    return;
+  const { interactionState: t, mountedGroups: n } = O();
+  switch (t.state) {
+    case "active":
+      t.hitRegions.forEach((o) => {
+        e.currentTarget === o.group.element && Ce({
+          event: e,
+          hitRegions: t.hitRegions,
+          initialLayoutMap: t.initialLayoutMap,
+          mountedGroups: n
+        });
+      });
+  }
+}
+function ee(e) {
+  const t = e.parentElement;
+  z(t, "Parent group element not found");
+  const { mountedGroups: n } = O();
+  for (const [o] of n)
+    if (o.element === t)
+      return o;
+  throw Error("Could not find parent Group for separator element");
+}
 function $({
   layout: e,
   panelConstraints: t
@@ -452,15 +595,15 @@ function $({
   if (!w(r, 100) && o.length > 0)
     for (let i = 0; i < t.length; i++) {
       const a = o[i];
-      S(a != null, `No layout data found for index ${i}`);
+      z(a != null, `No layout data found for index ${i}`);
       const l = 100 / r * a;
       o[i] = l;
     }
   let s = 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({
+    z(a != null, `No layout data found for index ${i}`);
+    const l = H({
       panelConstraints: t[i],
       size: a
     });
@@ -469,8 +612,8 @@ function $({
   if (!w(s, 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 + s, f = F({
+      z(a != null, `No layout data found for index ${i}`);
+      const l = a + s, f = H({
         panelConstraints: t[i],
         size: l
       });
@@ -480,7 +623,7 @@ function $({
   const u = Object.keys(e);
   return o.reduce((i, a, l) => (i[u[l]] = a, i), {});
 }
-function we({
+function Me({
   groupId: e
 }) {
   const t = () => {
@@ -505,7 +648,7 @@ function we({
         layout: n,
         panelConstraints: o
       });
-      return U(s, i) || R((a) => ({
+      return U(s, i) || C((a) => ({
         mountedGroups: new Map(a.mountedGroups).set(r, {
           derivedPanelConstraints: o,
           layout: i,
@@ -515,18 +658,18 @@ function we({
     }
   };
 }
-function Pe(e) {
+function Ge(e) {
   const { mountedGroups: t } = O(), n = t.get(e);
-  return S(n, `Mounted Group ${e.id} not found`), n;
+  return z(n, `Mounted Group ${e.id} not found`), n;
 }
 function D(e, t) {
-  const n = te(e), o = Pe(n), r = n.separators.find(
+  const n = ee(e), o = Ge(n), r = n.separators.find(
     (c) => c.element === e
   );
-  S(r, "Matching separator not found");
+  z(r, "Matching separator not found");
   const s = o.separatorToPanels.get(r);
-  S(s, "Matching panels not found");
-  const u = s.map((c) => n.panels.indexOf(c)), a = we({ groupId: n.id }).getLayout(), l = B({
+  z(s, "Matching panels not found");
+  const u = s.map((c) => n.panels.indexOf(c)), a = Me({ groupId: n.id }).getLayout(), l = B({
     delta: t,
     initialLayout: a,
     panelConstraints: o.derivedPanelConstraints,
@@ -537,7 +680,7 @@ function D(e, t) {
     layout: l,
     panelConstraints: o.derivedPanelConstraints
   });
-  U(a, f) || R((c) => ({
+  U(a, f) || C((c) => ({
     mountedGroups: new Map(c.mountedGroups).set(n, {
       derivedPanelConstraints: o.derivedPanelConstraints,
       layout: f,
@@ -545,10 +688,10 @@ function D(e, t) {
     })
   }));
 }
-function he(e) {
+function ve(e) {
   if (e.defaultPrevented)
     return;
-  const t = e.currentTarget, n = te(t);
+  const t = e.currentTarget, n = ee(t);
   if (!n.disabled)
     switch (e.key) {
       case "ArrowDown": {
@@ -573,16 +716,16 @@ function he(e) {
       }
       case "Enter": {
         e.preventDefault();
-        const o = te(t), { derivedPanelConstraints: r, layout: s, separatorToPanels: u } = Pe(o), i = o.separators.find(
+        const o = ee(t), { derivedPanelConstraints: r, layout: s, separatorToPanels: u } = Ge(o), i = o.separators.find(
           (c) => c.element === t
         );
-        S(i, "Matching separator not found");
+        z(i, "Matching separator not found");
         const a = u.get(i);
-        S(a, "Matching panels not found");
+        z(a, "Matching panels not found");
         const l = a[0], f = r.find(
           (c) => c.panelId === l.id
         );
-        if (S(f, "Panel metadata not found"), f.collapsible) {
+        if (z(f, "Panel metadata not found"), f.collapsible) {
           const c = s[l.id], m = f.collapsedSize === c ? o.inMemoryLastExpandedPanelSizes[l.id] ?? f.minSize : f.collapsedSize;
           D(t, m - c);
         }
@@ -590,12 +733,12 @@ function he(e) {
       }
       case "F6": {
         e.preventDefault();
-        const r = te(t).separators.map(
+        const r = ee(t).separators.map(
           (a) => a.element
         ), s = Array.from(r).findIndex(
           (a) => a === e.currentTarget
         );
-        S(s !== null, "Index not found");
+        z(s !== null, "Index not found");
         const u = e.shiftKey ? s > 0 ? s - 1 : r.length - 1 : s + 1 < r.length ? s + 1 : 0;
         r[u].focus();
         break;
@@ -606,12 +749,7 @@ function he(e) {
       }
     }
 }
-const Ye = (e) => e, ie = () => {
-}, Le = 1, Ee = 2, Ce = 4, Re = 8, ve = {
-  coarse: 10,
-  precise: 5
-};
-function Ze(e, t) {
+function et(e, t) {
   return {
     x: e.x >= t.left && e.x <= t.right ? 0 : Math.min(
       Math.abs(e.x - t.left),
@@ -623,13 +761,13 @@ function Ze(e, t) {
     )
   };
 }
-function Je(e, t, n) {
+function tt(e, t, n) {
   let o, r = {
     x: 1 / 0,
     y: 1 / 0
   };
   for (const s of t) {
-    const u = Ze(n, s.rect);
+    const u = et(n, s.rect);
     switch (e) {
       case "horizontal": {
         u.x <= r.x && (o = s, r = u);
@@ -647,15 +785,15 @@ function Je(e, t, n) {
   } : void 0;
 }
 let Q;
-function Qe() {
+function nt() {
   return Q === void 0 && (typeof matchMedia == "function" ? Q = !!matchMedia("(pointer:coarse)").matches : Q = !1), Q;
 }
-function Me(e, t) {
+function Ie(e, t) {
   const n = [];
   return t.forEach((o, r) => {
     if (r.disabled)
       return;
-    const s = Qe() ? ve.coarse : ve.precise, u = be(r), i = Je(r.orientation, u, {
+    const s = nt() ? me.coarse : me.precise, u = we(r), i = tt(r.orientation, u, {
       x: e.clientX,
       y: e.clientY
     });
@@ -665,14 +803,14 @@ function Me(e, t) {
 function ge(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = O(), n = Me(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), u = /* @__PURE__ */ new Map();
+  const { mountedGroups: t } = O(), n = Ie(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), u = /* @__PURE__ */ new Map();
   n.forEach((i) => {
     o.add(i.group), i.panels.forEach((l) => {
       r.add(l);
     }), i.separator && s.add(i.separator);
     const a = t.get(i.group);
     a && u.set(i.group, a.layout);
-  }), R({
+  }), C({
     interactionState: {
       hitRegions: n,
       initialLayoutMap: u,
@@ -681,73 +819,7 @@ function ge(e) {
     }
   }), n.length && e.preventDefault();
 }
-function et({
-  cursorFlags: e,
-  groups: t,
-  state: n
-}) {
-  let o = 0, r = 0;
-  switch (n) {
-    case "active":
-    case "hover":
-      t.forEach((s) => {
-        if (!s.disableCursor)
-          switch (s.orientation) {
-            case "horizontal": {
-              o++;
-              break;
-            }
-            case "vertical": {
-              r++;
-              break;
-            }
-          }
-      });
-  }
-  if (o === 0 && r === 0)
-    return null;
-  switch (n) {
-    case "active": {
-      const s = (e & Le) !== 0, u = (e & Ee) !== 0, i = (e & Ce) !== 0, a = (e & Re) !== 0;
-      if (e) {
-        if (s)
-          return i ? "se-resize" : a ? "ne-resize" : "e-resize";
-        if (u)
-          return i ? "sw-resize" : a ? "nw-resize" : "w-resize";
-        if (i)
-          return "s-resize";
-        if (a)
-          return "n-resize";
-      }
-      break;
-    }
-  }
-  return o > 0 && r > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
-}
-let se = null, k;
-function ae() {
-  k === void 0 && (k = new CSSStyleSheet(), document.adoptedStyleSheets = [k]);
-  const { cursorFlags: e, interactionState: t } = O();
-  switch (t.state) {
-    case "active":
-    case "hover": {
-      const n = et({
-        cursorFlags: e,
-        groups: t.hitRegions.map((o) => o.group),
-        state: t.state
-      });
-      if (se === n)
-        return;
-      se = n, n ? k.cssRules.length === 0 ? k.insertRule(`*{cursor: ${n} !important;}`) : k.replaceSync(`*{cursor: ${n} !important;}`) : k.cssRules.length === 1 && k.deleteRule(0);
-      break;
-    }
-    case "inactive": {
-      se = null, k.cssRules.length === 1 && k.deleteRule(0);
-      break;
-    }
-  }
-}
-function ee(e) {
+function ye(e) {
   if (e.defaultPrevented)
     return;
   const { interactionState: t, mountedGroups: n } = O();
@@ -757,8 +829,8 @@ function ee(e) {
         // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
         e.type !== "pointerleave" && e.buttons === 0
       ) {
-        R(
-          (s) => s.interactionState.state === "inactive" ? s : {
+        C(
+          (o) => o.interactionState.state === "inactive" ? o : {
             cursorFlags: 0,
             interactionState: {
               state: "inactive"
@@ -767,86 +839,45 @@ function ee(e) {
         );
         return;
       }
-      let o = 0;
-      const r = new Map(n);
-      t.hitRegions.forEach((s) => {
-        const { disableCursor: u, element: i, orientation: a, panels: l } = s.group;
-        let f = 0;
-        t.state === "active" && (a === "horizontal" ? f = (e.clientX - t.pointerDownAtPoint.x) / i.offsetWidth * 100 : f = (e.clientY - t.pointerDownAtPoint.y) / i.offsetHeight * 100);
-        const c = t.initialLayoutMap.get(
-          s.group
-        ), {
-          derivedPanelConstraints: m,
-          layout: g,
-          separatorToPanels: d
-        } = n.get(s.group) ?? {};
-        if (m && c && g && d) {
-          const p = B({
-            delta: f,
-            initialLayout: c,
-            panelConstraints: m,
-            pivotIndices: s.panels.map((h) => l.indexOf(h)),
-            prevLayout: g,
-            trigger: "mouse-or-touch"
-          });
-          if (U(p, g)) {
-            if (f !== 0 && !u)
-              switch (a) {
-                case "horizontal": {
-                  o |= f < 0 ? Le : Ee;
-                  break;
-                }
-                case "vertical": {
-                  o |= f < 0 ? Ce : Re;
-                  break;
-                }
-              }
-          } else {
-            r.set(s.group, {
-              derivedPanelConstraints: m,
-              layout: p,
-              separatorToPanels: d
-            });
-            const h = s.group.panels.map(({ id: v }) => v).join(",");
-            s.group.inMemoryLayouts[h] = p;
-          }
-        }
-      }), R({
-        cursorFlags: o,
-        mountedGroups: r
-      }), ae();
+      Ce({
+        event: e,
+        hitRegions: t.hitRegions,
+        initialLayoutMap: t.initialLayoutMap,
+        mountedGroups: n,
+        pointerDownAtPoint: t.pointerDownAtPoint
+      });
       break;
     }
     default: {
-      const o = Me(e, n);
-      o.length === 0 ? t.state !== "inactive" && R({
+      const o = Ie(e, n);
+      o.length === 0 ? t.state !== "inactive" && C({
         interactionState: { state: "inactive" }
-      }) : R({
+      }) : C({
         interactionState: {
           hitRegions: o,
           state: "hover"
         }
-      }), ae();
+      }), le();
       break;
     }
   }
 }
-function ye(e) {
+function Se(e) {
   if (e.defaultPrevented)
     return;
   e.preventDefault();
   const { interactionState: t } = O();
   switch (t.state) {
     case "active":
-      R({
+      C({
         cursorFlags: 0,
         interactionState: {
           state: "inactive"
         }
-      }), ae();
+      }), le();
   }
 }
-function tt(e) {
+function ot(e) {
   let t = 0, n = 0;
   const o = {};
   for (const s of e)
@@ -864,14 +895,14 @@ function tt(e) {
   }
   return o;
 }
-function nt(e, t, n) {
+function it(e, t, n) {
   const o = n[0];
   if (!o)
     return;
   const r = e.panels.find((u) => u.element === t);
   if (!r || !r.onResize)
     return;
-  const s = ue({ group: e });
+  const s = ae({ group: e });
   r.onResize(
     {
       asPercentage: I(
@@ -882,44 +913,44 @@ function nt(e, t, n) {
     r.id
   );
 }
-function ot(e) {
+function st(e) {
   let t = !0;
-  S(
+  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((c) => {
     for (const m of c) {
-      const { borderBoxSize: g, target: d } = m;
-      d === e.element ? t && R((p) => {
-        const h = p.mountedGroups.get(e);
-        if (h) {
-          const v = me(e), z = h.layout, x = $({
-            layout: z,
-            panelConstraints: v
+      const { borderBoxSize: S, target: d } = m;
+      d === e.element ? t && C((p) => {
+        const v = p.mountedGroups.get(e);
+        if (v) {
+          const h = pe(e), g = v.layout, x = $({
+            layout: g,
+            panelConstraints: h
           });
           return {
             mountedGroups: new Map(p.mountedGroups).set(e, {
-              derivedPanelConstraints: v,
+              derivedPanelConstraints: h,
               layout: x,
-              separatorToPanels: h.separatorToPanels
+              separatorToPanels: v.separatorToPanels
             })
           };
         }
         return p;
-      }) : nt(e, d, g);
+      }) : it(e, d, S);
     }
   });
   r.observe(e.element), e.panels.forEach((c) => {
-    S(
+    z(
       !n.has(c.id),
       `Panel ids must be unique; id "${c.id}" was used more than once`
     ), n.add(c.id), c.onResize && r.observe(c.element);
   });
-  const s = me(e), u = e.panels.map(({ id: c }) => c).join(","), i = e.inMemoryLayouts[u] ?? e.defaultLayout ?? tt(s), a = $({
+  const s = pe(e), u = e.panels.map(({ id: c }) => c).join(","), i = e.inMemoryLayouts[u] ?? e.defaultLayout ?? ot(s), a = $({
     layout: i,
     panelConstraints: s
-  }), l = be(e), f = R((c) => ({
+  }), l = we(e), f = C((c) => ({
     mountedGroups: new Map(c.mountedGroups).set(e, {
       derivedPanelConstraints: s,
       layout: a,
@@ -928,35 +959,35 @@ function ot(e) {
       )
     })
   }));
-  return e.separators.forEach((c) => {
-    S(
+  return e.element.addEventListener("pointerleave", he), e.separators.forEach((c) => {
+    z(
       !o.has(c.id),
       `Separator ids must be unique; id "${c.id}" was used more than once`
-    ), o.add(c.id), c.element.addEventListener("keydown", he);
-  }), f.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ge), window.addEventListener("pointerleave", ee), window.addEventListener("pointermove", ee), window.addEventListener("pointerup", ye)), function() {
+    ), o.add(c.id), c.element.addEventListener("keydown", ve);
+  }), f.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ge), window.addEventListener("pointermove", ye), window.addEventListener("pointerup", Se)), function() {
     t = !1;
-    const m = R((g) => {
-      const d = new Map(g.mountedGroups);
+    const m = C((S) => {
+      const d = new Map(S.mountedGroups);
       return d.delete(e), { mountedGroups: d };
     });
-    e.separators.forEach((g) => {
-      g.element.removeEventListener("keydown", he);
-    }), m.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ge), window.removeEventListener("pointerleave", ee), window.removeEventListener("pointermove", ee), window.removeEventListener("pointerup", ye)), r.disconnect();
+    e.element.removeEventListener("pointerleave", he), e.separators.forEach((S) => {
+      S.element.removeEventListener("keydown", ve);
+    }), m.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ge), window.removeEventListener("pointermove", ye), window.removeEventListener("pointerup", Se)), r.disconnect();
   };
 }
-function ce(e) {
-  const t = De();
+function ue(e) {
+  const t = $e();
   return `${e ?? t}`;
 }
-const H = typeof window < "u" ? Ae : $e;
-function fe(e) {
+const F = typeof window < "u" ? Ne : _e;
+function ce(e) {
   const t = T(e);
-  return H(() => {
+  return F(() => {
     t.current = e;
-  }, [e]), Se((n) => t.current?.(n), [t]);
+  }, [e]), xe((n) => t.current?.(n), [t]);
 }
-function de(...e) {
-  return fe((t) => {
+function fe(...e) {
+  return ce((t) => {
     e.forEach((n) => {
       if (n)
         switch (typeof n) {
@@ -972,25 +1003,25 @@ function de(...e) {
     });
   });
 }
-const Ge = "--react-resizable-panels--panel--pointer-events";
-function Ie(e, t) {
+const ke = "--react-resizable-panels--panel--pointer-events";
+function Oe(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 ke = Ne(null);
-function it(e, t) {
+const Te = He(null);
+function rt(e, t) {
   const n = T({
     getLayout: () => ({}),
-    setLayout: Ye
+    setLayout: Ze
   });
-  xe(t, () => n.current, []), H(() => {
+  ze(t, () => n.current, []), F(() => {
     Object.assign(
       n.current,
-      we({ groupId: e })
+      Me({ groupId: e })
     );
   });
 }
-function pt({
+function ht({
   children: e,
   className: t,
   defaultLayout: n,
@@ -1004,19 +1035,19 @@ function pt({
   style: f,
   ...c
 }) {
-  const m = T({}), g = fe((b) => {
+  const m = T({}), S = ce((b) => {
     U(m.current, b) || (m.current = b, a?.(b));
-  }), d = ce(i), [p, h] = G(!1), [v, z] = G(null), [x, y] = G(n ?? {}), [P, L] = G([]), [E, K] = G([]), ne = T({}), V = T({}), q = de(z, s);
-  it(d, u);
-  const X = ze(
+  }), d = ue(i), [p, v] = G(!1), [h, g] = G(null), [x, y] = G(n ?? {}), [L, P] = G([]), [E, K] = G([]), te = T({}), V = T({}), X = fe(g, s);
+  rt(d, u);
+  const Y = be(
     () => ({
       id: d,
       orientation: l,
-      registerPanel: (b) => (L((M) => re(l, [...M, b])), () => {
-        L((M) => M.filter((N) => N !== b));
+      registerPanel: (b) => (P((M) => se(l, [...M, b])), () => {
+        P((M) => M.filter((N) => N !== b));
       }),
       registerSeparator: (b) => (K(
-        (M) => re(l, [...M, b])
+        (M) => se(l, [...M, b])
       ), () => {
         K(
           (M) => M.filter((N) => N !== b)
@@ -1025,28 +1056,28 @@ function pt({
     }),
     [d, l]
   );
-  H(() => {
-    if (v !== null && P.length > 0) {
+  F(() => {
+    if (h !== null && L.length > 0) {
       const b = {
         defaultLayout: n,
         disableCursor: !!o,
         disabled: !!r,
-        element: v,
+        element: h,
         id: d,
-        inMemoryLastExpandedPanelSizes: ne.current,
+        inMemoryLastExpandedPanelSizes: te.current,
         inMemoryLayouts: V.current,
         orientation: l,
-        panels: P,
+        panels: L,
         separators: E
-      }, M = ot(b), oe = O().mountedGroups.get(b);
-      oe && (y(oe.layout), g?.(oe.layout));
-      const Oe = A.addListener(
+      }, M = st(b), ne = O().mountedGroups.get(b);
+      ne && (y(ne.layout), S?.(ne.layout));
+      const De = A.addListener(
         "interactionStateChange",
         (Z) => {
           switch (Z.state) {
             case "active":
             case "hover": {
-              h(
+              v(
                 Z.hitRegions.some(
                   (_) => _.group === b
                 )
@@ -1055,36 +1086,36 @@ function pt({
             }
           }
         }
-      ), Te = A.addListener(
+      ), Ae = A.addListener(
         "mountedGroupsChange",
         (Z) => {
           const _ = Z.get(b);
-          _ && _.derivedPanelConstraints.length > 0 && (y(_.layout), g?.(_.layout));
+          _ && _.derivedPanelConstraints.length > 0 && (y(_.layout), S?.(_.layout));
         }
       );
       return () => {
-        M(), Oe(), Te();
+        M(), De(), Ae();
       };
     }
   }, [
     n,
     o,
     r,
-    v,
+    h,
     d,
-    g,
+    S,
     l,
-    P,
+    L,
     E
   ]);
-  const Y = {
-    [Ge]: p ? "none" : void 0
+  const q = {
+    [ke]: p ? "none" : void 0
   };
   for (const b in x) {
-    const M = Ie(d, b), N = x[b];
-    Y[M] = N;
+    const M = Oe(d, b), N = x[b];
+    q[M] = N;
   }
-  return /* @__PURE__ */ j(ke.Provider, { value: X, children: /* @__PURE__ */ j(
+  return /* @__PURE__ */ W(Te.Provider, { value: Y, children: /* @__PURE__ */ W(
     "div",
     {
       ...c,
@@ -1093,10 +1124,10 @@ function pt({
       "data-group": !0,
       "data-testid": d,
       id: d,
-      ref: q,
+      ref: X,
       style: {
         ...f,
-        ...Y,
+        ...q,
         display: "flex",
         flexDirection: l === "horizontal" ? "row" : "column",
         flexWrap: "nowrap"
@@ -1105,34 +1136,34 @@ function pt({
     }
   ) });
 }
-function le(e) {
+function re(e) {
   return `react-resizable-panels:${e}`;
 }
-function st({
+function at({
   id: e,
   layout: t,
   storage: n
 }) {
   try {
-    const o = le(e);
+    const o = re(e);
     n.setItem(o, JSON.stringify(t));
   } catch (o) {
     console.error(o);
   }
 }
-function mt({
+function vt({
   groupId: e,
   storage: t
 }) {
-  const n = _e(
-    rt,
-    () => t.getItem(le(e)),
-    () => t.getItem(le(e))
-  ), o = ze(
+  const n = Fe(
+    lt,
+    () => t.getItem(re(e)),
+    () => t.getItem(re(e))
+  ), o = be(
     () => n ? JSON.parse(n) : null,
     [n]
-  ), r = Se(
-    (s) => st({
+  ), r = xe(
+    (s) => at({
       id: e,
       layout: s,
       storage: t
@@ -1144,24 +1175,24 @@ function mt({
     onLayoutChange: r
   };
 }
-function rt() {
+function lt() {
   return function() {
   };
 }
-function ht() {
+function gt() {
   return G(null);
 }
-function vt() {
+function yt() {
   return T(null);
 }
-function pe() {
-  const e = Fe(ke);
-  return S(
+function de() {
+  const e = We(Te);
+  return z(
     e,
     "Group Context not found; did you render a Panel or Separator outside of a Group?"
   ), e;
 }
-function at({
+function ut({
   groupId: e,
   panelId: t
 }) {
@@ -1200,21 +1231,21 @@ function at({
       group: f,
       layout: c,
       separatorToPanels: m
-    } = n(), g = f.panels.findIndex((v) => v.id === t), d = g === f.panels.length - 1, p = B({
+    } = n(), S = f.panels.findIndex((h) => h.id === t), d = S === f.panels.length - 1, p = B({
       delta: d ? a - i : i - a,
       initialLayout: c,
       panelConstraints: l,
-      pivotIndices: d ? [g - 1, g] : [g, g + 1],
+      pivotIndices: d ? [S - 1, S] : [S, S + 1],
       prevLayout: c,
       trigger: "imperative-api"
-    }), h = $({
+    }), v = $({
       layout: p,
       panelConstraints: l
     });
-    U(c, h) || R((v) => ({
-      mountedGroups: new Map(v.mountedGroups).set(f, {
+    U(c, v) || C((h) => ({
+      mountedGroups: new Map(h.mountedGroups).set(f, {
         derivedPanelConstraints: l,
-        layout: h,
+        layout: v,
         separatorToPanels: m
       })
     }));
@@ -1244,7 +1275,7 @@ function at({
         let l;
         switch (typeof i) {
           case "number": {
-            const { group: f } = n(), c = ue({ group: f });
+            const { group: f } = n(), c = ae({ group: f });
             l = I(i / c * 100);
             break;
           }
@@ -1258,25 +1289,25 @@ function at({
     }
   };
 }
-function lt(e, t) {
-  const { id: n } = pe(), o = T({
-    collapse: ie,
-    expand: ie,
+function ct(e, t) {
+  const { id: n } = de(), o = T({
+    collapse: oe,
+    expand: oe,
     getSize: () => ({
       asPercentage: 0,
       inPixels: 0
     }),
     isCollapsed: () => !1,
-    resize: ie
+    resize: oe
   });
-  xe(t, () => o.current, []), H(() => {
+  ze(t, () => o.current, []), F(() => {
     Object.assign(
       o.current,
-      at({ groupId: n, panelId: e })
+      ut({ groupId: n, panelId: e })
     );
   });
 }
-function gt({
+function St({
   children: e,
   className: t,
   collapsedSize: n = 0,
@@ -1291,16 +1322,16 @@ function gt({
   style: c,
   ...m
 }) {
-  const g = !!u, d = ce(u), [p, h] = G(null), v = de(h, s), { id: z, registerPanel: x } = pe(), y = l !== null, P = fe((E) => {
+  const S = !!u, d = ue(u), [p, v] = G(null), h = fe(v, s), { id: g, registerPanel: x } = de(), y = l !== null, L = ce((E) => {
     l?.(E, u);
   });
-  H(() => {
+  F(() => {
     if (p !== null)
       return x({
         element: p,
         id: d,
-        idIsStable: g,
-        onResize: y ? P : void 0,
+        idIsStable: S,
+        onResize: y ? L : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
@@ -1316,33 +1347,33 @@ function gt({
     p,
     y,
     d,
-    g,
+    S,
     i,
     a,
-    P,
+    L,
     x
-  ]), lt(d, f);
-  const L = Ie(z, d);
-  return /* @__PURE__ */ j(
+  ]), ct(d, f);
+  const P = Oe(g, d);
+  return /* @__PURE__ */ W(
     "div",
     {
       ...m,
       "data-panel": !0,
       "data-testid": d,
       id: d,
-      ref: v,
+      ref: h,
       style: {
-        ...ut,
+        ...ft,
         flexBasis: 0,
-        flexGrow: `var(${L}, 1)`,
+        flexGrow: `var(${P}, 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(${Ge})`
+        pointerEvents: `var(${ke})`
       },
-      children: /* @__PURE__ */ j(
+      children: /* @__PURE__ */ W(
         "div",
         {
           className: t,
@@ -1357,7 +1388,7 @@ function gt({
     }
   );
 }
-const ut = {
+const ft = {
   minHeight: "unset",
   maxHeight: "unset",
   height: "unset",
@@ -1373,13 +1404,13 @@ const ut = {
   padding: "unset",
   margin: "unset"
 };
-function yt() {
+function xt() {
   return G(null);
 }
-function St() {
+function zt() {
   return T(null);
 }
-function ct({
+function dt({
   layout: e,
   panelConstraints: t,
   panelId: n,
@@ -1420,7 +1451,7 @@ function ct({
     valueNow: u
   };
 }
-function xt({
+function bt({
   children: e,
   className: t,
   elementRef: n,
@@ -1428,40 +1459,40 @@ function xt({
   style: r,
   ...s
 }) {
-  const u = ce(o), [i, a] = G({}), [l, f] = G("inactive"), [c, m] = G(null), g = de(m, n), {
+  const u = ue(o), [i, a] = G({}), [l, f] = G("inactive"), [c, m] = G(null), S = fe(m, n), {
     id: d,
     orientation: p,
-    registerSeparator: h
-  } = pe(), v = p === "horizontal" ? "vertical" : "horizontal";
-  return H(() => {
+    registerSeparator: v
+  } = de(), h = p === "horizontal" ? "vertical" : "horizontal";
+  return F(() => {
     if (c !== null) {
-      const z = {
+      const g = {
         element: c,
         id: u
-      }, x = h(z), y = A.addListener(
+      }, x = v(g), y = A.addListener(
         "interactionStateChange",
-        (L) => {
+        (P) => {
           f(
-            L.state !== "inactive" && L.hitRegions.some(
-              (E) => E.separator === z
-            ) ? L.state : "inactive"
+            P.state !== "inactive" && P.hitRegions.some(
+              (E) => E.separator === g
+            ) ? P.state : "inactive"
           );
         }
-      ), P = A.addListener(
+      ), L = A.addListener(
         "mountedGroupsChange",
-        (L) => {
-          L.forEach(
-            ({ derivedPanelConstraints: E, layout: K, separatorToPanels: ne }, V) => {
+        (P) => {
+          P.forEach(
+            ({ derivedPanelConstraints: E, layout: K, separatorToPanels: te }, V) => {
               if (V.id === d) {
-                const q = ne.get(z);
-                if (q) {
-                  const X = q[0], Y = V.panels.indexOf(X);
+                const X = te.get(g);
+                if (X) {
+                  const Y = X[0], q = V.panels.indexOf(Y);
                   a(
-                    ct({
+                    dt({
                       layout: K,
                       panelConstraints: E,
-                      panelId: X.id,
-                      panelIndex: Y
+                      panelId: Y.id,
+                      panelIndex: q
                     })
                   );
                 }
@@ -1471,15 +1502,15 @@ function xt({
         }
       );
       return () => {
-        y(), P(), x();
+        y(), L(), x();
       };
     }
-  }, [c, d, u, h]), /* @__PURE__ */ j(
+  }, [c, d, u, v]), /* @__PURE__ */ W(
     "div",
     {
       ...s,
       "aria-controls": i.valueControls,
-      "aria-orientation": v,
+      "aria-orientation": h,
       "aria-valuemax": i.valueMax,
       "aria-valuemin": i.valueMin,
       "aria-valuenow": i.valueNow,
@@ -1488,7 +1519,7 @@ function xt({
       "data-separator": l,
       "data-testid": u,
       id: u,
-      ref: g,
+      ref: S,
       role: "separator",
       style: {
         flexBasis: "auto",
@@ -1501,13 +1532,13 @@ function xt({
   );
 }
 export {
-  pt as Group,
-  gt as Panel,
-  xt as Separator,
-  mt as useDefaultLayout,
-  ht as useGroupCallbackRef,
-  vt as useGroupRef,
-  yt as usePanelCallbackRef,
-  St as usePanelRef
+  ht as Group,
+  St as Panel,
+  bt as Separator,
+  vt as useDefaultLayout,
+  gt as useGroupCallbackRef,
+  yt as useGroupRef,
+  xt as usePanelCallbackRef,
+  zt as usePanelRef
 };
 //# sourceMappingURL=react-resizable-panels.js.map