@aiquants/resize-panels 2.0.1 → 2.1.0

package/README.md

@@ -12,6 +12,7 @@ Every state change — first paint, container resize, drag, collapse, restored l
 - **Directional Collapsible Control**: declarative `collapsible` settings (`from: 'start' | 'end' | 'both'`) and the `usePanelControls` hook support collapsing/expanding from drags and from UI controls; expanding restores the layout the panel had before it closed.
 - **Keyboard & Touch Accessibility**: handles are `role="separator"` widgets whose `aria-valuenow` / `aria-valuemin` / `aria-valuemax` publish the boundary and the travel *this* handle can reach, collapsing included; a collapsed neighbour is reported as length 0 rather than making the values disappear. Arrow keys resize (5x step with Shift), reopen a collapsed neighbour from the side it closed towards and collapse a panel the pair's travel cannot shrink further, while a handle with nowhere to go leaves the key to the page. A drag needs the primary button and survives multi-touch and `pointercancel`.
 - **Auto-Persistence**: set `autoSaveId` to store each panel's open length and collapsed flag in `localStorage` next to its panel id, so a layout saved by a different set of panels is rejected instead of being applied by position.
+- **Layout notifications with a cause**: `onLayout` receives the allocated lengths together with why they changed — a drag, a key, a host call, a container resize, a panel change or a restored layout — so a host can keep what the reader chose apart from what the container forced.
 - **Debug & Visualization**: enable `showDebugInfo` to inspect allocations through the per-panel `PanelDebugInfo` badge and a global overlay (lazily imported; production bundles without it create no per-panel observers at all). A constraint violation needs no flag: the group draws its own placeholder over the panels whenever the allocator reports one.
 
 ## Installation
