react-resizable-panels 0.0.42 → 0.0.44

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

@@ -12,7 +12,6 @@ const { createElement: $ef07efbe5fa7d87e$export$c8a8987d4410bf2d , createContext
 const $ef07efbe5fa7d87e$export$f680877a34711e37 = $jhddX$react["useId".toString()];
 
 
-
 const $3f95d3e171760903$var$canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
 const $3f95d3e171760903$var$useIsomorphicLayoutEffect = $3f95d3e171760903$var$canUseEffectHooks ? (0, $ef07efbe5fa7d87e$export$e5c5a5f917a5871c) : ()=>{};
 var $3f95d3e171760903$export$2e2bcd8739ae039 = $3f95d3e171760903$var$useIsomorphicLayoutEffect;
@@ -30,6 +29,7 @@ function $e504a2438473eda9$export$2e2bcd8739ae039(idFromParams = null) {
 
 
 
+
 const $af466b485b9d515d$export$7d8c6d083caec74a = (0, $ef07efbe5fa7d87e$export$fd42f52fd3ae1109)(null);
 // Workaround for Parcel scope hoisting (which renames objects/functions).
 // Casting to :any is required to avoid corrupting the generated TypeScript types.
@@ -61,37 +61,38 @@ function $c33df6d7c39fd3ee$var$PanelWithForwardedRef({ children: children = null
             defaultSize = minSize;
         }
     }
+    const style = getPanelStyle(panelId);
+    const committedValuesRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        size: $c33df6d7c39fd3ee$var$parseSizeFromStyle(style)
+    });
+    const panelDataRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        callbacksRef: callbacksRef,
+        collapsible: collapsible,
+        defaultSize: defaultSize,
+        id: panelId,
+        maxSize: maxSize,
+        minSize: minSize,
+        order: order
+    });
     (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
-        const panel = {
-            callbacksRef: callbacksRef,
-            collapsible: collapsible,
-            defaultSize: defaultSize,
-            id: panelId,
-            maxSize: maxSize,
-            minSize: minSize,
-            order: order
-        };
-        registerPanel(panelId, panel);
+        committedValuesRef.current.size = $c33df6d7c39fd3ee$var$parseSizeFromStyle(style);
+        panelDataRef.current.callbacksRef = callbacksRef;
+        panelDataRef.current.collapsible = collapsible;
+        panelDataRef.current.defaultSize = defaultSize;
+        panelDataRef.current.id = panelId;
+        panelDataRef.current.maxSize = maxSize;
+        panelDataRef.current.minSize = minSize;
+        panelDataRef.current.order = order;
+    });
+    (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
+        registerPanel(panelId, panelDataRef);
         return ()=>{
             unregisterPanel(panelId);
         };
     }, [
-        collapsible,
-        defaultSize,
-        panelId,
-        maxSize,
-        minSize,
-        order,
         registerPanel,
         unregisterPanel
     ]);
-    const style = getPanelStyle(panelId);
-    const committedValuesRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
-        size: $c33df6d7c39fd3ee$var$parseSizeFromStyle(style)
-    });
-    (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
-        committedValuesRef.current.size = $c33df6d7c39fd3ee$var$parseSizeFromStyle(style);
-    });
     (0, $ef07efbe5fa7d87e$export$d5a552a76deda3c2)(forwardedRef, ()=>({
             collapse: ()=>collapsePanel(panelId),
             expand: ()=>expandPanel(panelId),
@@ -141,45 +142,6 @@ function $c33df6d7c39fd3ee$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 $6889c3a3ed41cfd1$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 $6889c3a3ed41cfd1$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 $6889c3a3ed41cfd1$export$9c80c6617f0386da(autoSaveId, panels, storage) {
-    const state = $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage);
-    if (state) {
-        const key = $6889c3a3ed41cfd1$var$getSerializationKey(panels);
-        var _state_key;
-        return (_state_key = state[key]) !== null && _state_key !== void 0 ? _state_key : null;
-    }
-    return null;
-}
-function $6889c3a3ed41cfd1$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
-    const key = $6889c3a3ed41cfd1$var$getSerializationKey(panels);
-    const state = $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage) || {};
-    state[key] = sizes;
-    try {
-        storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
-    } catch (error) {
-        console.error(error);
-    }
-}
 
 
 const $a8e83be196252871$export$d6d3992f3becc879 = 10;
