react-resizable-panels 1.0.0-rc.2 → 1.0.0-rc.3

package/dist/react-resizable-panels.cjs.js

@@ -1,1632 +1,1885 @@
-var $2IMI0$react = require("react");
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
-$parcel$export(module.exports, "assert", () => $3b727a2145ecd6f8$export$a7a9523472993e97);
-$parcel$export(module.exports, "Panel", () => $45da0e827c614f1d$export$2ddb90ad54e5f587);
-$parcel$export(module.exports, "PanelGroup", () => $cec4cafe75f3db78$export$1d05749f6f573bb);
-$parcel$export(module.exports, "PanelResizeHandle", () => $3a26a712c9163348$export$8829ecf6b6b15484);
-const $168036e9e9a9d9f8$export$4e09c449d6c407f7 = true;
-
-
-const $95f7f0116122f6f8$export$df77466336fe5355 = true;
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+const isBrowser = typeof window !== "undefined";
 
 // This module exists to work around Webpack issue https://github.com/webpack/webpack/issues/14814
-// and limitations with ParcelJS parsing of the useId workaround (used below).
-// For the time being, all react-resizable-panels must import "react" with the "* as React" syntax.
-// To avoid mistakes, we use the ESLint "no-restricted-imports" to prevent "react" imports except in this file.
-// See https://github.com/bvaughn/react-resizable-panels/issues/118
-// eslint-disable-next-line no-restricted-imports
-
-const { createElement: $6e687094f9ca8395$export$c8a8987d4410bf2d, createContext: $6e687094f9ca8395$export$fd42f52fd3ae1109, createRef: $6e687094f9ca8395$export$7d1e3a5e95ceca43, forwardRef: $6e687094f9ca8395$export$257a8862b851cb5b, useCallback: $6e687094f9ca8395$export$35808ee640e87ca7, useContext: $6e687094f9ca8395$export$fae74005e78b1a27, useEffect: $6e687094f9ca8395$export$6d9c69b0de29b591, useImperativeHandle: $6e687094f9ca8395$export$d5a552a76deda3c2, useLayoutEffect: $6e687094f9ca8395$export$e5c5a5f917a5871c, useMemo: $6e687094f9ca8395$export$1538c33de8887b59, useRef: $6e687094f9ca8395$export$b8f5890fc79d6aca, useState: $6e687094f9ca8395$export$60241385465d0a34 } = $2IMI0$react;
-// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
-const $6e687094f9ca8395$export$f680877a34711e37 = $2IMI0$react["useId".toString()];
-
-
-const $a15c28001c46e071$export$7d8c6d083caec74a = (0, $6e687094f9ca8395$export$fd42f52fd3ae1109)(null);
-$a15c28001c46e071$export$7d8c6d083caec74a.displayName = "PanelGroupContext";
-
-
-
-
-const $129b5b9a317dcc10$var$useIsomorphicLayoutEffect = (0, $168036e9e9a9d9f8$export$4e09c449d6c407f7) ? (0, $6e687094f9ca8395$export$e5c5a5f917a5871c) : ()=>{};
-var $129b5b9a317dcc10$export$2e2bcd8739ae039 = $129b5b9a317dcc10$var$useIsomorphicLayoutEffect;
 
+// eslint-disable-next-line no-restricted-imports
 
+const {
+  createElement,
+  createContext,
+  createRef,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} = React__namespace;
 
-const $b1693d8d8f570e9c$var$wrappedUseId = typeof (0, $6e687094f9ca8395$export$f680877a34711e37) === "function" ? (0, $6e687094f9ca8395$export$f680877a34711e37) : ()=>null;
-let $b1693d8d8f570e9c$var$counter = 0;
-function $b1693d8d8f570e9c$export$2e2bcd8739ae039(idFromParams = null) {
-    const idFromUseId = $b1693d8d8f570e9c$var$wrappedUseId();
-    const idRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)(idFromParams || idFromUseId || null);
-    if (idRef.current === null) idRef.current = "" + $b1693d8d8f570e9c$var$counter++;
-    return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
+// `toString()` prevents bundlers from trying to `import { useId } from 'react'`
+const useId = React__namespace["useId".toString()];
+
+const PanelGroupContext = createContext(null);
+PanelGroupContext.displayName = "PanelGroupContext";
+
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
+
+const wrappedUseId = typeof useId === "function" ? useId : () => null;
+let counter = 0;
+function useUniqueId(idFromParams = null) {
+  const idFromUseId = wrappedUseId();
+  const idRef = useRef(idFromParams || idFromUseId || null);
+  if (idRef.current === null) {
+    idRef.current = "" + counter++;
+  }
+  return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
 }
 
-
-
-function $45da0e827c614f1d$export$35d79d63a6984ee1({ children: children, className: classNameFromProps = "", collapsedSize: collapsedSize, collapsible: collapsible, defaultSize: defaultSize, forwardedRef: forwardedRef, id: idFromProps, maxSize: maxSize, minSize: minSize, onCollapse: onCollapse, onExpand: onExpand, onResize: onResize, order: order, style: styleFromProps, tagName: Type = "div", ...rest }) {
-    const context = (0, $6e687094f9ca8395$export$fae74005e78b1a27)((0, $a15c28001c46e071$export$7d8c6d083caec74a));
-    if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
-    const { collapsePanel: collapsePanel, expandPanel: expandPanel, getPanelSize: getPanelSize, getPanelStyle: getPanelStyle, groupId: groupId, isPanelCollapsed: isPanelCollapsed, registerPanel: registerPanel, resizePanel: resizePanel, unregisterPanel: unregisterPanel } = context;
-    const panelId = (0, $b1693d8d8f570e9c$export$2e2bcd8739ae039)(idFromProps);
-    const panelDataRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
-        callbacks: {
-            onCollapse: onCollapse,
-            onExpand: onExpand,
-            onResize: onResize
-        },
-        constraints: {
-            collapsedSize: collapsedSize,
-            collapsible: collapsible,
-            defaultSize: defaultSize,
-            maxSize: maxSize,
-            minSize: minSize
-        },
-        id: panelId,
-        idIsFromProps: idFromProps !== undefined,
-        order: order
-    });
-    const devWarningsRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
-        didLogMissingDefaultSizeWarning: false
-    });
-    // Normally we wouldn't log a warning during render,
-    // but effects don't run on the server, so we can't do it there
-    if (0, $95f7f0116122f6f8$export$df77466336fe5355) {
-        if (!devWarningsRef.current.didLogMissingDefaultSizeWarning) {
-            if (!(0, $168036e9e9a9d9f8$export$4e09c449d6c407f7) && defaultSize == null) {
-                devWarningsRef.current.didLogMissingDefaultSizeWarning = true;
-                console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
-            }
-        }
+function PanelWithForwardedRef({
+  children,
+  className: classNameFromProps = "",
+  collapsedSize,
+  collapsible,
+  defaultSize,
+  forwardedRef,
+  id: idFromProps,
+  maxSize,
+  minSize,
+  onCollapse,
+  onExpand,
+  onResize,
+  order,
+  style: styleFromProps,
+  tagName: Type = "div",
+  ...rest
+}) {
+  const context = useContext(PanelGroupContext);
+  if (context === null) {
+    throw Error(`Panel components must be rendered within a PanelGroup container`);
+  }
+  const {
+    collapsePanel,
+    expandPanel,
+    getPanelSize,
+    getPanelStyle,
+    groupId,
+    isPanelCollapsed,
+    registerPanel,
+    resizePanel,
+    unregisterPanel
+  } = context;
+  const panelId = useUniqueId(idFromProps);
+  const panelDataRef = useRef({
+    callbacks: {
+      onCollapse,
+      onExpand,
+      onResize
+    },
+    constraints: {
+      collapsedSize,
+      collapsible,
+      defaultSize,
+      maxSize,
+      minSize
+    },
+    id: panelId,
+    idIsFromProps: idFromProps !== undefined,
+    order
+  });
+  useRef({
+    didLogMissingDefaultSizeWarning: false
+  });
+  useIsomorphicLayoutEffect(() => {
+    const {
+      callbacks,
+      constraints
+    } = panelDataRef.current;
+    panelDataRef.current.id = panelId;
+    panelDataRef.current.idIsFromProps = idFromProps !== undefined;
+    panelDataRef.current.order = order;
+    callbacks.onCollapse = onCollapse;
+    callbacks.onExpand = onExpand;
+    callbacks.onResize = onResize;
+    constraints.collapsedSize = collapsedSize;
+    constraints.collapsible = collapsible;
+    constraints.defaultSize = defaultSize;
+    constraints.maxSize = maxSize;
+    constraints.minSize = minSize;
+  });
+  useIsomorphicLayoutEffect(() => {
+    const panelData = panelDataRef.current;
+    registerPanel(panelData);
+    return () => {
+      unregisterPanel(panelData);
+    };
+  }, [order, panelId, registerPanel, unregisterPanel]);
+  useImperativeHandle(forwardedRef, () => ({
+    collapse: () => {
+      collapsePanel(panelDataRef.current);
+    },
+    expand: () => {
+      expandPanel(panelDataRef.current);
+    },
+    getId() {
+      return panelId;
+    },
+    getSize() {
+      return getPanelSize(panelDataRef.current);
+    },
+    isCollapsed() {
+      return isPanelCollapsed(panelDataRef.current);
+    },
+    isExpanded() {
+      return !isPanelCollapsed(panelDataRef.current);
+    },
+    resize: size => {
+      resizePanel(panelDataRef.current, size);
     }
-    (0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
-        const { callbacks: callbacks, constraints: constraints } = panelDataRef.current;
-        panelDataRef.current.id = panelId;
-        panelDataRef.current.idIsFromProps = idFromProps !== undefined;
-        panelDataRef.current.order = order;
-        callbacks.onCollapse = onCollapse;
-        callbacks.onExpand = onExpand;
-        callbacks.onResize = onResize;
-        constraints.collapsedSize = collapsedSize;
-        constraints.collapsible = collapsible;
-        constraints.defaultSize = defaultSize;
-        constraints.maxSize = maxSize;
-        constraints.minSize = minSize;
-    });
-    (0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
-        const panelData = panelDataRef.current;
-        registerPanel(panelData);
-        return ()=>{
-            unregisterPanel(panelData);
-        };
-    }, [
-        order,
-        panelId,
-        registerPanel,
-        unregisterPanel
-    ]);
-    (0, $6e687094f9ca8395$export$d5a552a76deda3c2)(forwardedRef, ()=>({
-            collapse: ()=>{
-                collapsePanel(panelDataRef.current);
-            },
-            expand: ()=>{
-                expandPanel(panelDataRef.current);
-            },
-            getId () {
-                return panelId;
-            },
-            getSize () {
-                return getPanelSize(panelDataRef.current);
-            },
-            isCollapsed () {
-                return isPanelCollapsed(panelDataRef.current);
-            },
-            isExpanded () {
-                return !isPanelCollapsed(panelDataRef.current);
-            },
-            resize: (size)=>{
-                resizePanel(panelDataRef.current, size);
-            }
-        }), [
-        collapsePanel,
-        expandPanel,
-        getPanelSize,
-        isPanelCollapsed,
-        panelId,
-        resizePanel
-    ]);
-    const style = getPanelStyle(panelDataRef.current);
-    return (0, $6e687094f9ca8395$export$c8a8987d4410bf2d)(Type, {
-        ...rest,
-        children: children,
-        className: classNameFromProps,
-        style: {
-            ...style,
-            ...styleFromProps
-        },
-        // CSS selectors
-        "data-panel": "",
-        "data-panel-id": panelId,
-        "data-panel-group-id": groupId,
-        // e2e test attributes
-        "data-panel-collapsible": (0, $95f7f0116122f6f8$export$df77466336fe5355) ? collapsible || undefined : undefined,
-        "data-panel-size": (0, $95f7f0116122f6f8$export$df77466336fe5355) ? parseFloat("" + style.flexGrow).toFixed(1) : undefined
-    });
+  }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
+  const style = getPanelStyle(panelDataRef.current);
+  return createElement(Type, {
+    ...rest,
+    children,
+    className: classNameFromProps,
+    style: {
+      ...style,
+      ...styleFromProps
+    },
+    // CSS selectors
+    "data-panel": "",
+    "data-panel-id": panelId,
+    "data-panel-group-id": groupId,
+    // e2e test attributes
+    "data-panel-collapsible": undefined,
+    "data-panel-size": undefined
+  });
 }
-const $45da0e827c614f1d$export$2ddb90ad54e5f587 = (0, $6e687094f9ca8395$export$257a8862b851cb5b)((props, ref)=>(0, $6e687094f9ca8395$export$c8a8987d4410bf2d)($45da0e827c614f1d$export$35d79d63a6984ee1, {
-        ...props,
-        forwardedRef: ref
-    }));
-$45da0e827c614f1d$export$35d79d63a6984ee1.displayName = "Panel";
-$45da0e827c614f1d$export$2ddb90ad54e5f587.displayName = "forwardRef(Panel)";
-
-
-
-
-
-
-
-function $3b727a2145ecd6f8$export$a7a9523472993e97(expectedCondition, message = "Assertion failed!") {
-    if (!expectedCondition) {
-        console.error(message);
-        throw Error(message);
-    }
+const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
+  ...props,
+  forwardedRef: ref
+}));
+PanelWithForwardedRef.displayName = "Panel";
+Panel.displayName = "forwardRef(Panel)";
+
+function assert(expectedCondition, message = "Assertion failed!") {
+  if (!expectedCondition) {
+    console.error(message);
+    throw Error(message);
+  }
 }
 
-
-const $9abd79656a89cd3a$export$d6d3992f3becc879 = 10;
-
-
-function $b4416cfcd0b81788$export$1d75b1119dff900(actual, expected, fractionDigits = (0, $9abd79656a89cd3a$export$d6d3992f3becc879)) {
-    actual = parseFloat(actual.toFixed(fractionDigits));
-    expected = parseFloat(expected.toFixed(fractionDigits));
-    const delta = actual - expected;
-    if (delta === 0) return 0;
-    else return delta > 0 ? 1 : -1;
+const PRECISION = 10;
+
+function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
+  actual = parseFloat(actual.toFixed(fractionDigits));
+  expected = parseFloat(expected.toFixed(fractionDigits));
+  const delta = actual - expected;
+  if (delta === 0) {
+    return 0;
+  } else {
+    return delta > 0 ? 1 : -1;
+  }
 }
 