@@ -127,7 +128,7 @@ export const Example = () => (
 | `className` / `style` | `string` / `React.CSSProperties` | Additional styling for the container |
 | `children` | `React.ReactNode` | `Panel` and `PanelResizeHandle` child elements |
 | `showDebugInfo` | `boolean` | Enables the per-panel `PanelDebugInfo` badge and the global debug overlay |
-| `onLayout` | `(sizes: number[]) => void` | Callback emitting updated pixel size arrays on resize/init |
+| `onLayout` | `(sizes: number[], change: PanelLayoutChange) => void` | Called with the panels' allocated pixel lengths (DOM order) each time they change once the container is measured; `change.source` says why (see [Layout Notifications](#layout-notifications)) |
 | `autoSaveId` | `string` | Key used to automatically persist and restore panel sizes in `localStorage` |
 
 ### Panel Properties
@@ -168,7 +169,7 @@ enforces the contract is the runtime override, which applies these attributes af
 | `indicatorBarThickness` | `number` | Shorthand for indicator inner bar thickness in pixels (`2px` default) |
 | `indicatorBarLength` | `number` | Shorthand for indicator inner bar length in pixels (`32px` horizontal / `64px` vertical default) |
 | `title` | `string` | Custom tooltip text for the handle element |
-| `onDragging` | `(isDragging: boolean) => void` | Callback triggered on drag start and end (including `pointercancel`) |
+| `onDragging` | `(isDragging: boolean) => void` | Callback triggered on drag start and end (including `pointercancel`); `false` comes only after every `'pointer'` change of the drag has been reported to `onLayout` |
 | `className` / `style` | `string` / `React.CSSProperties` | Additional styling for the resize handle |
 | `children` | `React.ReactNode` | Custom indicator element rendered inside handle (overrides default indicator) |
 
@@ -193,8 +194,8 @@ hidden (`display: none` on its anchor) as well as disabled.
 ## Hooks & Utilities
 
 - `useResizablePanels`: the hook behind `PanelGroup`. It measures the container, keeps the panel order equal to DOM order, notifies `onLayout`, persists the layout and returns the group's base style — it never computes a panel size.
-- `usePanelGroup` / `PanelGroupContext`: context accessor, and the context itself, for the panel list, the container length, the constraint violation and `layoutOrderKey` — the document order of the panels and handle anchors, which changes even when only a handle moved to another boundary.
-- `usePanelControls`: `collapse`, `expand` and `toggle` for a given panel id.
+- `usePanelGroup` / `PanelGroupContext`: context accessor, and the context itself, for the panel list, the container length, the constraint violation and `layoutOrderKey` — the document order of the panels and handle anchors, which changes even when only a handle moved to another boundary. Its `resizePanels`, `collapsePanel` and `expandPanel` take an optional last `source` (`'pointer' | 'keyboard' | 'api'`, `'api'` when left out) that `onLayout` reports for the change, and throw a `RangeError` for any other value.
+- `usePanelControls`: `collapse`, `expand` and `toggle` for a given panel id; `onLayout` reports their changes as `'api'`.
 - `allocatePanelSizes`, `resolvePanelBounds`, `isPixelPanel`: the layout calculation itself, exported for tests and for hosts that drive their own container.
 - `panelReducer`, `initialPanelGroupLayoutState`, `getPanelPreferenceInPixels`, `findLayoutInvariantBreach`: the state machine around the allocator, the length a layout should persist, and the `Σ sizes == container` check.
 - `getContainerSize`: measure one axis of an element in layout pixels; it returns `{ content, border }`, and `content` (padding and borders removed) is the length the allocator fills.
@@ -203,7 +204,7 @@ hidden (`display: none` on its anchor) as well as disabled.
 - `clamp`, `getConstraintInPixels`, `normalizeSizeConfig`, `percentageToPixels`, `toRoundedPercentage`, `calculateSnapThreshold`: the unit conversions and thresholds the components share.
 - `getPanelElement`, `getPanelGroupElement`, `getResizeHandleElement`: DOM element query helpers via `data-*` attributes.
 
-Every public type (`PanelProps`, `PanelGroupProps`, `PanelResizeHandleProps`, `PanelLayoutData`, `PanelRegistration`, `PersistedPanelSize`, `PanelGroupLayoutState`, `PanelAction`, `LayoutAllocation`, `PanelBounds`, `ContainerAxisMeasurement`, …) is re-exported from the package root; `docs/specs` (`00-architecture-overview.md` §8) lists the surface in full.
+Every public type (`PanelProps`, `PanelGroupProps`, `PanelResizeHandleProps`, `PanelLayoutData`, `PanelRegistration`, `PersistedPanelSize`, `PanelGroupLayoutState`, `PanelAction`, `PanelLayoutChange`, `PanelLayoutSource`, `PanelRequestSource`, `LayoutAllocation`, `PanelBounds`, `ContainerAxisMeasurement`, …) is re-exported from the package root; `docs/specs` (`00-architecture-overview.md` §8) lists the surface in full.
 
 ## How sizes are decided
 
@@ -226,6 +227,63 @@ violation when the panels' maximums cannot reach the container, and as a logged
 full statement, including the proofs of ratio preservation, continuity and the drag fixed point, is in `docs/specs`
 (`11-layout-allocator.md`).
 
+## Layout Notifications
+
+`onLayout(sizes, change)` runs after every commit that replaces the panels' sizes once the container has been
+measured, so it never sees the unmeasured zero lengths. `sizes` lists the allocated lengths in pixels in DOM order,
+and `change.source` (`PanelLayoutSource`) says what caused the change:
+
+| `change.source` | Cause |
+| --- | --- |
+| `'pointer'` | A drag on a `PanelResizeHandle`, including a collapse or an expand at either end of it |
+| `'keyboard'` | The arrow keys on a `PanelResizeHandle`, including the collapse and expand they trigger |
+| `'api'` | The host: `usePanelControls`, or `resizePanels` / `collapsePanel` / `expandPanel` from `usePanelGroup()` called without a `source` |
+| `'container'` | The group's content box changed length along its axis, or the group measured it afresh — its first measurement and the one after a `direction` change included, so a group rendered with its panels reports `'container'` first |
+| `'panels'` | A panel mounted, unmounted, changed its props or moved in the DOM |
+| `'restore'` | The layout stored under `autoSaveId` was applied |
+
+When several changes are committed in one render, `source` is the cause of the last of them. React's StrictMode
+does not change the notifications: when a group stops observing its container it drops the measurement, so the
+development-only remount measures again after the panels have registered again, as the first mount did. A pointer
+press and release without movement, a key that pushes a boundary already at the end of its range and a resize of the
+cross axis change nothing and are not reported; a commit can, however, repeat the previous sizes (a panel
+re-registering, a stored layout equal to the current one, a `direction` change), so handlers should accept the same
+sizes twice. A handler that declares only `sizes` keeps working.
+
+A drag reports each pointer move it applies, and commits each one before it handles the next pointer event. Every
+`'pointer'` notification of a drag — the last move held back by the 8 ms throttle included — therefore reaches
+`onLayout` before the handle calls `onDragging(false)`, however the drag ends (release, `pointercancel`, lost pointer
+capture or unmount). Pair `'pointer'` with `onDragging(false)` to act once when the drag ends; a key press is a
+complete change of its own and never calls `onDragging`.
+
+```tsx
+const saveWidth = (width: number) => localStorage.setItem("tree-width", String(width))
+const draggedWidth = useRef<number | null>(null)
+
+<PanelGroup
+    direction="horizontal"
+    onLayout={(sizes, { source }) => {
+        // A container resize redistributes the same preference, so only the reader's own moves are saved.
+        if (source === "keyboard") {
+            saveWidth(sizes[0])
+        } else if (source === "pointer") {
+            draggedWidth.current = sizes[0]
+        }
+    }}>
+    <Panel id="tree" defaultSize={{ value: 30, unit: "percentage" }} />
+    <PanelResizeHandle
+        onDragging={(isDragging) => {
+            // Every move of the drag has been reported by now, so this is the width the drag ended on.
+            if (!isDragging && draggedWidth.current !== null) {
+                saveWidth(draggedWidth.current)
+                draggedWidth.current = null
+            }
+        }}
+    />
+    <Panel id="content" defaultSize={{ value: 70, unit: "percentage" }} />
+</PanelGroup>
+```
+
 ## Layout Persistence
 
 When `autoSaveId` is provided to `PanelGroup`, the layout is written to `localStorage` under the key

package/dist/{GlobalDebugOverlay-DQtUdNeF.js → GlobalDebugOverlay-CIiVujEL.js}

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { useState as A } from "react";
 import { createPortal as P } from "react-dom";
 import { useDebugOverlayOwnerId as R, useDebugOverlaySnapshot as T } from "./debugOverlayStore-D7FT6zPE.js";
-import { P as Y } from "./index-DZ0itiBD.js";
+import { P as Y } from "./index-DlQDkOjq.js";
 const s = (a, n) => typeof a != "number" || !Number.isFinite(a) ? "—" : `${(a < 0 ? 0 : a).toFixed(8)}${n}`, w = {
   position: "fixed",
   left: "50%",

package/dist/{GlobalDebugOverlay-Cf3GOn2A.cjs → GlobalDebugOverlay-DA1__b7e.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("react"),P=require("react-dom"),x=require("./debugOverlayStore-DY09saU8.cjs"),R=require("./index-DqATP_BA.cjs"),n=(o,i)=>typeof o!="number"||!Number.isFinite(o)?"—":`${(o<0?0:o).toFixed(8)}${i}`,T={position:"fixed",left:"50%",bottom:"20px",transform:"translate(-50%, 0)",zIndex:100,maxWidth:"min(90vw, 1120px)",width:"100%",borderRadius:"14px",backgroundColor:"rgba(15, 23, 42, 0.72)",color:"#e2e8f0",fontFamily:"monospace",fontSize:"11px",lineHeight:1.6,boxShadow:"0 22px 45px rgba(15,23,42,0.45)",border:"1px solid rgba(148, 163, 184, 0.22)",backdropFilter:"blur(10px)",WebkitBackdropFilter:"blur(10px)",pointerEvents:"auto",overflow:"auto"},Y={display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:"12px"},w={display:"flex",flexDirection:"column",gap:"4px"},D={padding:"6px 10px",borderRadius:"9999px",border:"1px solid rgba(148, 163, 184, 0.35)",color:"#e2e8f0",fontWeight:600,fontSize:"10px",letterSpacing:"0.03em",textTransform:"uppercase",cursor:"pointer",transition:"background-color 0.18s ease, border-color 0.18s ease"},C={padding:"10px 12px",borderRadius:"10px",backgroundColor:"rgba(30, 41, 59, 0.55)",border:"1px solid rgba(148, 163, 184, 0.18)",display:"flex",flexDirection:"column",gap:"10px"},N={padding:"8px 10px",borderRadius:"8px",backgroundColor:"rgba(15, 23, 42, 0.55)",border:"1px solid rgba(148, 163, 184, 0.16)",display:"flex",flexDirection:"column",gap:"4px"},p={display:"flex",justifyContent:"space-between",alignItems:"center",gap:"6px"},k={display:"grid",gridTemplateColumns:"auto 1fr",gap:"2px 10px",color:"#e2e8f0"},G={padding:"2px 6px",borderRadius:"9999px",fontSize:"10px",textTransform:"uppercase"},I=({groupId:o})=>x.useDebugOverlayOwnerId()!==o?null:e.jsx(u,{}),u=()=>{const i=x.useDebugOverlaySnapshot().groups,[t,g]=A.useState(!0);if(i.length===0||typeof document>"u")return null;const b=i.reduce((s,a)=>s+a.panels.length,0),h=i.reduce((s,a)=>s+(a.handles?.length??0),0),f=()=>g(s=>!s),m=e.jsxs("div",{style:{...T,padding:t?"10px 18px":"14px 18px",maxHeight:t?"52px":"min(65vh, 520px)",transition:"max-height 0.24s ease, padding 0.24s ease"},children:[e.jsxs("div",{style:{...Y,marginBottom:t?0:"12px"},children:[e.jsxs("div",{style:w,children:[e.jsx("span",{style:{fontWeight:700,fontSize:"12px",letterSpacing:"0.03em"},children:"Panel Overview"}),e.jsxs("span",{style:{color:"#cbd5f5"},children:["groups: ",i.length," / panels: ",b," / resizers: ",h]})]}),e.jsx("button",{type:"button",onClick:f,style:{...D,backgroundColor:t?"rgba(59, 130, 246, 0.2)":"rgba(71, 85, 105, 0.45)"},title:t?"Panel Overview を開く":"Panel Overview を閉じる",children:t?"開く":"閉じる"})]}),!t&&e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"12px",maxHeight:"45vh",overflowY:"auto",paddingRight:"6px"},children:i.map((s,a)=>{const l=s.direction==="horizontal"?s.containerSize.width:s.containerSize.height;return e.jsxs("div",{style:C,children:[e.jsxs("div",{style:{...p,flexWrap:"wrap",gap:"10px",color:"#dbeafe"},children:[e.jsxs("span",{style:{fontWeight:600,fontSize:"11px",letterSpacing:"0.02em",textTransform:"uppercase"},children:["group ",a+1,": ",s.displayName]}),e.jsxs("span",{children:["direction: ",s.direction," / container: ",n(s.containerSize.width,"px")," × ",n(s.containerSize.height,"px")]})]}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(220px, 1fr))",gap:"10px"},children:s.panels.map((r,y)=>{const d=r.measuredPixelSize??r.size,S=r.size,j=n(S,"px"),v=l>0?r.size/l*100:void 0,E=r.measuredPercentageSize!==void 0?r.measuredPercentageSize:l>0?d/l*100:void 0,c=r.collapsed||d<=R.PANEL_SNAP_THRESHOLD,O=r.collapsed?"collapsed":c?"hidden":"visible",z=n(v,"%"),L=n(E,"%"),_=n(d,"px");return e.jsxs("div",{style:N,children:[e.jsxs("div",{style:p,children:[e.jsx("span",{style:{flex:1,minWidth:0,overflow:"hidden",textOverflow:"ellipsis"},children:r.id}),e.jsx("span",{style:{...G,backgroundColor:r.collapsed?"rgba(251, 113, 133, 0.25)":c?"rgba(250, 204, 21, 0.25)":"rgba(74, 222, 128, 0.25)",color:r.collapsed?"#fecdd3":c?"#fef08a":"#bbf7d0"},children:O})]}),e.jsxs("div",{style:k,children:[e.jsx("span",{children:"size (state):"}),e.jsx("span",{children:j}),e.jsx("span",{children:"size (measured):"}),e.jsx("span",{children:_}),e.jsx("span",{children:"percentage (state):"}),e.jsx("span",{children:z}),e.jsx("span",{children:"preference:"}),e.jsx("span",{children:r.sizeUnit==="pixels"?n(r.preferredPixelSize,"px"):n(r.preferredPercentageSize,"%")}),e.jsx("span",{children:"percentage (measured):"}),e.jsx("span",{children:L}),e.jsx("span",{children:"unit:"}),e.jsx("span",{children:r.sizeUnit}),e.jsx("span",{children:"min:"}),e.jsx("span",{children:r.minSize!==void 0?JSON.stringify(r.minSize):"—"}),e.jsx("span",{children:"max:"}),e.jsx("span",{children:r.maxSize!==void 0?JSON.stringify(r.maxSize):"—"}),e.jsx("span",{children:"priority:"}),e.jsx("span",{children:r.pixelAdjustPriority??"—"}),e.jsx("span",{children:"flex priority:"}),e.jsx("span",{children:r.flexAdjustPriority??"—"})]})]},r.id||y)})})]},s.groupId)})})]});return P.createPortal(m,document.body)};exports.GlobalDebugOverlay=u;exports.GlobalDebugOverlayGate=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("react"),P=require("react-dom"),x=require("./debugOverlayStore-DY09saU8.cjs"),R=require("./index-BplkuFjn.cjs"),n=(o,i)=>typeof o!="number"||!Number.isFinite(o)?"—":`${(o<0?0:o).toFixed(8)}${i}`,T={position:"fixed",left:"50%",bottom:"20px",transform:"translate(-50%, 0)",zIndex:100,maxWidth:"min(90vw, 1120px)",width:"100%",borderRadius:"14px",backgroundColor:"rgba(15, 23, 42, 0.72)",color:"#e2e8f0",fontFamily:"monospace",fontSize:"11px",lineHeight:1.6,boxShadow:"0 22px 45px rgba(15,23,42,0.45)",border:"1px solid rgba(148, 163, 184, 0.22)",backdropFilter:"blur(10px)",WebkitBackdropFilter:"blur(10px)",pointerEvents:"auto",overflow:"auto"},Y={display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:"12px"},w={display:"flex",flexDirection:"column",gap:"4px"},D={padding:"6px 10px",borderRadius:"9999px",border:"1px solid rgba(148, 163, 184, 0.35)",color:"#e2e8f0",fontWeight:600,fontSize:"10px",letterSpacing:"0.03em",textTransform:"uppercase",cursor:"pointer",transition:"background-color 0.18s ease, border-color 0.18s ease"},C={padding:"10px 12px",borderRadius:"10px",backgroundColor:"rgba(30, 41, 59, 0.55)",border:"1px solid rgba(148, 163, 184, 0.18)",display:"flex",flexDirection:"column",gap:"10px"},N={padding:"8px 10px",borderRadius:"8px",backgroundColor:"rgba(15, 23, 42, 0.55)",border:"1px solid rgba(148, 163, 184, 0.16)",display:"flex",flexDirection:"column",gap:"4px"},p={display:"flex",justifyContent:"space-between",alignItems:"center",gap:"6px"},k={display:"grid",gridTemplateColumns:"auto 1fr",gap:"2px 10px",color:"#e2e8f0"},G={padding:"2px 6px",borderRadius:"9999px",fontSize:"10px",textTransform:"uppercase"},I=({groupId:o})=>x.useDebugOverlayOwnerId()!==o?null:e.jsx(u,{}),u=()=>{const i=x.useDebugOverlaySnapshot().groups,[t,g]=A.useState(!0);if(i.length===0||typeof document>"u")return null;const b=i.reduce((s,a)=>s+a.panels.length,0),h=i.reduce((s,a)=>s+(a.handles?.length??0),0),f=()=>g(s=>!s),m=e.jsxs("div",{style:{...T,padding:t?"10px 18px":"14px 18px",maxHeight:t?"52px":"min(65vh, 520px)",transition:"max-height 0.24s ease, padding 0.24s ease"},children:[e.jsxs("div",{style:{...Y,marginBottom:t?0:"12px"},children:[e.jsxs("div",{style:w,children:[e.jsx("span",{style:{fontWeight:700,fontSize:"12px",letterSpacing:"0.03em"},children:"Panel Overview"}),e.jsxs("span",{style:{color:"#cbd5f5"},children:["groups: ",i.length," / panels: ",b," / resizers: ",h]})]}),e.jsx("button",{type:"button",onClick:f,style:{...D,backgroundColor:t?"rgba(59, 130, 246, 0.2)":"rgba(71, 85, 105, 0.45)"},title:t?"Panel Overview を開く":"Panel Overview を閉じる",children:t?"開く":"閉じる"})]}),!t&&e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"12px",maxHeight:"45vh",overflowY:"auto",paddingRight:"6px"},children:i.map((s,a)=>{const l=s.direction==="horizontal"?s.containerSize.width:s.containerSize.height;return e.jsxs("div",{style:C,children:[e.jsxs("div",{style:{...p,flexWrap:"wrap",gap:"10px",color:"#dbeafe"},children:[e.jsxs("span",{style:{fontWeight:600,fontSize:"11px",letterSpacing:"0.02em",textTransform:"uppercase"},children:["group ",a+1,": ",s.displayName]}),e.jsxs("span",{children:["direction: ",s.direction," / container: ",n(s.containerSize.width,"px")," × ",n(s.containerSize.height,"px")]})]}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(220px, 1fr))",gap:"10px"},children:s.panels.map((r,y)=>{const d=r.measuredPixelSize??r.size,S=r.size,j=n(S,"px"),v=l>0?r.size/l*100:void 0,E=r.measuredPercentageSize!==void 0?r.measuredPercentageSize:l>0?d/l*100:void 0,c=r.collapsed||d<=R.PANEL_SNAP_THRESHOLD,O=r.collapsed?"collapsed":c?"hidden":"visible",z=n(v,"%"),L=n(E,"%"),_=n(d,"px");return e.jsxs("div",{style:N,children:[e.jsxs("div",{style:p,children:[e.jsx("span",{style:{flex:1,minWidth:0,overflow:"hidden",textOverflow:"ellipsis"},children:r.id}),e.jsx("span",{style:{...G,backgroundColor:r.collapsed?"rgba(251, 113, 133, 0.25)":c?"rgba(250, 204, 21, 0.25)":"rgba(74, 222, 128, 0.25)",color:r.collapsed?"#fecdd3":c?"#fef08a":"#bbf7d0"},children:O})]}),e.jsxs("div",{style:k,children:[e.jsx("span",{children:"size (state):"}),e.jsx("span",{children:j}),e.jsx("span",{children:"size (measured):"}),e.jsx("span",{children:_}),e.jsx("span",{children:"percentage (state):"}),e.jsx("span",{children:z}),e.jsx("span",{children:"preference:"}),e.jsx("span",{children:r.sizeUnit==="pixels"?n(r.preferredPixelSize,"px"):n(r.preferredPercentageSize,"%")}),e.jsx("span",{children:"percentage (measured):"}),e.jsx("span",{children:L}),e.jsx("span",{children:"unit:"}),e.jsx("span",{children:r.sizeUnit}),e.jsx("span",{children:"min:"}),e.jsx("span",{children:r.minSize!==void 0?JSON.stringify(r.minSize):"—"}),e.jsx("span",{children:"max:"}),e.jsx("span",{children:r.maxSize!==void 0?JSON.stringify(r.maxSize):"—"}),e.jsx("span",{children:"priority:"}),e.jsx("span",{children:r.pixelAdjustPriority??"—"}),e.jsx("span",{children:"flex priority:"}),e.jsx("span",{children:r.flexAdjustPriority??"—"})]})]},r.id||y)})})]},s.groupId)})})]});return P.createPortal(m,document.body)};exports.GlobalDebugOverlay=u;exports.GlobalDebugOverlayGate=I;

package/dist/hooks.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from "react";
-import { PanelCollapseDirection, PanelGroupProps, PanelMeasurement, PanelRegistration, ResizeHandleLayoutData } from "./types";
+import { PanelCollapseDirection, PanelGroupProps, PanelMeasurement, PanelRegistration, PanelRequestSource, ResizeHandleLayoutData } from "./types";
 export declare const useResizablePanels: ({ direction, style, onLayout, autoSaveId, showDebugInfo }: PanelGroupProps) => {
     groupRef: import("react").RefObject<HTMLDivElement | null>;
     contextValue: {
@@ -10,9 +10,9 @@ export declare const useResizablePanels: ({ direction, style, onLayout, autoSave
         showDebugInfo: boolean;
         registerPanel: (panel: PanelRegistration) => void;
         unregisterPanel: (id: string) => void;
-        resizePanels: (startId: string, endId: string, startSize: number) => void;
-        collapsePanel: (id: string, from: PanelCollapseDirection) => void;
-        expandPanel: (id: string, from: PanelCollapseDirection, targetSize?: number) => void;
+        resizePanels: (startId: string, endId: string, startSize: number, source?: PanelRequestSource) => void;
+        collapsePanel: (id: string, from: PanelCollapseDirection, source?: PanelRequestSource) => void;
+        expandPanel: (id: string, from: PanelCollapseDirection, targetSize?: number, source?: PanelRequestSource) => void;
         getPanel: (id: string) => import("./types").PanelLayoutData | undefined;
         reportPanelMeasurement: (panelId: string, measurement: PanelMeasurement | null) => void;
         panelMeasurements: Record<string, PanelMeasurement>;

package/dist/index-BplkuFjn.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("react"),L=require("react/jsx-runtime"),we=require("tailwind-merge"),Kn=require("react-dom"),zn=12,C=1e-6,Yn=8,Xn=6,Zn=48,Jn=80,Qn=2,et=32,nt=64,tt=8,rt=8,mn=10,Rn=.05,wn=10,ot=.05,it=20,st=.05,lt=(e,n=0)=>{if(!Number.isFinite(e))return e;const t=10**n,r=e*t,o=Math.floor(r),i=r-o,l=Number.EPSILON*Math.max(1,Math.abs(r));return i<.5-l?o/t:i>.5+l?(o+1)/t:(o%2===0?o:o+1)/t},at=6,Ye=(e,n)=>n<=0?0:lt(e/n*100,at),ct=(e,n)=>n<=0?0:e/100*n,In=(e,n="percentage")=>{if(e!==void 0)return typeof e=="number"?{value:e,unit:n}:e},je=(e,n,t)=>e===void 0?n:typeof e=="number"?e/100*t:e.unit==="pixels"?e.value:e.value/100*t,Ne=(e,n,t)=>Math.min(Math.max(e,n),t),Xe=e=>!Number.isFinite(e)||e<=0?0:Math.max(0,Math.min(zn,wn,e*Rn)),pe=e=>{if(!e)return 0;const n=Number.parseFloat(e);return Number.isFinite(n)?n:0},Se=(e,n,t)=>{const r=n==="horizontal",o=typeof window<"u"?window.getComputedStyle(e):null,i=o?r?pe(o.paddingLeft)+pe(o.paddingRight):pe(o.paddingTop)+pe(o.paddingBottom):0,l=o?r?pe(o.borderLeftWidth)+pe(o.borderRightWidth):pe(o.borderTopWidth)+pe(o.borderBottomWidth):0,a=t?.contentBoxSize?.[0],p=a?r?a.inlineSize:a.blockSize:void 0,d=r?e.clientWidth:e.clientHeight,g=d>0?Math.max(0,d-i):Math.max(0,(r?e.offsetWidth:e.offsetHeight)-i-l),u=p??g;return{content:Math.max(0,u),border:Math.max(0,u+i+l)}},ut="[data-panel-group-direction]",Ue="[data-panel-id], [data-resize-handle-anchor]",dt="[data-panel-id]",Ie=e=>e?.closest(ut)??null,Ze=e=>Array.from(e.querySelectorAll(Ue)).filter(n=>{if(Ie(n)!==e)return!1;const t=n.parentElement?.closest(dt);return!(t&&e.contains(t))}),pt=e=>{const n=t=>{for(const r of Array.from(t))if(r instanceof Element&&(r.matches(Ue)||r.querySelector(Ue)!==null))return!0;return!1};return e.some(t=>n(t.addedNodes)||n(t.removedNodes))},ft=(e,n)=>{if(typeof window>"u")return 1;const t=n==="horizontal",r=e.getBoundingClientRect(),o=t?r.width:r.height,i=window.getComputedStyle(e),l=t?i.width:i.height;if(!l.endsWith("px"))return 1;const a=Number.parseFloat(l);return o>0&&Number.isFinite(a)&&a>0?o/a:1},We=(e,n)=>{try{localStorage.setItem(`panel-layout-${e}`,JSON.stringify(n))}catch(t){console.warn("Failed to save panel layout:",t)}},Nn=e=>{try{const n=localStorage.getItem(`panel-layout-${e}`);if(!n)return null;const t=JSON.parse(n);if(!Array.isArray(t))return null;const r=o=>typeof o=="object"&&o!==null&&typeof o.id=="string"&&Number.isFinite(o.size);return t.every(r)?t:null}catch(n){return console.warn("Failed to load panel layout:",n),null}},qe=0,Mn=1,_e=e=>Number.isFinite(e)&&e>0?e:0,Z=e=>e.sizeUnit==="pixels",fe=(e,n)=>{const t=Math.max(0,_e(je(e.minSize,0,n))),r=Math.max(t,_e(je(e.maxSize,n,n)));return{min:t,max:r}},ht=(e,n)=>{const t=e.map(o=>o.min),r=e.map(()=>!1);for(;;){let o=0,i=0,l=0;for(let u=0;u<e.length;u+=1){if(r[u]){i+=t[u];continue}l+=1,o+=e[u].weight}if(l===0)return t;const a=n-i;if(o<=0){for(let u=0;u<e.length;u+=1)r[u]||(t[u]=e[u].min);return t}const p=Math.max(0,a/o);let d=0;for(let u=0;u<e.length;u+=1){if(r[u])continue;const I=p*e[u].weight,h=Ne(I,e[u].min,e[u].max);t[u]=h,d+=h-I}let g=!1;for(let u=0;u<e.length;u+=1){if(r[u])continue;const I=p*e[u].weight;d>C&&t[u]>I+C?(r[u]=!0,t[u]=e[u].min,g=!0):d<-C&&t[u]<I-C&&(r[u]=!0,t[u]=e[u].max,g=!0)}if(!g)return t}},mt=(e,n,t)=>{const{min:r,max:o}=fe(e,t);if(Z(e))return{index:n,weight:0,target:Ne(_e(e.preferredPixelSize),r,o),priority:e.pixelAdjustPriority??0,tier:qe,min:r,max:o};const i=_e(e.preferredPercentageSize),l=e.flexAdjustPriority!==void 0;return{index:n,weight:i,target:l?Ne(i/100*t,r,o):null,priority:e.flexAdjustPriority??0,tier:Mn,min:r,max:o}},gn=(e,n,t,r)=>{let o=r;for(const i of e){if(o<=C)break;const l=t(i)-n[i.index];if(l<=0)continue;const a=Math.min(l,o);n[i.index]+=a,o-=a}return o},Ve=(e,n,t)=>{if(e.length===0||t<=C)return t;const r=e.map(l=>({...l,min:n[l.index]})),o=ht(r,t+r.reduce((l,a)=>l+a.min,0));let i=0;for(let l=0;l<e.length;l+=1)i+=o[l]-n[e[l].index],n[e[l].index]=o[l];return t-i},gt=(e,n,t)=>Ve(e.map(r=>({...r,weight:1})),n,t),xt=(e,n)=>e.tier!==n.tier?e.tier-n.tier:e.priority!==n.priority?n.priority-e.priority:e.index-n.index,Cn=(e,n)=>{const t=e.map(()=>0);if(!Number.isFinite(n)||n<=0||e.length===0)return{sizes:t,violation:null};const r=[];for(let h=0;h<e.length;h+=1){const F=e[h];F.collapsed||r.push(mt(F,h,n))}if(r.length===0)return{sizes:t,violation:null};let o=0,i=0;for(const h of r)t[h.index]=h.min,o+=h.min,i+=h.max;const l=St(o,i,n);let a=n-o;if(a<=C)return{sizes:t,violation:l};const p=r.filter(h=>h.target!==null).sort(xt),d=r.filter(h=>h.target===null&&h.weight>0),g=r.filter(h=>h.tier!==qe&&h.weight<=0),u=p.filter(h=>h.tier===Mn),I=p.filter(h=>h.tier===qe);return a=gn(p,t,h=>h.target??h.min,a),a=Ve(d,t,a),a=Ve(u,t,a),a=gn(I,t,h=>h.max,a),a=gt(g,t,a),{sizes:t,violation:l}},St=(e,n,t)=>e-t>C?{reason:"minimum-exceeded",totalMinimumSize:e,totalMaximumSize:n,availableContainerSize:t}:t-n>C?{reason:"maximum-insufficient",totalMinimumSize:e,totalMaximumSize:n,availableContainerSize:t}:null,Je=s.createContext(null),Ae=()=>{const e=s.useContext(Je);if(!e)throw new Error("usePanelGroup must be used within a PanelGroup");return e};var De=(e=>(e[e.DEBUG=0]="DEBUG",e[e.INFO=1]="INFO",e[e.WARN=2]="WARN",e[e.ERROR=3]="ERROR",e[e.NONE=4]="NONE",e))(De||{});const X=class X{constructor(n=2,t="[resize-panels]",r=console){this.level=n,this.prefix=t,this.impl=r,X.instances.add(this)}static setLevel(n){for(const t of X.instances)t.setLevel(n)}setLevel(n){this.level=n}static setImplementation(n){for(const t of X.instances)t.setImplementation(n)}setImplementation(n){this.impl=n}static setPrefix(n){for(const t of X.instances)t.setPrefix(n)}setPrefix(n){this.prefix=n}enabledFor(n){return this.level<=n}formatMessage(n){return typeof n=="string"?[`${this.prefix} ${n}`]:[this.prefix,n]}static debug(n,...t){X.instance.debug(n,...t)}debug(n,...t){this.level<=0&&this.impl.debug(...this.formatMessage(n),...t)}static info(n,...t){X.instance.info(n,...t)}info(n,...t){this.level<=1&&this.impl.info(...this.formatMessage(n),...t)}static warn(n,...t){X.instance.warn(n,...t)}warn(n,...t){this.level<=2&&this.impl.warn(...this.formatMessage(n),...t)}static error(n,...t){X.instance.error(n,...t)}error(n,...t){this.level<=3&&this.impl.error(...this.formatMessage(n),...t)}};X.instances=new Set,X.instance=new X(2,"[resize-panels]");let Me=X;const vn=new Me(De.INFO,"[resize-panels]"),Ln={containerSize:0,panels:[],violation:null},xn=(e,n)=>e===null||n===null?e===n:e.reason===n.reason&&Math.abs(e.totalMinimumSize-n.totalMinimumSize)<=C&&Math.abs(e.totalMaximumSize-n.totalMaximumSize)<=C&&Math.abs(e.availableContainerSize-n.availableContainerSize)<=C,le=(e,n)=>{const{sizes:t,violation:r}=Cn(e,n);let o=!1;const i=e.map((a,p)=>{const d=a.collapsed?0:t[p];return Math.abs(a.size-d)<=C?a:(o=!0,{...a,size:d})}),l={containerSize:n,panels:o?i:e,violation:r};return bt(l),l},_n=e=>{if(e.containerSize<=0||e.violation!==null)return null;let n=0,t=0;for(const o of e.panels)o.collapsed||(n+=o.size,t+=1);if(t===0)return null;const r=C*Math.max(1,e.containerSize);return!Number.isFinite(n)||Math.abs(n-e.containerSize)>r?{allocatedTotal:n,containerSize:e.containerSize}:null},bt=e=>{const n=_n(e);n&&vn.error("Allocated sizes do not fill the container.",{...n,panels:e.panels.map(t=>({id:t.id,size:t.size,collapsed:t.collapsed}))})},ae=(e,n)=>e.panels===n.panels&&e.containerSize===n.containerSize&&xn(e.violation,n.violation)?e:{containerSize:n.containerSize,panels:n.panels,violation:xn(e.violation,n.violation)?e.violation:n.violation},yt=(e,n)=>{const t=e.sizeUnit==="pixels"?e.preferredPixelSize:e.preferredPercentageSize;return{...e,size:0,collapsed:e.collapsed,collapsedByDirection:e.collapsed?n:null,preferenceBeforeCollapse:t,authoredPreference:t}},Ge=e=>e.collapseFromStart?"start":e.collapseFromEnd?"end":null,Pt=(e,n)=>{if(n<=0)return e;const t=Xe(n);return e.map(r=>{if(r.collapsed)return r;const o=Z(r)?r.size:r.size/n*100,i=Z(r)?r.preferredPixelSize:r.preferredPercentageSize,l=r.size>t?o:r.preferenceBeforeCollapse;return i===o&&l===r.preferenceBeforeCollapse?r:Z(r)?{...r,preferredPixelSize:o,preferenceBeforeCollapse:l}:{...r,preferredPercentageSize:o,preferenceBeforeCollapse:l}})},Ke=(e,n,t)=>{if(Z(e)){const o=Math.max(0,n);return{...e,preferredPixelSize:o,preferenceBeforeCollapse:o}}if(t<=0)return e;const r=Math.max(0,n/t*100);return{...e,preferredPercentageSize:r,preferenceBeforeCollapse:r}},An=(e,n)=>{const t=e.collapsed?e.preferenceBeforeCollapse:Z(e)?e.preferredPixelSize:e.preferredPercentageSize;return Z(e)?t:t/100*n},Et=(e,n,t,r)=>{const o=Math.max(0,Math.min(t,r)),i=e.filter(d=>d.id!==n&&!d.collapsed&&!Z(d)),l=e.reduce((d,g)=>g.id!==n&&!g.collapsed&&Z(g)?d+g.size:d,0),a=i.reduce((d,g)=>d+g.size,0),p=Math.max(0,r-o-l);return e.map(d=>{if(d.id===n)return Ke(d,o,r);if(d.collapsed||Z(d)||i.length===0)return d;const g=a>0?d.size/a*p:p/i.length;return Ke(d,g,r)})},Dn=(e,n)=>{switch(n.type){case"SET_CONTAINER_SIZE":return!Number.isFinite(n.containerSize)||n.containerSize<0||n.containerSize===e.containerSize?e:ae(e,le(e.panels,n.containerSize));case"REGISTER_PANEL":{const t=e.panels.findIndex(u=>u.id===n.panel.id);if(t===-1){const u=[...e.panels,yt(n.panel,Ge(n.panel))];return ae(e,le(u,e.containerSize))}const r=e.panels[t],o=n.panel.sizeUnit==="pixels"?n.panel.preferredPixelSize:n.panel.preferredPercentageSize,i=o!==r.authoredPreference||n.panel.sizeUnit!==r.sizeUnit,l=r.collapsedByDirection==="start"?n.panel.collapseFromStart:r.collapsedByDirection==="end"?n.panel.collapseFromEnd:!1,a=n.panel.collapseFromStart||n.panel.collapseFromEnd,p=r.collapsed&&a,d={...r,...n.panel,collapsed:p,collapsedByDirection:p?l?r.collapsedByDirection:Ge(n.panel):null,preferredPercentageSize:i?n.panel.preferredPercentageSize:r.preferredPercentageSize,preferredPixelSize:i?n.panel.preferredPixelSize:r.preferredPixelSize,preferenceBeforeCollapse:i?o:r.preferenceBeforeCollapse,authoredPreference:o},g=[...e.panels];return g[t]=d,ae(e,le(g,e.containerSize))}case"UNREGISTER_PANEL":{const t=e.panels.filter(r=>r.id!==n.id);return t.length===e.panels.length?e:ae(e,le(t,e.containerSize))}case"REORDER_PANELS":{if(n.ids.length!==e.panels.length||new Set(n.ids).size!==n.ids.length)return e;const t=new Map(e.panels.map(o=>[o.id,o])),r=[];for(const o of n.ids){const i=t.get(o);if(!i)return e;r.push(i)}return r.every((o,i)=>o===e.panels[i])?e:ae(e,le(r,e.containerSize))}case"RESIZE_PANELS":{const t=e.panels.findIndex(F=>F.id===n.startId),r=e.panels.findIndex(F=>F.id===n.endId);if(t===-1||r===-1)return e;const o=e.panels[t],i=e.panels[r];if(o.collapsed||i.collapsed||e.containerSize<=0||!Number.isFinite(n.startSize))return e;const l=o.size+i.size,a=fe(o,e.containerSize),p=fe(i,e.containerSize),d=Math.max(a.min,l-p.max),g=Math.min(a.max,l-p.min);if(d-g>C)return e;const u=Ne(n.startSize,d,Math.max(d,g)),I=l-u;if(Math.abs(u-o.size)<=C)return e;const h=[...e.panels];return h[t]={...o,size:u},h[r]={...i,size:I},ae(e,le(Pt(h,e.containerSize),e.containerSize))}case"COLLAPSE_PANEL":{const t=e.panels.findIndex(l=>l.id===n.id);if(t===-1)return e;const r=e.panels[t];if(!(n.from==="start"?r.collapseFromStart:r.collapseFromEnd)||r.collapsed)return e;const i=[...e.panels];return i[t]={...r,collapsed:!0,collapsedByDirection:n.from},ae(e,le(i,e.containerSize))}case"EXPAND_PANEL":{const t=e.panels.findIndex(p=>p.id===n.id);if(t===-1||n.targetSize!==void 0&&e.containerSize<=0)return e;const r=e.panels[t];if(!((n.from==="start"?r.collapseFromStart:r.collapseFromEnd)&&r.collapsed)||r.collapsedByDirection!==null&&r.collapsedByDirection!==n.from)return e;const i={...r,collapsed:!1,collapsedByDirection:null,preferredPixelSize:Z(r)?r.preferenceBeforeCollapse:r.preferredPixelSize,preferredPercentageSize:Z(r)?r.preferredPercentageSize:r.preferenceBeforeCollapse},l=[...e.panels];l[t]=i;const a=n.targetSize===void 0?l:Et(l,n.id,n.targetSize,e.containerSize);return ae(e,le(a,e.containerSize))}case"RESTORE_LAYOUT":{if(n.entries.length!==e.panels.length||e.containerSize<=0)return e;const t=new Map(n.entries.map(o=>[o.id,o]));if(e.panels.some(o=>!t.has(o.id)))return e;const r=e.panels.map(o=>{const i=t.get(o.id);if(!i)return o;const l=Ke(o,i.size,e.containerSize),a=o.collapseFromStart||o.collapseFromEnd;return i.collapsed&&a?{...l,collapsed:!0,collapsedByDirection:o.collapsedByDirection??Ge(o)}:l.collapsed?{...l,collapsed:!1,collapsedByDirection:null}:l});return vn.debug("restore layout",{containerSize:e.containerSize,entries:n.entries}),ae(e,le(r,e.containerSize))}default:return e}},zt={layout:Ln,source:null},Rt=e=>{switch(e.type){case"SET_CONTAINER_SIZE":return"container";case"REGISTER_PANEL":case"UNREGISTER_PANEL":case"REORDER_PANELS":return"panels";case"RESTORE_LAYOUT":return"restore";case"RESIZE_PANELS":case"COLLAPSE_PANEL":case"EXPAND_PANEL":return e.source}},wt=(e,n)=>{const t=Dn(e.layout,n);if(t===e.layout)return e;const r=t.panels!==e.layout.panels||t.containerSize>0!=e.layout.containerSize>0;return{layout:t,source:r?Rt(n):e.source}},It=new Me(De.INFO,"[resize-panels]"),Nt={pointer:!0,keyboard:!0,api:!0},Mt=e=>typeof e=="string"&&Object.hasOwn(Nt,e),$e=e=>{if(!Mt(e))throw new RangeError(`[resize-panels] A request source must be "pointer", "keyboard" or "api"; received ${typeof e=="string"?JSON.stringify(e):String(e)}.`);return e},Ct=200,vt="\0handle",On=({direction:e,style:n,onLayout:t,autoSaveId:r,showDebugInfo:o=!1})=>{const[{layout:i,source:l},a]=s.useReducer(wt,zt),[p,d]=s.useState({}),[g,u]=s.useState({}),I=s.useRef(null),[h,F]=s.useState(""),W=s.useRef({}),oe=s.useRef(t);oe.current=t,s.useLayoutEffect(()=>{const c=I.current;if(!c||typeof ResizeObserver>"u")return;let f=Number.NaN;const x=v=>{v!==f&&(f=v,a({type:"SET_CONTAINER_SIZE",containerSize:v}))},P=new ResizeObserver(v=>{x(Se(c,e,v[0]).content)});return P.observe(c),x(Se(c,e).content),()=>{P.disconnect(),a({type:"SET_CONTAINER_SIZE",containerSize:0})}},[e]);const y=i.panels,$=s.useRef(y);$.current=y;const b=s.useCallback(()=>{const c=I.current,f=$.current;if(!c)return;const x=Ze(c);if(F(v=>{const K=x.map(ie=>ie.dataset.panelId??vt).join("\0");return v===K?v:K}),f.length===0)return;const P=[];for(const v of x){const K=v.dataset.panelId;K!==void 0&&P.push(K)}if(new Set(P).size!==P.length){It.error("Duplicate panel id in one group.",{ids:P});return}P.length!==f.length||P.every((v,K)=>v===f[K].id)||a({type:"REORDER_PANELS",ids:P})},[]);s.useLayoutEffect(()=>{const c=I.current;if(!c||(b(),typeof MutationObserver>"u"))return;const f=new MutationObserver(x=>{pt(x)&&b()});return f.observe(c,{childList:!0,subtree:!0}),()=>{f.disconnect()}},[b]),s.useLayoutEffect(()=>{b()},[b,y]);const B=s.useMemo(()=>y.map(c=>c.size),[y]),E=i.containerSize>0;s.useLayoutEffect(()=>{!E||B.length===0||l===null||oe.current?.(B,{source:l})},[B,E,l]);const q=s.useRef(null);s.useEffect(()=>{if(!r||q.current===r||!E||y.length===0)return;q.current=r;const c=Nn(r);c&&a({type:"RESTORE_LAYOUT",entries:c})},[r,E,y.length]);const R=s.useRef(null);s.useEffect(()=>{if(!(r&&q.current===r&&E)||y.length===0)return;const c=y.map(x=>({id:x.id,size:An(x,i.containerSize),collapsed:x.collapsed}));R.current={id:r,entries:c};const f=setTimeout(()=>{R.current=null,We(r,c)},Ct);return()=>{clearTimeout(f)}},[r,y,i.containerSize,E]),s.useEffect(()=>()=>{const c=R.current;c&&(R.current=null,We(c.id,c.entries))},[]);const _=s.useCallback(c=>{const f=JSON.stringify(c);W.current[c.id]!==f&&(W.current[c.id]=f,a({type:"REGISTER_PANEL",panel:c}))},[]),M=s.useCallback(c=>{delete W.current[c],a({type:"UNREGISTER_PANEL",id:c}),d(f=>{if(!(c in f))return f;const x={...f};return delete x[c],x})},[]),J=s.useCallback((c,f,x,P="api")=>{a({type:"RESIZE_PANELS",startId:c,endId:f,startSize:x,source:$e(P)})},[]),A=s.useCallback((c,f,x="api")=>{a({type:"COLLAPSE_PANEL",id:c,from:f,source:$e(x)})},[]),z=s.useCallback((c,f,x,P="api")=>{a({type:"EXPAND_PANEL",id:c,from:f,targetSize:x,source:$e(P)})},[]),S=s.useCallback(c=>y.find(f=>f.id===c),[y]),j=s.useCallback((c,f)=>{d(x=>{if(f===null){if(!(c in x))return x;const v={...x};return delete v[c],v}const P=x[c];return P&&P.pixelSize===f.pixelSize&&P.percentageSize===f.percentageSize?x:{...x,[c]:f}})},[]),T=s.useCallback((c,f)=>{u(x=>{if(f===null){if(!(c in x))return x;const v={...x};return delete v[c],v}const P=x[c];return P&&P.thickness===f.thickness&&P.visible===f.visible&&P.direction===f.direction&&P.startPanelId===f.startPanelId&&P.endPanelId===f.endPanelId?x:{...x,[c]:f}})},[]),V=s.useMemo(()=>({direction:e,panels:y,containerSize:i.containerSize,layoutOrderKey:h,showDebugInfo:o,registerPanel:_,unregisterPanel:M,resizePanels:J,collapsePanel:A,expandPanel:z,getPanel:S,reportPanelMeasurement:j,panelMeasurements:p,reportHandleMeasurement:T,handleMeasurements:g,layoutConstraintViolation:i.violation}),[e,y,i.containerSize,h,i.violation,o,_,M,J,A,z,S,j,p,T,g]),ce=s.useMemo(()=>({width:"100%",height:"100%",minWidth:"0px",minHeight:"0px",overflow:"hidden",...n,display:"flex",flexDirection:e==="horizontal"?"row":"column",alignItems:"stretch",gap:"0px",position:"relative",boxSizing:"border-box",writingMode:"horizontal-tb"}),[e,n]);return{groupRef:I,contextValue:V,groupStyle:ce}},Lt=e=>{const{getPanel:n,collapsePanel:t,expandPanel:r}=Ae(),o=n(e),i=s.useCallback(p=>{t(e,p,"api")},[t,e]),l=s.useCallback((p,d)=>{r(e,p,d,"api")},[r,e]),a=s.useCallback((p,d)=>{o?.collapsed?l(p,d):i(p)},[o?.collapsed,i,l]);return s.useMemo(()=>({panel:o,isCollapsed:o?.collapsed??!1,canCollapseFromStart:o?.collapseFromStart??!1,canCollapseFromEnd:o?.collapseFromEnd??!1,collapse:i,expand:l,toggle:a}),[o,i,l,a])},_t=({panel:e,containerAxisSize:n,containerLabel:t})=>{if(!e)return{sizeDisplay:"-",preferenceDisplay:"-",boundsDisplay:"-",containerDisplay:"-",headlineLabel:"Unregistered",titleText:"Unregistered"};const r=e.sizeUnit==="pixels",o=`${e.size.toFixed(3)}px / ${Ye(e.size,n).toFixed(3)}%`,i=r?`${e.preferredPixelSize.toFixed(3)}px`:`${e.preferredPercentageSize.toFixed(3)}%`,l=fe(e,n),a=`${l.min.toFixed(1)} - ${l.max.toFixed(1)}px`,p=Number.isFinite(n)?`${n.toFixed(3)}px`:"-",d=r?"Fixed":"Flexible",g=[d,`${t}: ${p}`,`size: ${o}`,`preference: ${i}`,`bounds: ${a}`].join(`
+`);return{sizeDisplay:o,preferenceDisplay:i,boundsDisplay:a,containerDisplay:p,headlineLabel:d,titleText:g}},At=s.memo(({panel:e,containerAxisSize:n,direction:t})=>{const r=t==="horizontal"?"container width":"container height",{sizeDisplay:o,preferenceDisplay:i,boundsDisplay:l,containerDisplay:a,headlineLabel:p,titleText:d}=s.useMemo(()=>_t({panel:e,containerAxisSize:n,containerLabel:r}),[e,n,r]),g={position:"absolute",top:2,left:2,zIndex:30,pointerEvents:"none",maxWidth:"calc(100% - 4px)",padding:"2px 4px",borderRadius:4,border:"1px solid rgba(255,255,255,0.1)",backgroundColor:"rgba(15, 23, 42, 0.78)",color:"#e2e8f0",fontFamily:"ui-monospace, SFMono-Regular, Menlo, monospace",fontSize:10,lineHeight:1.35,whiteSpace:"pre",overflow:"hidden",textOverflow:"ellipsis"};return L.jsxs("div",{style:g,title:d,"data-panel-debug-info":"",children:[L.jsxs("div",{children:[p," · ",r,": ",a]}),L.jsxs("div",{children:["size: ",o]}),L.jsxs("div",{children:["preference: ",i]}),L.jsxs("div",{children:["bounds: ",l]})]})}),Sn=new Me(De.INFO,"[resize-panels]"),Dt={both:{collapseFromStart:!0,collapseFromEnd:!0},start:{collapseFromStart:!0,collapseFromEnd:!1},end:{collapseFromStart:!1,collapseFromEnd:!0}},Ot=e=>{if(!e)return{collapseFromStart:!1,collapseFromEnd:!1};const n=Dt[e.from];if(!n)throw new Error("Invalid collapsible configuration: unsupported 'from' value");return n},Tt=e=>{const n=Math.max(0,e.value);return e.unit==="pixels"?{sizeUnit:"pixels",preferredPixelSize:n,preferredPercentageSize:0}:{sizeUnit:"percentage",preferredPercentageSize:n,preferredPixelSize:0}},kt=({size:e,panel:n,registration:t,containerSize:r,isCollapsed:o})=>{if(o)return{flexBasis:"0px",flexGrow:0,flexShrink:0};if(!n||r<=0){const p=t.sizeUnit==="pixels";return{flexBasis:p?`${t.preferredPixelSize}px`:`${t.preferredPercentageSize}%`,flexGrow:p?0:t.preferredPercentageSize,flexShrink:p?0:1}}if(n.sizeUnit==="pixels")return{flexBasis:`${e}px`,flexGrow:0,flexShrink:0};const i=fe(n,r),l=e<i.max-C,a=l&&e>i.min+C;return{flexBasis:`${e}px`,flexGrow:l?n.preferredPercentageSize:0,flexShrink:a?1:0}},Ft=s.memo(({id:e,defaultSize:n={value:50,unit:"percentage"},minSize:t,maxSize:r,className:o,style:i,children:l,collapsible:a,defaultCollapsed:p=!1,pixelAdjustPriority:d,flexAdjustPriority:g,contentOverflow:u="auto",...I})=>{const{direction:h,registerPanel:F,unregisterPanel:W,getPanel:oe,containerSize:y,showDebugInfo:$,reportPanelMeasurement:b}=Ae(),B=s.useRef(null),E=s.useId(),R=s.useRef(e||`panel-${E}`).current;s.useEffect(()=>{e&&e!==R&&Sn.warn("Panel id prop change after mount is ignored.",{currentId:R,attemptedId:e})},[e,R]);const _=s.useMemo(()=>Ot(a),[a]),M=_.collapseFromStart||_.collapseFromEnd;s.useEffect(()=>{p&&!M&&Sn.warn("Panel defaultCollapsed is ignored because collapsible configuration is not provided.",{panelId:R})},[p,M,R]);const J=s.useMemo(()=>{const c=In(n)??{value:50,unit:"percentage"};return{id:R,...Tt(c),minSize:t,maxSize:r,..._,collapsed:M&&p,pixelAdjustPriority:d,flexAdjustPriority:g}},[R,n,t,r,_,M,p,d,g]);s.useLayoutEffect(()=>{F(J)},[F,J]),s.useLayoutEffect(()=>()=>{W(R)},[W,R]);const A=oe(R),z=A?.size??0,S=A?.collapsed??!1,j=s.useRef(y);j.current=y;const T=s.useCallback(()=>{const c=B.current;if(!c)return;const f=Se(c,h).border;b(R,{pixelSize:f,percentageSize:Ye(f,j.current)})},[h,R,b]);s.useEffect(()=>{if(!$){b(R,null);return}const c=B.current;if(!c||typeof ResizeObserver>"u"){T();return}const f=new ResizeObserver(T);return f.observe(c),T(),()=>{f.disconnect(),b(R,null)}},[$,T,R,b]);const V=s.useMemo(()=>{const c={overflow:"hidden",isolation:"isolate"},f=S?{...h==="horizontal"?{width:"0px"}:{height:"0px"},pointerEvents:"none",visibility:"hidden",display:"none"}:{};return{...c,...i,...kt({size:z,panel:A,registration:J,containerSize:y,isCollapsed:S}),order:0,margin:0,display:"flex",flexDirection:"column",position:"relative",boxSizing:"border-box",minWidth:0,minHeight:0,maxWidth:"none",maxHeight:"none",...h==="horizontal"?{height:"100%"}:{width:"100%"},...f}},[z,h,S,A,J,y,i]),ce=s.useMemo(()=>({flex:"1 1 auto",position:"relative",overflow:u,display:"flex",flexDirection:"column",minWidth:"0px",minHeight:"0px"}),[u]);return L.jsxs("div",{...I,ref:B,className:we.twMerge("panel",o),style:V,"data-panel-id":R,"data-panel-size":z,"data-panel-size-unit":A?.sizeUnit??"percentage","data-panel-collapsible":M,"data-panel-collapse-start":_.collapseFromStart,"data-panel-collapse-end":_.collapseFromEnd,"data-panel-collapsed":S,"aria-hidden":S,children:[L.jsx("div",{style:ce,children:l}),$&&L.jsx(At,{panel:A,containerAxisSize:y,direction:h})]})}),Bt=s.lazy(()=>Promise.resolve().then(()=>require("./GlobalDebugOverlay-DA1__b7e.cjs")).then(e=>({default:e.GlobalDebugOverlayGate}))),Ht=[],Gt={};let bn=0;const $t=()=>(bn+=1,`panel-group-${bn}`),jt=e=>{const n=e.reason==="minimum-exceeded",t=n?"Layout unavailable: minimum panel sizes exceed the container.":"Layout unavailable: panels cannot fill the container with their maximum sizes.",r=n?`Min required: ${Math.ceil(e.totalMinimumSize)}px | Available: ${Math.floor(e.availableContainerSize)}px`:`Max total: ${Math.floor(e.totalMaximumSize)}px | Needed: ${Math.floor(e.availableContainerSize)}px`;return{summary:t,detail:r}},Ut=(e,n)=>e.map(t=>{const r=n[t.id];return r?{...t,measuredPixelSize:r.pixelSize,measuredPercentageSize:r.percentageSize}:t}),yn=(e,n,t)=>{const r=Se(e,"horizontal"),o=Se(e,"vertical"),i=e.getBoundingClientRect(),l=r.content>0?r.content:n??i.width,a=o.content>0?o.content:t??i.height;return{width:l,height:a}},Wt=e=>{const{id:n,className:t,style:r,children:o,direction:i,onLayout:l,autoSaveId:a,showDebugInfo:p,...d}=e,{groupRef:g,contextValue:u,groupStyle:I}=On(e),[h,F]=s.useState({width:0,height:0}),W=u.layoutConstraintViolation,oe=!!W,y=s.useMemo(()=>{if(!W)return null;const{summary:z,detail:S}=jt(W);return L.jsxs("div",{className:"flex w-full flex-1 flex-col items-center justify-center gap-2 rounded-lg border border-slate-300 border-dashed bg-slate-100/70 px-6 py-8 text-center text-slate-600 text-sm dark:border-slate-600 dark:bg-slate-800/50 dark:text-slate-200","data-panel-group-placeholder":"constraint-violation",children:[L.jsx("span",{children:z}),L.jsx("span",{className:"text-slate-500 text-xs dark:text-slate-400",children:S})]})},[W]),$=s.useRef(null);$.current===null&&($.current=n??$t());const b=$.current,B=n??b,E=u.showDebugInfo&&u.panels.length>0,q=E?u.panels:Ht,R=E?u.panelMeasurements:Gt,_=s.useMemo(()=>{if(!E)return[];const z=Object.values(u.handleMeasurements);return z.length<=1?z:z.slice().sort((S,j)=>S.id.localeCompare(j.id))},[u.handleMeasurements,E]),M=h.width,J=h.height;s.useLayoutEffect(()=>{if(!E){F({width:0,height:0});return}if(typeof window>"u"||typeof ResizeObserver>"u")return;const z=g.current;if(!z)return;const S=T=>{F(V=>V.width===T.width&&V.height===T.height?V:T)},j=new ResizeObserver(T=>{for(const V of T){if(V.target!==z)continue;const ce=yn(z,V.contentRect.width,V.contentRect.height);S(ce)}});return j.observe(z),S(yn(z)),()=>{j.disconnect()}},[g,E]);const A=s.useMemo(()=>Ut(q,R),[q,R]);return s.useEffect(()=>{if(!E)return;let z=!1,S=null;return Promise.resolve().then(()=>require("./debugOverlayStore-DY09saU8.cjs")).then(j=>{z||(S=j,j.enableDebugOverlayGroup(b))}),()=>{z=!0,S&&(S.disableDebugOverlayGroup(b),S.removeDebugOverlayGroup(b))}},[E,b]),s.useEffect(()=>{if(!E)return;let z=!1;return Promise.resolve().then(()=>require("./debugOverlayStore-DY09saU8.cjs")).then(S=>{z||S.updateDebugOverlayGroup(b,{displayName:B,direction:i,containerSize:{width:M,height:J},panels:A,handles:_})}),()=>{z=!0}},[E,b,B,i,M,J,A,_]),L.jsxs(Je.Provider,{value:u,children:[L.jsxs("div",{...d,ref:g,className:we.twMerge("panel-group",i==="horizontal"?"flex-row":"flex-col",t),style:I,"data-panel-group-id":n,"data-panel-group-direction":i,children:[o,oe&&y?L.jsx("div",{className:"pointer-events-auto",style:{position:"absolute",inset:0,zIndex:60,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(248, 250, 252, 0.82)",backdropFilter:"blur(2px)"},children:y}):null]}),E&&L.jsx(s.Suspense,{fallback:null,children:L.jsx(Bt,{groupId:b})})]})},qt={display:"none",pointerEvents:"none",visibility:"hidden"},Vt={display:"none"},Re=(e,n)=>typeof e!="number"||!Number.isFinite(e)||e<=0?n:e,Kt=e=>{const n=Math.round(e);return n%2===0?n:n+1},Pn=e=>!e||typeof window>"u"?!1:window.getComputedStyle(e).direction==="rtl",En=(e,n,t)=>{const r=e.collapsed?0:e.size,o=n.collapsed?0:n.size,i=r+o;if(i<=0)return;const l=fe(e,t),a=fe(n,t),p=Math.max(l.min,i-a.max),d=Math.max(p,Math.min(l.max,i-a.min));if(e.collapsed)return{position:0,lower:0,upper:e.collapsedByDirection==="end"?Math.max(0,d):0,resizeLower:p,resizeUpper:d};if(n.collapsed){const I=n.collapsedByDirection==="start";return{position:i,lower:I?Math.min(i,p):i,upper:i,resizeLower:p,resizeUpper:d}}const g=Math.min(r,e.collapseFromEnd?0:p),u=Math.max(r,g,n.collapseFromStart?i:d);return{position:r,lower:g,upper:u,resizeLower:p,resizeUpper:d}},Yt=s.memo(e=>{const{id:n,disabled:t=!1,className:r,style:o,children:i,onDragging:l,thickness:a,indicator:p=!0,indicatorThickness:d,indicatorLength:g,indicatorBarThickness:u,indicatorBarLength:I,title:h,onPointerDown:F,onKeyDown:W,...oe}=e,{direction:y,resizePanels:$,getPanel:b,collapsePanel:B,expandPanel:E,panels:q,layoutOrderKey:R,reportHandleMeasurement:_,containerSize:M,layoutConstraintViolation:J}=Ae(),[A,z]=s.useState(!1),[S,j]=s.useState({start:null,end:null}),T=s.useRef(null),V=s.useRef(null),ce=s.useRef({getPanel:b,containerSize:M});ce.current={getPanel:b,containerSize:M};const c=s.useRef(""),f=s.useRef(""),x=s.useRef(null),P=s.useRef(null),v=s.useId(),K=s.useRef(n??`resize-handle-${v}`),ie=n??K.current,w=y==="horizontal",Oe=!!J,Q=t||Oe,en=s.useCallback(()=>{const m=T.current,Y=Ie(m);if(!(m&&Y))return;const k=Ze(Y),D=k.indexOf(m);let O="",U="";for(let H=D-1;H>=0;H-=1){const N=k[H].dataset.panelId;if(N!==void 0){O=N;break}}for(let H=D+1;H<k.length;H+=1){const N=k[H].dataset.panelId;if(N!==void 0){U=N;break}}O===c.current&&U===f.current||(c.current=O,f.current=U,j({start:O||null,end:U||null}))},[]);s.useEffect(()=>{en()},[en,R]),s.useEffect(()=>()=>{x.current?.()},[]);const nn=s.useCallback(m=>{if(Q||x.current||m.button!==0)return;const Y=b(c.current),k=b(f.current);if(!(Y&&k))return;m.preventDefault(),m.stopPropagation();const D=c.current,O=f.current,U=Y.size,H=Y.size+k.size,N=w?m.clientX:m.clientY,ee=Ie(T.current),ge=w&&Pn(ee)?-1:1,ne=ee?ft(ee,y):1,he=m.pointerId,Pe=m.currentTarget;Pe.setPointerCapture?.(he),z(!0),l?.(!0);let sn=0,Ee=null;const Vn=G=>{const xe=((w?G.clientX:G.clientY)-N)*ge/ne,ze=U+xe,Fe=H-ze,Le=ce.current,Be=Le.getPanel(D),He=Le.getPanel(O);if(!(Be&&He))return;const fn=Math.min(Le.containerSize*Rn,wn),hn=Math.min(Le.containerSize*ot,it);if(He.collapsed){Fe>hn&&E(O,"start",Fe,"pointer");return}if(Be.collapsed){ze>hn&&E(D,"end",ze,"pointer");return}if(He.collapseFromStart&&Fe<=fn){B(O,"start","pointer");return}if(Be.collapseFromEnd&&ze<=fn){B(D,"end","pointer");return}$(D,O,ze,"pointer")},ln=G=>{Kn.flushSync(()=>{Vn(G)})},an=G=>{if(G.pointerId!==he)return;G.preventDefault(),G.stopPropagation();const xe=performance.now();if(xe-sn<rt){Ee=G;return}sn=xe,Ee=null,ln(G)};let cn=!0;const ve=()=>{cn&&(cn=!1,x.current=null,z(!1),l?.(!1),document.removeEventListener("pointermove",an),document.removeEventListener("pointerup",un),document.removeEventListener("pointercancel",dn),Pe.removeEventListener("lostpointercapture",pn),Pe.hasPointerCapture?.(he)&&Pe.releasePointerCapture(he))},un=G=>{if(G.pointerId===he){if(Ee){const xe=Ee;Ee=null,ln(xe)}ve()}},dn=G=>{G.pointerId===he&&ve()},pn=G=>{G.pointerId===he&&ve()};document.addEventListener("pointermove",an),document.addEventListener("pointerup",un),document.addEventListener("pointercancel",dn),Pe.addEventListener("lostpointercapture",pn),x.current=ve},[Q,w,y,b,$,B,E,l]),tn=s.useCallback(m=>{if(Q)return;const Y=w?"ArrowLeft":"ArrowUp",k=w?"ArrowRight":"ArrowDown";if(m.key!==Y&&m.key!==k)return;const D=c.current,O=f.current,U=b(D),H=b(O);if(!(U&&H))return;const N=En(U,H,M);if(!N||N.upper-N.lower<=C)return;m.preventDefault(),m.stopPropagation();const ee=m.shiftKey?mn*5:mn,ge=w&&Pn(Ie(T.current))?-1:1,ne=(m.key===k?ee:-ee)*ge;if(U.collapsed){ne>0&&E(D,"end",void 0,"keyboard");return}if(H.collapsed){ne<0&&E(O,"start",void 0,"keyboard");return}if(ne<0&&U.collapseFromEnd&&N.position<=N.resizeLower+C){B(D,"end","keyboard");return}if(ne>0&&H.collapseFromStart&&N.position>=N.resizeUpper-C){B(O,"start","keyboard");return}$(D,O,U.size+ne,"keyboard")},[Q,w,b,$,B,E,M]),se=typeof p=="object"&&p!==null?p:void 0,Te=p===!1||se?.visible===!1,te=Math.max(1,Re(a,Yn)),Tn=w?Zn:Jn,kn=w?et:nt,ue=Math.min(te,Math.max(1,Re(d??se?.thickness,Xn))),me=Math.max(1,Re(g??se?.length,Tn)),be=Math.min(ue,Math.max(1,Re(u??se?.barThickness,Qn))),ye=Math.min(me,Math.max(1,Re(I??se?.barLength,kn))),de=s.useMemo(()=>{const m=Xe(M),Y=N=>{const ee=q[N];return ee?ee.collapsed||ee.size<=m:!1},k=(N,ee)=>{let ge=0;for(let ne=N;ne>=0&&ne<q.length&&Y(ne);ne+=ee)ge+=1;return ge},D=q.findIndex(N=>N.id===S.start),O=q.findIndex(N=>N.id===S.end),U=D>=0?k(D,-1):0,H=O>=0?k(O,1):0;return{groupSize:U+H+1,overlapIndex:U}},[S.start,S.end,q,M]),re=s.useMemo(()=>Oe?!0:de.groupSize<=1?!1:de.overlapIndex>0&&de.overlapIndex<de.groupSize-1,[de,Oe]),Ce=s.useMemo(()=>{if(de.groupSize<=1||re)return 0;const m=Kt(Math.max(tt,ue+4));return(de.overlapIndex===0?-.5:.5)*m},[de,re,ue]),Fn=s.useMemo(()=>{const m={position:"relative",flex:"0 0 0px",alignSelf:"stretch",order:0,margin:0,overflow:"visible",...w?{width:0,minWidth:0}:{height:0,minHeight:0}};return re?{...m,...qt}:m},[w,re]),rn=s.useMemo(()=>({"--rp-handle-thickness":`${te}px`,"--rp-indicator-thickness":`${ue}px`,"--rp-indicator-length":`${me}px`,"--rp-indicator-bar-thickness":`${be}px`,"--rp-indicator-bar-length":`${ye}px`}),[te,ue,me,be,ye]),Bn=s.useMemo(()=>({...rn,...o,position:"absolute",zIndex:20,touchAction:"none",...w?{insetBlockStart:0,insetInlineStart:`${-te/2}px`,width:`${te}px`,height:"100%"}:{insetInlineStart:0,insetBlockStart:`${-te/2}px`,height:`${te}px`,width:"100%"}}),[w,te,rn,o]),Hn=s.useMemo(()=>{if(re||Te)return Vt;const m={width:`${w?ue:me}px`,height:`${w?me:ue}px`,flexShrink:0};return Ce!==0&&(m.position="relative",w?m.insetInlineStart=`${Ce}px`:m.insetBlockStart=`${Ce}px`),m},[re,Te,w,ue,me,Ce]),Gn=s.useMemo(()=>({width:`${w?be:ye}px`,height:`${w?ye:be}px`,flexShrink:0}),[w,be,ye]),$n=s.useMemo(()=>we.twMerge("group absolute z-20 flex select-none items-center justify-center border-none bg-transparent transition-colors duration-150 overflow-visible",w?"cursor-col-resize h-full":"cursor-row-resize w-full",!Q&&"hover:bg-gray-200/70 dark:hover:bg-gray-700/70",!Q&&"active:bg-blue-300/60 dark:active:bg-blue-700/60",A&&"bg-blue-200/80 dark:bg-blue-800/60",Q&&"cursor-not-allowed opacity-50","focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50",r),[w,Q,A,r]),jn=s.useMemo(()=>we.twMerge("pointer-events-none flex items-center justify-center rounded-full bg-white text-slate-700 ring-1 ring-inset ring-white/80 backdrop-blur-sm transition-colors duration-150 shadow-[0_0_0_1px_rgba(255,255,255,0.85),0_1px_3px_rgba(15,23,42,0.18)]","dark:bg-slate-800/95 dark:text-slate-200 dark:ring-slate-500/60 dark:shadow-[0_0_0_1px_rgba(148,163,184,0.45),0_1px_3px_rgba(2,6,23,0.55)]",A&&"bg-blue-200/80 ring-blue-300 shadow-[0_0_0_1px_rgba(191,219,254,0.65),0_1px_4px_rgba(59,130,246,0.45)] dark:bg-blue-900/70 dark:ring-blue-400 dark:shadow-[0_0_0_1px_rgba(147,197,253,0.5),0_1px_4px_rgba(59,130,246,0.55)]",se?.className),[A,se?.className]),Un=s.useMemo(()=>we.twMerge("pointer-events-none rounded-full bg-slate-600 transition-colors duration-150 shadow-[0_0_0_1px_rgba(255,255,255,0.9)] dark:bg-slate-200 dark:shadow-[0_0_0_1px_rgba(15,23,42,0.55)]",A&&"bg-blue-500 dark:bg-blue-300",!Q&&"group-hover:bg-slate-700 dark:group-hover:bg-slate-100",se?.barClassName),[A,Q,se?.barClassName]);s.useEffect(()=>{if(ie===K.current)return;const m=K.current;K.current=ie,P.current=null,_(m,null)},[_,ie]),s.useEffect(()=>{const m={id:ie,thickness:re?0:te,direction:y,visible:!re&&te>st,startPanelId:S.start,endPanelId:S.end};P.current=m,_(ie,m)},[ie,te,re,y,S.start,S.end,_]),s.useEffect(()=>()=>{_(K.current,null)},[_]);const Wn=s.useCallback(m=>{F?.(m),m.defaultPrevented||nn(m)},[F,nn]),qn=s.useCallback(m=>{W?.(m),m.defaultPrevented||tn(m)},[W,tn]),on=`Resize ${w?"columns":"rows"} - Drag or use arrow keys to resize, drag to the edge to collapse/expand panels`,ke=s.useMemo(()=>{const m=S.start===null?void 0:b(S.start),Y=S.end===null?void 0:b(S.end);if(!(m&&Y)||M<=0)return;const k=En(m,Y,M);if(!k)return;const D=O=>Math.round(O/M*100);return{now:D(k.position),min:D(k.lower),max:D(k.upper)}},[S.start,S.end,b,M]);return L.jsx("div",{ref:T,style:Fn,"data-resize-handle-anchor":"",children:L.jsx("button",{...oe,type:"button",ref:V,className:$n,style:Bn,onPointerDown:Wn,onKeyDown:qn,disabled:Q,role:"separator","aria-orientation":w?"vertical":"horizontal","aria-valuenow":ke?.now,"aria-valuemin":ke?.min,"aria-valuemax":ke?.max,"aria-disabled":Q||void 0,"aria-hidden":re||void 0,"aria-label":oe["aria-label"]??on,"data-resize-handle-id":ie,title:h??on,children:i||!Te&&L.jsx("div",{className:jn,style:Hn,"data-resize-handle-indicator":"","aria-hidden":"true",children:L.jsx("span",{className:Un,style:Gn,"data-resize-handle-indicator-bar":"","aria-hidden":"true"})})})})}),Qe=e=>typeof CSS<"u"&&typeof CSS.escape=="function"?CSS.escape(e):e.replace(/["\\]/g,"\\$&"),Xt=e=>typeof document>"u"?null:document.querySelector(`[data-panel-id="${Qe(e)}"]`),Zt=e=>typeof document>"u"?null:document.querySelector(`[data-panel-group-id="${Qe(e)}"]`),Jt=e=>typeof document>"u"?null:document.querySelector(`[data-resize-handle-id="${Qe(e)}"]`);exports.PANEL_SNAP_THRESHOLD=zn;exports.Panel=Ft;exports.PanelGroup=Wt;exports.PanelGroupContext=Je;exports.PanelResizeHandle=Yt;exports.allocatePanelSizes=Cn;exports.calculateSnapThreshold=Xe;exports.clamp=Ne;exports.findLayoutInvariantBreach=_n;exports.findOwningGroup=Ie;exports.getConstraintInPixels=je;exports.getContainerSize=Se;exports.getGroupLayoutElements=Ze;exports.getPanelElement=Xt;exports.getPanelGroupElement=Zt;exports.getPanelPreferenceInPixels=An;exports.getResizeHandleElement=Jt;exports.initialPanelGroupLayoutState=Ln;exports.isPixelPanel=Z;exports.loadLayout=Nn;exports.normalizeSizeConfig=In;exports.panelReducer=Dn;exports.percentageToPixels=ct;exports.resolvePanelBounds=fe;exports.saveLayout=We;exports.toRoundedPercentage=Ye;exports.usePanelControls=Lt;exports.usePanelGroup=Ae;exports.useResizablePanels=On;