react-resizable-panels 4.0.0-alpha.0 → 4.0.0-alpha.1

package/dist/react-resizable-panels.js

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as F } from "react/jsx-runtime";
-import { useId as Re, useLayoutEffect as Pe, useEffect as Ce, useRef as I, useCallback as ce, createContext as Ee, useImperativeHandle as ue, useState as M, useMemo as Me, useContext as Ge } from "react";
-function Ie(e, t) {
+import { useId as Pe, useLayoutEffect as Ee, useEffect as Ce, useRef as I, useCallback as fe, createContext as Me, useImperativeHandle as de, useState as M, useMemo as pe, useSyncExternalStore as Ge, useContext as Ie } from "react";
+function Oe(e, t) {
   const n = getComputedStyle(e), o = parseFloat(n.fontSize);
   return t * o;
 }
-function Oe(e, t) {
+function ke(e, t) {
   const n = getComputedStyle(e.ownerDocument.body), o = parseFloat(n.fontSize);
   return t * o;
 }
-function ke(e) {
+function Ae(e) {
   return e / 100 * window.innerHeight;
 }
-function Ae(e) {
+function Ne(e) {
   return e / 100 * window.innerWidth;
 }
-function Ne(e) {
+function $e(e) {
   switch (typeof e) {
     case "number":
       return [e, "px"];
@@ -25,13 +25,13 @@ function Ne(e) {
     }
   }
 }
-function H({
+function j({
   groupSize: e,
   panelElement: t,
   styleProp: n
 }) {
   let o;
-  const [s, i] = Ne(n);
+  const [s, i] = $e(n);
   switch (i) {
     case "%": {
       o = s / 100 * e;
@@ -42,19 +42,19 @@ function H({
       break;
     }
     case "rem": {
-      o = Oe(t, s);
+      o = ke(t, s);
       break;
     }
     case "em": {
-      o = Ie(t, s);
+      o = Oe(t, s);
       break;
     }
     case "vh": {
-      o = ke(s);
+      o = Ae(s);
       break;
     }
     case "vw": {
-      o = Ae(s);
+      o = Ne(s);
       break;
     }
   }
@@ -63,19 +63,19 @@ function H({
 function L(e) {
   return parseFloat(e.toFixed(3));
 }
-function Z({
+function Q({
   group: e
 }) {
-  const { direction: t, panels: n } = e;
+  const { orientation: t, panels: n } = e;
   return n.reduce((o, s) => (o += t === "horizontal" ? s.element.offsetWidth : s.element.offsetHeight, o), 0);
 }
-function ie(e) {
-  const { panels: t } = e, n = Z({ group: e });
+function ae(e) {
+  const { panels: t } = e, n = Q({ group: e });
   return t.map((o) => {
     const { element: s, panelConstraints: i } = o;
     let a = 0;
     if (i.collapsedSize) {
-      const u = H({
+      const u = j({
         groupSize: n,
         panelElement: s,
         styleProp: i.collapsedSize
@@ -84,7 +84,7 @@ function ie(e) {
     }
     let r;
     if (i.defaultSize) {
-      const u = H({
+      const u = j({
         groupSize: n,
         panelElement: s,
         styleProp: i.defaultSize
@@ -93,7 +93,7 @@ function ie(e) {
     }
     let l = 0;
     if (i.minSize) {
-      const u = H({
+      const u = j({
         groupSize: n,
         panelElement: s,
         styleProp: i.minSize
@@ -102,7 +102,7 @@ function ie(e) {
     }
     let c = 100;
     if (i.maxSize) {
-      const u = H({
+      const u = j({
         groupSize: n,
         panelElement: s,
         styleProp: i.maxSize
@@ -119,7 +119,7 @@ function ie(e) {
     };
   });
 }
-class $e {
+class De {
   #e = {};
   addListener(t, n) {
     const o = this.#e[t];
@@ -158,70 +158,83 @@ class $e {
     }
   }
 }
-let C = {
+let E = {
   cursorFlags: 0,
   interactionState: {
     state: "inactive"
   },
   mountedGroups: /* @__PURE__ */ new Map()
 };
-const _ = new $e();
+const T = new De();
 function O() {
-  return C;
+  return E;
 }
 function G(e) {
-  const t = typeof e == "function" ? e(C) : e;
-  return C === t || (C = {
-    ...C,
+  const t = typeof e == "function" ? e(E) : e;
+  return E === t || (E = {
+    ...E,
     ...t
-  }, t.cursorFlags !== void 0 && _.emit("cursorFlagsChange", C.cursorFlags), t.interactionState !== void 0 && _.emit("interactionStateChange", C.interactionState), t.mountedGroups !== void 0 && _.emit("mountedGroupsChange", C.mountedGroups)), C;
+  }, t.cursorFlags !== void 0 && T.emit("cursorFlagsChange", E.cursorFlags), t.interactionState !== void 0 && T.emit("interactionStateChange", E.interactionState), t.mountedGroups !== void 0 && T.emit("mountedGroupsChange", E.mountedGroups)), E;
 }
-const Te = (e) => e, K = () => {
-}, fe = 1, de = 2, pe = 4, he = 8, re = {
+const Te = (e) => e, V = () => {
+}, he = 1, me = 2, ve = 4, ge = 8, le = {
   coarse: 10,
   precise: 5
 };
-function _e(e) {
-  const { direction: t, element: n, panels: o, separators: s } = e, i = Array.from(n.children).filter((c) => c instanceof HTMLElement).sort((c, u) => {
-    const f = c.getBoundingClientRect(), p = u.getBoundingClientRect();
-    return t === "horizontal" ? f.left - p.left : f.top - p.top;
-  }), a = [];
+function X(e, t) {
+  return t.sort(
+    e === "horizontal" ? _e : Fe
+  );
+}
+function _e(e, t) {
+  const n = e.element.offsetLeft - t.element.offsetLeft;
+  return n !== 0 ? n : e.element.offsetWidth - t.element.offsetWidth;
+}
+function Fe(e, t) {
+  const n = e.element.offsetTop - t.element.offsetTop;
+  return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
+}
+function He(e) {
+  const { element: t, orientation: n, panels: o, separators: s } = e, i = X(
+    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) {
     const u = o.find(
-      (f) => f.element === c
+      (d) => d.element === c
     );
     if (u) {
       if (r) {
-        const f = r.element.getBoundingClientRect(), p = c.getBoundingClientRect();
+        const d = r.element.getBoundingClientRect(), p = c.getBoundingClientRect();
         a.push({
           group: e,
           panels: [r, u],
           separator: l,
-          rect: t === "horizontal" ? new DOMRect(
-            f.right,
+          rect: n === "horizontal" ? new DOMRect(
+            d.right,
             p.top,
-            p.left - f.right,
+            p.left - d.right,
             p.height
           ) : new DOMRect(
             p.left,
-            f.bottom,
+            d.bottom,
             p.width,
-            p.top - f.bottom
+            p.top - d.bottom
           )
         });
       }
-      r = u;
+      r = u, l = void 0;
     } else {
-      const f = s.find(
+      const d = s.find(
         (p) => p.element === c
       );
-      f ? l = f : (r = void 0, l = void 0);
+      d ? l = d : (r = void 0, l = void 0);
     }
   }
   return a;
 }
-function De(e, t) {
+function je(e, t) {
   return {
     x: e.x >= t.left && e.x <= t.right ? 0 : Math.min(
       Math.abs(e.x - t.left),
@@ -233,13 +246,13 @@ function De(e, t) {
     )
   };
 }
-function Fe(e, t, n) {
+function We(e, t, n) {
   let o, s = {
     x: 1 / 0,
     y: 1 / 0
   };
   for (const i of t) {
-    const a = De(n, i.rect);
+    const a = je(n, i.rect);
     switch (e) {
       case "horizontal": {
         a.x <= s.x && (o = i, s = a);
@@ -256,26 +269,26 @@ function Fe(e, t, n) {
     hitRegion: o
   } : void 0;
 }
-let B;
-function je() {
-  return B === void 0 && (typeof matchMedia == "function" ? B = !!matchMedia("(pointer:coarse)").matches : B = !1), B;
+let W;
+function Ue() {
+  return W === void 0 && (typeof matchMedia == "function" ? W = !!matchMedia("(pointer:coarse)").matches : W = !1), W;
 }
-function me(e, t) {
+function ye(e, t) {
   const n = [];
   return t.forEach((o, s) => {
     if (s.disabled)
       return;
-    const i = je() ? re.coarse : re.precise, a = _e(s), r = Fe(s.direction, a, {
+    const i = Ue() ? le.coarse : le.precise, a = He(s), r = We(s.orientation, a, {
       x: e.clientX,
       y: e.clientY
     });
     r && r.distance.x <= i && r.distance.y <= i && n.push(r.hitRegion);
   }), n;
 }
-function se(e) {
+function ce(e) {
   if (e.defaultPrevented)
     return;
-  const { mountedGroups: t } = O(), n = me(e, t), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map();
+  const { mountedGroups: t } = O(), n = ye(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);
@@ -291,7 +304,7 @@ function se(e) {
     }
   }), n.length && e.preventDefault();
 }
-function He({
+function Be({
   cursorFlags: e,
   groups: t,
   state: n
@@ -302,7 +315,7 @@ function He({
     case "hover":
       t.forEach((i) => {
         if (!i.disableCursor)
-          switch (i.direction) {
+          switch (i.orientation) {
             case "horizontal": {
               o++;
               break;
@@ -318,7 +331,7 @@ function He({
     return null;
   switch (n) {
     case "active": {
-      const i = (e & fe) !== 0, a = (e & de) !== 0, r = (e & pe) !== 0, l = (e & he) !== 0;
+      const i = (e & he) !== 0, a = (e & me) !== 0, r = (e & ve) !== 0, l = (e & ge) !== 0;
       if (e) {
         if (i)
           return r ? "se-resize" : l ? "ne-resize" : "e-resize";
@@ -334,34 +347,34 @@ function He({
   }
   return o > 0 && s > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
 }
-let V = null, P;
-function X() {
+let K = null, P;
+function Y() {
   P === void 0 && (P = new CSSStyleSheet(), document.adoptedStyleSheets = [P]);
   const { cursorFlags: e, interactionState: t } = O();
   switch (t.state) {
     case "active":
     case "hover": {
-      const n = He({
+      const n = Be({
         cursorFlags: e,
         groups: t.hitRegions.map((o) => o.group),
         state: t.state
       });
-      if (V === n)
+      if (K === n)
         return;
-      V = n, n ? P.cssRules.length === 0 ? P.insertRule(`*{cursor: ${n} !important;}`) : P.replaceSync(`*{cursor: ${n} !important;}`) : P.cssRules.length === 1 && P.deleteRule(0);
+      K = n, n ? P.cssRules.length === 0 ? P.insertRule(`*{cursor: ${n} !important;}`) : P.replaceSync(`*{cursor: ${n} !important;}`) : P.cssRules.length === 1 && P.deleteRule(0);
       break;
     }
     case "inactive": {
-      V = null, P.cssRules.length === 1 && P.deleteRule(0);
+      K = null, P.cssRules.length === 1 && P.deleteRule(0);
       break;
     }
   }
 }
-function E(e, t = "Assertion error") {
+function C(e, t = "Assertion error") {
   if (!e)
     throw console.error(t), Error(t);
 }
-function Be(e, t) {
+function Ve(e, t) {
   if (e.length !== t.length)
     return !1;
   for (let n = 0; n < e.length; n++)
@@ -369,13 +382,13 @@ function Be(e, t) {
       return !1;
   return !0;
 }
-function b(e, t, n = 0) {
+function w(e, t, n = 0) {
   return Math.abs(L(e) - L(t)) <= n;
 }
-function Y(e, t) {
-  return b(e, t) ? 0 : e > t ? 1 : -1;
+function Z(e, t) {
+  return w(e, t) ? 0 : e > t ? 1 : -1;
 }
-function T({
+function D({
   panelConstraints: e,
   size: t
 }) {
@@ -385,15 +398,15 @@ function T({
     maxSize: s = 100,
     minSize: i = 0
   } = e;
-  if (Y(t, i) < 0)
+  if (Z(t, i) < 0)
     if (o) {
       const a = (n + i) / 2;
-      Y(t, a) < 0 ? t = n : t = i;
+      Z(t, a) < 0 ? t = n : t = i;
     } else
       t = i;
   return t = Math.min(s, t), t = L(t), t;
 }
-function We({
+function Ke({
   delta: e,
   initialLayout: t,
   panelConstraints: n,
@@ -401,97 +414,97 @@ function We({
   prevLayout: s,
   trigger: i
 }) {
-  if (b(e, 0))
+  if (w(e, 0))
     return t;
   const a = Object.values(t), r = Object.values(s), l = [...a], [c, u] = o;
-  E(c != null, "Invalid first pivot index"), E(u != null, "Invalid second pivot index");
-  let f = 0;
+  C(c != null, "Invalid first pivot index"), C(u != null, "Invalid second pivot index");
+  let d = 0;
   {
-    const m = e < 0 ? 1 : -1;
-    let d = e < 0 ? u : c, v = 0;
+    const h = e < 0 ? 1 : -1;
+    let f = e < 0 ? u : c, v = 0;
     for (; ; ) {
-      const x = a[d];
-      E(
+      const x = a[f];
+      C(
         x != null,
-        `Previous layout not found for panel index ${d}`
+        `Previous layout not found for panel index ${f}`
       );
-      const y = T({
-        panelConstraints: n[d],
+      const S = D({
+        panelConstraints: n[f],
         size: 100
       }) - x;
-      if (v += y, d += m, d < 0 || d >= n.length)
+      if (v += S, f += h, f < 0 || f >= n.length)
         break;
     }
-    const S = Math.min(Math.abs(e), Math.abs(v));
-    e = e < 0 ? 0 - S : S;
+    const g = Math.min(Math.abs(e), Math.abs(v));
+    e = e < 0 ? 0 - g : g;
   }
   {
-    let d = e < 0 ? c : u;
-    for (; d >= 0 && d < n.length; ) {
-      const v = Math.abs(e) - Math.abs(f), S = a[d];
-      E(
-        S != null,
-        `Previous layout not found for panel index ${d}`
+    let f = e < 0 ? c : u;
+    for (; f >= 0 && f < n.length; ) {
+      const v = Math.abs(e) - Math.abs(d), g = a[f];
+      C(
+        g != null,
+        `Previous layout not found for panel index ${f}`
       );
-      const x = S - v, z = T({
-        panelConstraints: n[d],
+      const x = g - v, z = D({
+        panelConstraints: n[f],
         size: x
       });
-      if (!b(S, z) && (f += S - z, l[d] = z, f.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+      if (!w(g, z) && (d += g - z, l[f] = z, d.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
         numeric: !0
       }) >= 0))
         break;
-      e < 0 ? d-- : d++;
+      e < 0 ? f-- : f++;
     }
   }
-  if (Be(r, l))
+  if (Ve(r, l))
     return s;
   {
-    const m = e < 0 ? u : c, d = a[m];
-    E(
-      d != null,
-      `Previous layout not found for panel index ${m}`
+    const h = e < 0 ? u : c, f = a[h];
+    C(
+      f != null,
+      `Previous layout not found for panel index ${h}`
     );
-    const v = d + f, S = T({
-      panelConstraints: n[m],
+    const v = f + d, g = D({
+      panelConstraints: n[h],
       size: v
     });
-    if (l[m] = S, !b(S, v)) {
-      let x = v - S, y = e < 0 ? u : c;
-      for (; y >= 0 && y < n.length; ) {
-        const R = l[y];
-        E(
+    if (l[h] = g, !w(g, v)) {
+      let x = v - g, S = e < 0 ? u : c;
+      for (; S >= 0 && S < n.length; ) {
+        const R = l[S];
+        C(
           R != null,
-          `Previous layout not found for panel index ${y}`
+          `Previous layout not found for panel index ${S}`
         );
-        const k = R + x, A = T({
-          panelConstraints: n[y],
+        const k = R + x, A = D({
+          panelConstraints: n[S],
           size: k
         });
-        if (b(R, A) || (x -= A - R, l[y] = A), b(x, 0))
+        if (w(R, A) || (x -= A - R, l[S] = A), w(x, 0))
           break;
-        e > 0 ? y-- : y++;
+        e > 0 ? S-- : S++;
       }
     }
   }
   const p = Object.values(l).reduce(
-    (m, d) => d + m,
+    (h, f) => f + h,
     0
   );
-  if (!b(p, 100, 0.1))
+  if (!w(p, 100, 0.1))
     return s;
-  const h = Object.keys(s);
-  return l.reduce((m, d, v) => (m[h[v]] = d, m), {});
+  const m = Object.keys(s);
+  return l.reduce((h, f, v) => (h[m[v]] = f, h), {});
 }
-function q(e, t) {
+function ee(e, t) {
   if (Object.keys(e).length !== Object.keys(t).length)
     return !1;
   for (const n in e)
-    if (Y(e[n], t[n]) !== 0)
+    if (Z(e[n], t[n]) !== 0)
       return !1;
   return !0;
 }
-function W(e) {
+function U(e) {
   if (e.defaultPrevented)
     return;
   const { interactionState: t, mountedGroups: n } = O();
@@ -514,50 +527,50 @@ function W(e) {
       let o = 0;
       const s = new Map(n);
       t.hitRegions.forEach((i) => {
-        const { direction: a, disableCursor: r, element: l, panels: c } = i.group;
+        const { disableCursor: a, element: r, orientation: l, panels: c } = i.group;
         let u = 0;
-        t.state === "active" && (a === "horizontal" ? u = (e.clientX - t.pointerDownAtPoint.x) / l.offsetWidth * 100 : u = (e.clientY - t.pointerDownAtPoint.y) / l.offsetHeight * 100);
-        const f = t.initialLayoutMap.get(
+        t.state === "active" && (l === "horizontal" ? u = (e.clientX - t.pointerDownAtPoint.x) / r.offsetWidth * 100 : u = (e.clientY - t.pointerDownAtPoint.y) / r.offsetHeight * 100);
+        const d = t.initialLayoutMap.get(
           i.group
-        ), { derivedPanelConstraints: p, layout: h } = n.get(i.group) ?? {};
-        if (p && f && h) {
-          const m = We({
+        ), { derivedPanelConstraints: p, layout: m } = n.get(i.group) ?? {};
+        if (p && d && m) {
+          const h = Ke({
             delta: u,
-            initialLayout: f,
+            initialLayout: d,
             panelConstraints: p,
-            pivotIndices: i.panels.map((d) => c.indexOf(d)),
-            prevLayout: h,
+            pivotIndices: i.panels.map((f) => c.indexOf(f)),
+            prevLayout: m,
             trigger: "mouse-or-touch"
           });
-          if (q(m, h)) {
-            if (u !== 0 && !r)
-              switch (a) {
+          if (ee(h, m)) {
+            if (u !== 0 && !a)
+              switch (l) {
                 case "horizontal": {
-                  o |= u < 0 ? fe : de;
+                  o |= u < 0 ? he : me;
                   break;
                 }
                 case "vertical": {
-                  o |= u < 0 ? pe : he;
+                  o |= u < 0 ? ve : ge;
                   break;
                 }
               }
           } else {
             s.set(i.group, {
               derivedPanelConstraints: p,
-              layout: m
+              layout: h
             });
-            const d = i.group.panels.map(({ id: v }) => v).join(",");
-            i.group.inMemoryLayouts[d] = m;
+            const f = i.group.panels.map(({ id: v }) => v).join(",");
+            i.group.inMemoryLayouts[f] = h;
           }
         }
       }), G({
         cursorFlags: o,
         mountedGroups: s
-      }), X();
+      }), Y();
       break;
     }
     default: {
-      const o = me(e, n);
+      const o = ye(e, n);
       o.length === 0 ? t.state !== "inactive" && G({
         interactionState: { state: "inactive" }
       }) : G({
@@ -565,12 +578,12 @@ function W(e) {
           hitRegions: o,
           state: "hover"
         }
-      }), X();
+      }), Y();
       break;
     }
   }
 }
-function ae(e) {
+function ue(e) {
   if (e.defaultPrevented)
     return;
   e.preventDefault();
@@ -582,10 +595,10 @@ function ae(e) {
         interactionState: {
           state: "inactive"
         }
-      }), X();
+      }), Y();
   }
 }
-function Ue(e) {
+function Xe(e) {
   let t = 0, n = 0;
   const o = {};
   for (const i of e)
@@ -603,22 +616,25 @@ function Ue(e) {
   }
   return o;
 }
-function Ke(e, t, n) {
+function Ye(e, t, n) {
   const o = n[0];
   if (!o)
     return;
   const s = e.panels.find((a) => a.element === t);
   if (!s || !s.onResize)
     return;
-  const i = Z({ group: e });
-  s.onResize({
-    asPercentage: L(
-      o.inlineSize / i * 100
-    ),
-    inPixels: o.inlineSize
-  });
+  const i = Q({ group: e });
+  s.onResize(
+    {
+      asPercentage: L(
+        o.inlineSize / i * 100
+      ),
+      inPixels: o.inlineSize
+    },
+    s.id
+  );
 }
-function ve({
+function q({
   layout: e,
   panelConstraints: t
 }) {
@@ -630,57 +646,64 @@ function ve({
     throw Error(
       `Invalid ${t.length} panel layout: ${o.map((r) => `${r}%`).join(", ")}`
     );
-  if (!b(s, 100) && o.length > 0)
+  if (!w(s, 100) && o.length > 0)
     for (let r = 0; r < t.length; r++) {
       const l = o[r];
-      E(l != null, `No layout data found for index ${r}`);
+      C(l != null, `No layout data found for index ${r}`);
       const c = 100 / s * l;
       o[r] = c;
     }
   let i = 0;
   for (let r = 0; r < t.length; r++) {
     const l = o[r];
-    E(l != null, `No layout data found for index ${r}`);
-    const c = T({
+    C(l != null, `No layout data found for index ${r}`);
+    const c = D({
       panelConstraints: t[r],
       size: l
     });
     l != c && (i += l - c, o[r] = c);
   }
-  if (!b(i, 0))
+  if (!w(i, 0))
     for (let r = 0; r < t.length; r++) {
       const l = o[r];
-      E(l != null, `No layout data found for index ${r}`);
-      const c = l + i, u = T({
+      C(l != null, `No layout data found for index ${r}`);
+      const c = l + i, u = D({
         panelConstraints: t[r],
         size: c
       });
-      if (l !== u && (i -= u - l, o[r] = u, b(i, 0)))
+      if (l !== u && (i -= u - l, o[r] = u, w(i, 0)))
         break;
     }
   const a = Object.keys(e);
   return o.reduce((r, l, c) => (r[a[c]] = l, r), {});
 }
-function Ve(e) {
+function Ze(e) {
   let t = !1;
   const n = new ResizeObserver((l) => {
     for (const c of l) {
-      const { borderBoxSize: u, target: f } = c;
-      f === e.element ? t && G((p) => {
-        const h = p.mountedGroups.get(e);
-        return h ? {
-          mountedGroups: new Map(p.mountedGroups).set(e, {
-            derivedPanelConstraints: ie(e),
-            layout: h.layout
-          })
-        } : p;
-      }) : Ke(e, f, u);
+      const { borderBoxSize: u, target: d } = c;
+      d === e.element ? t && G((p) => {
+        const m = p.mountedGroups.get(e);
+        if (m) {
+          const h = ae(e), f = m.layout, v = q({
+            layout: f,
+            panelConstraints: h
+          });
+          return {
+            mountedGroups: new Map(p.mountedGroups).set(e, {
+              derivedPanelConstraints: h,
+              layout: v
+            })
+          };
+        }
+        return p;
+      }) : Ye(e, d, u);
     }
   });
   n.observe(e.element), e.panels.forEach((l) => {
     l.onResize && n.observe(l.element);
   });
-  const o = ie(e), s = e.panels.map(({ id: l }) => l).join(","), i = e.inMemoryLayouts[s] ?? e.defaultLayout ?? Ue(o), a = ve({
+  const o = ae(e), s = e.panels.map(({ id: l }) => l).join(","), i = e.inMemoryLayouts[s] ?? e.defaultLayout ?? Xe(o), a = q({
     layout: i,
     panelConstraints: o
   }), r = G((l) => ({
@@ -689,27 +712,27 @@ function Ve(e) {
       layout: a
     })
   }));
-  return t = !0, r.mountedGroups.size === 1 && (window.addEventListener("pointerdown", se), window.addEventListener("pointerleave", W), window.addEventListener("pointermove", W), window.addEventListener("pointerup", ae)), function() {
+  return t = !0, r.mountedGroups.size === 1 && (window.addEventListener("pointerdown", ce), window.addEventListener("pointerleave", U), window.addEventListener("pointermove", U), window.addEventListener("pointerup", ue)), function() {
     const c = G((u) => {
-      const f = new Map(u.mountedGroups);
-      return f.delete(e), { mountedGroups: f };
+      const d = new Map(u.mountedGroups);
+      return d.delete(e), { mountedGroups: d };
     });
-    t = !1, c.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", se), window.removeEventListener("pointerleave", W), window.removeEventListener("pointermove", W), window.removeEventListener("pointerup", ae)), n.disconnect();
+    t = !1, c.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", ce), window.removeEventListener("pointerleave", U), window.removeEventListener("pointermove", U), window.removeEventListener("pointerup", ue)), n.disconnect();
   };
 }
-function J(e) {
-  const t = Re();
+function te(e) {
+  const t = Pe();
   return `${e ?? t}`;
 }
-const D = typeof window < "u" ? Pe : Ce;
-function Q(e) {
+const _ = typeof window < "u" ? Ee : Ce;
+function ne(e) {
   const t = I(e);
-  return D(() => {
+  return _(() => {
     t.current = e;
-  }, [e]), ce((n) => t.current?.(n), [t]);
+  }, [e]), fe((n) => t.current?.(n), [t]);
 }
-function ee(...e) {
-  return Q((t) => {
+function oe(...e) {
+  return ne((t) => {
     e.forEach((n) => {
       if (n)
         switch (typeof n) {
@@ -725,18 +748,13 @@ function ee(...e) {
     });
   });
 }
-const ge = "--react-resizable-panels--panel--pointer-events";
-function ye(e, t) {
+const Se = "--react-resizable-panels--panel--pointer-events";
+function xe(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 Se = Ee(null);
-function le(e, t) {
-  return t.sort(
-    e === "horizontal" ? (n, o) => n.element.offsetLeft - o.element.offsetLeft : (n, o) => n.element.offsetTop - o.element.offsetTop
-  );
-}
-function Xe({
+const ze = Me(null);
+function qe({
   groupId: e
 }) {
   const t = () => {
@@ -752,11 +770,11 @@ function Xe({
       return n;
     },
     setLayout(n) {
-      const { derivedPanelConstraints: o, group: s, layout: i } = t(), a = ve({
+      const { derivedPanelConstraints: o, group: s, layout: i } = t(), a = q({
         layout: n,
         panelConstraints: o
       });
-      return q(i, a) || G((r) => ({
+      return ee(i, a) || G((r) => ({
         mountedGroups: new Map(r.mountedGroups).set(s, {
           derivedPanelConstraints: o,
           layout: a
@@ -765,190 +783,182 @@ function Xe({
     }
   };
 }
-function Ye(e, t) {
+function Je(e, t) {
   const n = I({
     getLayout: () => ({}),
     setLayout: Te
   });
-  ue(t, () => n.current, []), D(() => {
+  de(t, () => n.current, []), _(() => {
     Object.assign(
       n.current,
-      Xe({ groupId: e })
+      qe({ groupId: e })
     );
   });
 }
-function nt({
+function rt({
   children: e,
   className: t,
   defaultLayout: n,
-  direction: o = "horizontal",
-  disableCursor: s,
-  disabled: i,
-  elementRef: a,
-  groupRef: r,
-  id: l,
-  onLayoutChange: c,
+  disableCursor: o,
+  disabled: s,
+  elementRef: i,
+  groupRef: a,
+  id: r,
+  onLayoutChange: l,
+  orientation: c = "horizontal",
   style: u
 }) {
-  const f = I({}), p = Q((g) => {
-    q(f.current, g) || (f.current = g, c?.(g));
-  }), h = J(l), [m, d] = M(!1), [v, S] = M(null), x = I({}), [z, y] = M(n ?? {}), [R, k] = M([]), [A, ne] = M([]), ze = ee(S, a);
-  Ye(h, r);
-  const we = Me(
+  const d = I({}), p = ne((y) => {
+    ee(d.current, y) || (d.current = y, l?.(y));
+  }), m = te(r), [h, f] = M(!1), [v, g] = M(null), x = I({}), [z, S] = M(n ?? {}), [R, k] = M([]), [A, re] = M([]), be = oe(g, i);
+  Je(m, a);
+  const we = pe(
     () => ({
-      direction: o,
-      id: h,
-      registerPanel: (g) => (k((w) => le(o, [...w, g])), () => {
-        k((w) => w.filter((N) => N !== g));
+      id: m,
+      orientation: c,
+      registerPanel: (y) => (k((b) => X(c, [...b, y])), () => {
+        k((b) => b.filter((N) => N !== y));
       }),
-      registerSeparator: (g) => (ne(
-        (w) => le(o, [...w, g])
+      registerSeparator: (y) => (re(
+        (b) => X(c, [...b, y])
       ), () => {
-        ne(
-          (w) => w.filter((N) => N !== g)
+        re(
+          (b) => b.filter((N) => N !== y)
         );
       })
     }),
-    [o, h]
+    [m, c]
   );
-  D(() => {
+  _(() => {
     if (v !== null && R.length > 0) {
-      const g = {
+      const y = {
         defaultLayout: n,
-        direction: o,
-        disableCursor: !!s,
-        disabled: !!i,
+        disableCursor: !!o,
+        disabled: !!s,
         element: v,
-        id: h,
+        id: m,
         inMemoryLayouts: x.current,
+        orientation: c,
         panels: R,
         separators: A
-      }, w = Ve(g), U = O().mountedGroups.get(g);
-      U && (y(U.layout), p?.(U.layout));
-      const be = _.addListener(
+      }, b = Ze(y), B = O().mountedGroups.get(y);
+      B && (S(B.layout), p?.(B.layout));
+      const Le = T.addListener(
         "interactionStateChange",
-        (j) => {
-          switch (j.state) {
+        (H) => {
+          switch (H.state) {
             case "active":
             case "hover": {
-              d(
-                j.hitRegions.some(
-                  ($) => $.group === g
+              f(
+                H.hitRegions.some(
+                  ($) => $.group === y
                 )
               );
               break;
             }
           }
         }
-      ), Le = _.addListener(
+      ), Re = T.addListener(
         "mountedGroupsChange",
-        (j) => {
-          const $ = j.get(g);
-          $ && $.derivedPanelConstraints.length > 0 && (y($.layout), p?.($.layout));
+        (H) => {
+          const $ = H.get(y);
+          $ && $.derivedPanelConstraints.length > 0 && (S($.layout), p?.($.layout));
         }
       );
       return () => {
-        w(), be(), Le();
+        b(), Le(), Re();
       };
     }
   }, [
     n,
     o,
     s,
-    i,
     v,
-    h,
+    m,
     p,
+    c,
     R,
     A
   ]);
-  const oe = {
-    [ge]: m ? "none" : void 0
+  const se = {
+    [Se]: h ? "none" : void 0
   };
-  for (const g in z) {
-    const w = ye(h, g), N = z[g];
-    oe[w] = N;
+  for (const y in z) {
+    const b = xe(m, y), N = z[y];
+    se[b] = N;
   }
-  return /* @__PURE__ */ F(Se.Provider, { value: we, children: /* @__PURE__ */ F(
+  return /* @__PURE__ */ F(ze.Provider, { value: we, children: /* @__PURE__ */ F(
     "div",
     {
+      "aria-orientation": c,
       className: t,
-      "data-group": !0,
-      "data-group-id": h,
-      "data-group-direction": o,
-      ref: ze,
+      "data-group": m,
+      ref: be,
       style: {
         ...u,
-        ...oe,
+        ...se,
         display: "flex",
-        flexDirection: o === "horizontal" ? "row" : "column",
-        flexWrap: "nowrap",
-        overflow: "hidden"
+        flexDirection: c === "horizontal" ? "row" : "column",
+        flexWrap: "nowrap"
       },
       children: e
     }
   ) });
 }
-function xe(e) {
+function J(e) {
   return `react-resizable-panels:${e}`;
 }
-function Ze({
-  id: e,
-  storage: t
-}) {
-  try {
-    const n = xe(e), o = t.getItem(n);
-    if (o)
-      return JSON.parse(o);
-  } catch (n) {
-    console.error(n);
-  }
-}
-function qe({
+function Qe({
   id: e,
   layout: t,
   storage: n
 }) {
   try {
-    const o = xe(e);
+    const o = J(e);
     n.setItem(o, JSON.stringify(t));
   } catch (o) {
     console.error(o);
   }
 }
-function ot({
+function st({
   groupId: e,
-  storage: t = localStorage
+  storage: t
 }) {
-  const n = I(null);
-  n.current === null && (n.current = Ze({
-    id: e,
-    storage: t
-  }));
-  const o = ce(
-    (s) => qe({
+  const n = Ge(
+    et,
+    () => t.getItem(J(e)),
+    () => t.getItem(J(e))
+  ), o = pe(
+    () => n ? JSON.parse(n) : null,
+    [n]
+  ), s = fe(
+    (i) => Qe({
       id: e,
-      layout: s,
+      layout: i,
       storage: t
     }),
     [e, t]
   );
   return {
-    defaultLayout: n.current,
-    onLayoutChange: o
+    defaultLayout: o,
+    onLayoutChange: s
   };
 }
-function it() {
+function et() {
+  return function() {
+  };
+}
+function at() {
   return M(null);
 }
-function rt() {
+function lt() {
   return I(null);
 }
-function te() {
-  const e = Ge(Se);
-  return E(e, "Unexpected"), e;
+function ie() {
+  const e = Ie(ze);
+  return C(e, "Unexpected"), e;
 }
-function Je({
+function tt({
   groupId: e,
   panelId: t
 }) {
@@ -986,7 +996,7 @@ function Je({
       i();
     },
     getSize: () => {
-      const { group: a } = n(), r = i(), { element: l } = s(), c = a.direction === "horizontal" ? l.offsetWidth : l.offsetHeight;
+      const { group: a } = n(), r = i(), { element: l } = s(), c = a.orientation === "horizontal" ? l.offsetWidth : l.offsetHeight;
       return {
         asPercentage: r,
         inPixels: c
@@ -994,13 +1004,13 @@ function Je({
     },
     isCollapsed: () => {
       const { collapsible: a, collapsedSize: r } = o(), l = i();
-      return a && b(r, l);
+      return a && w(r, l);
     },
     resize: (a) => {
       if (i() !== a)
         switch (typeof a) {
           case "number": {
-            const { group: l } = n(), c = Z({ group: l });
+            const { group: l } = n(), c = Q({ group: l });
             L(a / c * 100);
             break;
           }
@@ -1008,25 +1018,25 @@ function Je({
     }
   };
 }
-function Qe(e, t) {
-  const { id: n } = te(), o = I({
-    collapse: K,
-    expand: K,
+function nt(e, t) {
+  const { id: n } = ie(), o = I({
+    collapse: V,
+    expand: V,
     getSize: () => ({
       asPercentage: 0,
       inPixels: 0
     }),
     isCollapsed: () => !1,
-    resize: K
+    resize: V
   });
-  ue(t, () => o.current, []), D(() => {
+  de(t, () => o.current, []), _(() => {
     Object.assign(
       o.current,
-      Je({ groupId: n, panelId: e })
+      tt({ groupId: n, panelId: e })
     );
   });
 }
-function st({
+function ct({
   children: e,
   className: t,
   collapsedSize: n = 0,
@@ -1038,18 +1048,18 @@ function st({
   minSize: l = "0",
   onResize: c,
   panelRef: u,
-  style: f
+  style: d
 }) {
-  const p = !!a, h = J(a), [m, d] = M(null), v = ee(d, i), { id: S, registerPanel: x } = te(), z = c !== null, y = Q((k) => {
-    c?.(k);
+  const p = !!a, m = te(a), [h, f] = M(null), v = oe(f, i), { id: g, registerPanel: x } = ie(), z = c !== null, S = ne((k) => {
+    c?.(k, a);
   });
-  D(() => {
-    if (m !== null)
+  _(() => {
+    if (h !== null)
       return x({
-        element: m,
-        id: h,
+        element: h,
+        id: m,
         idIsStable: p,
-        onResize: z ? y : void 0,
+        onResize: z ? S : void 0,
         panelConstraints: {
           collapsedSize: n,
           collapsible: o,
@@ -1062,21 +1072,20 @@ function st({
     n,
     o,
     s,
-    m,
-    z,
     h,
+    z,
+    m,
     p,
     r,
     l,
-    y,
+    S,
     x
-  ]), Qe(h, u);
-  const R = ye(S, h);
+  ]), nt(m, u);
+  const R = xe(g, m);
   return /* @__PURE__ */ F(
     "div",
     {
-      "data-panel": !0,
-      "data-panel-id": h,
+      "data-panel": m,
       ref: v,
       style: {
         flexBasis: 0,
@@ -1086,7 +1095,7 @@ function st({
         overflow: "hidden",
         // Disable pointer events inside of a panel during resize
         // This avoid edge cases like nested iframes
-        pointerEvents: `var(${ge})`
+        pointerEvents: `var(${Se})`
       },
       children: /* @__PURE__ */ F(
         "div",
@@ -1095,7 +1104,7 @@ function st({
           style: {
             width: "100%",
             height: "100%",
-            ...f
+            ...d
           },
           children: e
         }
@@ -1103,65 +1112,67 @@ function st({
     }
   );
 }
-function at() {
+function ut() {
   return M(null);
 }
-function lt() {
+function ft() {
   return I(null);
 }
-function ct({
+function dt({
   children: e,
   className: t,
   elementRef: n,
   id: o,
   style: s
 }) {
-  const i = J(o), [a, r] = M(null), [l, c] = M("inactive"), u = ee(r, n), { registerSeparator: f } = te();
-  return D(() => {
+  const i = te(o), [a, r] = M(null), [l, c] = M("inactive"), u = oe(r, n), { orientation: d, registerSeparator: p } = ie(), m = d === "horizontal" ? "vertical" : "horizontal";
+  return _(() => {
     if (a !== null) {
-      const p = {
+      const h = {
         element: a,
         id: i
-      }, h = f(p), m = _.addListener(
+      }, f = p(h), v = T.addListener(
         "interactionStateChange",
-        (d) => {
+        (g) => {
           c(
-            d.state !== "inactive" && d.hitRegions.some(
-              (v) => v.separator === p
-            ) ? d.state : "inactive"
+            g.state !== "inactive" && g.hitRegions.some(
+              (x) => x.separator === h
+            ) ? g.state : "inactive"
           );
         }
       );
       return () => {
-        h(), m();
+        f(), v();
       };
     }
-  }, [a, i, f]), /* @__PURE__ */ F(
+  }, [a, i, p]), /* @__PURE__ */ F(
     "div",
     {
+      "aria-orientation": m,
       children: e,
       className: t,
-      "data-separator": !0,
-      "data-separator-id": i,
+      "data-separator": i,
       "data-separator-state": l,
       ref: u,
+      role: "separator",
       style: {
         flexBasis: "auto",
         ...s,
         flexGrow: 0,
         flexShrink: 0
-      }
+      },
+      tabIndex: 0
     }
   );
 }
 export {
-  nt as Group,
-  st as Panel,
-  ct as Separator,
-  ot as useDefaultLayout,
-  it as useGroupCallbackRef,
-  rt as useGroupRef,
-  at as usePanelCallbackRef,
-  lt as usePanelRef
+  rt as Group,
+  ct as Panel,
+  dt as Separator,
+  st as useDefaultLayout,
+  at as useGroupCallbackRef,
+  lt as useGroupRef,
+  ut as usePanelCallbackRef,
+  ft as usePanelRef
 };
 //# sourceMappingURL=react-resizable-panels.js.map