-
-
-function $599218a3c5f0640f$export$db9c8bd2fae72e82(actual, expected, fractionDigits) {
-    return (0, $b4416cfcd0b81788$export$1d75b1119dff900)(actual, expected, fractionDigits) === 0;
+function fuzzyNumbersEqual(actual, expected, fractionDigits) {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
 }
 
-
-
-
-
-function $34bbe1da7b6ad885$export$2f98edcf4006376f({ panelConstraints: panelConstraintsArray, panelIndex: panelIndex, size: size }) {
-    const panelConstraints = panelConstraintsArray[panelIndex];
-    (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints != null);
-    let { collapsedSize: collapsedSize = 0, collapsible: collapsible, maxSize: maxSize = 100, minSize: minSize = 0 } = panelConstraints;
-    if ((0, $b4416cfcd0b81788$export$1d75b1119dff900)(size, minSize) < 0) {
-        if (collapsible) {
-            // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
-            const halfwayPoint = (collapsedSize + minSize) / 2;
-            if ((0, $b4416cfcd0b81788$export$1d75b1119dff900)(size, halfwayPoint) < 0) size = collapsedSize;
-            else size = minSize;
-        } else size = minSize;
+// Panel size must be in percentages; pixel values should be pre-converted
+function resizePanel({
+  panelConstraints: panelConstraintsArray,
+  panelIndex,
+  size
+}) {
+  const panelConstraints = panelConstraintsArray[panelIndex];
+  assert(panelConstraints != null);
+  let {
+    collapsedSize = 0,
+    collapsible,
+    maxSize = 100,
+    minSize = 0
+  } = panelConstraints;
+  if (fuzzyCompareNumbers(size, minSize) < 0) {
+    if (collapsible) {
+      // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
+      const halfwayPoint = (collapsedSize + minSize) / 2;
+      if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
+        size = collapsedSize;
+      } else {
+        size = minSize;
+      }
+    } else {
+      size = minSize;
     }
-    size = Math.min(maxSize, size);
-    size = parseFloat(size.toFixed((0, $9abd79656a89cd3a$export$d6d3992f3becc879)));
-    return size;
+  }
+  size = Math.min(maxSize, size);
+  size = parseFloat(size.toFixed(PRECISION));
+  return size;
 }
 
-
-function $0c110d593c066642$export$7fead5cc734d205b({ delta: delta, layout: prevLayout, panelConstraints: panelConstraintsArray, pivotIndices: pivotIndices, trigger: trigger }) {
-    if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(delta, 0)) return prevLayout;
-    const nextLayout = [
-        ...prevLayout
-    ];
-    const [firstPivotIndex, secondPivotIndex] = pivotIndices;
-    (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(firstPivotIndex != null);
-    (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(secondPivotIndex != null);
-    let deltaApplied = 0;
+// All units must be in percentages; pixel values should be pre-converted
+function adjustLayoutByDelta({
+  delta,
+  layout: prevLayout,
+  panelConstraints: panelConstraintsArray,
+  pivotIndices,
+  trigger
+}) {
+  if (fuzzyNumbersEqual(delta, 0)) {
+    return prevLayout;
+  }
+  const nextLayout = [...prevLayout];
+  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
+  assert(firstPivotIndex != null);
+  assert(secondPivotIndex != null);
+  let deltaApplied = 0;
+
+  //const DEBUG = [];
+  //DEBUG.push(`adjustLayoutByDelta() ${prevLayout.join(", ")}`);
+  //DEBUG.push(`  delta: ${delta}`);
+  //DEBUG.push(`  pivotIndices: ${pivotIndices.join(", ")}`);
+  //DEBUG.push(`  trigger: ${trigger}`);
+  //DEBUG.push("");
+
+  // A resizing panel affects the panels before or after it.
+  //
+  // A negative delta means the panel(s) immediately after the resize handle should grow/expand by decreasing its offset.
+  // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
+  //
+  // A positive delta means the panel(s) immediately before the resize handle should "expand".
+  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resize handle.
+
+  {
     // If this is a resize triggered by a keyboard event, our logic for expanding/collapsing is different.
     // We no longer check the halfway threshold because this may prevent the panel from expanding at all.
     if (trigger === "keyboard") {
-        {
-            // Check if we should expand a collapsed panel
-            const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
-            const panelConstraints = panelConstraintsArray[index];
-            (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
-            //DEBUG.push(`edge case check 1: ${index}`);
-            //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
-            if (panelConstraints.collapsible) {
-                const prevSize = prevLayout[index];
-                (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
-                const panelConstraints = panelConstraintsArray[index];
-                (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
-                const { collapsedSize: collapsedSize = 0, minSize: minSize = 0 } = panelConstraints;
-                if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(prevSize, collapsedSize)) {
-                    const localDelta = minSize - prevSize;
-                    //DEBUG.push(`  -> expand delta: ${localDelta}`);
-                    if ((0, $b4416cfcd0b81788$export$1d75b1119dff900)(localDelta, Math.abs(delta)) > 0) delta = delta < 0 ? 0 - localDelta : localDelta;
-                }
+      {
+        // Check if we should expand a collapsed panel
+        const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+        const panelConstraints = panelConstraintsArray[index];
+        assert(panelConstraints);
+
+        //DEBUG.push(`edge case check 1: ${index}`);
+        //DEBUG.push(`  -> collapsible? ${constraints.collapsible}`);
+        if (panelConstraints.collapsible) {
+          const prevSize = prevLayout[index];
+          assert(prevSize != null);
+          const panelConstraints = panelConstraintsArray[index];
+          assert(panelConstraints);
+          const {
+            collapsedSize = 0,
+            minSize = 0
+          } = panelConstraints;
+          if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
+            const localDelta = minSize - prevSize;
+            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+              //DEBUG.push(`  -> delta: ${delta}`);
             }
+          }
         }
-        {
-            // Check if we should collapse a panel at its minimum size
-            const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
-            const panelConstraints = panelConstraintsArray[index];
-            (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
-            const { collapsible: collapsible } = panelConstraints;
-            //DEBUG.push(`edge case check 2: ${index}`);
-            //DEBUG.push(`  -> collapsible? ${collapsible}`);
-            if (collapsible) {
-                const prevSize = prevLayout[index];
-                (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
-                const panelConstraints = panelConstraintsArray[index];
-                (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
-                const { collapsedSize: collapsedSize = 0, minSize: minSize = 0 } = panelConstraints;
-                if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(prevSize, minSize)) {
-                    const localDelta = prevSize - collapsedSize;
-                    //DEBUG.push(`  -> expand delta: ${localDelta}`);
-                    if ((0, $b4416cfcd0b81788$export$1d75b1119dff900)(localDelta, Math.abs(delta)) > 0) delta = delta < 0 ? 0 - localDelta : localDelta;
-                }
+      }
+
+      {
+        // Check if we should collapse a panel at its minimum size
+        const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
+        const panelConstraints = panelConstraintsArray[index];
+        assert(panelConstraints);
+        const {
+          collapsible
+        } = panelConstraints;
+
+        //DEBUG.push(`edge case check 2: ${index}`);
+        //DEBUG.push(`  -> collapsible? ${collapsible}`);
+        if (collapsible) {
+          const prevSize = prevLayout[index];
+          assert(prevSize != null);
+          const panelConstraints = panelConstraintsArray[index];
+          assert(panelConstraints);
+          const {
+            collapsedSize = 0,
+            minSize = 0
+          } = panelConstraints;
+          if (fuzzyNumbersEqual(prevSize, minSize)) {
+            const localDelta = prevSize - collapsedSize;
+            //DEBUG.push(`  -> expand delta: ${localDelta}`);
+
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+              //DEBUG.push(`  -> delta: ${delta}`);
             }
+          }
         }
+      }
     }
-    {
-        // Pre-calculate max available delta in the opposite direction of our pivot.
-        // This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
-        // If this amount is less than the requested delta, adjust the requested delta.
-        // If this amount is greater than the requested delta, that's useful information too–
-        // as an expanding panel might change from collapsed to min size.
-        const increment = delta < 0 ? 1 : -1;
-        let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
-        let maxAvailableDelta = 0;
-        //DEBUG.push("pre calc...");
-        while(true){
-            const prevSize = prevLayout[index];
-            (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
-            const maxSafeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
-                panelConstraints: panelConstraintsArray,
-                panelIndex: index,
-                size: 100
-            });
-            const delta = maxSafeSize - prevSize;
-            //DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
-            maxAvailableDelta += delta;
-            index += increment;
-            if (index < 0 || index >= panelConstraintsArray.length) break;
-        }
-        //DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
-        const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
-        delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
-    //DEBUG.push(`  -> adjusted delta: ${delta}`);
     //DEBUG.push("");
+  }
+
+  {
+    // Pre-calculate max available delta in the opposite direction of our pivot.
+    // This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
+    // If this amount is less than the requested delta, adjust the requested delta.
+    // If this amount is greater than the requested delta, that's useful information too–
+    // as an expanding panel might change from collapsed to min size.
+
+    const increment = delta < 0 ? 1 : -1;
+    let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    let maxAvailableDelta = 0;
+
+    //DEBUG.push("pre calc...");
+    while (true) {
+      const prevSize = prevLayout[index];
+      assert(prevSize != null);
+      const maxSafeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: 100
+      });
+      const delta = maxSafeSize - prevSize;
+      //DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
+
+      maxAvailableDelta += delta;
+      index += increment;
+      if (index < 0 || index >= panelConstraintsArray.length) {
+        break;
+      }
     }
-    {
-        // Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
-        const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
-        let index = pivotIndex;
-        while(index >= 0 && index < panelConstraintsArray.length){
-            const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
-            const prevSize = prevLayout[index];
-            (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
-            const unsafeSize = prevSize - deltaRemaining;
-            const safeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
-                panelConstraints: panelConstraintsArray,
-                panelIndex: index,
-                size: unsafeSize
-            });
-            if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(prevSize, safeSize)) {
-                deltaApplied += prevSize - safeSize;
-                nextLayout[index] = safeSize;
-                if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
-                    numeric: true
-                }) >= 0) break;
-            }
-            if (delta < 0) index--;
-            else index++;
-        }
-    }
-    //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
-    //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+
+    //DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
+    const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+    delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
+    //DEBUG.push(`  -> adjusted delta: ${delta}`);
     //DEBUG.push("");
-    // If we were unable to resize any of the panels panels, return the previous state.
-    // This will essentially bailout and ignore e.g. drags past a panel's boundaries
-    if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(deltaApplied, 0)) //console.log(DEBUG.join("\n"));
-    return prevLayout;
-    {
-        // Now distribute the applied delta to the panels in the other direction
-        const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
-        const prevSize = prevLayout[pivotIndex];
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
-        const unsafeSize = prevSize + deltaApplied;
-        const safeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
-            panelConstraints: panelConstraintsArray,
-            panelIndex: pivotIndex,
-            size: unsafeSize
-        });
-        // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
-        nextLayout[pivotIndex] = safeSize;
-        // Edge case where expanding or contracting one panel caused another one to change collapsed state
-        if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(safeSize, unsafeSize)) {
-            let deltaRemaining = unsafeSize - safeSize;
-            const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
-            let index = pivotIndex;
-            while(index >= 0 && index < panelConstraintsArray.length){
-                const prevSize = nextLayout[index];
-                (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
-                const unsafeSize = prevSize + deltaRemaining;
-                const safeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
-                    panelConstraints: panelConstraintsArray,
-                    panelIndex: index,
-                    size: unsafeSize
-                });
-                if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(prevSize, safeSize)) {
-                    deltaRemaining -= safeSize - prevSize;
-                    nextLayout[index] = safeSize;
-                }
-                if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(deltaRemaining, 0)) break;
-                if (delta > 0) index--;
-                else index++;
-            }
+  }
+
+  {
+    // Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
+
+    const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
+    let index = pivotIndex;
+    while (index >= 0 && index < panelConstraintsArray.length) {
+      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+      const prevSize = prevLayout[index];
+      assert(prevSize != null);
+      const unsafeSize = prevSize - deltaRemaining;
+      const safeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: unsafeSize
+      });
+      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+        deltaApplied += prevSize - safeSize;
+        nextLayout[index] = safeSize;
+        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+          numeric: true
+        }) >= 0) {
+          break;
         }
+      }
+      if (delta < 0) {
+        index--;
+      } else {
+        index++;
+      }
     }
-    //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
-    //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-    //DEBUG.push("");
-    const totalSize = nextLayout.reduce((total, size)=>size + total, 0);
-    //DEBUG.push(`total size: ${totalSize}`);
+  }
+  //DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
+  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  //DEBUG.push("");
+
+  // If we were unable to resize any of the panels panels, return the previous state.
+  // This will essentially bailout and ignore e.g. drags past a panel's boundaries
+  if (fuzzyNumbersEqual(deltaApplied, 0)) {
     //console.log(DEBUG.join("\n"));
-    if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(totalSize, 100)) return prevLayout;
-    return nextLayout;
-}
-
-
+    return prevLayout;
+  }
+  {
+    // Now distribute the applied delta to the panels in the other direction
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    const prevSize = prevLayout[pivotIndex];
+    assert(prevSize != null);
+    const unsafeSize = prevSize + deltaApplied;
+    const safeSize = resizePanel({
+      panelConstraints: panelConstraintsArray,
+      panelIndex: pivotIndex,
+      size: unsafeSize
+    });
 
+    // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
+    nextLayout[pivotIndex] = safeSize;
 
-function $ec200dcdf140f2a9$export$b8372a468ba36f7d({ layout: layout, panelsArray: panelsArray, pivotIndices: pivotIndices }) {
-    let currentMinSize = 0;
-    let currentMaxSize = 100;
-    let totalMinSize = 0;
-    let totalMaxSize = 0;
-    const firstIndex = pivotIndices[0];
-    (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(firstIndex != null);
-    // A panel's effective min/max sizes also need to account for other panel's sizes.
-    panelsArray.forEach((panelData, index)=>{
-        const { constraints: constraints } = panelData;
-        const { maxSize: maxSize = 100, minSize: minSize = 0 } = constraints;
-        if (index === firstIndex) {
-            currentMinSize = minSize;
-            currentMaxSize = maxSize;
+    // Edge case where expanding or contracting one panel caused another one to change collapsed state
+    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
+      let deltaRemaining = unsafeSize - safeSize;
+      const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+      let index = pivotIndex;
+      while (index >= 0 && index < panelConstraintsArray.length) {
+        const prevSize = nextLayout[index];
+        assert(prevSize != null);
+        const unsafeSize = prevSize + deltaRemaining;
+        const safeSize = resizePanel({
+          panelConstraints: panelConstraintsArray,
+          panelIndex: index,
+          size: unsafeSize
+        });
+        if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+          deltaRemaining -= safeSize - prevSize;
+          nextLayout[index] = safeSize;
+        }
+        if (fuzzyNumbersEqual(deltaRemaining, 0)) {
+          break;
+        }
+        if (delta > 0) {
+          index--;
         } else {
-            totalMinSize += minSize;
-            totalMaxSize += maxSize;
+          index++;
         }
-    });
-    const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
-    const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
-    const valueNow = layout[firstIndex];
-    return {
-        valueMax: valueMax,
-        valueMin: valueMin,
-        valueNow: valueNow
-    };
-}
+      }
+    }
+  }
+  //DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
+  //DEBUG.push(`  deltaApplied: ${deltaApplied}`);
+  //DEBUG.push("");
 