@@ -205,7 +167,7 @@ function $d6f7e4c3aa9e02d7$export$f50bae335f53943c(event, panels, idBefore, idAf
     // Max-bounds check the panel being expanded first.
     {
         const pivotId = delta < 0 ? idAfter : idBefore;
-        const index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+        const index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
         const panel = panelsArray[index];
         const baseSize = baseSizes[index];
         const nextSize = $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, Math.abs(delta), baseSize, event);
@@ -217,14 +179,14 @@ function $d6f7e4c3aa9e02d7$export$f50bae335f53943c(event, panels, idBefore, idAf
         }
     }
     let pivotId = delta < 0 ? idBefore : idAfter;
-    let index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+    let index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
     while(true){
         const panel = panelsArray[index];
         const baseSize = baseSizes[index];
         const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
         const nextSize = $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, 0 - deltaRemaining, baseSize, event);
         if (baseSize !== nextSize) {
-            if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(panel.id, baseSize);
+            if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(panel.current.id, baseSize);
             deltaApplied += baseSize - nextSize;
             nextSizes[index] = nextSize;
             if (deltaApplied.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)).localeCompare(Math.abs(delta).toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)), undefined, {
@@ -242,7 +204,7 @@ function $d6f7e4c3aa9e02d7$export$f50bae335f53943c(event, panels, idBefore, idAf
     if (deltaApplied === 0) return baseSizes;
     // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
     pivotId = delta < 0 ? idAfter : idBefore;
-    index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+    index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
     nextSizes[index] = baseSizes[index] + deltaApplied;
     return nextSizes;
 }
@@ -250,7 +212,7 @@ function $d6f7e4c3aa9e02d7$export$b8e48269e4faa934(panelsArray, prevSizes, nextS
     nextSizes.forEach((nextSize, index)=>{
         const prevSize = prevSizes[index];
         if (prevSize !== nextSize) {
-            const { callbacksRef: callbacksRef , collapsible: collapsible  } = panelsArray[index];
+            const { callbacksRef: callbacksRef , collapsible: collapsible  } = panelsArray[index].current;
             const { onCollapse: onCollapse , onResize: onResize  } = callbacksRef.current;
             if (onResize) onResize(nextSize);
             if (collapsible && onCollapse) {
@@ -267,14 +229,14 @@ function $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b(id, panelsArray) {
         null,
         null
     ];
-    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    const index = panelsArray.findIndex((panel)=>panel.current.id === id);
     if (index < 0) return [
         null,
         null
     ];
     const isLastPanel = index === panelsArray.length - 1;
-    const idBefore = isLastPanel ? panelsArray[index - 1].id : id;
-    const idAfter = isLastPanel ? id : panelsArray[index + 1].id;
+    const idBefore = isLastPanel ? panelsArray[index - 1].current.id : id;
+    const idAfter = isLastPanel ? id : panelsArray[index + 1].current.id;
     return [
         idBefore,
         idAfter
@@ -283,7 +245,7 @@ function $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b(id, panelsArray) {
 function $d6f7e4c3aa9e02d7$export$6f43503e166de6fb(panels, id, sizes) {
     if (panels.size === 1) return "100";
     const panelsArray = $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels);
-    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    const index = panelsArray.findIndex((panel)=>panel.current.id === id);
     const size = sizes[index];
     if (size == null) return "0";
     return size.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879));
@@ -315,14 +277,14 @@ function $d6f7e4c3aa9e02d7$export$ae14931f0a0256a3(groupId) {
     return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
 }
 function $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
-    var _panelsArray_index, _panelsArray_;
+    var _panelsArray_index, _panelsArray_index_current, _panelsArray_, _panelsArray__current;
     const handle = $d6f7e4c3aa9e02d7$export$2e27d3a347680388(handleId);
     const handles = $d6f7e4c3aa9e02d7$export$ae14931f0a0256a3(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;
+    var _panelsArray_index_current_id;
+    const idBefore = (_panelsArray_index_current_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : (_panelsArray_index_current = _panelsArray_index.current) === null || _panelsArray_index_current === void 0 ? void 0 : _panelsArray_index_current.id) !== null && _panelsArray_index_current_id !== void 0 ? _panelsArray_index_current_id : null;
+    var _panelsArray__current_id;
+    const idAfter = (_panelsArray__current_id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : (_panelsArray__current = _panelsArray_.current) === null || _panelsArray__current === void 0 ? void 0 : _panelsArray__current.id) !== null && _panelsArray__current_id !== void 0 ? _panelsArray__current_id : null;
     return [
         idBefore,
         idAfter
@@ -330,8 +292,8 @@ function $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27(groupId, handleId, panelsArra
 }
 function $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels) {
     return Array.from(panels.values()).sort((panelA, panelB)=>{
-        const orderA = panelA.order;
-        const orderB = panelB.order;
+        const orderA = panelA.current.order;
+        const orderB = panelB.current.order;
         if (orderA == null && orderB == null) return 0;
         else if (orderA == null) return -1;
         else if (orderB == null) return 1;
@@ -340,7 +302,7 @@ function $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels) {
 }
 function $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, delta, prevSize, event) {
     const nextSizeUnsafe = prevSize + delta;
-    if (panel.collapsible) {
+    if (panel.current.collapsible) {
         if (prevSize > 0) {
             if (nextSizeUnsafe <= 0) return 0;
         } else {
@@ -350,93 +312,15 @@ function $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, delta, prevSize, event) {
                 // Keyboard events should expand a collapsed panel to the min size,
                 // but mouse events should wait until the panel has reached its min size
                 // to avoid a visual flickering when dragging between collapsed and min size.
-                if (nextSizeUnsafe < panel.minSize) return 0;
+                if (nextSizeUnsafe < panel.current.minSize) return 0;
             }
         }
     }
-    const nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSizeUnsafe));
+    const nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSizeUnsafe));
     return nextSize;
 }
 
 
-function $8f51c2d77bf1da88$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
-    const isHorizontal = direction === "horizontal";
-    let pointerOffset = 0;
-    if ($8f51c2d77bf1da88$export$764db16956f554f8(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
-    else if ($8f51c2d77bf1da88$export$c4dfce035d43d1e0(event)) {
-        const firstTouch = event.touches[0];
-        pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
-    } else return 0;
-    const handleElement = (0, $d6f7e4c3aa9e02d7$export$2e27d3a347680388)(handleId);
-    const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
-    const elementOffset = isHorizontal ? rect.left : rect.top;
-    return pointerOffset - elementOffset - initialOffset;
-}
-function $8f51c2d77bf1da88$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 ($8f51c2d77bf1da88$export$e7bf60a870f429b0(event)) {
-        const isHorizontal = direction === "horizontal";
-        const groupElement = (0, $d6f7e4c3aa9e02d7$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, $d6f7e4c3aa9e02d7$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, $a8e83be196252871$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
-        }
-        return movement;
-    } else return $8f51c2d77bf1da88$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
-}
-function $8f51c2d77bf1da88$export$e7bf60a870f429b0(event) {
-    return event.type === "keydown";
-}
-function $8f51c2d77bf1da88$export$764db16956f554f8(event) {
-    return event.type.startsWith("mouse");
-}
-function $8f51c2d77bf1da88$export$c4dfce035d43d1e0(event) {
-    return event.type.startsWith("touch");
-}
-
-
-
-
-
-
-
-
 function $5f33910cd46e8ae7$export$a7a9523472993e97(expectedCondition, message = "Assertion failed!") {
     if (!expectedCondition) {
         console.error(message);
@@ -462,12 +346,12 @@ function $4a90471e7083b52f$export$d9fcbe062527d159({ committedValuesRef: committ
             let totalMaxSize = 0;
             // A panel's effective min/max sizes also need to account for other panel's sizes.
             panelsArray.forEach((panelData)=>{
-                if (panelData.id === idBefore) {
-                    maxSize = panelData.maxSize;
-                    minSize = panelData.minSize;
+                if (panelData.current.id === idBefore) {
+                    maxSize = panelData.current.maxSize;
+                    minSize = panelData.current.minSize;
                 } else {
-                    totalMinSize += panelData.minSize;
-                    totalMaxSize += panelData.maxSize;
+                    totalMinSize += panelData.current.minSize;
+                    totalMaxSize += panelData.current.maxSize;
                 }
             });
             const ariaValueMax = Math.min(maxSize, 100 - totalMinSize);
@@ -482,13 +366,13 @@ function $4a90471e7083b52f$export$d9fcbe062527d159({ committedValuesRef: committ
                     case "Enter":
                         {
                             event.preventDefault();
-                            const index = panelsArray.findIndex((panel)=>panel.id === idBefore);
+                            const index = panelsArray.findIndex((panel)=>panel.current.id === idBefore);
                             if (index >= 0) {
                                 const panelData = panelsArray[index];
                                 const size = sizes[index];
                                 if (size != null) {
                                     let delta = 0;
-                                    if (size.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
+                                    if (size.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)) <= panelData.current.minSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
                                     else delta = -(direction === "horizontal" ? width : height);
                                     const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
                                     if (sizes !== nextSizes) setSizes(nextSizes);
@@ -563,6 +447,91 @@ function $4a90471e7083b52f$export$33b0bea6ac3ffb03({ disabled: disabled , handle
 }
 
 
+
+function $c892f0f705e6ded5$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 $8f51c2d77bf1da88$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
+    const isHorizontal = direction === "horizontal";
+    let pointerOffset = 0;
+    if ($8f51c2d77bf1da88$export$764db16956f554f8(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
+    else if ($8f51c2d77bf1da88$export$c4dfce035d43d1e0(event)) {
+        const firstTouch = event.touches[0];
+        pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
+    } else return 0;
+    const handleElement = (0, $d6f7e4c3aa9e02d7$export$2e27d3a347680388)(handleId);
+    const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
+    const elementOffset = isHorizontal ? rect.left : rect.top;
+    return pointerOffset - elementOffset - initialOffset;
+}
+function $8f51c2d77bf1da88$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 ($8f51c2d77bf1da88$export$e7bf60a870f429b0(event)) {
+        const isHorizontal = direction === "horizontal";
+        const groupElement = (0, $d6f7e4c3aa9e02d7$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, $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
+        const targetPanelId = movement < 0 ? idBefore : idAfter;
+        const targetPanelIndex = panelsArray.findIndex((panel)=>panel.current.id === targetPanelId);
+        const targetPanel = panelsArray[targetPanelIndex];
+        if (targetPanel.current.collapsible) {
+            const baseSize = baseSizes[targetPanelIndex];
+            if (baseSize === 0 || baseSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)) === targetPanel.current.minSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.current.minSize * groupSizeInPixels : targetPanel.current.minSize * groupSizeInPixels;
+        }
+        return movement;
+    } else return $8f51c2d77bf1da88$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
+}
+function $8f51c2d77bf1da88$export$e7bf60a870f429b0(event) {
+    return event.type === "keydown";
+}
+function $8f51c2d77bf1da88$export$764db16956f554f8(event) {
+    return event.type.startsWith("mouse");
+}
+function $8f51c2d77bf1da88$export$c4dfce035d43d1e0(event) {
+    return event.type.startsWith("touch");
+}
+
+
 let $8d9d88bebf1a8ace$var$currentState = null;
 let $8d9d88bebf1a8ace$var$element = null;
 function $8d9d88bebf1a8ace$export$fa35f3322c52262f(state) {
@@ -612,18 +581,49 @@ function $f7d932e9304c1581$export$2e2bcd8739ae039(callback, durationMs = 10) {
 }
 
 
-function $c892f0f705e6ded5$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 $6889c3a3ed41cfd1$var$getSerializationKey(panels) {
+    return panels.map((panel)=>{
+        const { minSize: minSize , order: order  } = panel.current;
+        return order ? `${order}:${minSize}` : `${minSize}`;
+    }).sort((a, b)=>a.localeCompare(b)).join(",");
+}
+function $6889c3a3ed41cfd1$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 $6889c3a3ed41cfd1$export$9c80c6617f0386da(autoSaveId, panels, storage) {
+    const state = $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage);
+    if (state) {
+        const key = $6889c3a3ed41cfd1$var$getSerializationKey(panels);
+        var _state_key;
+        return (_state_key = state[key]) !== null && _state_key !== void 0 ? _state_key : null;
+    }
+    return null;
+}
+function $6889c3a3ed41cfd1$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
+    const key = $6889c3a3ed41cfd1$var$getSerializationKey(panels);
+    const state = $6889c3a3ed41cfd1$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 $3daa5d4c086ea816$var$savePanelGroupLayoutDebounced = (0, $f7d932e9304c1581$export$2e2bcd8739ae039)((0, $6889c3a3ed41cfd1$export$af183b313c61be4f), 100);
+const $3daa5d4c086ea816$var$debounceMap = {};
 function $3daa5d4c086ea816$var$throwServerError() {
     throw new Error('PanelGroup "storage" prop required for server rendering.');
 }
@@ -658,6 +658,10 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         sizes: sizes
     });
     (0, $ef07efbe5fa7d87e$export$d5a552a76deda3c2)(forwardedRef, ()=>({
+            getLayout: ()=>{
+                const { sizes: sizes  } = committedValuesRef.current;
+                return sizes;
+            },
             setLayout: (sizes)=>{
                 const total = sizes.reduce((accumulated, current)=>accumulated + current, 0);
                 (0, $5f33910cd46e8ae7$export$a7a9523472993e97)(total === 100, "Panel sizes must add up to 100%");
@@ -727,15 +731,15 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
             // e.g. if Panel A has a maxSize of 40 then Panels A and B can't both have an implicit default size of 50.
             // For now, these logic edge cases are left to the user to handle via props.
             panelsArray.forEach((panel)=>{
-                totalMinSize += panel.minSize;
-                if (panel.defaultSize === null) panelsWithNullDefaultSize++;
-                else totalDefaultSize += panel.defaultSize;
+                totalMinSize += panel.current.minSize;
+                if (panel.current.defaultSize === null) panelsWithNullDefaultSize++;
+                else totalDefaultSize += panel.current.defaultSize;
             });
             if (totalDefaultSize > 100) throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
             else if (totalMinSize > 100) throw new Error(`The sum of the minSize of all panels in a group cannot exceed 100.`);
             setSizes(panelsArray.map((panel)=>{
-                if (panel.defaultSize === null) return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
-                return panel.defaultSize;
+                if (panel.current.defaultSize === null) return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
+                return panel.current.defaultSize;
             }));
         }
     }, [
@@ -748,7 +752,9 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         if (autoSaveId) {
             if (sizes.length === 0 || sizes.length !== panels.size) return;
             const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
-            $3daa5d4c086ea816$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes, storage);
+            // Limit the frequency of localStorage updates.
+            if (!$3daa5d4c086ea816$var$debounceMap[autoSaveId]) $3daa5d4c086ea816$var$debounceMap[autoSaveId] = (0, $f7d932e9304c1581$export$2e2bcd8739ae039)((0, $6889c3a3ed41cfd1$export$af183b313c61be4f), 100);
+            $3daa5d4c086ea816$var$debounceMap[autoSaveId](autoSaveId, panelsArray, sizes, storage);
         }
     }, [
         autoSaveId,
@@ -784,11 +790,11 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         disablePointerEventsDuringResize,
         sizes
     ]);
-    const registerPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id, panel)=>{
+    const registerPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id, panelRef)=>{
         setPanels((prevPanels)=>{
             if (prevPanels.has(id)) return prevPanels;
             const nextPanels = new Map(prevPanels);
-            nextPanels.set(id, panel);
+            nextPanels.set(id, panelRef);
             return nextPanels;
         });
     }, []);
@@ -846,7 +852,7 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
     const collapsePanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id)=>{
         const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
         const panel = panels.get(id);
-        if (panel == null || !panel.collapsible) return;
+        if (panel == null || !panel.current.collapsible) return;
         const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
         const index = panelsArray.indexOf(panel);
         if (index < 0) return;
@@ -869,7 +875,7 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
         const panel = panels.get(id);
         if (panel == null) return;
-        const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.minSize;
+        const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.current.minSize;
         if (!sizeBeforeCollapse) return;
         const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
         const index = panelsArray.indexOf(panel);
@@ -897,8 +903,8 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         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));
+        if (panel.current.collapsible && nextSize === 0) ;
+        else nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSize));
         const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b)(id, panelsArray);
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;