react-resizable-panels 0.0.41 → 0.0.43

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.0.43
+* Add imperative `getLayout` API to `PanelGroup`
+* [#139](https://github.com/bvaughn/react-resizable-panels/pull/139): Fix edge case bug where simultaneous `localStorage` updates to multiple saved groups would drop some values
+
+## 0.0.42
+* Change cursor style from `col-resize`/`row-resize` to `ew-resize`/`ns-resize` to better match cursor style at edges of a panel.
+
 ## 0.0.41
 * Add imperative `setLayout` API for `PanelGroup`.
 

package/README.md

@@ -43,6 +43,11 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
  <sup>2</sup>: This behavior is disabled by default because it can interfere with scrollbar styles, but it can be useful in the edge case where a `Panel` contains an `<iframe>`
 
+`PanelGroup` components also expose an imperative API for manual resizing:
+| method                            | description
+| :-------------------------------- | :---
+| `setLayout(panelSizes: number[])` | Resize panel group to the specified _panelSizes_ (`[1 - 100, ...]`).
+
 ### `Panel`
 | prop          | type                            | description
 | :------------ | :------------------------------ | :---

package/dist/react-resizable-panels.d.ts

@@ -42,7 +42,8 @@ export type PanelGroupProps = {
     style?: CSSProperties;
     tagName?: ElementType;
 };
-type ImperativePanelGroupHandle = {
+export type ImperativePanelGroupHandle = {
+    getLayout: () => number[];
     setLayout: (panelSizes: number[]) => void;
 };
 export const PanelGroup: import("react").ForwardRefExoticComponent<PanelGroupProps & import("react").RefAttributes<ImperativePanelGroupHandle>>;

package/dist/react-resizable-panels.d.ts.map

@@ -1 +1 @@
-{"mappings":";AGEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,gCAAgC;IAC9B,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5C,CAAC;AAEF,0BAAiC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AAC3D,uBAA8B,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;AAC3D,qBAA4B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AACnD,mCAA0C,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AEMxE,yBAAyB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,oCAAoC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,IAAI,OAAO,CAAC;IACxB,OAAO,IAAI,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAyIF,OAAO,MAAM,mHAGZ,CAAC;AUxFF,8BAA8B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,kCAAyC;IACvC,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AA2jBF,OAAO,MAAM,kIAKZ,CAAC;AClpBF,qCAAqC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,UAAU,CAAC,EAAE,2BAA2B,CAAC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,kCAAkC,EAChC,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,QAAgB,EAChB,EAAE,EAAE,WAAkB,EACtB,UAAU,EACV,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,sBAAsB,0FAoJxB","sources":["packages/react-resizable-panels/src/src/vendor/react.ts","packages/react-resizable-panels/src/src/hooks/useIsomorphicEffect.ts","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/utils/assert.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/utils/cursor.ts","packages/react-resizable-panels/src/src/utils/debounce.ts","packages/react-resizable-panels/src/src/utils/arrays.ts","packages/react-resizable-panels/src/src/PanelGroup.ts","packages/react-resizable-panels/src/src/PanelResizeHandle.ts","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { ImperativePanelGroupHandle, PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\nimport type { PanelGroupStorage } from \"./types\";\n\nexport {\n  Panel,\n  PanelGroup,\n  PanelResizeHandle,\n\n  // TypeScript types\n  ImperativePanelHandle,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}
+{"mappings":";AGEA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AAElD,gCAAgC;IAC9B,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5C,CAAC;AAEF,0BAAiC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;AAC3D,uBAA8B,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;AAC3D,qBAA4B,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AACnD,mCAA0C,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AEMxE,yBAAyB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,oCAAoC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,IAAI,OAAO,CAAC;IACxB,OAAO,IAAI,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAyIF,OAAO,MAAM,mHAGZ,CAAC;AUlFF,8BAA8B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,gCAAgC,CAAC,EAAE,OAAO,CAAC;IAC3C,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,yCAAyC;IACvC,SAAS,EAAE,MAAM,MAAM,EAAE,CAAC;IAC1B,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAmkBF,OAAO,MAAM,kIAKZ,CAAC;ACjqBF,qCAAqC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,UAAU,CAAC,EAAE,2BAA2B,CAAC;IACzC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,kCAAkC,EAChC,QAAe,EACf,SAAS,EAAE,kBAAuB,EAClC,QAAgB,EAChB,EAAE,EAAE,WAAkB,EACtB,UAAU,EACV,KAAK,EAAE,cAAmB,EAC1B,OAAO,EAAE,IAAY,GACtB,EAAE,sBAAsB,0FAoJxB","sources":["packages/react-resizable-panels/src/src/vendor/react.ts","packages/react-resizable-panels/src/src/hooks/useIsomorphicEffect.ts","packages/react-resizable-panels/src/src/hooks/useUniqueId.ts","packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.ts","packages/react-resizable-panels/src/src/constants.ts","packages/react-resizable-panels/src/src/utils/group.ts","packages/react-resizable-panels/src/src/utils/assert.ts","packages/react-resizable-panels/src/src/hooks/useWindowSplitterBehavior.ts","packages/react-resizable-panels/src/src/utils/arrays.ts","packages/react-resizable-panels/src/src/utils/coordinates.ts","packages/react-resizable-panels/src/src/utils/cursor.ts","packages/react-resizable-panels/src/src/utils/debounce.ts","packages/react-resizable-panels/src/src/utils/serialization.ts","packages/react-resizable-panels/src/src/PanelGroup.ts","packages/react-resizable-panels/src/src/PanelResizeHandle.ts","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { ImperativePanelGroupHandle, PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\nimport type { PanelGroupStorage } from \"./types\";\n\nexport {\n  // TypeScript types\n  ImperativePanelGroupHandle,\n  ImperativePanelHandle,\n  Panel,\n  PanelGroup,\n  PanelGroupProps,\n  PanelGroupStorage,\n  PanelProps,\n  PanelResizeHandle,\n  PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}

package/dist/react-resizable-panels.js

@@ -148,45 +148,6 @@ function $45da0e827c614f1d$var$parseSizeFromStyle(style) {
 
 
 
-// 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 an attribute like minSize instead should work well enough.
-// Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
-function $f9cb001fbb908626$var$getSerializationKey(panels) {
-    return panels.map((panel)=>{
-        const { minSize: minSize , order: order  } = panel;
-        return order ? `${order}:${minSize}` : `${minSize}`;
-    }).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;
-    }
-    return null;
-}
-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);
-    }
-}
 
 
 const $9abd79656a89cd3a$export$d6d3992f3becc879 = 10;
@@ -366,84 +327,6 @@ function $cda3cc4b1114cf23$var$safeResizePanel(panel, delta, prevSize, event) {
 }
 
 
-function $47eee9224cfec8e8$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
-    const isHorizontal = direction === "horizontal";
-    let pointerOffset = 0;
-    if ($47eee9224cfec8e8$export$764db16956f554f8(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
-    else if ($47eee9224cfec8e8$export$c4dfce035d43d1e0(event)) {
-        const firstTouch = event.touches[0];
-        pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
-    } else return 0;
-    const handleElement = (0, $cda3cc4b1114cf23$export$2e27d3a347680388)(handleId);
-    const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
-    const elementOffset = isHorizontal ? rect.left : rect.top;
-    return pointerOffset - elementOffset - initialOffset;
-}
-function $47eee9224cfec8e8$export$354b17c0684607ed(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragState) {
-    const { dragOffset: dragOffset = 0 , dragHandleRect: dragHandleRect , sizes: initialSizes  } = initialDragState || {};
-    // If we're resizing by mouse or touch, use the initial sizes as a base.
-    // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
-    const baseSizes = initialSizes || prevSizes;
-    if ($47eee9224cfec8e8$export$e7bf60a870f429b0(event)) {
-        const isHorizontal = direction === "horizontal";
-        const groupElement = (0, $cda3cc4b1114cf23$export$5e67632cf3550a9c)(groupId);
-        const rect = groupElement.getBoundingClientRect();
-        const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
-        const denominator = event.shiftKey ? 10 : 100;
-        const delta = groupSizeInPixels / denominator;
-        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 = groupSizeInPixels;
-                break;
-            case "Home":
-                movement = -groupSizeInPixels;
-                break;
-        }
-        // If the Panel being resized is collapsible,
-        // we need to special case resizing around the minSize boundary.
-        // If contracting, Panels should shrink to their minSize and then snap to fully collapsed.
-        // If expanding from collapsed, they should snap back to their minSize.
-        const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
-        const targetPanelId = movement < 0 ? idBefore : idAfter;
-        const targetPanelIndex = panelsArray.findIndex((panel)=>panel.id === targetPanelId);
-        const targetPanel = panelsArray[targetPanelIndex];
-        if (targetPanel.collapsible) {
-            const baseSize = baseSizes[targetPanelIndex];
-            if (baseSize === 0 || baseSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
-        }
-        return movement;
-    } else return $47eee9224cfec8e8$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
-}
-function $47eee9224cfec8e8$export$e7bf60a870f429b0(event) {
-    return event.type === "keydown";
-}
-function $47eee9224cfec8e8$export$764db16956f554f8(event) {
-    return event.type.startsWith("mouse");
-}
-function $47eee9224cfec8e8$export$c4dfce035d43d1e0(event) {
-    return event.type.startsWith("touch");
-}
-
-
-
-
-
-
-
-
 function $3b727a2145ecd6f8$export$a7a9523472993e97(expectedCondition, message = "Assertion failed!") {
     if (!expectedCondition) {
         console.error(message);
@@ -570,18 +453,103 @@ function $a695670cc57a5969$export$33b0bea6ac3ffb03({ disabled: disabled , handle
 }
 
 
+
+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;
+    }
+    return true;
+}
+
+
+
+
+
+function $47eee9224cfec8e8$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
+    const isHorizontal = direction === "horizontal";
+    let pointerOffset = 0;
+    if ($47eee9224cfec8e8$export$764db16956f554f8(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
+    else if ($47eee9224cfec8e8$export$c4dfce035d43d1e0(event)) {
+        const firstTouch = event.touches[0];
+        pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
+    } else return 0;
+    const handleElement = (0, $cda3cc4b1114cf23$export$2e27d3a347680388)(handleId);
+    const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
+    const elementOffset = isHorizontal ? rect.left : rect.top;
+    return pointerOffset - elementOffset - initialOffset;
+}
+function $47eee9224cfec8e8$export$354b17c0684607ed(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragState) {
+    const { dragOffset: dragOffset = 0 , dragHandleRect: dragHandleRect , sizes: initialSizes  } = initialDragState || {};
+    // If we're resizing by mouse or touch, use the initial sizes as a base.
+    // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
+    const baseSizes = initialSizes || prevSizes;
+    if ($47eee9224cfec8e8$export$e7bf60a870f429b0(event)) {
+        const isHorizontal = direction === "horizontal";
+        const groupElement = (0, $cda3cc4b1114cf23$export$5e67632cf3550a9c)(groupId);
+        const rect = groupElement.getBoundingClientRect();
+        const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
+        const denominator = event.shiftKey ? 10 : 100;
+        const delta = groupSizeInPixels / denominator;
+        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 = groupSizeInPixels;
+                break;
+            case "Home":
+                movement = -groupSizeInPixels;
+                break;
+        }
+        // If the Panel being resized is collapsible,
+        // we need to special case resizing around the minSize boundary.
+        // If contracting, Panels should shrink to their minSize and then snap to fully collapsed.
+        // If expanding from collapsed, they should snap back to their minSize.
+        const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
+        const targetPanelId = movement < 0 ? idBefore : idAfter;
+        const targetPanelIndex = panelsArray.findIndex((panel)=>panel.id === targetPanelId);
+        const targetPanel = panelsArray[targetPanelIndex];
+        if (targetPanel.collapsible) {
+            const baseSize = baseSizes[targetPanelIndex];
+            if (baseSize === 0 || baseSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
+        }
+        return movement;
+    } else return $47eee9224cfec8e8$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
+}
+function $47eee9224cfec8e8$export$e7bf60a870f429b0(event) {
+    return event.type === "keydown";
+}
+function $47eee9224cfec8e8$export$764db16956f554f8(event) {
+    return event.type.startsWith("mouse");
+}
+function $47eee9224cfec8e8$export$c4dfce035d43d1e0(event) {
+    return event.type.startsWith("touch");
+}
+
+
 let $08745f7373322b05$var$currentState = null;
 let $08745f7373322b05$var$element = null;
 function $08745f7373322b05$export$fa35f3322c52262f(state) {
     switch(state){
         case "horizontal":
-            return "col-resize";
+            return "ew-resize";
         case "horizontal-max":
             return "w-resize";
         case "horizontal-min":
             return "e-resize";
         case "vertical":
-            return "row-resize";
+            return "ns-resize";
         case "vertical-max":
             return "n-resize";
         case "vertical-min":
@@ -619,18 +587,49 @@ function $2e8572579e31d898$export$2e2bcd8739ae039(callback, durationMs = 10) {
 }
 
 
-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;
+
+// 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 an attribute like minSize instead should work well enough.
+// Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
+function $f9cb001fbb908626$var$getSerializationKey(panels) {
+    return panels.map((panel)=>{
+        const { minSize: minSize , order: order  } = panel;
+        return order ? `${order}:${minSize}` : `${minSize}`;
+    }).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;
+    }
+    return null;
+}
+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);
     }
-    return true;
 }
 
 
-
-// Limit the frequency of localStorage updates.
-const $cec4cafe75f3db78$var$savePanelGroupLayoutDebounced = (0, $2e8572579e31d898$export$2e2bcd8739ae039)((0, $f9cb001fbb908626$export$af183b313c61be4f), 100);
+const $cec4cafe75f3db78$var$debounceMap = {};
 function $cec4cafe75f3db78$var$throwServerError() {
     throw new Error('PanelGroup "storage" prop required for server rendering.');
 }
@@ -665,6 +664,10 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         sizes: sizes
     });
     (0, $6e687094f9ca8395$export$d5a552a76deda3c2)(forwardedRef, ()=>({
+            getLayout: ()=>{
+                const { sizes: sizes  } = committedValuesRef.current;
+                return sizes;
+            },
             setLayout: (sizes)=>{
                 const total = sizes.reduce((accumulated, current)=>accumulated + current, 0);
                 (0, $3b727a2145ecd6f8$export$a7a9523472993e97)(total === 100, "Panel sizes must add up to 100%");
@@ -755,7 +758,9 @@ function $cec4cafe75f3db78$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         if (autoSaveId) {
             if (sizes.length === 0 || sizes.length !== panels.size) return;
             const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
-            $cec4cafe75f3db78$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes, storage);
+            // Limit the frequency of localStorage updates.
+            if (!$cec4cafe75f3db78$var$debounceMap[autoSaveId]) $cec4cafe75f3db78$var$debounceMap[autoSaveId] = (0, $2e8572579e31d898$export$2e2bcd8739ae039)((0, $f9cb001fbb908626$export$af183b313c61be4f), 100);
+            $cec4cafe75f3db78$var$debounceMap[autoSaveId](autoSaveId, panelsArray, sizes, storage);
         }
     }, [
         autoSaveId,