react-resizable-panels 3.0.6 → 4.2.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Brian Vaughn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,260 +1,318 @@
 # react-resizable-panels
 
-React components for resizable panel groups/layouts
-
-```jsx
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-
-<PanelGroup autoSaveId="example" direction="horizontal">
-  <Panel defaultSize={25}>
-    <SourcesExplorer />
-  </Panel>
-  <PanelResizeHandle />
-  <Panel>
-    <SourceViewer />
-  </Panel>
-  <PanelResizeHandle />
-  <Panel defaultSize={25}>
-    <Console />
-  </Panel>
-</PanelGroup>;
-```
+React components for resizable panel groups/layouts.
 
-## If you like this project, 🎉 [become a sponsor](https://github.com/sponsors/bvaughn/) or ☕ [buy me a coffee](http://givebrian.coffee/)
-
-## Props
-
-### `PanelGroup`
-
-| prop         | type                         | description                                                      |
-| :----------- | :--------------------------- | :--------------------------------------------------------------- |
-| `autoSaveId` | `?string`                    | Unique id used to auto-save group arrangement via `localStorage` |
-| `children`   | `ReactNode`                  | Arbitrary React element(s)                                       |
-| `className`  | `?string`                    | Class name to attach to root element                             |
-| `direction`  | `"horizontal" \| "vertical"` | Group orientation                                                |
-| `id`         | `?string`                    | Group id; falls back to `useId` when not provided                |
-| `onLayout`   | `?(sizes: number[]) => void` | Called when group layout changes                                 |
-| `storage`    | `?PanelGroupStorage`         | Custom storage API; defaults to `localStorage` <sup>1</sup>      |
-| `style`      | `?CSSProperties`             | CSS style to attach to root element                              |
-| `tagName`    | `?string = "div"`            | HTML element tag name for root element                           |
-
-<sup>1</sup>: Storage API must define the following _synchronous_ methods:
-
-- `getItem: (name:string) => string`
-- `setItem: (name: string, value: string) => void`
-
-`PanelGroup` components also expose an imperative API for manual resizing:
-| method                        | description                                                      |
-| :---------------------------- | :--------------------------------------------------------------- |
-| `getId(): string`             | Gets the panel group's ID.                                       |
-| `getLayout(): number[]`       | Gets the panel group's current _layout_ (`[1 - 100, ...]`).      |
-| `setLayout(layout: number[])` | Resize panel group to the specified _layout_ (`[1 - 100, ...]`). |
-
-### `Panel`
-
-| prop            | type                      | description                                                                                   |
-| :-------------- | :------------------------ | :-------------------------------------------------------------------------------------------- |
-| `children`      | `ReactNode`               | Arbitrary React element(s)                                                                    |
-| `className`     | `?string`                 | Class name to attach to root element                                                          |
-| `collapsedSize` | `?number=0`               | Panel should collapse to this size                                                            |
-| `collapsible`   | `?boolean=false`          | Panel should collapse when resized beyond its `minSize`                                       |
-| `defaultSize`   | `?number`                 | Initial size of panel (numeric value between 1-100)                                           |
-| `id`            | `?string`                 | Panel id (unique within group); falls back to `useId` when not provided                       |
-| `maxSize`       | `?number = 100`           | Maximum allowable size of panel (numeric value between 1-100); defaults to `100`              |
-| `minSize`       | `?number = 10`            | Minimum allowable size of panel (numeric value between 1-100); defaults to `10`               |
-| `onCollapse`    | `?() => void`             | Called when panel is collapsed                                                                |
-| `onExpand`      | `?() => void`             | Called when panel is expanded                                                                 |
-| `onResize`      | `?(size: number) => void` | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup> |
-| `order`         | `?number`                 | Order of panel within group; required for groups with conditionally rendered panels           |
-| `style`         | `?CSSProperties`          | CSS style to attach to root element                                                           |
-| `tagName`       | `?string = "div"`         | HTML element tag name for root element                                                        |
-
-<sup>1</sup>: If any `Panel` has an `onResize` callback, the `order` prop should be provided for all `Panel`s.
-
-`Panel` components also expose an imperative API for manual resizing:
-| method                   | description                                                                        |
-| :----------------------- | :--------------------------------------------------------------------------------- |
-| `collapse()`             | If panel is `collapsible`, collapse it fully.                                      |
-| `expand()`               | If panel is currently _collapsed_, expand it to its most recent size.              |
-| `getId(): string`        | Gets the ID of the panel.                                                          |
-| `getSize(): number`      | Gets the current size of the panel as a percentage (`1 - 100`).                    |
-| `isCollapsed(): boolean` | Returns `true` if the panel is currently _collapsed_ (`size === 0`).               |
-| `isExpanded(): boolean`  | Returns `true` if the panel is currently _not collapsed_ (`!isCollapsed()`).       |
-| `resize(size: number)`   | Resize panel to the specified _percentage_ (`1 - 100`).                            |
-
-### `PanelResizeHandle`
-
-| prop             | type                                          | description                                                                     |
-| :--------------- | :-------------------------------------------- | :------------------------------------------------------------------------------ |
-| `children`       | `?ReactNode`                                  | Custom drag UI; can be any arbitrary React element(s)                           |
-| `className`      | `?string`                                     | Class name to attach to root element                                            |
-| `hitAreaMargins` | `?{ coarse: number = 15; fine: number = 5; }` | Allow this much margin when determining resizable handle hit detection          |
-| `disabled`       | `?boolean`                                    | Disable drag handle                                                             |
-| `id`             | `?string`                                     | Resize handle id (unique within group); falls back to `useId` when not provided |
-| `onDragging`     | `?(isDragging: boolean) => void`              | Called when group layout changes                                                |
-| `style`          | `?CSSProperties`                              | CSS style to attach to root element                                             |
-| `tagName`        | `?string = "div"`                             | HTML element tag name for root element                                          |
-
----
-
-## FAQ
-
-### Can panel sizes be specified in pixels?
-
-No. Pixel-based constraints [added significant complexity](https://github.com/bvaughn/react-resizable-panels/pull/176) to the initialization and validation logic and so I've decided not to support them. You may be able to implement a version of this yourself following [a pattern like this](https://github.com/bvaughn/react-resizable-panels/issues/46#issuecomment-1368108416) but it is not officially supported by this library.
-
-### How can I fix layout/sizing problems with conditionally rendered panels?
-
-The `Panel` API doesn't _require_ `id` and `order` props because they aren't necessary for static layouts. When panels are conditionally rendered though, it's best to supply these values.
-
-```tsx
-<PanelGroup direction="horizontal">
-  {renderSideBar && (
-    <>
-      <Panel id="sidebar" minSize={25} order={1}>
-        <Sidebar />
-      </Panel>
-      <PanelResizeHandle />
-    </>
-  )}
-  <Panel minSize={25} order={2}>
-    <Main />
-  </Panel>
-</PanelGroup>
-```
+## Support
 
-### Can I attach a ref to the DOM elements?
-
-No. I think exposing two refs (one for the component's imperative API and one for a DOM element) would be awkward. This library does export several utility methods for accessing the underlying DOM elements though. For example:
-
-```tsx
-import {
-  getPanelElement,
-  getPanelGroupElement,
-  getResizeHandleElement,
-  Panel,
-  PanelGroup,
-  PanelResizeHandle,
-} from "react-resizable-panels";
-
-export function Example() {
-  const refs = useRef();
-
-  useEffect(() => {
-    const groupElement = getPanelGroupElement("group");
-    const leftPanelElement = getPanelElement("left-panel");
-    const rightPanelElement = getPanelElement("right-panel");
-    const resizeHandleElement = getResizeHandleElement("resize-handle");
-
-    // If you want to, you can store them in a ref to pass around
-    refs.current = {
-      groupElement,
-      leftPanelElement,
-      rightPanelElement,
-      resizeHandleElement,
-    };
-  }, []);
-
-  return (
-    <PanelGroup direction="horizontal" id="group">
-      <Panel id="left-panel">{/* ... */}</Panel>
-      <PanelResizeHandle id="resize-handle" />
-      <Panel id="right-panel">{/* ... */}</Panel>
-    </PanelGroup>
-  );
-}
-```
+If you like this project there are several ways to support it:
 
-### Why don't I see any resize UI?
+- [Become a GitHub sponsor](https://github.com/sponsors/bvaughn/)
+- or [buy me a coffee](http://givebrian.coffee/)
 
-This likely means that you haven't applied any CSS to style the resize handles. By default, a resize handle is just an empty DOM element. To add styling, use the `className` or `style` props:
+## Installation
 
-```tsx
-// Tailwind example
-<PanelResizeHandle className="w-2 bg-blue-800" />
-```
+Begin by installing the library from NPM:
 
-### Can panel sizes be persistent?
+```sh
+npm install react-resizable-panels
+```
 
-Yes. Panel groups with an `autoSaveId` prop will automatically save and restore their layouts on mount.
+## TypeScript types
 
-### How can I use persistent layouts with SSR?
+TypeScript definitions are included within the published `dist` folder
 
-By default, this library uses `localStorage` to persist layouts. With server rendering, this can cause a flicker when the default layout (rendered on the server) is replaced with the persisted layout (in `localStorage`). The way to avoid this flicker is to also persist the layout with a cookie like so:
+## Documentation
 
-#### Server component
+Documentation for this project is available at [react-resizable-panels.vercel.app](https://react-resizable-panels.vercel.app/).
 
-```tsx
-import ResizablePanels from "@/app/ResizablePanels";
-import { cookies } from "next/headers";
+### Group
 
-export function ServerComponent() {
-  const layout = cookies().get("react-resizable-panels:layout");
+<!-- Group:description:begin -->
+A Group wraps a set of resizable Panel components.
+Group content can be resized _horizontally_ or _vertically_.
 
-  let defaultLayout;
-  if (layout) {
-    defaultLayout = JSON.parse(layout.value);
-  }
+Group elements always include the following attributes:
 
-  return <ClientComponent defaultLayout={defaultLayout} />;
-}
+```html
+<div data-group data-testid="group-id-prop" id="group-id-prop">
 ```
 
-#### Client component
-
-```tsx
-"use client";
-
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-
-export function ClientComponent({
-  defaultLayout = [33, 67],
-}: {
-  defaultLayout: number[] | undefined;
-}) {
-  const onLayout = (sizes: number[]) => {
-    document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
-  };
-
-  return (
-    <PanelGroup direction="horizontal" onLayout={onLayout}>
-      <Panel defaultSize={defaultLayout[0]}>{/* ... */}</Panel>
-      <PanelResizeHandle className="w-2 bg-blue-800" />
-      <Panel defaultSize={defaultLayout[1]}>{/* ... */}</Panel>
-    </PanelGroup>
-  );
-}
+ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
+<!-- Group:description:end -->
+
+#### Required props
+
+<!-- Group:required-props:begin -->
+None
+<!-- Group:required-props:end -->
+
+#### Optional props
+
+<!-- Group:optional-props:begin -->
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>className</td>
+      <td><p>CSS class name.</p>
+</td>
+    </tr>
+    <tr>
+      <td>id</td>
+      <td><p>Uniquely identifies this group within an application.
+Falls back to <code>useId</code> when not provided.</p>
+<p>ℹ️ This value will also be assigned to the <code>data-group</code> attribute.</p>
+</td>
+    </tr>
+    <tr>
+      <td>style</td>
+      <td><p>CSS properties.</p>
+<p>⚠️ The following styles cannot be overridden: <code>display</code>, <code>flex-direction</code>, <code>flex-wrap</code>, and <code>overflow</code>.</p>
+</td>
+    </tr>
+    <tr>
+      <td>children</td>
+      <td><p>Panel and Separator components that comprise this group.</p>
+</td>
+    </tr>
+    <tr>
+      <td>defaultLayout</td>
+      <td><p>Default layout for the Group.</p>
+<p>ℹ️ This value allows layouts to be remembered between page reloads.</p>
+<p>⚠️ Refer to the documentation for how to avoid layout shift when using server components.</p>
+</td>
+    </tr>
+    <tr>
+      <td>disableCursor</td>
+      <td><p>This library sets custom mouse cursor styles to indicate drag state.
+Use this prop to disable that behavior for Panels and Separators in this group.</p>
+</td>
+    </tr>
+    <tr>
+      <td>disabled</td>
+      <td><p>Disable resize functionality.</p>
+</td>
+    </tr>
+    <tr>
+      <td>elementRef</td>
+      <td><p>Ref attached to the root <code>HTMLDivElement</code>.</p>
+</td>
+    </tr>
+    <tr>
+      <td>groupRef</td>
+      <td><p>Exposes the following imperative API:</p>
+<ul>
+<li><code>getLayout(): Layout</code></li>
+<li><code>setLayout(layout: Layout): void</code></li>
+</ul>
+<p>ℹ️ The <code>useGroupRef</code> and <code>useGroupCallbackRef</code> hooks are exported for convenience use in TypeScript projects.</p>
+</td>
+    </tr>
+    <tr>
+      <td>onLayoutChange</td>
+      <td><p>Called when panel sizes change; receives a map of Panel id to size.</p>
+</td>
+    </tr>
+    <tr>
+      <td>orientation</td>
+      <td><p>Specifies the resizable orientation (&quot;horizontal&quot; or &quot;vertical&quot;); defaults to &quot;horizontal&quot;</p>
+</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- Group:optional-props:end -->
+
+### Panel
+
+<!-- Panel:description:begin -->
+A Panel wraps resizable content and can be configured with min/max size constraints and collapsible behavior.
+
+Panel size props can be in the following formats:
+- Percentage of the parent Group (0..100)
+- Pixels
+- Relative font units (em, rem)
+- Viewport relative units (vh, vw)
+
+ℹ️ Numeric values are assumed to be pixels.
+Strings without explicit units are assumed to be percentages (0%..100%).
+Percentages may also be specified as strings ending with "%" (e.g. "33%")
+Pixels may also be specified as strings ending with the unit "px".
+Other units should be specified as strings ending with their CSS property units (e.g. 1rem, 50vh)
+
+Panel elements always include the following attributes:
+
+```html
+<div data-panel data-testid="panel-id-prop" id="panel-id-prop">
 ```
 
-> [!NOTE]
-> Be sure to specify a `defaultSize` prop for **every** `Panel` component to avoid layout flicker.
-
-A demo of this is available [here](https://github.com/bvaughn/react-resizable-panels-demo-ssr).
-
-#### How can I set the [CSP `"nonce"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) attribute?
-
-```js
-import { setNonce } from "react-resizable-panels";
-
-setNonce("your-nonce-value-here");
+ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
+<!-- Panel:description:end -->
+
+#### Required props
+
+<!-- Panel:required-props:begin -->
+None
+<!-- Panel:required-props:end -->
+
+#### Optional props
+
+<!-- Panel:optional-props:begin -->
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>className</td>
+      <td><p>CSS class name.</p>
+<p>⚠️ Class is applied to nested <code>HTMLDivElement</code> to avoid styles that interfere with Flex layout.</p>
+</td>
+    </tr>
+    <tr>
+      <td>id</td>
+      <td><p>Uniquely identifies this panel within the parent group.
+Falls back to <code>useId</code> when not provided.</p>
+<p>ℹ️ This prop is used to associate persisted group layouts with the original panel.</p>
+<p>ℹ️ This value will also be assigned to the <code>data-panel</code> attribute.</p>
+</td>
+    </tr>
+    <tr>
+      <td>style</td>
+      <td><p>CSS properties.</p>
+<p>⚠️ Style is applied to nested <code>HTMLDivElement</code> to avoid styles that interfere with Flex layout.</p>
+</td>
+    </tr>
+    <tr>
+      <td>collapsedSize</td>
+      <td><p>Panel size when collapsed; defaults to 0%.</p>
+</td>
+    </tr>
+    <tr>
+      <td>collapsible</td>
+      <td><p>This panel can be collapsed.</p>
+<p>ℹ️ A collapsible panel will collapse when it&#39;s size is less than of the specified <code>minSize</code></p>
+</td>
+    </tr>
+    <tr>
+      <td>defaultSize</td>
+      <td><p>Default size of Panel within its parent group; default is auto-assigned based on the total number of Panels.</p>
+</td>
+    </tr>
+    <tr>
+      <td>elementRef</td>
+      <td><p>Ref attached to the root <code>HTMLDivElement</code>.</p>
+</td>
+    </tr>
+    <tr>
+      <td>maxSize</td>
+      <td><p>Maximum size of Panel within its parent group; defaults to 100%.</p>
+</td>
+    </tr>
+    <tr>
+      <td>minSize</td>
+      <td><p>Minimum size of Panel within its parent group; defaults to 0%.</p>
+</td>
+    </tr>
+    <tr>
+      <td>onResize</td>
+      <td><p>Called when panel sizes change.
+@param panelSize Panel size (both as a percentage of the parent Group and in pixels)
+@param id Panel id (if one was provided as a prop)
+@param prevPanelSize Previous panel size (will be undefined on mount)</p>
+</td>
+    </tr>
+    <tr>
+      <td>panelRef</td>
+      <td><p>Exposes the following imperative API:</p>
+<ul>
+<li><code>collapse(): void</code></li>
+<li><code>expand(): void</code></li>
+<li><code>getSize(): number</code></li>
+<li><code>isCollapsed(): boolean</code></li>
+<li><code>resize(size: number): void</code></li>
+</ul>
+<p>ℹ️ The <code>usePanelRef</code> and <code>usePanelCallbackRef</code> hooks are exported for convenience use in TypeScript projects.</p>
+</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- Panel:optional-props:end -->
+
+### Separator
+
+<!-- Separator:description:begin -->
+Separators are not _required_ but they are _recommended_ as they improve keyboard accessibility.
+
+Separators should be rendered as the direct child of a Group component.
+
+Separator elements always include the following attributes:
+
+```html
+<div data-separator data-testid="separator-id-prop" id="separator-id-prop" role="separator">
 ```
 
-#### How can I disable global cursor styles?
-
-```js
-import { disableGlobalCursorStyles } from "react-resizable-panels";
-
-disableGlobalCursorStyles();
-```
-
-#### How can I override the global cursor styles?
-
-```js
-import { customizeGlobalCursorStyles, type CustomCursorStyleConfig } from "react-resizable-panels";
-
-function customCursor({ isPointerDown }: CustomCursorStyleConfig) {
-  return isPointerDown ? "grabbing" : "grab";
-}
-
-customizeGlobalCursorStyles(customCursor);
-```
+ℹ️ [Test id](https://testing-library.com/docs/queries/bytestid/) can be used to narrow selection when unit testing.
+
+ℹ️ In addition to the attributes shown above, separator also renders all required [WAI-ARIA properties](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role#associated_wai-aria_roles_states_and_properties).
+<!-- Separator:description:end -->
+
+#### Required props
+
+<!-- Separator:required-props:begin -->
+None
+<!-- Separator:required-props:end -->
+
+#### Optional props
+
+<!-- Separator:optional-props:begin -->
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>className</td>
+      <td><p>CSS class name.</p>
+<p>ℹ️ Use the <code>data-separator</code> attribute for custom <em>hover</em> and <em>active</em> styles</p>
+<p>⚠️ The following properties cannot be overridden: <code>flex-grow</code>, <code>flex-shrink</code></p>
+</td>
+    </tr>
+    <tr>
+      <td>id</td>
+      <td><p>Uniquely identifies the separator within the parent group.
+Falls back to <code>useId</code> when not provided.</p>
+<p>ℹ️ This value will also be assigned to the <code>data-separator</code> attribute.</p>
+</td>
+    </tr>
+    <tr>
+      <td>style</td>
+      <td><p>CSS properties.</p>
+<p>ℹ️ Use the <code>data-separator</code> attribute for custom <em>hover</em> and <em>active</em> styles</p>
+<p>⚠️ The following properties cannot be overridden: <code>flex-grow</code>, <code>flex-shrink</code></p>
+</td>
+    </tr>
+    <tr>
+      <td>elementRef</td>
+      <td><p>Ref attached to the root <code>HTMLDivElement</code>.</p>
+</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- Separator:optional-props:end -->

package/dist/react-resizable-panels.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("react/jsx-runtime"),x=require("react");function b(e,t="Assertion error"){if(!e)throw Error(t)}function W({group:e}){const{orientation:t,panels:n}=e;return n.reduce((o,i)=>(o+=t==="horizontal"?i.element.offsetWidth:i.element.offsetHeight,o),0)}function ie(e,t){return t.sort(e==="horizontal"?Ve:Be)}function Ve(e,t){const n=e.element.offsetLeft-t.element.offsetLeft;return n!==0?n:e.element.offsetWidth-t.element.offsetWidth}function Be(e,t){const n=e.element.offsetTop-t.element.offsetTop;return n!==0?n:e.element.offsetHeight-t.element.offsetHeight}function Pe(e){return e!==null&&typeof e=="object"&&"nodeType"in e&&e.nodeType===Node.ELEMENT_NODE}function Re(e,t){return{x:e.x>=t.left&&e.x<=t.right?0:Math.min(Math.abs(e.x-t.left),Math.abs(e.x-t.right)),y:e.y>=t.top&&e.y<=t.bottom?0:Math.min(Math.abs(e.y-t.top),Math.abs(e.y-t.bottom))}}function We({orientation:e,rects:t,targetRect:n}){const o={x:n.x+n.width/2,y:n.y+n.height/2};let i,s=Number.MAX_VALUE;for(const l of t){const{x:r,y:a}=Re(o,l),u=e==="horizontal"?r:a;u<s&&(s=u,i=l)}return b(i,"No rect found"),i}function Ce(e){const{element:t,orientation:n,panels:o,separators:i}=e,s=ie(n,Array.from(t.children).filter(Pe).map(f=>({element:f}))).map(({element:f})=>f),l=[];let r=!1,a,u=[];for(const f of s)if(f.hasAttribute("data-panel")){const p=o.find(m=>m.element===f);if(p){if(a){const m=a.element.getBoundingClientRect(),h=f.getBoundingClientRect();let c;if(r){const d=n==="horizontal"?new DOMRect(m.right,m.top,0,m.height):new DOMRect(m.left,m.bottom,m.width,0),y=n==="horizontal"?new DOMRect(h.left,h.top,0,h.height):new DOMRect(h.left,h.top,h.width,0);switch(u.length){case 0:{c=[d,y];break}case 1:{const S=u[0],v=We({orientation:n,rects:[m,h],targetRect:S.element.getBoundingClientRect()});c=[S,v===m?y:d];break}default:{c=u;break}}}else u.length?c=u:c=[n==="horizontal"?new DOMRect(m.right,h.top,h.left-m.right,h.height):new DOMRect(h.left,m.bottom,h.width,h.top-m.bottom)];for(const d of c)l.push({group:e,groupSize:W({group:e}),panels:[a,p],separator:"width"in d?void 0:d,rect:"width"in d?d:d.element.getBoundingClientRect()})}r=!1,a=p,u=[]}}else if(f.hasAttribute("data-separator")){const p=i.find(m=>m.element===f);p?u.push(p):(a=void 0,u=[])}else r=!0;return l}function Ue(e,t){const n=getComputedStyle(e),o=parseFloat(n.fontSize);return t*o}function Ke(e,t){const n=getComputedStyle(e.ownerDocument.body),o=parseFloat(n.fontSize);return t*o}function qe(e){return e/100*window.innerHeight}function Xe(e){return e/100*window.innerWidth}function Ye(e){switch(typeof e){case"number":return[e,"px"];case"string":{const t=parseFloat(e);return e.endsWith("%")?[t,"%"]:e.endsWith("px")?[t,"px"]:e.endsWith("rem")?[t,"rem"]:e.endsWith("em")?[t,"em"]:e.endsWith("vh")?[t,"vh"]:e.endsWith("vw")?[t,"vw"]:[t,"%"]}}}function Q({groupSize:e,panelElement:t,styleProp:n}){let o;const[i,s]=Ye(n);switch(s){case"%":{o=i/100*e;break}case"px":{o=i;break}case"rem":{o=Ke(t,i);break}case"em":{o=Ue(t,i);break}case"vh":{o=qe(i);break}case"vw":{o=Xe(i);break}}return o}function I(e){return parseFloat(e.toFixed(3))}function pe(e){const{panels:t}=e,n=W({group:e});return n===0?t.map(o=>({collapsedSize:0,collapsible:o.panelConstraints.collapsible===!0,defaultSize:void 0,minSize:0,maxSize:100,panelId:o.id})):t.map(o=>{const{element:i,panelConstraints:s}=o;let l=0;if(s.collapsedSize){const f=Q({groupSize:n,panelElement:i,styleProp:s.collapsedSize});l=I(f/n*100)}let r;if(s.defaultSize){const f=Q({groupSize:n,panelElement:i,styleProp:s.defaultSize});r=I(f/n*100)}let a=0;if(s.minSize){const f=Q({groupSize:n,panelElement:i,styleProp:s.minSize});a=I(f/n*100)}let u=100;if(s.maxSize){const f=Q({groupSize:n,panelElement:i,styleProp:s.maxSize});u=I(f/n*100)}return{collapsedSize:l,collapsible:s.collapsible===!0,defaultSize:r,minSize:a,maxSize:u,panelId:o.id}})}class Ze{#e={};addListener(t,n){const o=this.#e[t];return o===void 0?this.#e[t]=[n]:o.includes(n)||o.push(n),()=>{this.removeListener(t,n)}}emit(t,n){const o=this.#e[t];if(o!==void 0)if(o.length===1)o[0].call(null,n);else{let i=!1,s=null;const l=Array.from(o);for(let r=0;r<l.length;r++){const a=l[r];try{a.call(null,n)}catch(u){s===null&&(i=!0,s=u)}}if(i)throw s}}removeAllListeners(){this.#e={}}removeListener(t,n){const o=this.#e[t];if(o!==void 0){const i=o.indexOf(n);i>=0&&o.splice(i,1)}}}function C(e,t,n=0){return Math.abs(I(e)-I(t))<=n}let M={cursorFlags:0,interactionState:{state:"inactive"},mountedGroups:new Map};const T=new Ze;function G(){return M}function k(e){const t=typeof e=="function"?e(M):e;if(M===t)return M;const n=M;return M={...M,...t},t.cursorFlags!==void 0&&T.emit("cursorFlagsChange",M.cursorFlags),t.interactionState!==void 0&&T.emit("interactionStateChange",M.interactionState),t.mountedGroups!==void 0&&(M.mountedGroups.forEach((o,i)=>{o.derivedPanelConstraints.forEach(s=>{if(s.collapsible){const{layout:l}=n.mountedGroups.get(i)??{};if(l){const r=C(s.collapsedSize,o.layout[s.panelId]),a=C(s.collapsedSize,l[s.panelId]);r&&!a&&(i.inMemoryLastExpandedPanelSizes[s.panelId]=l[s.panelId])}}})}),T.emit("mountedGroupsChange",M.mountedGroups)),M}function Je(e,t){if(e.length!==t.length)return!1;for(let n=0;n<e.length;n++)if(e[n]!=t[n])return!1;return!0}function q(e,t){return C(e,t)?0:e>t?1:-1}function B({panelConstraints:e,size:t}){const{collapsedSize:n=0,collapsible:o,maxSize:i=100,minSize:s=0}=e;if(q(t,s)<0)if(o){const l=(n+s)/2;q(t,l)<0?t=n:t=s}else t=s;return t=Math.min(i,t),t=I(t),t}function X({delta:e,initialLayout:t,panelConstraints:n,pivotIndices:o,prevLayout:i,trigger:s}){if(C(e,0))return t;const l=Object.values(t),r=Object.values(i),a=[...l],[u,f]=o;b(u!=null,"Invalid first pivot index"),b(f!=null,"Invalid second pivot index");let p=0;if(s==="keyboard"){{const c=e<0?f:u,d=n[c];b(d,`Panel constraints not found for index ${c}`);const{collapsedSize:y=0,collapsible:S,minSize:v=0}=d;if(S){const z=l[c];if(b(z!=null,`Previous layout not found for panel index ${c}`),C(z,y)){const g=v-z;q(g,Math.abs(e))>0&&(e=e<0?0-g:g)}}}{const c=e<0?u:f,d=n[c];b(d,`No panel constraints found for index ${c}`);const{collapsedSize:y=0,collapsible:S,minSize:v=0}=d;if(S){const z=l[c];if(b(z!=null,`Previous layout not found for panel index ${c}`),C(z,v)){const g=z-y;q(g,Math.abs(e))>0&&(e=e<0?0-g:g)}}}}{const c=e<0?1:-1;let d=e<0?f:u,y=0;for(;;){const v=l[d];b(v!=null,`Previous layout not found for panel index ${d}`);const g=B({panelConstraints:n[d],size:100})-v;if(y+=g,d+=c,d<0||d>=n.length)break}const S=Math.min(Math.abs(e),Math.abs(y));e=e<0?0-S:S}{let d=e<0?u:f;for(;d>=0&&d<n.length;){const y=Math.abs(e)-Math.abs(p),S=l[d];b(S!=null,`Previous layout not found for panel index ${d}`);const v=S-y,z=B({panelConstraints:n[d],size:v});if(!C(S,z)&&(p+=S-z,a[d]=z,p.toFixed(3).localeCompare(Math.abs(e).toFixed(3),void 0,{numeric:!0})>=0))break;e<0?d--:d++}}if(Je(r,a))return i;{const c=e<0?f:u,d=l[c];b(d!=null,`Previous layout not found for panel index ${c}`);const y=d+p,S=B({panelConstraints:n[c],size:y});if(a[c]=S,!C(S,y)){let v=y-S,g=e<0?f:u;for(;g>=0&&g<n.length;){const w=a[g];b(w!=null,`Previous layout not found for panel index ${g}`);const L=w+v,E=B({panelConstraints:n[g],size:L});if(C(w,E)||(v-=E-w,a[g]=E),C(v,0))break;e>0?g--:g++}}}const m=Object.values(a).reduce((c,d)=>d+c,0);if(!C(m,100,.1))return i;const h=Object.keys(i);return a.reduce((c,d,y)=>(c[h[y]]=d,c),{})}function te(e){const t=e.parentElement;b(t,"Parent group element not found");const{mountedGroups:n}=G();for(const[o]of n)if(o.element===t)return o;throw Error("Could not find parent Group for separator element")}function U(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(t[n]===void 0||q(e[n],t[n])!==0)return!1;return!0}function _({layout:e,panelConstraints:t}){const o=[...Object.values(e)],i=o.reduce((r,a)=>r+a,0);if(o.length!==t.length)throw Error(`Invalid ${t.length} panel layout: ${o.map(r=>`${r}%`).join(", ")}`);if(!C(i,100)&&o.length>0)for(let r=0;r<t.length;r++){const a=o[r];b(a!=null,`No layout data found for index ${r}`);const u=100/i*a;o[r]=u}let s=0;for(let r=0;r<t.length;r++){const a=o[r];b(a!=null,`No layout data found for index ${r}`);const u=B({panelConstraints:t[r],size:a});a!=u&&(s+=a-u,o[r]=u)}if(!C(s,0))for(let r=0;r<t.length;r++){const a=o[r];b(a!=null,`No layout data found for index ${r}`);const u=a+s,f=B({panelConstraints:t[r],size:u});if(a!==f&&(s-=f-a,o[r]=f,C(s,0)))break}const l=Object.keys(e);return o.reduce((r,a,u)=>(r[l[u]]=a,r),{})}function Ee({groupId:e}){const t=()=>{const{mountedGroups:n}=G();for(const[o,i]of n)if(o.id===e)return{group:o,...i};throw Error(`Could not find Group with id "${e}"`)};return{getLayout(){const{defaultLayoutDeferred:n,layout:o}=t();return n?{}:o},setLayout(n){const{defaultLayoutDeferred:o,derivedPanelConstraints:i,group:s,layout:l,separatorToPanels:r}=t(),a=_({layout:n,panelConstraints:i});return o?l:(U(l,a)||k(u=>({mountedGroups:new Map(u.mountedGroups).set(s,{defaultLayoutDeferred:o,derivedPanelConstraints:i,layout:a,separatorToPanels:r})})),a)}}}function Me(e){const{mountedGroups:t}=G(),n=t.get(e);return b(n,`Mounted Group ${e.id} not found`),n}function O(e,t){const n=te(e),o=Me(n),i=n.separators.find(p=>p.element===e);b(i,"Matching separator not found");const s=o.separatorToPanels.get(i);b(s,"Matching panels not found");const l=s.map(p=>n.panels.indexOf(p)),a=Ee({groupId:n.id}).getLayout(),u=X({delta:t,initialLayout:a,panelConstraints:o.derivedPanelConstraints,pivotIndices:l,prevLayout:a,trigger:"keyboard"}),f=_({layout:u,panelConstraints:o.derivedPanelConstraints});U(a,f)||k(p=>({mountedGroups:new Map(p.mountedGroups).set(n,{defaultLayoutDeferred:o.defaultLayoutDeferred,derivedPanelConstraints:o.derivedPanelConstraints,layout:f,separatorToPanels:o.separatorToPanels})}))}function me(e){if(e.defaultPrevented)return;const t=e.currentTarget,n=te(t);if(!n.disabled)switch(e.key){case"ArrowDown":{e.preventDefault(),n.orientation==="vertical"&&O(t,5);break}case"ArrowLeft":{e.preventDefault(),n.orientation==="horizontal"&&O(t,-5);break}case"ArrowRight":{e.preventDefault(),n.orientation==="horizontal"&&O(t,5);break}case"ArrowUp":{e.preventDefault(),n.orientation==="vertical"&&O(t,-5);break}case"End":{e.preventDefault(),O(t,100);break}case"Enter":{e.preventDefault();const o=te(t),{derivedPanelConstraints:i,layout:s,separatorToPanels:l}=Me(o),r=o.separators.find(p=>p.element===t);b(r,"Matching separator not found");const a=l.get(r);b(a,"Matching panels not found");const u=a[0],f=i.find(p=>p.panelId===u.id);if(b(f,"Panel metadata not found"),f.collapsible){const p=s[u.id],m=f.collapsedSize===p?o.inMemoryLastExpandedPanelSizes[u.id]??f.minSize:f.collapsedSize;O(t,m-p)}break}case"F6":{e.preventDefault();const i=te(t).separators.map(a=>a.element),s=Array.from(i).findIndex(a=>a===e.currentTarget);b(s!==null,"Index not found");const l=e.shiftKey?s>0?s-1:i.length-1:s+1<i.length?s+1:0;i[l].focus();break}case"Home":{e.preventDefault(),O(t,-100);break}}}const Qe=e=>e,oe=()=>{},ke=1,Ie=2,Ge=4,De=8,he={coarse:10,precise:5};function et(e,t,n){let o,i={x:1/0,y:1/0};for(const s of t){const l=Re(n,s.rect);switch(e){case"horizontal":{l.x<=i.x&&(o=s,i=l);break}case"vertical":{l.y<=i.y&&(o=s,i=l);break}}}return o?{distance:i,hitRegion:o}:void 0}let ee;function tt(){return ee===void 0&&(typeof matchMedia=="function"?ee=!!matchMedia("(pointer:coarse)").matches:ee=!1),ee}function nt(e){return e!==null&&typeof e=="object"&&"nodeType"in e&&e.nodeType===Node.DOCUMENT_FRAGMENT_NODE}function ot(e,t){if(e===t)throw new Error("Cannot compare node with itself");const n={a:Se(e),b:Se(t)};let o;for(;n.a.at(-1)===n.b.at(-1);)e=n.a.pop(),t=n.b.pop(),o=e;b(o,"Stacking order can only be calculated for elements with a common ancestor");const i={a:ge(ye(n.a)),b:ge(ye(n.b))};if(i.a===i.b){const s=o.childNodes,l={a:n.a.at(-1),b:n.b.at(-1)};let r=s.length;for(;r--;){const a=s[r];if(a===l.a)return 1;if(a===l.b)return-1}}return Math.sign(i.a-i.b)}const rt=/\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;function it(e){const t=getComputedStyle(Oe(e)??e).display;return t==="flex"||t==="inline-flex"}function st(e){const t=getComputedStyle(e);return!!(t.position==="fixed"||t.zIndex!=="auto"&&(t.position!=="static"||it(e))||+t.opacity<1||"transform"in t&&t.transform!=="none"||"webkitTransform"in t&&t.webkitTransform!=="none"||"mixBlendMode"in t&&t.mixBlendMode!=="normal"||"filter"in t&&t.filter!=="none"||"webkitFilter"in t&&t.webkitFilter!=="none"||"isolation"in t&&t.isolation==="isolate"||rt.test(t.willChange)||t.webkitOverflowScrolling==="touch")}function ye(e){let t=e.length;for(;t--;){const n=e[t];if(b(n,"Missing node"),st(n))return n}return null}function ge(e){return e&&Number(getComputedStyle(e).zIndex)||0}function Se(e){const t=[];for(;e;)t.push(e),e=Oe(e);return t}function Oe(e){const{parentNode:t}=e;return nt(t)?t.host:t}function at(e,t){return e.x<t.x+t.width&&e.x+e.width>t.x&&e.y<t.y+t.height&&e.y+e.height>t.y}function lt({groupElement:e,hitRegion:t,pointerEventTarget:n}){if(!Pe(n)||n.contains(e)||e.contains(n))return!0;if(ot(n,e)>0){let o=n;for(;o;){if(o.contains(e))return!0;if(at(o.getBoundingClientRect(),t))return!1;o=o.parentElement}}return!0}function Te(e,t){const n=[];return t.forEach((o,i)=>{if(i.disabled)return;const s=tt()?he.coarse:he.precise,l=Ce(i),r=et(i.orientation,l,{x:e.clientX,y:e.clientY});r&&r.distance.x<=s&&r.distance.y<=s&&lt({groupElement:i.element,hitRegion:r.hitRegion.rect,pointerEventTarget:e.target})&&n.push(r.hitRegion)}),n}function ve(e){if(e.defaultPrevented)return;const{mountedGroups:t}=G(),n=Te(e,t),o=new Set,i=new Set,s=new Set,l=new Map;let r=!1;n.forEach(a=>{o.add(a.group),a.panels.forEach(f=>{i.add(f)}),a.separator&&(s.add(a.separator),r||(r=!0,a.separator.element.focus()));const u=t.get(a.group);u&&l.set(a.group,u.layout)}),k({interactionState:{hitRegions:n,initialLayoutMap:l,pointerDownAtPoint:{x:e.clientX,y:e.clientY},state:"active"}}),n.length&&e.preventDefault()}function ut({cursorFlags:e,groups:t,state:n}){let o=0,i=0;switch(n){case"active":case"hover":t.forEach(s=>{if(!s.disableCursor)switch(s.orientation){case"horizontal":{o++;break}case"vertical":{i++;break}}})}if(o===0&&i===0)return null;switch(n){case"active":{const s=(e&ke)!==0,l=(e&Ie)!==0,r=(e&Ge)!==0,a=(e&De)!==0;if(e){if(s)return r?"se-resize":a?"ne-resize":"e-resize";if(l)return r?"sw-resize":a?"nw-resize":"w-resize";if(r)return"s-resize";if(a)return"n-resize"}break}}return o>0&&i>0?"move":o>0?"ew-resize":"ns-resize"}const xe=new WeakMap;function se(e){if(e.defaultView===null||e.defaultView===void 0)return;let{prevStyle:t,styleSheet:n}=xe.get(e)??{};n===void 0&&(n=new e.defaultView.CSSStyleSheet,e.adoptedStyleSheets=[n]);const{cursorFlags:o,interactionState:i}=G();switch(i.state){case"active":case"hover":{const s=ut({cursorFlags:o,groups:i.hitRegions.map(r=>r.group),state:i.state}),l=`*{cursor: ${s} !important; ${i.state==="active"?"touch-action: none;":""} }`;if(t===l)return;t=l,s?n.cssRules.length===0?n.insertRule(l):n.replaceSync(l):n.cssRules.length===1&&n.deleteRule(0);break}case"inactive":{t=void 0,n.cssRules.length===1&&n.deleteRule(0);break}}xe.set(e,{prevStyle:t,styleSheet:n})}function _e({document:e,event:t,hitRegions:n,initialLayoutMap:o,mountedGroups:i,pointerDownAtPoint:s}){let l=0;const r=new Map(i);n.forEach(a=>{const{group:u,groupSize:f}=a,{disableCursor:p,orientation:m,panels:h}=u;let c=0;s?m==="horizontal"?c=(t.clientX-s.x)/f*100:c=(t.clientY-s.y)/f*100:m==="horizontal"?c=t.clientX<0?-100:100:c=t.clientY<0?-100:100;const d=o.get(u),{defaultLayoutDeferred:y,derivedPanelConstraints:S,layout:v,separatorToPanels:z}=i.get(u)??{defaultLayoutDeferred:!1};if(S&&d&&v&&z){const g=X({delta:c,initialLayout:d,panelConstraints:S,pivotIndices:a.panels.map(w=>h.indexOf(w)),prevLayout:v,trigger:"mouse-or-touch"});if(U(g,v)){if(c!==0&&!p)switch(m){case"horizontal":{l|=c<0?ke:Ie;break}case"vertical":{l|=c<0?Ge:De;break}}}else{r.set(a.group,{defaultLayoutDeferred:y,derivedPanelConstraints:S,layout:g,separatorToPanels:z});const w=a.group.panels.map(({id:L})=>L).join(",");a.group.inMemoryLayouts[w]=g}}}),k({cursorFlags:l,mountedGroups:r}),se(e)}function ze(e){const{interactionState:t,mountedGroups:n}=G();switch(t.state){case"active":_e({document:e.currentTarget,event:e,hitRegions:t.hitRegions,initialLayoutMap:t.initialLayoutMap,mountedGroups:n})}}function be(e){if(e.defaultPrevented)return;const{interactionState:t,mountedGroups:n}=G();switch(t.state){case"active":{if(e.buttons===0){k(o=>o.interactionState.state==="inactive"?o:{cursorFlags:0,interactionState:{state:"inactive"}});return}_e({document:e.currentTarget,event:e,hitRegions:t.hitRegions,initialLayoutMap:t.initialLayoutMap,mountedGroups:n,pointerDownAtPoint:t.pointerDownAtPoint});break}default:{const o=Te(e,n);o.length===0?t.state!=="inactive"&&k({interactionState:{state:"inactive"}}):k({interactionState:{hitRegions:o,state:"hover"}}),se(e.currentTarget);break}}}function we(e){if(e.defaultPrevented)return;e.preventDefault();const{interactionState:t}=G();switch(t.state){case"active":k({cursorFlags:0,interactionState:{state:"inactive"}}),se(e.currentTarget)}}function Le(e){let t=0,n=0;const o={};for(const s of e)if(s.defaultSize!==void 0){t++;const l=I(s.defaultSize);n+=l,o[s.panelId]=l}else o[s.panelId]=void 0;const i=e.length-t;if(i!==0){const s=I((100-n)/i);for(const l of e)l.defaultSize===void 0&&(o[l.panelId]=s)}return o}function ct(e,t,n){const o=n[0];if(!o)return;const i=e.panels.find(a=>a.element===t);if(!i||!i.onResize)return;const s=W({group:e}),l=i.mutableValues.prevSize,r={asPercentage:I(o.inlineSize/s*100),inPixels:o.inlineSize};i.mutableValues.prevSize=r,i.onResize(r,i.id,l)}function ft(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const o in e)if(e[o]!==t[o])return!1;return!0}function dt(e,t){const n=e.map(i=>i.id),o=Object.keys(t);if(n.length!==o.length)return!1;for(const i of n)if(!o.includes(i))return!1;return!0}const V=new Map;function pt(e){let t=!0;b(e.element.ownerDocument.defaultView,"Cannot register an unmounted Group");const n=e.element.ownerDocument.defaultView.ResizeObserver,o=new Set,i=new Set,s=new n(c=>{for(const d of c){const{borderBoxSize:y,target:S}=d;if(S===e.element){if(t){if(W({group:e})===0)return;k(z=>{const g=z.mountedGroups.get(e);if(g){const w=pe(e),L=g.defaultLayoutDeferred?Le(w):g.layout,E=_({layout:L,panelConstraints:w});return!g.defaultLayoutDeferred&&U(L,E)&&ft(g.derivedPanelConstraints,w)?z:{mountedGroups:new Map(z.mountedGroups).set(e,{defaultLayoutDeferred:!1,derivedPanelConstraints:w,layout:E,separatorToPanels:g.separatorToPanels})}}return z})}}else ct(e,S,y)}});s.observe(e.element),e.panels.forEach(c=>{b(!o.has(c.id),`Panel ids must be unique; id "${c.id}" was used more than once`),o.add(c.id),c.onResize&&s.observe(c.element)});const l=W({group:e}),r=pe(e),a=e.panels.map(({id:c})=>c).join(",");let u=e.defaultLayout;u&&(dt(e.panels,u)||(u=void 0));const f=e.inMemoryLayouts[a]??u??Le(r),p=_({layout:f,panelConstraints:r}),m=Ce(e),h=e.element.ownerDocument;return k(c=>{const d=new Map;return V.set(h,(V.get(h)??0)+1),m.forEach(y=>{y.separator&&d.set(y.separator,y.panels)}),{mountedGroups:new Map(c.mountedGroups).set(e,{defaultLayoutDeferred:l===0,derivedPanelConstraints:r,layout:p,separatorToPanels:d})}}),e.separators.forEach(c=>{b(!i.has(c.id),`Separator ids must be unique; id "${c.id}" was used more than once`),i.add(c.id),c.element.addEventListener("keydown",me)}),V.get(h)===1&&(h.addEventListener("pointerdown",ve),h.addEventListener("pointerleave",ze),h.addEventListener("pointermove",be),h.addEventListener("pointerup",we)),function(){t=!1,V.set(h,Math.max(0,(V.get(h)??0)-1)),k(d=>{const y=new Map(d.mountedGroups);return y.delete(e),{mountedGroups:y}}),e.separators.forEach(d=>{d.element.removeEventListener("keydown",me)}),V.get(h)||(h.removeEventListener("pointerdown",ve),h.removeEventListener("pointerleave",ze),h.removeEventListener("pointermove",be),h.removeEventListener("pointerup",we)),s.disconnect()}}function ae(e){const t=x.useId();return`${e??t}`}const N=typeof window<"u"?x.useLayoutEffect:x.useEffect;function le(e){const t=x.useRef(e);return N(()=>{t.current=e},[e]),x.useCallback((...n)=>t.current?.(...n),[t])}function ue(...e){return le(t=>{e.forEach(n=>{if(n)switch(typeof n){case"function":{n(t);break}case"object":{n.current=t;break}}})})}function mt(e){const t=x.useRef({...e});return N(()=>{for(const n in e)t.current[n]=e[n]},[e]),t.current}const Ne="--react-resizable-panels--panel--pointer-events";function Ae(e,t){const n=e.replace(/[^a-zA-Z0-9\-_]/g,""),o=t.replace(/[^a-zA-Z0-9\-_]/g,"");return`--react-resizable-panels--${n}--${o}`}const $e=x.createContext(null);function ht(e,t){const n=x.useRef({getLayout:()=>({}),setLayout:Qe});x.useImperativeHandle(t,()=>n.current,[]),N(()=>{Object.assign(n.current,Ee({groupId:e}))})}function yt({children:e,className:t,defaultLayout:n,disableCursor:o,disabled:i,elementRef:s,groupRef:l,id:r,onLayoutChange:a,orientation:u="horizontal",style:f,...p}){const m=x.useRef({}),h=le(P=>{U(m.current,P)||(m.current=P,a?.(P))}),c=ae(r),[d,y]=x.useState(!1),S=x.useRef(null),[v,z]=x.useState(n??{}),[g,w]=x.useState([]),[L,E]=x.useState([]),A=x.useRef({lastExpandedPanelSizes:{},layouts:{}}),ne=ue(S,s);ht(c,l);const Y=x.useMemo(()=>({id:c,orientation:u,registerPanel:P=>(w(R=>ie(u,[...R,P])),()=>{w(R=>R.filter(D=>D!==P))}),registerSeparator:P=>(E(R=>ie(u,[...R,P])),()=>{E(R=>R.filter(D=>D!==P))})}),[c,u]),$=mt({defaultLayout:n,disableCursor:o}),j=x.useRef(null);N(()=>{const P=S.current;if(P===null)return;const R={defaultLayout:$.defaultLayout,disableCursor:!!$.disableCursor,disabled:!!i,element:P,id:c,inMemoryLastExpandedPanelSizes:A.current.lastExpandedPanelSizes,inMemoryLayouts:A.current.layouts,orientation:u,panels:g,separators:L};j.current=R;const D=pt(R),fe=G().mountedGroups.get(R);if(fe){const{defaultLayoutDeferred:F,derivedPanelConstraints:H,layout:J}=fe;!F&&H.length>0&&(z(J),h?.(J))}const je=T.addListener("interactionStateChange",F=>{switch(F.state){case"active":{y(F.hitRegions.some(H=>H.group===R));break}default:{y(!1);break}}}),Fe=T.addListener("mountedGroupsChange",F=>{const H=F.get(R);if(H){const{defaultLayoutDeferred:J,derivedPanelConstraints:He,layout:de}=H;if(J||He.length===0)return;z(de),h?.(de)}});return()=>{j.current=null,D(),je(),Fe()}},[i,c,h,u,g,L,$]),x.useEffect(()=>{const P=j.current;P&&(P.defaultLayout=n,P.disableCursor=!!o)});const Z={[Ne]:d?"none":void 0};for(const P in v){const R=Ae(c,P),D=v[P];Z[R]=D}return K.jsx($e.Provider,{value:Y,children:K.jsx("div",{...p,"aria-orientation":u,className:t,"data-group":!0,"data-testid":c,id:c,ref:ne,style:{...f,...Z,display:"flex",flexDirection:u==="horizontal"?"row":"column",flexWrap:"nowrap"},children:e})})}function gt(e,t=10){let n=null;return o=>{n!==null&&clearTimeout(n),n=setTimeout(()=>{e(o)},t)}}function re(e,t){return`react-resizable-panels:${[e,...t].join(":")}`}function St({debounceSaveMs:e=100,panelIds:t,storage:n,...o}){const i=t!==void 0,s="id"in o?o.id:o.groupId,l=re(s,t??[]),r=x.useSyncExternalStore(vt,()=>n.getItem(l),()=>n.getItem(l)),a=x.useMemo(()=>r?JSON.parse(r):void 0,[r]),u=x.useMemo(()=>{const f=p=>{let m;i?m=re(s,Object.keys(p)):m=re(s,[]);try{n.setItem(m,JSON.stringify(p))}catch(h){console.error(h)}};return e>0?gt(f,e):f},[e,i,s,n]);return{defaultLayout:a,onLayoutChange:u}}function vt(){return function(){}}function xt(){return x.useState(null)}function zt(){return x.useRef(null)}function ce(){const e=x.useContext($e);return b(e,"Group Context not found; did you render a Panel or Separator outside of a Group?"),e}function bt({groupId:e,panelId:t}){const n=()=>{const{mountedGroups:r}=G();for(const[a,{defaultLayoutDeferred:u,derivedPanelConstraints:f,layout:p,separatorToPanels:m}]of r)if(a.id===e)return{defaultLayoutDeferred:u,derivedPanelConstraints:f,group:a,layout:p,separatorToPanels:m};throw Error(`Group ${e} not found`)},o=()=>{const r=n().derivedPanelConstraints.find(a=>a.panelId===t);if(r!==void 0)return r;throw Error(`Panel constraints not found for Panel ${t}`)},i=()=>{const r=n().group.panels.find(a=>a.id===t);if(r!==void 0)return r;throw Error(`Layout not found for Panel ${t}`)},s=()=>{const r=n().layout[t];if(r!==void 0)return r;throw Error(`Layout not found for Panel ${t}`)},l=r=>{const a=s();if(r===a)return;const{defaultLayoutDeferred:u,derivedPanelConstraints:f,group:p,layout:m,separatorToPanels:h}=n(),c=p.panels.findIndex(v=>v.id===t),d=c===p.panels.length-1,y=X({delta:d?a-r:r-a,initialLayout:m,panelConstraints:f,pivotIndices:d?[c-1,c]:[c,c+1],prevLayout:m,trigger:"imperative-api"}),S=_({layout:y,panelConstraints:f});U(m,S)||k(v=>({mountedGroups:new Map(v.mountedGroups).set(p,{defaultLayoutDeferred:u,derivedPanelConstraints:f,layout:S,separatorToPanels:h})}))};return{collapse:()=>{const{collapsible:r,collapsedSize:a}=o(),{mutableValues:u}=i(),f=s();r&&f!==a&&(u.expandToSize=f,l(a))},expand:()=>{const{collapsible:r,collapsedSize:a,minSize:u}=o(),{mutableValues:f}=i(),p=s();if(r&&p===a){let m=f.expandToSize??u;m===0&&(m=1),l(m)}},getSize:()=>{const{group:r}=n(),a=s(),{element:u}=i(),f=r.orientation==="horizontal"?u.offsetWidth:u.offsetHeight;return{asPercentage:a,inPixels:f}},isCollapsed:()=>{const{collapsible:r,collapsedSize:a}=o(),u=s();return r&&C(a,u)},resize:r=>{if(s()!==r){let u;switch(typeof r){case"number":{const{group:f}=n(),p=W({group:f});u=I(r/p*100);break}case"string":{u=parseFloat(r);break}}l(u)}}}}function wt(e,t){const{id:n}=ce(),o=x.useRef({collapse:oe,expand:oe,getSize:()=>({asPercentage:0,inPixels:0}),isCollapsed:()=>!1,resize:oe});x.useImperativeHandle(t,()=>o.current,[]),N(()=>{Object.assign(o.current,bt({groupId:n,panelId:e}))})}function Lt({children:e,className:t,collapsedSize:n="0%",collapsible:o=!1,defaultSize:i,elementRef:s,id:l,maxSize:r="100%",minSize:a="0%",onResize:u,panelRef:f,style:p,...m}){const h=!!l,c=ae(l),d=x.useRef(null),y=ue(d,s),{id:S,registerPanel:v}=ce(),z=u!==null,g=le((L,E,A)=>{u?.(L,l,A)});N(()=>{const L=d.current;if(L!==null)return v({element:L,id:c,idIsStable:h,mutableValues:{expandToSize:void 0,prevSize:void 0},onResize:z?g:void 0,panelConstraints:{collapsedSize:n,collapsible:o,defaultSize:i,maxSize:r,minSize:a}})},[n,o,i,z,c,h,r,a,g,v]),wt(c,f);const w=Ae(S,c);return K.jsx("div",{...m,"data-panel":!0,"data-testid":c,id:c,ref:y,style:{...Pt,flexBasis:0,flexGrow:`var(${w}, 1)`,flexShrink:1,overflow:"hidden",pointerEvents:`var(${Ne})`},children:K.jsx("div",{className:t,style:{width:"100%",height:"100%",...p},children:e})})}const Pt={minHeight:"unset",maxHeight:"unset",height:"unset",minWidth:"unset",maxWidth:"unset",width:"unset",flex:"unset",flexBasis:"unset",flexShrink:"unset",flexGrow:"unset",border:"unset",borderWidth:"unset",padding:"unset",margin:"unset"};function Rt(){return x.useState(null)}function Ct(){return x.useRef(null)}function Et({layout:e,panelConstraints:t,panelId:n,panelIndex:o}){let i,s;const l=e[n],r=t.find(a=>a.panelId===n);if(r){const a=r.maxSize,u=s=r.collapsible?r.collapsedSize:r.minSize,f=[o,o+1];s=_({layout:X({delta:u-l,initialLayout:e,panelConstraints:t,pivotIndices:f,prevLayout:e,trigger:"keyboard"}),panelConstraints:t})[n],i=_({layout:X({delta:a-l,initialLayout:e,panelConstraints:t,pivotIndices:f,prevLayout:e,trigger:"keyboard"}),panelConstraints:t})[n]}return{valueControls:n,valueMax:i,valueMin:s,valueNow:l}}function Mt({children:e,className:t,elementRef:n,id:o,style:i,...s}){const l=ae(o),[r,a]=x.useState({}),[u,f]=x.useState("inactive"),[p,m]=x.useState(null),h=ue(m,n),{id:c,orientation:d,registerSeparator:y}=ce(),S=d==="horizontal"?"vertical":"horizontal";return N(()=>{if(p!==null){const v={element:p,id:l},z=y(v),g=T.addListener("interactionStateChange",L=>{f(L.state!=="inactive"&&L.hitRegions.some(E=>E.separator===v)?L.state:"inactive")}),w=T.addListener("mountedGroupsChange",L=>{L.forEach(({derivedPanelConstraints:E,layout:A,separatorToPanels:ne},Y)=>{if(Y.id===c){const $=ne.get(v);if($){const j=$[0],Z=Y.panels.indexOf(j);a(Et({layout:A,panelConstraints:E,panelId:j.id,panelIndex:Z}))}}})});return()=>{g(),w(),z()}}},[p,c,l,y]),K.jsx("div",{...s,"aria-controls":r.valueControls,"aria-orientation":S,"aria-valuemax":r.valueMax,"aria-valuemin":r.valueMin,"aria-valuenow":r.valueNow,children:e,className:t,"data-separator":u,"data-testid":l,id:l,ref:h,role:"separator",style:{flexBasis:"auto",...i,flexGrow:0,flexShrink:0},tabIndex:0})}exports.Group=yt;exports.Panel=Lt;exports.Separator=Mt;exports.useDefaultLayout=St;exports.useGroupCallbackRef=xt;exports.useGroupRef=zt;exports.usePanelCallbackRef=Rt;exports.usePanelRef=Ct;
+//# sourceMappingURL=react-resizable-panels.cjs.map