+  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
+  //DEBUG.push(`total size: ${totalSize}`);
+  //console.log(DEBUG.join("\n"));
 
-function $ef847a5e9ce851d7$export$63eb605e437b214f(groupId) {
-    return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
+  if (!fuzzyNumbersEqual(totalSize, 100)) {
+    return prevLayout;
+  }
+  return nextLayout;
 }
 
-
-function $645e6f06f14b1fbf$export$4c92fedbbc2381ca(groupId, id) {
-    const handles = (0, $ef847a5e9ce851d7$export$63eb605e437b214f)(groupId);
-    const index = handles.findIndex((handle)=>handle.getAttribute("data-panel-resize-handle-id") === id);
-    return index !== null && index !== void 0 ? index : null;
+function calculateAriaValues({
+  layout,
+  panelsArray,
+  pivotIndices
+}) {
+  let currentMinSize = 0;
+  let currentMaxSize = 100;
+  let totalMinSize = 0;
+  let totalMaxSize = 0;
+  const firstIndex = pivotIndices[0];
+  assert(firstIndex != null);
+
+  // A panel's effective min/max sizes also need to account for other panel's sizes.
+  panelsArray.forEach((panelData, index) => {
+    const {
+      constraints
+    } = panelData;
+    const {
+      maxSize = 100,
+      minSize = 0
+    } = constraints;
+    if (index === firstIndex) {
+      currentMinSize = minSize;
+      currentMaxSize = maxSize;
+    } else {
+      totalMinSize += minSize;
+      totalMaxSize += maxSize;
+    }
+  });
+  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
+  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
+  const valueNow = layout[firstIndex];
+  return {
+    valueMax,
+    valueMin,
+    valueNow
+  };
 }
 
-
-function $28ee5ac1ce973de1$export$cf92598869f99b8f(groupId, dragHandleId) {
-    const index = (0, $645e6f06f14b1fbf$export$4c92fedbbc2381ca)(groupId, dragHandleId);
-    return index != null ? [
-        index,
-        index + 1
-    ] : [
-        -1,
-        -1
-    ];
+function getResizeHandleElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
 }
 
-
-function $2119d3fcdfae277d$export$4e72aefa594058df(id) {
-    const element = document.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
-    if (element) return element;
-    return null;
+function getResizeHandleElementIndex(groupId, id) {
+  const handles = getResizeHandleElementsForGroup(groupId);
+  const index = handles.findIndex(handle => handle.getAttribute("data-panel-resize-handle-id") === id);
+  return index !== null && index !== void 0 ? index : null;
 }
 
-
-
-function $58762ed3a79a85a2$export$4c5229c874a62620(id) {
-    const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
-    if (element) return element;
-    return null;
+function determinePivotIndices(groupId, dragHandleId) {
+  const index = getResizeHandleElementIndex(groupId, dragHandleId);
+  return index != null ? [index, index + 1] : [-1, -1];
 }
 
-
-
-function $76ab5cd6038e6c4f$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
-    var _panelsArray_index, _panelsArray_;
-    const handle = (0, $58762ed3a79a85a2$export$4c5229c874a62620)(handleId);
-    const handles = (0, $ef847a5e9ce851d7$export$63eb605e437b214f)(groupId);
-    const index = handle ? handles.indexOf(handle) : -1;
-    var _panelsArray_index_id;
-    const idBefore = (_panelsArray_index_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : _panelsArray_index.id) !== null && _panelsArray_index_id !== void 0 ? _panelsArray_index_id : null;
-    var _panelsArray__id;
-    const idAfter = (_panelsArray__id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : _panelsArray_.id) !== null && _panelsArray__id !== void 0 ? _panelsArray__id : null;
-    return [
-        idBefore,
-        idAfter
-    ];
+function getPanelGroupElement(id) {
+  const element = document.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
 }
 
+function getResizeHandleElement(id) {
+  const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
 
+function getResizeHandlePanelIds(groupId, handleId, panelsArray) {
+  var _panelsArray$index$id, _panelsArray$index, _panelsArray$id, _panelsArray;
+  const handle = getResizeHandleElement(handleId);
+  const handles = getResizeHandleElementsForGroup(groupId);
+  const index = handle ? handles.indexOf(handle) : -1;
+  const idBefore = (_panelsArray$index$id = (_panelsArray$index = panelsArray[index]) === null || _panelsArray$index === void 0 ? void 0 : _panelsArray$index.id) !== null && _panelsArray$index$id !== void 0 ? _panelsArray$index$id : null;
+  const idAfter = (_panelsArray$id = (_panelsArray = panelsArray[index + 1]) === null || _panelsArray === void 0 ? void 0 : _panelsArray.id) !== null && _panelsArray$id !== void 0 ? _panelsArray$id : null;
+  return [idBefore, idAfter];
+}
 
-
-
-function $c682b4ad8fc26d8e$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef, eagerValuesRef: eagerValuesRef, groupId: groupId, layout: layout, panelDataArray: panelDataArray, setLayout: setLayout }) {
-    const devWarningsRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
-        didWarnAboutMissingResizeHandle: false
-    });
-    (0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
-        const resizeHandleElements = (0, $ef847a5e9ce851d7$export$63eb605e437b214f)(groupId);
-        for(let index = 0; index < panelDataArray.length - 1; index++){
-            const { valueMax: valueMax, valueMin: valueMin, valueNow: valueNow } = (0, $ec200dcdf140f2a9$export$b8372a468ba36f7d)({
-                layout: layout,
-                panelsArray: panelDataArray,
-                pivotIndices: [
-                    index,
-                    index + 1
-                ]
-            });
-            const resizeHandleElement = resizeHandleElements[index];
-            if (resizeHandleElement == null) {
-                if (0, $95f7f0116122f6f8$export$df77466336fe5355) {
-                    const { didWarnAboutMissingResizeHandle: didWarnAboutMissingResizeHandle } = devWarningsRef.current;
-                    if (!didWarnAboutMissingResizeHandle) {
-                        devWarningsRef.current.didWarnAboutMissingResizeHandle = true;
-                        console.warn(`WARNING: Missing resize handle for PanelGroup "${groupId}"`);
-                    }
-                }
-            } else {
+// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+
+function useWindowSplitterPanelGroupBehavior({
+  committedValuesRef,
+  eagerValuesRef,
+  groupId,
+  layout,
+  panelDataArray,
+  setLayout
+}) {
+  useRef({
+    didWarnAboutMissingResizeHandle: false
+  });
+  useIsomorphicLayoutEffect(() => {
+    const resizeHandleElements = getResizeHandleElementsForGroup(groupId);
+    for (let index = 0; index < panelDataArray.length - 1; index++) {
+      const {
+        valueMax,
+        valueMin,
+        valueNow
+      } = calculateAriaValues({
+        layout,
+        panelsArray: panelDataArray,
+        pivotIndices: [index, index + 1]
+      });
+      const resizeHandleElement = resizeHandleElements[index];
+      if (resizeHandleElement == null) ; else {
+        const panelData = panelDataArray[index];
+        assert(panelData);
+        resizeHandleElement.setAttribute("aria-controls", panelData.id);
+        resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
+        resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
+        resizeHandleElement.setAttribute("aria-valuenow", valueNow != null ? "" + Math.round(valueNow) : "");
+      }
+    }
+    return () => {
+      resizeHandleElements.forEach((resizeHandleElement, index) => {
+        resizeHandleElement.removeAttribute("aria-controls");
+        resizeHandleElement.removeAttribute("aria-valuemax");
+        resizeHandleElement.removeAttribute("aria-valuemin");
+        resizeHandleElement.removeAttribute("aria-valuenow");
+      });
+    };
+  }, [groupId, layout, panelDataArray]);
+  useEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    assert(eagerValues);
+    const {
+      panelDataArray
+    } = eagerValues;
+    const groupElement = getPanelGroupElement(groupId);
+    assert(groupElement != null, `No group found for id "${groupId}"`);
+    const handles = getResizeHandleElementsForGroup(groupId);
+    assert(handles);
+    const cleanupFunctions = handles.map(handle => {
+      const handleId = handle.getAttribute("data-panel-resize-handle-id");
+      assert(handleId);
+      const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray);
+      if (idBefore == null || idAfter == null) {
+        return () => {};
+      }
+      const onKeyDown = event => {
+        if (event.defaultPrevented) {
+          return;
+        }
+        switch (event.key) {
+          case "Enter":
+            {
+              event.preventDefault();
+              const index = panelDataArray.findIndex(panelData => panelData.id === idBefore);
+              if (index >= 0) {
                 const panelData = panelDataArray[index];
-                (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelData);
-                resizeHandleElement.setAttribute("aria-controls", panelData.id);
-                resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
-                resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
-                resizeHandleElement.setAttribute("aria-valuenow", valueNow != null ? "" + Math.round(valueNow) : "");
+                assert(panelData);
+                const size = layout[index];
+                const {
+                  collapsedSize = 0,
+                  collapsible,
+                  minSize = 0
+                } = panelData.constraints;
+                if (size != null && collapsible) {
+                  const nextLayout = adjustLayoutByDelta({
+                    delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
+                    layout,
+                    panelConstraints: panelDataArray.map(panelData => panelData.constraints),
+                    pivotIndices: determinePivotIndices(groupId, handleId),
+                    trigger: "keyboard"
+                  });
+                  if (layout !== nextLayout) {
+                    setLayout(nextLayout);
+                  }
+                }
+              }
+              break;
             }
         }
-        return ()=>{
-            resizeHandleElements.forEach((resizeHandleElement, index)=>{
-                resizeHandleElement.removeAttribute("aria-controls");
-                resizeHandleElement.removeAttribute("aria-valuemax");
-                resizeHandleElement.removeAttribute("aria-valuemin");
-                resizeHandleElement.removeAttribute("aria-valuenow");
-            });
-        };
-    }, [
-        groupId,
-        layout,
-        panelDataArray
-    ]);
-    (0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
-        const eagerValues = eagerValuesRef.current;
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(eagerValues);
-        const { panelDataArray: panelDataArray } = eagerValues;
-        const groupElement = (0, $2119d3fcdfae277d$export$4e72aefa594058df)(groupId);
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(groupElement != null, `No group found for id "${groupId}"`);
-        const handles = (0, $ef847a5e9ce851d7$export$63eb605e437b214f)(groupId);
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(handles);
-        const cleanupFunctions = handles.map((handle)=>{
-            const handleId = handle.getAttribute("data-panel-resize-handle-id");
-            (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(handleId);
-            const [idBefore, idAfter] = (0, $76ab5cd6038e6c4f$export$68d3a33c21dfbe27)(groupId, handleId, panelDataArray);
-            if (idBefore == null || idAfter == null) return ()=>{};
-            const onKeyDown = (event)=>{
-                if (event.defaultPrevented) return;
-                switch(event.key){
-                    case "Enter":
-                        {
-                            event.preventDefault();
-                            const index = panelDataArray.findIndex((panelData)=>panelData.id === idBefore);
-                            if (index >= 0) {
-                                const panelData = panelDataArray[index];
-                                (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelData);
-                                const size = layout[index];
-                                const { collapsedSize: collapsedSize = 0, collapsible: collapsible, minSize: minSize = 0 } = panelData.constraints;
-                                if (size != null && collapsible) {
-                                    const nextLayout = (0, $0c110d593c066642$export$7fead5cc734d205b)({
-                                        delta: (0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
-                                        layout: layout,
-                                        panelConstraints: panelDataArray.map((panelData)=>panelData.constraints),
-                                        pivotIndices: (0, $28ee5ac1ce973de1$export$cf92598869f99b8f)(groupId, handleId),
-                                        trigger: "keyboard"
-                                    });
-                                    if (layout !== nextLayout) setLayout(nextLayout);
-                                }
-                            }
-                            break;
-                        }
-                }
-            };
-            handle.addEventListener("keydown", onKeyDown);
-            return ()=>{
-                handle.removeEventListener("keydown", onKeyDown);
-            };
-        });
-        return ()=>{
-            cleanupFunctions.forEach((cleanupFunction)=>cleanupFunction());
-        };
-    }, [
-        committedValuesRef,
-        eagerValuesRef,
-        groupId,
-        layout,
-        panelDataArray,
-        setLayout
-    ]);
+      };
+      handle.addEventListener("keydown", onKeyDown);
+      return () => {
+        handle.removeEventListener("keydown", onKeyDown);
+      };
+    });
+    return () => {
+      cleanupFunctions.forEach(cleanupFunction => cleanupFunction());
+    };
+  }, [committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
 }
 
-
-
-function $d31ef7445a11a6c5$export$b141efd0b0fb9174(arrayA, arrayB) {
-    if (arrayA.length !== arrayB.length) return false;
-    for(let index = 0; index < arrayA.length; index++){
-        if (arrayA[index] !== arrayB[index]) return false;
+function areEqual(arrayA, arrayB) {
+  if (arrayA.length !== arrayB.length) {
+    return false;
+  }
+  for (let index = 0; index < arrayA.length; index++) {
+    if (arrayA[index] !== arrayB[index]) {
+      return false;
     }
-    return true;
+  }
+  return true;
 }
 
-
-
-
-
-
-
-function $601a2b3c71af04bb$export$e7bf60a870f429b0(event) {
-    return event.type === "keydown";
+function isKeyDown(event) {
+  return event.type === "keydown";
 }
-function $601a2b3c71af04bb$export$764db16956f554f8(event) {
-    return event.type.startsWith("mouse");
+function isMouseEvent(event) {
+  return event.type.startsWith("mouse");
 }
-function $601a2b3c71af04bb$export$c4dfce035d43d1e0(event) {
-    return event.type.startsWith("touch");
+function isTouchEvent(event) {
+  return event.type.startsWith("touch");
 }
 
-
-function $9b677018bf1ac728$export$ae0c59ca751ba81d(direction, event) {
-    const isHorizontal = direction === "horizontal";
-    if ((0, $601a2b3c71af04bb$export$764db16956f554f8)(event)) return isHorizontal ? event.clientX : event.clientY;
-    else if ((0, $601a2b3c71af04bb$export$c4dfce035d43d1e0)(event)) {
-        const firstTouch = event.touches[0];
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(firstTouch);
-        return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
-    } else throw Error(`Unsupported event type "${event.type}"`);
+function getResizeEventCursorPosition(direction, event) {
+  const isHorizontal = direction === "horizontal";
+  if (isMouseEvent(event)) {
+    return isHorizontal ? event.clientX : event.clientY;
+  } else if (isTouchEvent(event)) {
+    const firstTouch = event.touches[0];
+    assert(firstTouch);
+    return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
+  } else {
+    throw Error(`Unsupported event type "${event.type}"`);
+  }
 }
 
-
-function $2d702ed7231bedb6$export$e3b8a38f1f6abc89(event, dragHandleId, direction, initialDragState) {
-    const isHorizontal = direction === "horizontal";
-    const handleElement = (0, $58762ed3a79a85a2$export$4c5229c874a62620)(dragHandleId);
-    (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(handleElement);
-    const groupId = handleElement.getAttribute("data-panel-group-id");
-    (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(groupId);
-    let { initialCursorPosition: initialCursorPosition } = initialDragState;
-    const cursorPosition = (0, $9b677018bf1ac728$export$ae0c59ca751ba81d)(direction, event);
-    const groupElement = (0, $2119d3fcdfae277d$export$4e72aefa594058df)(groupId);
-    (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(groupElement);
-    const groupRect = groupElement.getBoundingClientRect();
-    const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
-    const offsetPixels = cursorPosition - initialCursorPosition;
-    const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
-    return offsetPercentage;
+function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState) {
+  const isHorizontal = direction === "horizontal";
+  const handleElement = getResizeHandleElement(dragHandleId);
+  assert(handleElement);
+  const groupId = handleElement.getAttribute("data-panel-group-id");
+  assert(groupId);
+  let {
+    initialCursorPosition
+  } = initialDragState;
+  const cursorPosition = getResizeEventCursorPosition(direction, event);
+  const groupElement = getPanelGroupElement(groupId);
+  assert(groupElement);
+  const groupRect = groupElement.getBoundingClientRect();
+  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
+  const offsetPixels = cursorPosition - initialCursorPosition;
+  const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
+  return offsetPercentage;
 }
 
-
-
-function $6c41c8262084553c$export$b08134b65f9db46a(event, dragHandleId, direction, initialDragState, keyboardResizeBy) {
-    if ((0, $601a2b3c71af04bb$export$e7bf60a870f429b0)(event)) {
-        const isHorizontal = direction === "horizontal";
-        let delta = 0;
-        if (event.shiftKey) delta = 100;
-        else if (keyboardResizeBy != null) delta = keyboardResizeBy;
-        else delta = 10;
-        let movement = 0;
-        switch(event.key){
-            case "ArrowDown":
-                movement = isHorizontal ? 0 : delta;
-                break;
-            case "ArrowLeft":
-                movement = isHorizontal ? -delta : 0;
-                break;
-            case "ArrowRight":
-                movement = isHorizontal ? delta : 0;
-                break;
-            case "ArrowUp":
-                movement = isHorizontal ? 0 : -delta;
-                break;
-            case "End":
-                movement = 100;
-                break;
-            case "Home":
-                movement = -100;
-                break;
-        }
-        return movement;
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
+function calculateDeltaPercentage(event, dragHandleId, direction, initialDragState, keyboardResizeBy) {
+  if (isKeyDown(event)) {
+    const isHorizontal = direction === "horizontal";
+    let delta = 0;
+    if (event.shiftKey) {
+      delta = 100;
+    } else if (keyboardResizeBy != null) {
+      delta = keyboardResizeBy;
     } else {
-        if (initialDragState == null) return 0;
-        return (0, $2d702ed7231bedb6$export$e3b8a38f1f6abc89)(event, dragHandleId, direction, initialDragState);
+      delta = 10;
+    }
+    let movement = 0;
+    switch (event.key) {
+      case "ArrowDown":
+        movement = isHorizontal ? 0 : delta;
+        break;
+      case "ArrowLeft":
+        movement = isHorizontal ? -delta : 0;
+        break;
+      case "ArrowRight":
+        movement = isHorizontal ? delta : 0;
+        break;
+      case "ArrowUp":
+        movement = isHorizontal ? 0 : -delta;
+        break;
+      case "End":
+        movement = 100;
+        break;
+      case "Home":
+        movement = -100;
+        break;
+    }
+    return movement;
+  } else {
+    if (initialDragState == null) {
+      return 0;
     }
+    return calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState);
+  }
 }
 
-
-
-function $17c359958d4c9de7$export$47337a21c443778e({ panelDataArray: panelDataArray }) {
-    const layout = Array(panelDataArray.length);
-    const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
-    let numPanelsWithSizes = 0;
-    let remainingSize = 100;
-    // Distribute default sizes first
-    for(let index = 0; index < panelDataArray.length; index++){
-        const panelConstraints = panelConstraintsArray[index];
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
-        const { defaultSize: defaultSize } = panelConstraints;
-        if (defaultSize != null) {
-            numPanelsWithSizes++;
-            layout[index] = defaultSize;
-            remainingSize -= defaultSize;
-        }
+function calculateUnsafeDefaultLayout({
+  panelDataArray
+}) {
+  const layout = Array(panelDataArray.length);
+  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+
+  // Distribute default sizes first
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    assert(panelConstraints);
+    const {
+      defaultSize
+    } = panelConstraints;
+    if (defaultSize != null) {
+      numPanelsWithSizes++;
+      layout[index] = defaultSize;
+      remainingSize -= defaultSize;
     }
-    // Remaining size should be distributed evenly between panels without default sizes
-    for(let index = 0; index < panelDataArray.length; index++){
-        const panelConstraints = panelConstraintsArray[index];
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
-        const { defaultSize: defaultSize } = panelConstraints;
-        if (defaultSize != null) continue;
-        const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
-        const size = remainingSize / numRemainingPanels;
-        numPanelsWithSizes++;
-        layout[index] = size;
-        remainingSize -= size;
+  }
+
+  // Remaining size should be distributed evenly between panels without default sizes
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    assert(panelConstraints);
+    const {
+      defaultSize
+    } = panelConstraints;
+    if (defaultSize != null) {
+      continue;
     }
-    return layout;
+    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
+    const size = remainingSize / numRemainingPanels;
+    numPanelsWithSizes++;
+    layout[index] = size;
+    remainingSize -= size;
+  }
+  return layout;
 }
 
-
-
-function $3c80a05711c0e5f5$export$b8e48269e4faa934(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
-    layout.forEach((size, index)=>{
-        const panelData = panelsArray[index];
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelData);
-        const { callbacks: callbacks, constraints: constraints, id: panelId } = panelData;
-        const { collapsedSize: collapsedSize = 0, collapsible: collapsible } = constraints;
-        const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
-        if (lastNotifiedSize == null || size !== lastNotifiedSize) {
-            panelIdToLastNotifiedSizeMap[panelId] = size;
-            const { onCollapse: onCollapse, onExpand: onExpand, onResize: onResize } = callbacks;
-            if (onResize) onResize(size, lastNotifiedSize);
-            if (collapsible && (onCollapse || onExpand)) {
-                if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) onExpand();
-                if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) onCollapse();
-            }
+// Layout should be pre-converted into percentages
+function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
+  layout.forEach((size, index) => {
+    const panelData = panelsArray[index];
+    assert(panelData);
+    const {
+      callbacks,
+      constraints,
+      id: panelId
+    } = panelData;
+    const {
+      collapsedSize = 0,
+      collapsible
+    } = constraints;
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
+    if (lastNotifiedSize == null || size !== lastNotifiedSize) {
+      panelIdToLastNotifiedSizeMap[panelId] = size;
+      const {
+        onCollapse,
+        onExpand,
+        onResize
+      } = callbacks;
+      if (onResize) {
+        onResize(size, lastNotifiedSize);
+      }
+      if (collapsible && (onCollapse || onExpand)) {
+        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+          onExpand();
         }
-    });
+        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+          onCollapse();
+        }
+      }
+    }
+  });
 }
 
-
-function $11f1460202e20b00$export$a10903e2e57656c1(a, b) {
-    if (a.length !== b.length) return false;
-    else for(let index = 0; index < a.length; index++){
-        if (a[index] != b[index]) return false;
+function compareLayouts(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  } else {
+    for (let index = 0; index < a.length; index++) {
+      if (a[index] != b[index]) {
+        return false;
+      }
     }
-    return true;
+  }
+  return true;
 }
 
-
 // This method returns a number between 1 and 100 representing
-function $dd3efaf0847631d3$export$fc25f3248e61edf5({ dragState: dragState, layout: layout, panelData: panelData, panelIndex: panelIndex, precision: precision = 3 }) {
-    const size = layout[panelIndex];
-    let flexGrow;
-    if (panelData.length === 1) flexGrow = "1";
-    else if (size == null) // Initial render (before panels have registered themselves)
+
+// the % of the group's overall space this panel should occupy.
+function computePanelFlexBoxStyle({
+  dragState,
+  layout,
+  panelData,
+  panelIndex,
+  precision = 3
+}) {
+  const size = layout[panelIndex];
+  let flexGrow;
+  if (panelData.length === 1) {
     flexGrow = "1";
-    else flexGrow = size.toPrecision(precision);
-    return {
-        flexBasis: 0,
-        flexGrow: flexGrow,
-        flexShrink: 1,
-        // Without this, Panel sizes may be unintentionally overridden by their content
-        overflow: "hidden",
-        // Disable pointer events inside of a panel during resize
-        // This avoid edge cases like nested iframes
-        pointerEvents: dragState !== null ? "none" : undefined
-    };
+  } else if (size == null) {
+    // Initial render (before panels have registered themselves)
+    flexGrow = "1";
+  } else {
+    flexGrow = size.toPrecision(precision);
+  }
+  return {
+    flexBasis: 0,
+    flexGrow,
+    flexShrink: 1,
+    // Without this, Panel sizes may be unintentionally overridden by their content
+    overflow: "hidden",
+    // Disable pointer events inside of a panel during resize
+    // This avoid edge cases like nested iframes
+    pointerEvents: dragState !== null ? "none" : undefined
+  };
 }
 
-
-let $08745f7373322b05$var$currentState = null;
-let $08745f7373322b05$var$element = null;
-function $08745f7373322b05$export$fa35f3322c52262f(state) {
-    switch(state){
-        case "horizontal":
-            return "ew-resize";
-        case "horizontal-max":
-            return "w-resize";
-        case "horizontal-min":
-            return "e-resize";
-        case "vertical":
-            return "ns-resize";
-        case "vertical-max":
-            return "n-resize";
-        case "vertical-min":
-            return "s-resize";
-    }
+let currentState = null;
+let element = null;
+function getCursorStyle(state) {
+  switch (state) {
+    case "horizontal":
+      return "ew-resize";
+    case "horizontal-max":
+      return "w-resize";
+    case "horizontal-min":
+      return "e-resize";
+    case "vertical":
+      return "ns-resize";
+    case "vertical-max":
+      return "n-resize";
+    case "vertical-min":
+      return "s-resize";
+  }
 }
-function $08745f7373322b05$export$b61932ee18f96e08() {
-    if ($08745f7373322b05$var$element !== null) {
-        document.head.removeChild($08745f7373322b05$var$element);
-        $08745f7373322b05$var$currentState = null;
-        $08745f7373322b05$var$element = null;
-    }
+function resetGlobalCursorStyle() {
+  if (element !== null) {
+    document.head.removeChild(element);
+    currentState = null;
+    element = null;
+  }
 }
-function $08745f7373322b05$export$d395b5dfd066a659(state) {
-    if ($08745f7373322b05$var$currentState === state) return;
-    $08745f7373322b05$var$currentState = state;
-    const style = $08745f7373322b05$export$fa35f3322c52262f(state);
-    if ($08745f7373322b05$var$element === null) {
-        $08745f7373322b05$var$element = document.createElement("style");
-        document.head.appendChild($08745f7373322b05$var$element);
-    }
-    $08745f7373322b05$var$element.innerHTML = `*{cursor: ${style}!important;}`;
+function setGlobalCursorStyle(state) {
+  if (currentState === state) {
+    return;
+  }
+  currentState = state;
+  const style = getCursorStyle(state);
+  if (element === null) {
+    element = document.createElement("style");
+    document.head.appendChild(element);
+  }
+  element.innerHTML = `*{cursor: ${style}!important;}`;
 }
 
-
-function $2e8572579e31d898$export$2e2bcd8739ae039(callback, durationMs = 10) {
-    let timeoutId = null;
-    let callable = (...args)=>{
-        if (timeoutId !== null) clearTimeout(timeoutId);
-        timeoutId = setTimeout(()=>{
-            callback(...args);
-        }, durationMs);
-    };
-    return callable;
+function debounce(callback, durationMs = 10) {
+  let timeoutId = null;
+  let callable = (...args) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      callback(...args);
+    }, durationMs);
+  };
+  return callable;
 }
 
-
-
-function $3ffc7498c21f3969$export$80bbb698e7429afe(groupId) {
-    return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+function getPanelElementsForGroup(groupId) {
+  return Array.from(document.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
 }
 
-
-
-
-
-function $75a06c6e1ca05a58$export$cb0adc12c8406347(storageObject) {
-    try {
-        if (typeof localStorage !== "undefined") {
-            // Bypass this check for future calls
-            storageObject.getItem = (name)=>{
-                return localStorage.getItem(name);
-            };
-            storageObject.setItem = (name, value)=>{
-                localStorage.setItem(name, value);
-            };
-        } else throw new Error("localStorage not supported in this environment");
-    } catch (error) {
-        console.error(error);
-        storageObject.getItem = ()=>null;
-        storageObject.setItem = ()=>{};
+// PanelGroup might be rendering in a server-side environment where localStorage is not available
+// or on a browser with cookies/storage disabled.
+// In either case, this function avoids accessing localStorage until needed,
+// and avoids throwing user-visible errors.
+function initializeDefaultStorage(storageObject) {
+  try {
+    if (typeof localStorage !== "undefined") {
+      // Bypass this check for future calls
+      storageObject.getItem = name => {
+        return localStorage.getItem(name);
+      };
+      storageObject.setItem = (name, value) => {
+        localStorage.setItem(name, value);
+      };
+    } else {
+      throw new Error("localStorage not supported in this environment");
     }
+  } catch (error) {
+    console.error(error);
+    storageObject.getItem = () => null;
+    storageObject.setItem = () => {};
+  }
 }
 
-
 // Note that Panel ids might be user-provided (stable) or useId generated (non-deterministic)
 // so they should not be used as part of the serialization key.
 // Using the min/max size attributes should work well enough as a backup.
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
-function $f9cb001fbb908626$var$getSerializationKey(panels) {
-    return panels.map((panel)=>{
-        const { constraints: constraints, id: id, idIsFromProps: idIsFromProps, order: order } = panel;
-        if (idIsFromProps) return id;
-        else return `${order}:${JSON.stringify(constraints)}`;
-    }).sort((a, b)=>a.localeCompare(b)).join(",");
-}
-function $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage) {
-    try {
-        const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
-        if (serialized) {
-            const parsed = JSON.parse(serialized);
-            if (typeof parsed === "object" && parsed != null) return parsed;
-        }
-    } catch (error) {}
-    return null;
-}
-function $f9cb001fbb908626$export$9c80c6617f0386da(autoSaveId, panels, storage) {
-    const state = $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage);
-    if (state) {
-        const key = $f9cb001fbb908626$var$getSerializationKey(panels);
-        var _state_key;
-        return (_state_key = state[key]) !== null && _state_key !== void 0 ? _state_key : null;
+function getSerializationKey(panels) {
+  return panels.map(panel => {
+    const {
+      constraints,
+      id,
+      idIsFromProps,
+      order
+    } = panel;
+    if (idIsFromProps) {
+      return id;
+    } else {
+      return `${order}:${JSON.stringify(constraints)}`;
     }
-    return null;
+  }).sort((a, b) => a.localeCompare(b)).join(",");
 }
-function $f9cb001fbb908626$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
-    const key = $f9cb001fbb908626$var$getSerializationKey(panels);
-    const state = $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage) || {};
-    state[key] = sizes;
-    try {
-        storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
-    } catch (error) {
-        console.error(error);
+function loadSerializedPanelGroupState(autoSaveId, storage) {
+  try {
+    const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+    if (serialized) {
+      const parsed = JSON.parse(serialized);
+      if (typeof parsed === "object" && parsed != null) {
+        return parsed;
+      }
     }
+  } catch (error) {}
+  return null;
+}
+function loadPanelLayout(autoSaveId, panels, storage) {
+  const state = loadSerializedPanelGroupState(autoSaveId, storage);
+  if (state) {
+    var _state$key;
+    const key = getSerializationKey(panels);
+    return (_state$key = state[key]) !== null && _state$key !== void 0 ? _state$key : null;
+  }
+  return null;
+}
+function savePanelGroupLayout(autoSaveId, panels, sizes, storage) {
+  const key = getSerializationKey(panels);
+  const state = loadSerializedPanelGroupState(autoSaveId, storage) || {};
+  state[key] = sizes;
+  try {
+    storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+  } catch (error) {
+    console.error(error);
+  }
 }
 
-
-
-
-function $0531c662514b8c6a$export$d00cfefa2c395b39({ panelConstraints: panelConstraintsArray, panelId: panelId, panelIndex: panelIndex }) {
-    if (0, $95f7f0116122f6f8$export$df77466336fe5355) {
-        const warnings = [];
-        const panelConstraints = panelConstraintsArray[panelIndex];
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelConstraints);
-        const { collapsedSize: collapsedSize = 0, defaultSize: defaultSize, maxSize: maxSize = 100, minSize: minSize = 0 } = panelConstraints;
-        if (minSize > maxSize) warnings.push(`min size (${minSize}%) should not be greater than max size (${maxSize}%)`);
-        if (defaultSize != null) {
-            if (defaultSize < 0) warnings.push("default size should not be less than 0");
-            else if (defaultSize < minSize) warnings.push("default size should not be less than min size");
-            if (defaultSize > 100) warnings.push("default size should not be greater than 100");
-            else if (defaultSize > maxSize) warnings.push("default size should not be greater than max size");
-        }
-        if (collapsedSize > minSize) warnings.push("collapsed size should not be greater than min size");
-        if (warnings.length > 0) {
-            const name = panelId != null ? `Panel "${panelId}"` : "Panel";
-            console.warn(`${name} has an invalid configuration:\n\n${warnings.join("\n")}`);
-            return false;
+// All units must be in percentages; pixel values should be pre-converted
+function validatePanelGroupLayout({
+  layout: prevLayout,
+  panelConstraints
+}) {
+  const nextLayout = [...prevLayout];
+  const nextLayoutTotalSize = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
+
+  // Validate layout expectations
+  if (nextLayout.length !== panelConstraints.length) {
+    throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const unsafeSize = nextLayout[index];
+      assert(unsafeSize != null);
+      const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
+      nextLayout[index] = safeSize;
+    }
+  }
+  let remainingSize = 0;
+
+  // First pass: Validate the proposed layout given each panel's constraints
+  for (let index = 0; index < panelConstraints.length; index++) {
+    const unsafeSize = nextLayout[index];
+    assert(unsafeSize != null);
+    const safeSize = resizePanel({
+      panelConstraints,
+      panelIndex: index,
+      size: unsafeSize
+    });
+    if (unsafeSize != safeSize) {
+      remainingSize += unsafeSize - safeSize;
+      nextLayout[index] = safeSize;
+    }
+  }
+
+  // If there is additional, left over space, assign it to any panel(s) that permits it
+  // (It's not worth taking multiple additional passes to evenly distribute)
+  if (!fuzzyNumbersEqual(remainingSize, 0)) {
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const prevSize = nextLayout[index];
+      assert(prevSize != null);
+      const unsafeSize = prevSize + remainingSize;
+      const safeSize = resizePanel({
+        panelConstraints,
+        panelIndex: index,
+        size: unsafeSize
+      });
+      if (prevSize !== safeSize) {
+        remainingSize -= safeSize - prevSize;
+        nextLayout[index] = safeSize;
+
+        // Once we've used up the remainder, bail
+        if (fuzzyNumbersEqual(remainingSize, 0)) {
+          break;
         }
+      }
     }
-    return true;
+  }
+  return nextLayout;
 }
 
-
-
-
-
-
-function $aa44a0a11da9fc89$export$64432a52a1035c18({ layout: prevLayout, panelConstraints: panelConstraints }) {
-    const nextLayout = [
-        ...prevLayout
-    ];
-    const nextLayoutTotalSize = nextLayout.reduce((accumulated, current)=>accumulated + current, 0);
-    // Validate layout expectations
-    if (nextLayout.length !== panelConstraints.length) throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map((size)=>`${size}%`).join(", ")}`);
-    else if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(nextLayoutTotalSize, 100)) {
-        // This is not ideal so we should warn about it, but it may be recoverable in some cases
-        // (especially if the amount is small)
-        if (0, $95f7f0116122f6f8$export$df77466336fe5355) console.warn(`WARNING: Invalid layout total size: ${nextLayout.map((size)=>`${size}%`).join(", ")}. Layout normalization will be applied.`);
-        for(let index = 0; index < panelConstraints.length; index++){
-            const unsafeSize = nextLayout[index];
-            (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(unsafeSize != null);
-            const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
-            nextLayout[index] = safeSize;
+const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
+const defaultStorage = {
+  getItem: name => {
+    initializeDefaultStorage(defaultStorage);
+    return defaultStorage.getItem(name);
+  },
+  setItem: (name, value) => {
+    initializeDefaultStorage(defaultStorage);
+    defaultStorage.setItem(name, value);
+  }
+};
+const debounceMap = {};
+function PanelGroupWithForwardedRef({
+  autoSaveId = null,
+  children,
+  className: classNameFromProps = "",
+  direction,
+  forwardedRef,
+  id: idFromProps = null,
+  onLayout = null,
+  keyboardResizeBy = null,
+  storage = defaultStorage,
+  style: styleFromProps,
+  tagName: Type = "div",
+  ...rest
+}) {
+  const groupId = useUniqueId(idFromProps);
+  const [dragState, setDragState] = useState(null);
+  const [layout, setLayout] = useState([]);
+  const panelIdToLastNotifiedSizeMapRef = useRef({});
+  const panelSizeBeforeCollapseRef = useRef(new Map());
+  const prevDeltaRef = useRef(0);
+  const committedValuesRef = useRef({
+    autoSaveId,
+    direction,
+    dragState,
+    id: groupId,
+    keyboardResizeBy,
+    onLayout,
+    storage
+  });
+  const eagerValuesRef = useRef({
+    layout,
+    panelDataArray: []
+  });
+  useRef({
+    didLogIdAndOrderWarning: false,
+    didLogPanelConstraintsWarning: false,
+    prevPanelIds: []
+  });
+  useImperativeHandle(forwardedRef, () => ({
+    getId: () => committedValuesRef.current.id,
+    getLayout: () => {
+      const {
+        layout
+      } = eagerValuesRef.current;
+      return layout;
+    },
+    setLayout: unsafeLayout => {
+      const {
+        onLayout
+      } = committedValuesRef.current;
+      const {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current;
+      const safeLayout = validatePanelGroupLayout({
+        layout: unsafeLayout,
+        panelConstraints: panelDataArray.map(panelData => panelData.constraints)
+      });
+      if (!areEqual(prevLayout, safeLayout)) {
+        setLayout(safeLayout);
+        eagerValuesRef.current.layout = safeLayout;
+        if (onLayout) {
+          onLayout(safeLayout);
         }
+        callPanelCallbacks(panelDataArray, safeLayout, panelIdToLastNotifiedSizeMapRef.current);
+      }
+    }
+  }), []);
+  useIsomorphicLayoutEffect(() => {
+    committedValuesRef.current.autoSaveId = autoSaveId;
+    committedValuesRef.current.direction = direction;
+    committedValuesRef.current.dragState = dragState;
+    committedValuesRef.current.id = groupId;
+    committedValuesRef.current.onLayout = onLayout;
+    committedValuesRef.current.storage = storage;
+  });
+  useWindowSplitterPanelGroupBehavior({
+    committedValuesRef,
+    eagerValuesRef,
+    groupId,
+    layout,
+    panelDataArray: eagerValuesRef.current.panelDataArray,
+    setLayout
+  });
+  useEffect(() => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+
+    // If this panel has been configured to persist sizing information, save sizes to local storage.
+    if (autoSaveId) {
+      if (layout.length === 0 || layout.length !== panelDataArray.length) {
+        return;
+      }
+      let debouncedSave = debounceMap[autoSaveId];
+
+      // Limit the frequency of localStorage updates.
+      if (debouncedSave == null) {
+        debouncedSave = debounce(savePanelGroupLayout, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
+        debounceMap[autoSaveId] = debouncedSave;
+      }
+      debouncedSave(autoSaveId, panelDataArray, layout, storage);
     }
-    let remainingSize = 0;
-    // First pass: Validate the proposed layout given each panel's constraints
-    for(let index = 0; index < panelConstraints.length; index++){
-        const unsafeSize = nextLayout[index];
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(unsafeSize != null);
-        const safeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
-            panelConstraints: panelConstraints,
-            panelIndex: index,
-            size: unsafeSize
+  }, [autoSaveId, layout, storage]);
+
+  // DEV warnings
+  useEffect(() => {
+  });
+
+  // External APIs are safe to memoize via committed values ref
+  const collapsePanel = useCallback(panelData => {
+    const {
+      onLayout
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    if (panelData.constraints.collapsible) {
+      const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
+      const {
+        collapsedSize = 0,
+        panelSize,
+        pivotIndices
+      } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      assert(panelSize != null);
+      if (panelSize !== collapsedSize) {
+        // Store size before collapse;
+        // This is the size that gets restored if the expand() API is used.
+        panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+        const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          layout: prevLayout,
+          panelConstraints: panelConstraintsArray,
+          pivotIndices,
+          trigger: "imperative-api"
         });
-        if (unsafeSize != safeSize) {
-            remainingSize += unsafeSize - safeSize;
-            nextLayout[index] = safeSize;
+        if (!compareLayouts(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+          eagerValuesRef.current.layout = nextLayout;
+          if (onLayout) {
+            onLayout(nextLayout);
+          }
+          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
         }
+      }
     }
-    // If there is additional, left over space, assign it to any panel(s) that permits it
-    // (It's not worth taking multiple additional passes to evenly distribute)
-    if (!(0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(remainingSize, 0)) for(let index = 0; index < panelConstraints.length; index++){
-        const prevSize = nextLayout[index];
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(prevSize != null);
-        const unsafeSize = prevSize + remainingSize;
-        const safeSize = (0, $34bbe1da7b6ad885$export$2f98edcf4006376f)({
-            panelConstraints: panelConstraints,
-            panelIndex: index,
-            size: unsafeSize
+  }, []);
+
+  // External APIs are safe to memoize via committed values ref
+  const expandPanel = useCallback(panelData => {
+    const {
+      onLayout
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    if (panelData.constraints.collapsible) {
+      const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
+      const {
+        collapsedSize = 0,
+        panelSize,
+        minSize = 0,
+        pivotIndices
+      } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      if (panelSize === collapsedSize) {
+        // Restore this panel to the size it was before it was collapsed, if possible.
+        const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
+        const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+        const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          layout: prevLayout,
+          panelConstraints: panelConstraintsArray,
+          pivotIndices,
+          trigger: "imperative-api"
         });
-        if (prevSize !== safeSize) {
-            remainingSize -= safeSize - prevSize;
-            nextLayout[index] = safeSize;
-            // Once we've used up the remainder, bail
-            if ((0, $599218a3c5f0640f$export$db9c8bd2fae72e82)(remainingSize, 0)) break;
+        if (!compareLayouts(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+          eagerValuesRef.current.layout = nextLayout;
+          if (onLayout) {
+            onLayout(nextLayout);
+          }
+          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
         }
+      }
     }
-    return nextLayout;
-}
+  }, []);
+
+  // External APIs are safe to memoize via committed values ref
+  const getPanelSize = useCallback(panelData => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(panelSize != null);
+    return panelSize;
+  }, []);
+
+  // This API should never read from committedValuesRef
+  const getPanelStyle = useCallback(panelData => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
+    return computePanelFlexBoxStyle({
+      dragState,
+      layout,
+      panelData: panelDataArray,
+      panelIndex
+    });
+  }, [dragState, layout]);
+
+  // External APIs are safe to memoize via committed values ref
+  const isPanelCollapsed = useCallback(panelData => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize,
+      collapsible,
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    return collapsible === true && panelSize === collapsedSize;
+  }, []);
+
+  // External APIs are safe to memoize via committed values ref
+  const isPanelExpanded = useCallback(panelData => {
+    const {
+      layout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize = 0,
+      collapsible,
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout);
+    assert(panelSize != null);
+    return !collapsible || panelSize > collapsedSize;
+  }, []);
+  const registerPanel = useCallback(panelData => {
+    const {
+      autoSaveId,
+      id: groupId,
+      onLayout,
+      storage
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+
+    // HACK
+    // This appears to be triggered by some React Suspense+Offscreen+StrictMode bug;
+    // see app.replay.io/recording/17b6e11d-4500-4173-b23d-61dfd141fed1
+    const index = findPanelDataIndex(panelDataArray, panelData);
+    if (index >= 0) {
+      if (panelData.idIsFromProps) {
+        console.warn(`Panel with id "${panelData.id}" registered twice`);
+      } else {
+        console.warn(`Panel registered twice`);
+      }
+      return;
+    }
+    panelDataArray.push(panelData);
+    panelDataArray.sort((panelA, panelB) => {
+      const orderA = panelA.order;
+      const orderB = panelB.order;
+      if (orderA == null && orderB == null) {
+        return 0;
+      } else if (orderA == null) {
+        return -1;
+      } else if (orderB == null) {
+        return 1;
+      } else {
+        return orderA - orderB;
+      }
+    });
 
+    // Wait until all panels have registered before we try to compute layout;
+    // doing it earlier is both wasteful and may trigger misleading warnings in development mode.
+    const panelElements = getPanelElementsForGroup(groupId);
+    if (panelElements.length !== panelDataArray.length) {
+      return;
+    }
 
+    // If this panel has been configured to persist sizing information,
+    // default size should be restored from local storage if possible.
+    let unsafeLayout = null;
+    if (autoSaveId) {
+      unsafeLayout = loadPanelLayout(autoSaveId, panelDataArray, storage);
+    }
+    if (unsafeLayout == null) {
+      unsafeLayout = calculateUnsafeDefaultLayout({
+        panelDataArray
+      });
+    }
 
-const $cec4cafe75f3db78$var$LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
-const $cec4cafe75f3db78$var$defaultStorage = {
-    getItem: (name)=>{
-        (0, $75a06c6e1ca05a58$export$cb0adc12c8406347)($cec4cafe75f3db78$var$defaultStorage);
-        return $cec4cafe75f3db78$var$defaultStorage.getItem(name);
-    },
-    setItem: (name, value)=>{
-        (0, $75a06c6e1ca05a58$export$cb0adc12c8406347)($cec4cafe75f3db78$var$defaultStorage);
-        $cec4cafe75f3db78$var$defaultStorage.setItem(name, value);
+    // Validate even saved layouts in case something has changed since last render
+    // e.g. for pixel groups, this could be the size of the window
+    const nextLayout = validatePanelGroupLayout({
+      layout: unsafeLayout,
+      panelConstraints: panelDataArray.map(panelData => panelData.constraints)
+    });
+
+    // Offscreen mode makes this a bit weird;
+    // Panels unregister when hidden and re-register when shown again,
+    // but the overall layout doesn't change between these two cases.
+    setLayout(nextLayout);
+    eagerValuesRef.current.layout = nextLayout;
+    if (!areEqual(prevLayout, nextLayout)) {
+      if (onLayout) {
+        onLayout(nextLayout);
+      }
+      callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
     }
-};
-const $cec4cafe75f3db78$var$debounceMap = {};
-function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSaveId = null, children: children, className: classNameFromProps = "", direction: direction, forwardedRef: forwardedRef, id: idFromProps = null, onLayout: onLayout = null, keyboardResizeBy: keyboardResizeBy = null, storage: storage = $cec4cafe75f3db78$var$defaultStorage, style: styleFromProps, tagName: Type = "div", ...rest }) {
-    const groupId = (0, $b1693d8d8f570e9c$export$2e2bcd8739ae039)(idFromProps);
-    const [dragState, setDragState] = (0, $6e687094f9ca8395$export$60241385465d0a34)(null);
-    const [layout, setLayout] = (0, $6e687094f9ca8395$export$60241385465d0a34)([]);
-    const panelIdToLastNotifiedSizeMapRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({});
-    const panelSizeBeforeCollapseRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)(new Map());
-    const prevDeltaRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)(0);
-    const committedValuesRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
-        autoSaveId: autoSaveId,
-        direction: direction,
-        dragState: dragState,
+  }, []);
+  const registerResizeHandle = useCallback(dragHandleId => {
+    return function resizeHandler(event) {
+      event.preventDefault();
+      const {
+        direction,
+        dragState,
         id: groupId,
-        keyboardResizeBy: keyboardResizeBy,
-        onLayout: onLayout,
-        storage: storage
-    });
-    const eagerValuesRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
-        layout: layout,
-        panelDataArray: []
-    });
-    const devWarningsRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
-        didLogIdAndOrderWarning: false,
-        didLogPanelConstraintsWarning: false,
-        prevPanelIds: []
-    });
-    (0, $6e687094f9ca8395$export$d5a552a76deda3c2)(forwardedRef, ()=>({
-            getId: ()=>committedValuesRef.current.id,
-            getLayout: ()=>{
-                const { layout: layout } = eagerValuesRef.current;
-                return layout;
-            },
-            setLayout: (unsafeLayout)=>{
-                const { onLayout: onLayout } = committedValuesRef.current;
-                const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
-                const safeLayout = (0, $aa44a0a11da9fc89$export$64432a52a1035c18)({
-                    layout: unsafeLayout,
-                    panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
-                });
-                if (!(0, $d31ef7445a11a6c5$export$b141efd0b0fb9174)(prevLayout, safeLayout)) {
-                    setLayout(safeLayout);
-                    eagerValuesRef.current.layout = safeLayout;
-                    if (onLayout) onLayout(safeLayout);
-                    (0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, safeLayout, panelIdToLastNotifiedSizeMapRef.current);
-                }
-            }
-        }), []);
-    (0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
-        committedValuesRef.current.autoSaveId = autoSaveId;
-        committedValuesRef.current.direction = direction;
-        committedValuesRef.current.dragState = dragState;
-        committedValuesRef.current.id = groupId;
-        committedValuesRef.current.onLayout = onLayout;
-        committedValuesRef.current.storage = storage;
-    });
-    (0, $c682b4ad8fc26d8e$export$d9fcbe062527d159)({
-        committedValuesRef: committedValuesRef,
-        eagerValuesRef: eagerValuesRef,
-        groupId: groupId,
-        layout: layout,
-        panelDataArray: eagerValuesRef.current.panelDataArray,
-        setLayout: setLayout
-    });
-    (0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
-        const { panelDataArray: panelDataArray } = eagerValuesRef.current;
-        // If this panel has been configured to persist sizing information, save sizes to local storage.
-        if (autoSaveId) {
-            if (layout.length === 0 || layout.length !== panelDataArray.length) return;
-            let debouncedSave = $cec4cafe75f3db78$var$debounceMap[autoSaveId];
-            // Limit the frequency of localStorage updates.
-            if (debouncedSave == null) {
-                debouncedSave = (0, $2e8572579e31d898$export$2e2bcd8739ae039)((0, $f9cb001fbb908626$export$af183b313c61be4f), $cec4cafe75f3db78$var$LOCAL_STORAGE_DEBOUNCE_INTERVAL);
-                $cec4cafe75f3db78$var$debounceMap[autoSaveId] = debouncedSave;
+        keyboardResizeBy,
+        onLayout
+      } = committedValuesRef.current;
+      const {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current;
+      const {
+        initialLayout
+      } = dragState !== null && dragState !== void 0 ? dragState : {};
+      const pivotIndices = determinePivotIndices(groupId, dragHandleId);
+      let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy);
+      if (delta === 0) {
+        return;
+      }
+
+      // Support RTL layouts
+      const isHorizontal = direction === "horizontal";
+      if (document.dir === "rtl" && isHorizontal) {
+        delta = -delta;
+      }
+      const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
+      const nextLayout = adjustLayoutByDelta({
+        delta,
+        layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
+        panelConstraints,
+        pivotIndices,
+        trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
+      });
+      const layoutChanged = !compareLayouts(prevLayout, nextLayout);
+
+      // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
+      // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
+      if (isMouseEvent(event) || isTouchEvent(event)) {
+        // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
+        // In this case, Panel sizes might not change–
+        // but updating cursor in this scenario would cause a flicker.
+        if (prevDeltaRef.current != delta) {
+          prevDeltaRef.current = delta;
+          if (!layoutChanged) {
+            // If the pointer has moved too far to resize the panel any further,
+            // update the cursor style for a visual clue.
+            // This mimics VS Code behavior.
+
+            if (isHorizontal) {
+              setGlobalCursorStyle(delta < 0 ? "horizontal-min" : "horizontal-max");
+            } else {
+              setGlobalCursorStyle(delta < 0 ? "vertical-min" : "vertical-max");
             }
-            debouncedSave(autoSaveId, panelDataArray, layout, storage);
+          } else {
+            // Reset the cursor style to the the normal resize cursor.
+            setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical");
+          }
         }
-    }, [
-        autoSaveId,
-        layout,
-        storage
-    ]);
-    // DEV warnings
-    (0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
-        if (0, $95f7f0116122f6f8$export$df77466336fe5355) {
-            const { panelDataArray: panelDataArray } = eagerValuesRef.current;
-            const { didLogIdAndOrderWarning: didLogIdAndOrderWarning, didLogPanelConstraintsWarning: didLogPanelConstraintsWarning, prevPanelIds: prevPanelIds } = devWarningsRef.current;
-            if (!didLogIdAndOrderWarning) {
-                const panelIds = panelDataArray.map(({ id: id })=>id);
-                devWarningsRef.current.prevPanelIds = panelIds;
-                const panelsHaveChanged = prevPanelIds.length > 0 && !(0, $d31ef7445a11a6c5$export$b141efd0b0fb9174)(prevPanelIds, panelIds);
-                if (panelsHaveChanged) {
-                    if (panelDataArray.find(({ idIsFromProps: idIsFromProps, order: order })=>!idIsFromProps || order == null)) {
-                        devWarningsRef.current.didLogIdAndOrderWarning = true;
-                        console.warn(`WARNING: Panel id and order props recommended when panels are dynamically rendered`);
-                    }
-                }
-            }
-            if (!didLogPanelConstraintsWarning) {
-                const panelConstraints = panelDataArray.map((panelData)=>panelData.constraints);
-                for(let panelIndex = 0; panelIndex < panelConstraints.length; panelIndex++){
-                    const panelData = panelDataArray[panelIndex];
-                    (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelData);
-                    const isValid = (0, $0531c662514b8c6a$export$d00cfefa2c395b39)({
-                        panelConstraints: panelConstraints,
-                        panelId: panelData.id,
-                        panelIndex: panelIndex
-                    });
-                    if (!isValid) {
-                        devWarningsRef.current.didLogPanelConstraintsWarning = true;
-                        break;
-                    }
-                }
-            }
+      }
+      if (layoutChanged) {
+        setLayout(nextLayout);
+        eagerValuesRef.current.layout = nextLayout;
+        if (onLayout) {
+          onLayout(nextLayout);
         }
+        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+      }
+    };
+  }, []);
+
+  // External APIs are safe to memoize via committed values ref
+  const resizePanel = useCallback((panelData, unsafePanelSize) => {
+    const {
+      onLayout
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
+    const {
+      panelSize,
+      pivotIndices
+    } = panelDataHelper(panelDataArray, panelData, prevLayout);
+    assert(panelSize != null);
+    const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+    const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
+    const nextLayout = adjustLayoutByDelta({
+      delta,
+      layout: prevLayout,
+      panelConstraints: panelConstraintsArray,
+      pivotIndices,
+      trigger: "imperative-api"
     });
-    // External APIs are safe to memoize via committed values ref
-    const collapsePanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
-        const { onLayout: onLayout } = committedValuesRef.current;
-        const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
-        if (panelData.constraints.collapsible) {
-            const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
-            const { collapsedSize: collapsedSize = 0, panelSize: panelSize, pivotIndices: pivotIndices } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, prevLayout);
-            (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelSize != null);
-            if (panelSize !== collapsedSize) {
-                // Store size before collapse;
-                // This is the size that gets restored if the expand() API is used.
-                panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
-                const isLastPanel = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
-                const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
-                const nextLayout = (0, $0c110d593c066642$export$7fead5cc734d205b)({
-                    delta: delta,
-                    layout: prevLayout,
-                    panelConstraints: panelConstraintsArray,
-                    pivotIndices: pivotIndices,
-                    trigger: "imperative-api"
-                });
-                if (!(0, $11f1460202e20b00$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
-                    setLayout(nextLayout);
-                    eagerValuesRef.current.layout = nextLayout;
-                    if (onLayout) onLayout(nextLayout);
-                    (0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-                }
-            }
-        }
-    }, []);
-    // External APIs are safe to memoize via committed values ref
-    const expandPanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
-        const { onLayout: onLayout } = committedValuesRef.current;
-        const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
-        if (panelData.constraints.collapsible) {
-            const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
-            const { collapsedSize: collapsedSize = 0, panelSize: panelSize, minSize: minSize = 0, pivotIndices: pivotIndices } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, prevLayout);
-            if (panelSize === collapsedSize) {
-                // Restore this panel to the size it was before it was collapsed, if possible.
-                const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
-                const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
-                const isLastPanel = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
-                const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
-                const nextLayout = (0, $0c110d593c066642$export$7fead5cc734d205b)({
-                    delta: delta,
-                    layout: prevLayout,
-                    panelConstraints: panelConstraintsArray,
-                    pivotIndices: pivotIndices,
-                    trigger: "imperative-api"
-                });
-                if (!(0, $11f1460202e20b00$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
-                    setLayout(nextLayout);
-                    eagerValuesRef.current.layout = nextLayout;
-                    if (onLayout) onLayout(nextLayout);
-                    (0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-                }
-            }
-        }
-    }, []);
-    // External APIs are safe to memoize via committed values ref
-    const getPanelSize = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
-        const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
-        const { panelSize: panelSize } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, layout);
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelSize != null);
-        return panelSize;
-    }, []);
-    // This API should never read from committedValuesRef
-    const getPanelStyle = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
-        const { panelDataArray: panelDataArray } = eagerValuesRef.current;
-        const panelIndex = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData);
-        return (0, $dd3efaf0847631d3$export$fc25f3248e61edf5)({
-            dragState: dragState,
-            layout: layout,
-            panelData: panelDataArray,
-            panelIndex: panelIndex
-        });
-    }, [
-        dragState,
-        layout
-    ]);
-    // External APIs are safe to memoize via committed values ref
-    const isPanelCollapsed = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
-        const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
-        const { collapsedSize: collapsedSize, collapsible: collapsible, panelSize: panelSize } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, layout);
-        return collapsible === true && panelSize === collapsedSize;
-    }, []);
-    // External APIs are safe to memoize via committed values ref
-    const isPanelExpanded = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
-        const { layout: layout, panelDataArray: panelDataArray } = eagerValuesRef.current;
-        const { collapsedSize: collapsedSize = 0, collapsible: collapsible, panelSize: panelSize } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, layout);
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelSize != null);
-        return !collapsible || panelSize > collapsedSize;
-    }, []);
-    const registerPanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
-        const { autoSaveId: autoSaveId, id: groupId, onLayout: onLayout, storage: storage } = committedValuesRef.current;
-        const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
-        // HACK
-        // This appears to be triggered by some React Suspense+Offscreen+StrictMode bug;
-        // see app.replay.io/recording/17b6e11d-4500-4173-b23d-61dfd141fed1
-        const index = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData);
-        if (index >= 0) {
-            if (panelData.idIsFromProps) console.warn(`Panel with id "${panelData.id}" registered twice`);
-            else console.warn(`Panel registered twice`);
-            return;
+    if (!compareLayouts(prevLayout, nextLayout)) {
+      setLayout(nextLayout);
+      eagerValuesRef.current.layout = nextLayout;
+      if (onLayout) {
+        onLayout(nextLayout);
+      }
+      callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+    }
+  }, []);
+  const startDragging = useCallback((dragHandleId, event) => {
+    const {
+      direction
+    } = committedValuesRef.current;
+    const {
+      layout
+    } = eagerValuesRef.current;
+    const handleElement = getResizeHandleElement(dragHandleId);
+    assert(handleElement);
+    const initialCursorPosition = getResizeEventCursorPosition(direction, event);
+    setDragState({
+      dragHandleId,
+      dragHandleRect: handleElement.getBoundingClientRect(),
+      initialCursorPosition,
+      initialLayout: layout
+    });
+  }, []);
+  const stopDragging = useCallback(() => {
+    resetGlobalCursorStyle();
+    setDragState(null);
+  }, []);
+  const unregisterPanelRef = useRef({
+    pendingPanelIds: new Set(),
+    timeout: null
+  });
+  const unregisterPanel = useCallback(panelData => {
+    const {
+      onLayout
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const index = findPanelDataIndex(panelDataArray, panelData);
+    if (index >= 0) {
+      panelDataArray.splice(index, 1);
+      unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
+    }
+    if (unregisterPanelRef.current.timeout != null) {
+      clearTimeout(unregisterPanelRef.current.timeout);
+    }
+
+    // Batch panel unmounts so that we only calculate layout once;
+    // This is more efficient and avoids misleading warnings in development mode.
+    // We can't check the DOM to detect this because Panel elements have not yet been removed.
+    unregisterPanelRef.current.timeout = setTimeout(() => {
+      const {
+        pendingPanelIds
+      } = unregisterPanelRef.current;
+      const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
+
+      // TRICKY
+      // Strict effects mode
+      let unmountDueToStrictMode = false;
+      pendingPanelIds.forEach(panelId => {
+        pendingPanelIds.delete(panelId);
+        if (panelDataArray.find(({
+          id
+        }) => id === panelId) != null) {
+          unmountDueToStrictMode = true;
+        } else {
+          // TRICKY
+          // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
+          // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
+          // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
+          delete panelIdToLastNotifiedSizeMap[panelId];
         }
-        panelDataArray.push(panelData);
-        panelDataArray.sort((panelA, panelB)=>{
-            const orderA = panelA.order;
-            const orderB = panelB.order;
-            if (orderA == null && orderB == null) return 0;
-            else if (orderA == null) return -1;
-            else if (orderB == null) return 1;
-            else return orderA - orderB;
-        });
-        // Wait until all panels have registered before we try to compute layout;
-        // doing it earlier is both wasteful and may trigger misleading warnings in development mode.
-        const panelElements = (0, $3ffc7498c21f3969$export$80bbb698e7429afe)(groupId);
-        if (panelElements.length !== panelDataArray.length) return;
-        // If this panel has been configured to persist sizing information,
-        // default size should be restored from local storage if possible.
-        let unsafeLayout = null;
-        if (autoSaveId) unsafeLayout = (0, $f9cb001fbb908626$export$9c80c6617f0386da)(autoSaveId, panelDataArray, storage);
-        if (unsafeLayout == null) unsafeLayout = (0, $17c359958d4c9de7$export$47337a21c443778e)({
-            panelDataArray: panelDataArray
-        });
-        // Validate even saved layouts in case something has changed since last render
-        // e.g. for pixel groups, this could be the size of the window
-        const nextLayout = (0, $aa44a0a11da9fc89$export$64432a52a1035c18)({
-            layout: unsafeLayout,
-            panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
-        });
-        // Offscreen mode makes this a bit weird;
-        // Panels unregister when hidden and re-register when shown again,
-        // but the overall layout doesn't change between these two cases.
+      });
+      if (unmountDueToStrictMode) {
+        return;
+      }
+      if (panelDataArray.length === 0) {
+        // The group is unmounting; skip layout calculation.
+        return;
+      }
+      let unsafeLayout = calculateUnsafeDefaultLayout({
+        panelDataArray
+      });
+
+      // Validate even saved layouts in case something has changed since last render
+      // e.g. for pixel groups, this could be the size of the window
+      const nextLayout = validatePanelGroupLayout({
+        layout: unsafeLayout,
+        panelConstraints: panelDataArray.map(panelData => panelData.constraints)
+      });
+      if (!areEqual(prevLayout, nextLayout)) {
         setLayout(nextLayout);
         eagerValuesRef.current.layout = nextLayout;
-        if (!(0, $d31ef7445a11a6c5$export$b141efd0b0fb9174)(prevLayout, nextLayout)) {
-            if (onLayout) onLayout(nextLayout);
-            (0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+        if (onLayout) {
+          onLayout(nextLayout);
         }
-    }, []);
-    const registerResizeHandle = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((dragHandleId)=>{
-        return function resizeHandler(event) {
-            event.preventDefault();
-            const { direction: direction, dragState: dragState, id: groupId, keyboardResizeBy: keyboardResizeBy, onLayout: onLayout } = committedValuesRef.current;
-            const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
-            const { initialLayout: initialLayout } = dragState !== null && dragState !== void 0 ? dragState : {};
-            const pivotIndices = (0, $28ee5ac1ce973de1$export$cf92598869f99b8f)(groupId, dragHandleId);
-            let delta = (0, $6c41c8262084553c$export$b08134b65f9db46a)(event, dragHandleId, direction, dragState, keyboardResizeBy);
-            if (delta === 0) return;
-            // Support RTL layouts
-            const isHorizontal = direction === "horizontal";
-            if (document.dir === "rtl" && isHorizontal) delta = -delta;
-            const panelConstraints = panelDataArray.map((panelData)=>panelData.constraints);
-            const nextLayout = (0, $0c110d593c066642$export$7fead5cc734d205b)({
-                delta: delta,
-                layout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
-                panelConstraints: panelConstraints,
-                pivotIndices: pivotIndices,
-                trigger: (0, $601a2b3c71af04bb$export$e7bf60a870f429b0)(event) ? "keyboard" : "mouse-or-touch"
-            });
-            const layoutChanged = !(0, $11f1460202e20b00$export$a10903e2e57656c1)(prevLayout, nextLayout);
-            // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
-            // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
-            if ((0, $601a2b3c71af04bb$export$764db16956f554f8)(event) || (0, $601a2b3c71af04bb$export$c4dfce035d43d1e0)(event)) // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
-            // In this case, Panel sizes might not change–
-            // but updating cursor in this scenario would cause a flicker.
-            {
-                if (prevDeltaRef.current != delta) {
-                    prevDeltaRef.current = delta;
-                    if (!layoutChanged) {
-                        // If the pointer has moved too far to resize the panel any further,
-                        // update the cursor style for a visual clue.
-                        // This mimics VS Code behavior.
-                        if (isHorizontal) (0, $08745f7373322b05$export$d395b5dfd066a659)(delta < 0 ? "horizontal-min" : "horizontal-max");
-                        else (0, $08745f7373322b05$export$d395b5dfd066a659)(delta < 0 ? "vertical-min" : "vertical-max");
-                    } else // Reset the cursor style to the the normal resize cursor.
-                    (0, $08745f7373322b05$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
-                }
-            }
-            if (layoutChanged) {
-                setLayout(nextLayout);
-                eagerValuesRef.current.layout = nextLayout;
-                if (onLayout) onLayout(nextLayout);
-                (0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-            }
-        };
-    }, []);
-    // External APIs are safe to memoize via committed values ref
-    const resizePanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData, unsafePanelSize)=>{
-        const { onLayout: onLayout } = committedValuesRef.current;
-        const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
-        const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
-        const { panelSize: panelSize, pivotIndices: pivotIndices } = $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, prevLayout);
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(panelSize != null);
-        const isLastPanel = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
-        const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
-        const nextLayout = (0, $0c110d593c066642$export$7fead5cc734d205b)({
-            delta: delta,
-            layout: prevLayout,
-            panelConstraints: panelConstraintsArray,
-            pivotIndices: pivotIndices,
-            trigger: "imperative-api"
-        });
-        if (!(0, $11f1460202e20b00$export$a10903e2e57656c1)(prevLayout, nextLayout)) {
-            setLayout(nextLayout);
-            eagerValuesRef.current.layout = nextLayout;
-            if (onLayout) onLayout(nextLayout);
-            (0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-        }
-    }, []);
-    const startDragging = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((dragHandleId, event)=>{
-        const { direction: direction } = committedValuesRef.current;
-        const { layout: layout } = eagerValuesRef.current;
-        const handleElement = (0, $58762ed3a79a85a2$export$4c5229c874a62620)(dragHandleId);
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(handleElement);
-        const initialCursorPosition = (0, $9b677018bf1ac728$export$ae0c59ca751ba81d)(direction, event);
-        setDragState({
-            dragHandleId: dragHandleId,
-            dragHandleRect: handleElement.getBoundingClientRect(),
-            initialCursorPosition: initialCursorPosition,
-            initialLayout: layout
-        });
-    }, []);
-    const stopDragging = (0, $6e687094f9ca8395$export$35808ee640e87ca7)(()=>{
-        (0, $08745f7373322b05$export$b61932ee18f96e08)();
-        setDragState(null);
-    }, []);
-    const unregisterPanelRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
-        pendingPanelIds: new Set(),
-        timeout: null
-    });
-    const unregisterPanel = (0, $6e687094f9ca8395$export$35808ee640e87ca7)((panelData)=>{
-        const { onLayout: onLayout } = committedValuesRef.current;
-        const { layout: prevLayout, panelDataArray: panelDataArray } = eagerValuesRef.current;
-        const index = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData);
-        if (index >= 0) {
-            panelDataArray.splice(index, 1);
-            unregisterPanelRef.current.pendingPanelIds.add(panelData.id);
-        }
-        if (unregisterPanelRef.current.timeout != null) clearTimeout(unregisterPanelRef.current.timeout);
-        // Batch panel unmounts so that we only calculate layout once;
-        // This is more efficient and avoids misleading warnings in development mode.
-        // We can't check the DOM to detect this because Panel elements have not yet been removed.
-        unregisterPanelRef.current.timeout = setTimeout(()=>{
-            const { pendingPanelIds: pendingPanelIds } = unregisterPanelRef.current;
-            const panelIdToLastNotifiedSizeMap = panelIdToLastNotifiedSizeMapRef.current;
-            // TRICKY
-            // Strict effects mode
-            let unmountDueToStrictMode = false;
-            pendingPanelIds.forEach((panelId)=>{
-                pendingPanelIds.delete(panelId);
-                if (panelDataArray.find(({ id: id })=>id === panelId) != null) unmountDueToStrictMode = true;
-                else // TRICKY
-                // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
-                // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
-                // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
-                delete panelIdToLastNotifiedSizeMap[panelId];
-            });
-            if (unmountDueToStrictMode) return;
-            if (panelDataArray.length === 0) // The group is unmounting; skip layout calculation.
-            return;
-            let unsafeLayout = (0, $17c359958d4c9de7$export$47337a21c443778e)({
-                panelDataArray: panelDataArray
-            });
-            // Validate even saved layouts in case something has changed since last render
-            // e.g. for pixel groups, this could be the size of the window
-            const nextLayout = (0, $aa44a0a11da9fc89$export$64432a52a1035c18)({
-                layout: unsafeLayout,
-                panelConstraints: panelDataArray.map((panelData)=>panelData.constraints)
-            });
-            if (!(0, $d31ef7445a11a6c5$export$b141efd0b0fb9174)(prevLayout, nextLayout)) {
-                setLayout(nextLayout);
-                eagerValuesRef.current.layout = nextLayout;
-                if (onLayout) onLayout(nextLayout);
-                (0, $3c80a05711c0e5f5$export$b8e48269e4faa934)(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-            }
-        }, 0);
-    }, []);
-    const context = (0, $6e687094f9ca8395$export$1538c33de8887b59)(()=>({
-            collapsePanel: collapsePanel,
-            direction: direction,
-            dragState: dragState,
-            expandPanel: expandPanel,
-            getPanelSize: getPanelSize,
-            getPanelStyle: getPanelStyle,
-            groupId: groupId,
-            isPanelCollapsed: isPanelCollapsed,
-            isPanelExpanded: isPanelExpanded,
-            registerPanel: registerPanel,
-            registerResizeHandle: registerResizeHandle,
-            resizePanel: resizePanel,
-            startDragging: startDragging,
-            stopDragging: stopDragging,
-            unregisterPanel: unregisterPanel
-        }), [
-        collapsePanel,
-        dragState,
-        direction,
-        expandPanel,
-        getPanelSize,
-        getPanelStyle,
-        groupId,
-        isPanelCollapsed,
-        isPanelExpanded,
-        registerPanel,
-        registerResizeHandle,
-        resizePanel,
-        startDragging,
-        stopDragging,
-        unregisterPanel
-    ]);
-    const style = {
-        display: "flex",
-        flexDirection: direction === "horizontal" ? "row" : "column",
-        height: "100%",
-        overflow: "hidden",
-        width: "100%"
-    };
-    return (0, $6e687094f9ca8395$export$c8a8987d4410bf2d)((0, $a15c28001c46e071$export$7d8c6d083caec74a).Provider, {
-        value: context
-    }, (0, $6e687094f9ca8395$export$c8a8987d4410bf2d)(Type, {
-        ...rest,
-        children: children,
-        className: classNameFromProps,
-        style: {
-            ...style,
-            ...styleFromProps
-        },
-        // CSS selectors
-        "data-panel-group": "",
-        "data-panel-group-direction": direction,
-        "data-panel-group-id": groupId
-    }));
+        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+      }
+    }, 0);
+  }, []);
+  const context = useMemo(() => ({
+    collapsePanel,
+    direction,
+    dragState,
+    expandPanel,
+    getPanelSize,
+    getPanelStyle,
+    groupId,
+    isPanelCollapsed,
+    isPanelExpanded,
+    registerPanel,
+    registerResizeHandle,
+    resizePanel,
+    startDragging,
+    stopDragging,
+    unregisterPanel
+  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, registerPanel, registerResizeHandle, resizePanel, startDragging, stopDragging, unregisterPanel]);
+  const style = {
+    display: "flex",
+    flexDirection: direction === "horizontal" ? "row" : "column",
+    height: "100%",
+    overflow: "hidden",
+    width: "100%"
+  };
+  return createElement(PanelGroupContext.Provider, {
+    value: context
+  }, createElement(Type, {
+    ...rest,
+    children,
+    className: classNameFromProps,
+    style: {
+      ...style,
+      ...styleFromProps
+    },
+    // CSS selectors
+    "data-panel-group": "",
+    "data-panel-group-direction": direction,
+    "data-panel-group-id": groupId
+  }));
 }
-const $cec4cafe75f3db78$export$1d05749f6f573bb = (0, $6e687094f9ca8395$export$257a8862b851cb5b)((props, ref)=>(0, $6e687094f9ca8395$export$c8a8987d4410bf2d)($cec4cafe75f3db78$var$PanelGroupWithForwardedRef, {
-        ...props,
-        forwardedRef: ref
-    }));
-$cec4cafe75f3db78$var$PanelGroupWithForwardedRef.displayName = "PanelGroup";
-$cec4cafe75f3db78$export$1d05749f6f573bb.displayName = "forwardRef(PanelGroup)";
-function $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData) {
-    return panelDataArray.findIndex((prevPanelData)=>prevPanelData === panelData || prevPanelData.id === panelData.id);
+const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
+  ...props,
+  forwardedRef: ref
+}));
+PanelGroupWithForwardedRef.displayName = "PanelGroup";
+PanelGroup.displayName = "forwardRef(PanelGroup)";
+function findPanelDataIndex(panelDataArray, panelData) {
+  return panelDataArray.findIndex(prevPanelData => prevPanelData === panelData || prevPanelData.id === panelData.id);
 }
-function $cec4cafe75f3db78$var$panelDataHelper(panelDataArray, panelData, layout) {
-    const panelConstraintsArray = panelDataArray.map((panelData)=>panelData.constraints);
-    const panelIndex = $cec4cafe75f3db78$var$findPanelDataIndex(panelDataArray, panelData);
-    const panelConstraints = panelConstraintsArray[panelIndex];
-    const isLastPanel = panelIndex === panelDataArray.length - 1;
-    const pivotIndices = isLastPanel ? [
-        panelIndex - 1,
-        panelIndex
-    ] : [
-        panelIndex,
-        panelIndex + 1
-    ];
-    const panelSize = layout[panelIndex];
-    return {
-        ...panelConstraints,
-        panelSize: panelSize,
-        pivotIndices: pivotIndices
-    };
+function panelDataHelper(panelDataArray, panelData, layout) {
+  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
+  const panelIndex = findPanelDataIndex(panelDataArray, panelData);
+  const panelConstraints = panelConstraintsArray[panelIndex];
+  const isLastPanel = panelIndex === panelDataArray.length - 1;
+  const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
+  const panelSize = layout[panelIndex];
+  return {
+    ...panelConstraints,
+    panelSize,
+    pivotIndices
+  };
 }
 
+// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
 
-
-
-
-
-
-
-
-function $a695670cc57a5969$export$33b0bea6ac3ffb03({ disabled: disabled, handleId: handleId, resizeHandler: resizeHandler }) {
-    (0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
-        if (disabled || resizeHandler == null) return;
-        const handleElement = (0, $58762ed3a79a85a2$export$4c5229c874a62620)(handleId);
-        if (handleElement == null) return;
-        const onKeyDown = (event)=>{
-            if (event.defaultPrevented) return;
-            switch(event.key){
-                case "ArrowDown":
-                case "ArrowLeft":
-                case "ArrowRight":
-                case "ArrowUp":
-                case "End":
-                case "Home":
-                    event.preventDefault();
-                    resizeHandler(event);
-                    break;
-                case "F6":
-                    {
-                        event.preventDefault();
-                        const groupId = handleElement.getAttribute("data-panel-group-id");
-                        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(groupId);
-                        const handles = (0, $ef847a5e9ce851d7$export$63eb605e437b214f)(groupId);
-                        const index = (0, $645e6f06f14b1fbf$export$4c92fedbbc2381ca)(groupId, handleId);
-                        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(index !== null);
-                        const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
-                        const nextHandle = handles[nextIndex];
-                        nextHandle.focus();
-                        break;
-                    }
-            }
-        };
-        handleElement.addEventListener("keydown", onKeyDown);
-        return ()=>{
-            handleElement.removeEventListener("keydown", onKeyDown);
-        };
-    }, [
-        disabled,
-        handleId,
-        resizeHandler
-    ]);
-}
-
-
-
-
-
-function $3a26a712c9163348$export$8829ecf6b6b15484({ children: children = null, className: classNameFromProps = "", disabled: disabled = false, id: idFromProps, onDragging: onDragging, style: styleFromProps = {}, tabIndex: tabIndex = 0, tagName: Type = "div", ...rest }) {
-    const divElementRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)(null);
-    // Use a ref to guard against users passing inline props
-    const callbacksRef = (0, $6e687094f9ca8395$export$b8f5890fc79d6aca)({
-        onDragging: onDragging
-    });
-    (0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
-        callbacksRef.current.onDragging = onDragging;
-    });
-    const panelGroupContext = (0, $6e687094f9ca8395$export$fae74005e78b1a27)((0, $a15c28001c46e071$export$7d8c6d083caec74a));
-    if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
-    const { direction: direction, dragState: dragState, groupId: groupId, registerResizeHandle: registerResizeHandle, startDragging: startDragging, stopDragging: stopDragging } = panelGroupContext;
-    const resizeHandleId = (0, $b1693d8d8f570e9c$export$2e2bcd8739ae039)(idFromProps);
-    const isDragging = (dragState === null || dragState === void 0 ? void 0 : dragState.dragHandleId) === resizeHandleId;
-    const [isFocused, setIsFocused] = (0, $6e687094f9ca8395$export$60241385465d0a34)(false);
-    const [resizeHandler, setResizeHandler] = (0, $6e687094f9ca8395$export$60241385465d0a34)(null);
-    const stopDraggingAndBlur = (0, $6e687094f9ca8395$export$35808ee640e87ca7)(()=>{
-        // Clicking on the drag handle shouldn't leave it focused;
-        // That would cause the PanelGroup to think it was still active.
-        const divElement = divElementRef.current;
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(divElement);
-        divElement.blur();
-        stopDragging();
-        const { onDragging: onDragging } = callbacksRef.current;
-        if (onDragging) onDragging(false);
-    }, [
-        stopDragging
-    ]);
-    (0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
-        if (disabled) setResizeHandler(null);
-        else {
-            const resizeHandler = registerResizeHandle(resizeHandleId);
-            setResizeHandler(()=>resizeHandler);
-        }
-    }, [
-        disabled,
-        resizeHandleId,
-        registerResizeHandle
-    ]);
-    (0, $6e687094f9ca8395$export$6d9c69b0de29b591)(()=>{
-        if (disabled || resizeHandler == null || !isDragging) return;
-        const onMove = (event)=>{
-            resizeHandler(event);
-        };
-        const onMouseLeave = (event)=>{
+function useWindowSplitterResizeHandlerBehavior({
+  disabled,
+  handleId,
+  resizeHandler
+}) {
+  useEffect(() => {
+    if (disabled || resizeHandler == null) {
+      return;
+    }
+    const handleElement = getResizeHandleElement(handleId);
+    if (handleElement == null) {
+      return;
+    }
+    const onKeyDown = event => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "ArrowUp":
+        case "End":
+        case "Home":
+          {
+            event.preventDefault();
             resizeHandler(event);
-        };
-        const divElement = divElementRef.current;
-        (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(divElement);
-        const targetDocument = divElement.ownerDocument;
-        targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
-        targetDocument.body.addEventListener("mousemove", onMove);
-        targetDocument.body.addEventListener("touchmove", onMove);
-        targetDocument.body.addEventListener("mouseleave", onMouseLeave);
-        window.addEventListener("mouseup", stopDraggingAndBlur);
-        window.addEventListener("touchend", stopDraggingAndBlur);
-        return ()=>{
-            targetDocument.body.removeEventListener("contextmenu", stopDraggingAndBlur);
-            targetDocument.body.removeEventListener("mousemove", onMove);
-            targetDocument.body.removeEventListener("touchmove", onMove);
-            targetDocument.body.removeEventListener("mouseleave", onMouseLeave);
-            window.removeEventListener("mouseup", stopDraggingAndBlur);
-            window.removeEventListener("touchend", stopDraggingAndBlur);
-        };
-    }, [
-        direction,
-        disabled,
-        isDragging,
-        resizeHandler,
-        stopDraggingAndBlur
-    ]);
-    (0, $a695670cc57a5969$export$33b0bea6ac3ffb03)({
-        disabled: disabled,
-        handleId: resizeHandleId,
-        resizeHandler: resizeHandler
-    });
-    const style = {
-        cursor: (0, $08745f7373322b05$export$fa35f3322c52262f)(direction),
-        touchAction: "none",
-        userSelect: "none"
+            break;
+          }
+        case "F6":
+          {
+            event.preventDefault();
+            const groupId = handleElement.getAttribute("data-panel-group-id");
+            assert(groupId);
+            const handles = getResizeHandleElementsForGroup(groupId);
+            const index = getResizeHandleElementIndex(groupId, handleId);
+            assert(index !== null);
+            const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
+            const nextHandle = handles[nextIndex];
+            nextHandle.focus();
+            break;
+          }
+      }
     };
-    return (0, $6e687094f9ca8395$export$c8a8987d4410bf2d)(Type, {
-        ...rest,
-        children: children,
-        className: classNameFromProps,
-        onBlur: ()=>setIsFocused(false),
-        onFocus: ()=>setIsFocused(true),
-        onMouseDown: (event)=>{
-            startDragging(resizeHandleId, event.nativeEvent);
-            const callbacks = callbacksRef.current;
-            (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(callbacks);
-            const { onDragging: onDragging } = callbacks;
-            if (onDragging) onDragging(true);
-        },
-        onMouseUp: stopDraggingAndBlur,
-        onTouchCancel: stopDraggingAndBlur,
-        onTouchEnd: stopDraggingAndBlur,
-        onTouchStart: (event)=>{
-            startDragging(resizeHandleId, event.nativeEvent);
-            const callbacks = callbacksRef.current;
-            (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(callbacks);
-            const { onDragging: onDragging } = callbacks;
-            if (onDragging) onDragging(true);
-        },
-        ref: divElementRef,
-        role: "separator",
-        style: {
-            ...style,
-            ...styleFromProps
-        },
-        tabIndex: tabIndex,
-        // CSS selectors
-        "data-panel-group-direction": direction,
-        "data-panel-group-id": groupId,
-        "data-resize-handle": "",
-        "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
-        "data-panel-resize-handle-enabled": !disabled,
-        "data-panel-resize-handle-id": resizeHandleId
-    });
+    handleElement.addEventListener("keydown", onKeyDown);
+    return () => {
+      handleElement.removeEventListener("keydown", onKeyDown);
+    };
+  }, [disabled, handleId, resizeHandler]);
 }
-$3a26a712c9163348$export$8829ecf6b6b15484.displayName = "PanelResizeHandle";
-
-
-
 
+function PanelResizeHandle({
+  children = null,
+  className: classNameFromProps = "",
+  disabled = false,
+  id: idFromProps,
+  onDragging,
+  style: styleFromProps = {},
+  tabIndex = 0,
+  tagName: Type = "div",
+  ...rest
+}) {
+  const divElementRef = useRef(null);
+
+  // Use a ref to guard against users passing inline props
+  const callbacksRef = useRef({
+    onDragging
+  });
+  useEffect(() => {
+    callbacksRef.current.onDragging = onDragging;
+  });
+  const panelGroupContext = useContext(PanelGroupContext);
+  if (panelGroupContext === null) {
+    throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+  }
+  const {
+    direction,
+    dragState,
+    groupId,
+    registerResizeHandle,
+    startDragging,
+    stopDragging
+  } = panelGroupContext;
+  const resizeHandleId = useUniqueId(idFromProps);
+  const isDragging = (dragState === null || dragState === void 0 ? void 0 : dragState.dragHandleId) === resizeHandleId;
+  const [isFocused, setIsFocused] = useState(false);
+  const [resizeHandler, setResizeHandler] = useState(null);
+  const stopDraggingAndBlur = useCallback(() => {
+    // Clicking on the drag handle shouldn't leave it focused;
+    // That would cause the PanelGroup to think it was still active.
+    const divElement = divElementRef.current;
+    assert(divElement);
+    divElement.blur();
+    stopDragging();
+    const {
+      onDragging
+    } = callbacksRef.current;
+    if (onDragging) {
+      onDragging(false);
+    }
+  }, [stopDragging]);
+  useEffect(() => {
+    if (disabled) {
+      setResizeHandler(null);
+    } else {
+      const resizeHandler = registerResizeHandle(resizeHandleId);
+      setResizeHandler(() => resizeHandler);
+    }
+  }, [disabled, resizeHandleId, registerResizeHandle]);
+  useEffect(() => {
+    if (disabled || resizeHandler == null || !isDragging) {
+      return;
+    }
+    const onMove = event => {
+      resizeHandler(event);
+    };
+    const onMouseLeave = event => {
+      resizeHandler(event);
+    };
+    const divElement = divElementRef.current;
+    assert(divElement);
+    const targetDocument = divElement.ownerDocument;
+    targetDocument.body.addEventListener("contextmenu", stopDraggingAndBlur);
+    targetDocument.body.addEventListener("mousemove", onMove);
+    targetDocument.body.addEventListener("touchmove", onMove);
+    targetDocument.body.addEventListener("mouseleave", onMouseLeave);
+    window.addEventListener("mouseup", stopDraggingAndBlur);
+    window.addEventListener("touchend", stopDraggingAndBlur);
+    return () => {
+      targetDocument.body.removeEventListener("contextmenu", stopDraggingAndBlur);
+      targetDocument.body.removeEventListener("mousemove", onMove);
+      targetDocument.body.removeEventListener("touchmove", onMove);
+      targetDocument.body.removeEventListener("mouseleave", onMouseLeave);
+      window.removeEventListener("mouseup", stopDraggingAndBlur);
+      window.removeEventListener("touchend", stopDraggingAndBlur);
+    };
+  }, [direction, disabled, isDragging, resizeHandler, stopDraggingAndBlur]);
+  useWindowSplitterResizeHandlerBehavior({
+    disabled,
+    handleId: resizeHandleId,
+    resizeHandler
+  });
+  const style = {
+    cursor: getCursorStyle(direction),
+    touchAction: "none",
+    userSelect: "none"
+  };
+  return createElement(Type, {
+    ...rest,
+    children,
+    className: classNameFromProps,
+    onBlur: () => setIsFocused(false),
+    onFocus: () => setIsFocused(true),
+    onMouseDown: event => {
+      startDragging(resizeHandleId, event.nativeEvent);
+      const callbacks = callbacksRef.current;
+      assert(callbacks);
+      const {
+        onDragging
+      } = callbacks;
+      if (onDragging) {
+        onDragging(true);
+      }
+    },
+    onMouseUp: stopDraggingAndBlur,
+    onTouchCancel: stopDraggingAndBlur,
+    onTouchEnd: stopDraggingAndBlur,
+    onTouchStart: event => {
+      startDragging(resizeHandleId, event.nativeEvent);
+      const callbacks = callbacksRef.current;
+      assert(callbacks);
+      const {
+        onDragging
+      } = callbacks;
+      if (onDragging) {
+        onDragging(true);
+      }
+    },
+    ref: divElementRef,
+    role: "separator",
+    style: {
+      ...style,
+      ...styleFromProps
+    },
+    tabIndex,
+    // CSS selectors
+    "data-panel-group-direction": direction,
+    "data-panel-group-id": groupId,
+    "data-resize-handle": "",
+    "data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
+    "data-panel-resize-handle-enabled": !disabled,
+    "data-panel-resize-handle-id": resizeHandleId
+  });
+}
+PanelResizeHandle.displayName = "PanelResizeHandle";
 
-//# sourceMappingURL=react-resizable-panels.cjs.js.map
+exports.Panel = Panel;
+exports.PanelGroup = PanelGroup;
+exports.PanelResizeHandle = PanelResizeHandle;
+exports.assert = assert;