react-resizable-panels 0.0.33 → 0.0.34

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.0.34
+* [#85](https://github.com/bvaughn/react-resizable-panels/issues/85): Add optional `storage` prop to `PanelGroup` to make it easier to persist layouts somewhere other than `localStorage` (e.g. like a Cookie).
+* [#70](https://github.com/bvaughn/react-resizable-panels/issues/70): When resizing is done via mouse/touch event– some initial state is stored so that any panels that contract will also expand if drag direction is reversed.
+* [#86](https://github.com/bvaughn/react-resizable-panels/issues/86): Layout changes triggered by keyboard no longer affect the global cursor.
+* Fixed small cursor regression introduced in 0.0.33.
+
 ## 0.0.33
 * Collapsible `Panel`s will always call `onCollapse` on-mount regardless of their collapsed state.
 * Fixed regression in b5d3ec1 where arrow keys may fail to expand a collapsed panel.

package/README.md

@@ -30,9 +30,14 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `direction`  | `"horizontal" \| "vertical"` | Group orientation
 | `id`         | `?string`                   | Group id; falls back to `useId` when not provided
 | `onLayout`  | `?(sizes: number[]) => void` | Called when group layout changes
+| `storage`    | `?PanelGroupStorage`        | Custom storage API; defaults to `localStorage` <sup>1</sup>
 | `style`      | `?CSSProperties`            | CSS style to attach to root element
 | `tagName`    | `?string = "div"`           | HTML element tag name for root element
 
+<sup>1</sup>: Storage API must define the following _synchronous_ methods:
+* `getItem: (name:string) => string`
+* `setItem: (name: string, value: string) => void`
+
 ### `Panel`
 | prop          | type                            | description
 | :------------ | :------------------------------ | :---
@@ -44,11 +49,13 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 | `maxSize`     | `?number = 100`                 | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`
 | `minSize`     | `?number = 10`                  | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`
 | `onCollapse`  | `?(collapsed: boolean) => void` | Called when panel is collapsed; `collapsed` boolean parameter reflecting the new state
-| `onResize`    | `?(size: number) => void`       | Called when panel is resized; `size` parameter is a numeric value between 1-100
+| `onResize`    | `?(size: number) => void`       | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup>
 | `order`       | `?number`                       | Order of panel within group; required for groups with conditionally rendered panels
 | `style`       | `?CSSProperties`                | CSS style to attach to root element
 | `tagName`     | `?string = "div"`               | HTML element tag name for root element
 
+<sup>1</sup>: If any `Panel` has an `onResize` callback, the `order` prop should be provided for all `Panel`s.
+
 `Panel` components also expose an imperative API for manual resizing:
 | method                       | description
 | :--------------------------- | :---

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

@@ -1,5 +1,9 @@
 import { RefObject, CSSProperties, ElementType, ReactNode } from "react";
 type Direction = "horizontal" | "vertical";
+export type PanelGroupStorage = {
+    getItem(name: string): string | null;
+    setItem(name: string, value: string): void;
+};
 type PanelGroupOnLayout = (sizes: number[]) => void;
 type PanelOnCollapse = (collapsed: boolean) => void;
 type PanelOnResize = (size: number) => void;
@@ -45,10 +49,11 @@ export type PanelGroupProps = {
     direction: Direction;
     id?: string | null;
     onLayout?: PanelGroupOnLayout;
+    storage?: PanelGroupStorage;
     style?: CSSProperties;
     tagName?: ElementType;
 };
-export function PanelGroup({ autoSaveId, children, className: classNameFromProps, direction, id: idFromProps, onLayout, style: styleFromProps, tagName: Type, }: PanelGroupProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
+export function PanelGroup({ autoSaveId, children, className: classNameFromProps, direction, id: idFromProps, onLayout, storage, style: styleFromProps, tagName: Type, }: PanelGroupProps): import("react").FunctionComponentElement<import("react").ProviderProps<{
     activeHandleId: string;
     collapsePanel: (id: string) => void;
     direction: "horizontal" | "vertical";

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

@@ -1 +1 @@
-{"mappings":"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","sources":["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/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/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,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { PanelGroupProps } from \"./PanelGroup\";\nimport type { PanelResizeHandleProps } from \"./PanelResizeHandle\";\n\nexport {\n  Panel,\n  PanelGroup,\n  PanelResizeHandle,\n\n  // TypeScript types\n  ImperativePanelHandle,\n  PanelGroupProps,\n  PanelProps,\n  PanelResizeHandleProps,\n};\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map"}
+{"mappings":"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","sources":["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/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,"import { Panel } from \"./Panel\";\nimport { PanelGroup } from \"./PanelGroup\";\nimport { PanelResizeHandle } from \"./PanelResizeHandle\";\n\nimport type { ImperativePanelHandle, PanelProps } from \"./Panel\";\nimport type { 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"}

package/dist/react-resizable-panels.js

@@ -146,9 +146,9 @@ function $e045b0dd313f33c7$var$getSerializationKey(panels) {
         return order ? `${order}:${minSize}` : `${minSize}`;
     }).sort((a, b)=>a.localeCompare(b)).join(",");
 }
-function $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId) {
+function $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId, storage) {
     try {
-        const serialized = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);
+        const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
         if (serialized) {
             const parsed = JSON.parse(serialized);
             if (typeof parsed === "object" && parsed != null) return parsed;
@@ -156,20 +156,20 @@ function $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId) {
     } catch (error) {}
     return null;
 }
-function $e045b0dd313f33c7$export$9c80c6617f0386da(autoSaveId, panels) {
-    const state = $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId);
+function $e045b0dd313f33c7$export$9c80c6617f0386da(autoSaveId, panels, storage) {
+    const state = $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId, storage);
     if (state) {
         const key = $e045b0dd313f33c7$var$getSerializationKey(panels);
         return state[key] || null;
     }
     return null;
 }
-function $e045b0dd313f33c7$export$af183b313c61be4f(autoSaveId, panels, sizes) {
+function $e045b0dd313f33c7$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
     const key = $e045b0dd313f33c7$var$getSerializationKey(panels);
-    const state = $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId) || {};
+    const state = $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId, storage) || {};
     state[key] = sizes;
     try {
-        localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
+        storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
     } catch (error) {
         console.error(error);
     }
@@ -180,10 +180,14 @@ const $3237bc4a138172cd$export$d6d3992f3becc879 = 10;
 
 
 
-function $d520236daad9c5d5$export$f50bae335f53943c(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse) {
-    if (delta === 0) return prevSizes;
+function $d520236daad9c5d5$export$f50bae335f53943c(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse, initialDragState) {
+    const { 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 (delta === 0) return baseSizes;
     const panelsArray = $d520236daad9c5d5$export$a861c0ad45885494(panels);
-    const nextSizes = prevSizes.concat();
+    const nextSizes = baseSizes.concat();
     let deltaApplied = 0;
     // A resizing panel affects the panels before or after it.
     //
@@ -197,25 +201,29 @@ function $d520236daad9c5d5$export$f50bae335f53943c(event, panels, idBefore, idAf
         const pivotId = delta < 0 ? idAfter : idBefore;
         const index = panelsArray.findIndex((panel)=>panel.id === pivotId);
         const panel = panelsArray[index];
-        const prevSize = prevSizes[index];
-        const nextSize = $d520236daad9c5d5$var$safeResizePanel(panel, Math.abs(delta), prevSize, event);
-        if (prevSize === nextSize) return prevSizes;
+        const baseSize = baseSizes[index];
+        const nextSize = $d520236daad9c5d5$var$safeResizePanel(panel, Math.abs(delta), baseSize, event);
+        if (baseSize === nextSize) // If there's no room for the pivot panel to grow, we can ignore this drag update.
+        return baseSizes;
         else {
-            if (nextSize === 0 && prevSize > 0) panelSizeBeforeCollapse.set(pivotId, prevSize);
-            delta = delta < 0 ? prevSize - nextSize : nextSize - prevSize;
+            if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(pivotId, baseSize);
+            delta = delta < 0 ? baseSize - nextSize : nextSize - baseSize;
         }
     }
     let pivotId1 = delta < 0 ? idBefore : idAfter;
     let index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
     while(true){
         const panel1 = panelsArray[index1];
-        const prevSize1 = prevSizes[index1];
-        const nextSize1 = $d520236daad9c5d5$var$safeResizePanel(panel1, 0 - Math.abs(delta), prevSize1, event);
-        if (prevSize1 !== nextSize1) {
-            if (nextSize1 === 0 && prevSize1 > 0) panelSizeBeforeCollapse.set(panel1.id, prevSize1);
-            deltaApplied += prevSize1 - nextSize1;
+        const baseSize1 = baseSizes[index1];
+        const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+        const nextSize1 = $d520236daad9c5d5$var$safeResizePanel(panel1, 0 - deltaRemaining, baseSize1, event);
+        if (baseSize1 !== nextSize1) {
+            if (nextSize1 === 0 && baseSize1 > 0) panelSizeBeforeCollapse.set(panel1.id, baseSize1);
+            deltaApplied += baseSize1 - nextSize1;
             nextSizes[index1] = nextSize1;
-            if (deltaApplied.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)) >= delta.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879))) break;
+            if (deltaApplied.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)).localeCompare(Math.abs(delta).toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)), undefined, {
+                numeric: true
+            }) >= 0) break;
         }
         if (delta < 0) {
             if (--index1 < 0) break;
@@ -225,11 +233,11 @@ function $d520236daad9c5d5$export$f50bae335f53943c(event, panels, idBefore, idAf
     }
     // If we were unable to resize any of the panels panels, return the previous state.
     // This will essentially bailout and ignore the "mousemove" event.
-    if (deltaApplied === 0) return prevSizes;
+    if (deltaApplied === 0) return baseSizes;
     // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
     pivotId1 = delta < 0 ? idAfter : idBefore;
     index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
-    nextSizes[index1] = prevSizes[index1] + deltaApplied;
+    nextSizes[index1] = baseSizes[index1] + deltaApplied;
     return nextSizes;
 }
 function $d520236daad9c5d5$export$b8e48269e4faa934(panelsArray, prevSizes, nextSizes) {
@@ -334,7 +342,7 @@ function $d520236daad9c5d5$var$safeResizePanel(panel, delta, prevSize, event) {
 }
 
 
-function $f5af57c8e042a4ad$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0) {
+function $f5af57c8e042a4ad$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
     const isHorizontal = direction === "horizontal";
     let pointerOffset = 0;
     if ($f5af57c8e042a4ad$export$764db16956f554f8(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
@@ -343,11 +351,15 @@ function $f5af57c8e042a4ad$export$ec391ce65b083ed4(event, handleId, direction, i
         pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
     } else return 0;
     const handleElement = (0, $d520236daad9c5d5$export$2e27d3a347680388)(handleId);
-    const rect = handleElement.getBoundingClientRect();
+    const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
     const elementOffset = isHorizontal ? rect.left : rect.top;
     return pointerOffset - elementOffset - initialOffset;
 }
-function $f5af57c8e042a4ad$export$354b17c0684607ed(event, groupId, handleId, panelsArray, direction, sizes, initialOffset) {
+function $f5af57c8e042a4ad$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 ($f5af57c8e042a4ad$export$e7bf60a870f429b0(event)) {
         const isHorizontal = direction === "horizontal";
         const groupElement = (0, $d520236daad9c5d5$export$5e67632cf3550a9c)(groupId);
@@ -385,11 +397,11 @@ function $f5af57c8e042a4ad$export$354b17c0684607ed(event, groupId, handleId, pan
         const targetPanelIndex = panelsArray.findIndex((panel)=>panel.id === targetPanelId);
         const targetPanel = panelsArray[targetPanelIndex];
         if (targetPanel.collapsible) {
-            const prevSize = sizes[targetPanelIndex];
-            if (prevSize === 0 || prevSize.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
+            const baseSize = baseSizes[targetPanelIndex];
+            if (baseSize === 0 || baseSize.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
         }
         return movement;
-    } else return $f5af57c8e042a4ad$export$ec391ce65b083ed4(event, handleId, direction, initialOffset);
+    } else return $f5af57c8e042a4ad$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
 }
 function $f5af57c8e042a4ad$export$e7bf60a870f429b0(event) {
     return event.type === "keydown";
@@ -451,7 +463,7 @@ function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committ
                                     let delta = 0;
                                     if (size.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $3237bc4a138172cd$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
                                     else delta = -(direction === "horizontal" ? width : height);
-                                    const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current);
+                                    const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
                                     if (sizes !== nextSizes) setSizes(nextSizes);
                                 }
                             }
@@ -566,12 +578,32 @@ function $0f7a23424493ebd6$export$2e2bcd8739ae039(callback, durationMs = 10) {
 }
 
 
+function $d6375e31485eb011$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;
+}
+
+
 // Limit the frequency of localStorage updates.
 const $19bf0050f73d236b$var$savePanelGroupLayoutDebounced = (0, $0f7a23424493ebd6$export$2e2bcd8739ae039)((0, $e045b0dd313f33c7$export$af183b313c61be4f), 100);
-function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , onLayout: onLayout = null , style: styleFromProps = {} , tagName: Type = "div"  }) {
+function $19bf0050f73d236b$var$throwServerError() {
+    throw new Error('PanelGroup "storage" prop required for server rendering.');
+}
+const $19bf0050f73d236b$var$defaultStorage = {
+    getItem: typeof localStorage !== "undefined" ? (name)=>localStorage.getItem(name) : $19bf0050f73d236b$var$throwServerError,
+    setItem: typeof localStorage !== "undefined" ? (name, value)=>localStorage.setItem(name, value) : $19bf0050f73d236b$var$throwServerError
+};
+function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , onLayout: onLayout = null , storage: storage = $19bf0050f73d236b$var$defaultStorage , style: styleFromProps = {} , tagName: Type = "div"  }) {
     const groupId = (0, $6d548a0d130941e3$export$2e2bcd8739ae039)(idFromProps);
     const [activeHandleId, setActiveHandleId] = (0, $b2QPe$react.useState)(null);
     const [panels, setPanels] = (0, $b2QPe$react.useState)(new Map());
+    // When resizing is done via mouse/touch event–
+    // We store the initial Panel sizes in this ref, and apply move deltas to them instead of to the current sizes.
+    // This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
+    const initialDragStateRef = (0, $b2QPe$react.useRef)(null);
     // Use a ref to guard against users passing inline props
     const callbacksRef = (0, $b2QPe$react.useRef)({
         onLayout: onLayout
@@ -581,11 +613,9 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
     });
     // 0-1 values representing the relative size of each panel.
     const [sizes, setSizes] = (0, $b2QPe$react.useState)([]);
-    // Resize is calculated by the distance between the current pointer event and the resize handle being "dragged"
-    // This value accounts for the initial offset when the touch/click starts, so the handle doesn't appear to "jump"
-    const dragOffsetRef = (0, $b2QPe$react.useRef)(0);
     // Used to support imperative collapse/expand API.
     const panelSizeBeforeCollapse = (0, $b2QPe$react.useRef)(new Map());
+    const prevDeltaRef = (0, $b2QPe$react.useRef)(0);
     // Store committed values to avoid unnecessarily re-running memoization/effects functions.
     const committedValuesRef = (0, $b2QPe$react.useRef)({
         direction: direction,
@@ -642,7 +672,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         let defaultSizes = undefined;
         if (autoSaveId) {
             const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
-            defaultSizes = (0, $e045b0dd313f33c7$export$9c80c6617f0386da)(autoSaveId, panelsArray);
+            defaultSizes = (0, $e045b0dd313f33c7$export$9c80c6617f0386da)(autoSaveId, panelsArray, storage);
         }
         if (defaultSizes != null) setSizes(defaultSizes);
         else {
@@ -675,7 +705,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (autoSaveId) {
             if (sizes.length === 0 || sizes.length !== panels.size) return;
             const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
-            $19bf0050f73d236b$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes);
+            $19bf0050f73d236b$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes, storage);
         }
     }, [
         autoSaveId,
@@ -725,27 +755,37 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             const panelsArray = (0, $d520236daad9c5d5$export$a861c0ad45885494)(panels);
             const [idBefore, idAfter] = (0, $d520236daad9c5d5$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
             if (idBefore == null || idAfter == null) return;
-            const movement = (0, $f5af57c8e042a4ad$export$354b17c0684607ed)(event, groupId, handleId, panelsArray, direction, prevSizes, dragOffsetRef.current);
+            const movement = (0, $f5af57c8e042a4ad$export$354b17c0684607ed)(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
             if (movement === 0) return;
             const groupElement = (0, $d520236daad9c5d5$export$5e67632cf3550a9c)(groupId);
             const rect = groupElement.getBoundingClientRect();
             const isHorizontal = direction === "horizontal";
             const size = isHorizontal ? rect.width : rect.height;
             const delta = movement / size * 100;
-            const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
-            if (prevSizes === nextSizes) {
-                // 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, $102aa6bc0f99b2b3$export$d395b5dfd066a659)(movement < 0 ? "horizontal-min" : "horizontal-max");
-                else (0, $102aa6bc0f99b2b3$export$d395b5dfd066a659)(movement < 0 ? "vertical-min" : "vertical-max");
-            } else {
-                // Reset the cursor style to the the normal resize cursor.
-                (0, $102aa6bc0f99b2b3$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
+            const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, initialDragStateRef.current);
+            const sizesChanged = !(0, $d6375e31485eb011$export$b141efd0b0fb9174)(prevSizes, nextSizes);
+            // Don't update cursor for resizes triggered by keyboard interactions.
+            if ((0, $f5af57c8e042a4ad$export$764db16956f554f8)(event) || (0, $f5af57c8e042a4ad$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) {
+                    if (!sizesChanged) {
+                        // 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, $102aa6bc0f99b2b3$export$d395b5dfd066a659)(movement < 0 ? "horizontal-min" : "horizontal-max");
+                        else (0, $102aa6bc0f99b2b3$export$d395b5dfd066a659)(movement < 0 ? "vertical-min" : "vertical-max");
+                    } else // Reset the cursor style to the the normal resize cursor.
+                    (0, $102aa6bc0f99b2b3$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
+                }
+            }
+            if (sizesChanged) {
                 // If resize change handlers have been declared, this is the time to call them.
                 (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
                 setSizes(nextSizes);
             }
+            prevDeltaRef.current = delta;
         };
         return resizeHandler;
     }, [
@@ -774,7 +814,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;
         const delta = isLastPanel ? currentSize : 0 - currentSize;
-        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
+        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
@@ -797,7 +837,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;
         const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
-        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
+        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
@@ -813,11 +853,13 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         if (index < 0) return;
         const currentSize = prevSizes[index];
         if (currentSize === nextSize) return;
+        if (panel.collapsible && nextSize === 0) ;
+        else nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSize));
         const [idBefore, idAfter] = (0, $d520236daad9c5d5$export$5a5b0c1d38c23c3b)(id, panelsArray);
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;
         const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
-        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current);
+        const nextSizes = (0, $d520236daad9c5d5$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
         if (prevSizes !== nextSizes) {
             // If resize change handlers have been declared, this is the time to call them.
             (0, $d520236daad9c5d5$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
@@ -836,11 +878,19 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
             resizePanel: resizePanel,
             startDragging: (id, event)=>{
                 setActiveHandleId(id);
-                dragOffsetRef.current = (0, $f5af57c8e042a4ad$export$ec391ce65b083ed4)(event, id, direction);
+                if ((0, $f5af57c8e042a4ad$export$764db16956f554f8)(event) || (0, $f5af57c8e042a4ad$export$c4dfce035d43d1e0)(event)) {
+                    const handleElement = (0, $d520236daad9c5d5$export$2e27d3a347680388)(id);
+                    initialDragStateRef.current = {
+                        dragHandleRect: handleElement.getBoundingClientRect(),
+                        dragOffset: (0, $f5af57c8e042a4ad$export$ec391ce65b083ed4)(event, id, direction),
+                        sizes: committedValuesRef.current.sizes
+                    };
+                }
             },
             stopDragging: ()=>{
                 (0, $102aa6bc0f99b2b3$export$b61932ee18f96e08)();
                 setActiveHandleId(null);
+                initialDragStateRef.current = null;
             },
             unregisterPanel: unregisterPanel
         }), [
@@ -866,6 +916,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
         children: (0, $b2QPe$react.createElement)(Type, {
             children: children,
             className: classNameFromProps,
+            "data-panel-group": "",
             "data-panel-group-direction": direction,
             "data-panel-group-id": groupId,
             style: {