react-resizable-panels 3.0.6 → 4.0.0-alpha.1

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,263 @@
 # 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>;
-```
-
-## 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>
-```
-
-### 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>
-  );
-}
-```
-
-### Why don't I see any resize UI?
-
-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:
-
-```tsx
-// Tailwind example
-<PanelResizeHandle className="w-2 bg-blue-800" />
-```
-
-### Can panel sizes be persistent?
-
-Yes. Panel groups with an `autoSaveId` prop will automatically save and restore their layouts on mount.
-
-### How can I use persistent layouts with SSR?
-
-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:
-
-#### Server component
+React components for resizable panel groups/layouts.
 
-```tsx
-import ResizablePanels from "@/app/ResizablePanels";
-import { cookies } from "next/headers";
+## Support
 
-export function ServerComponent() {
-  const layout = cookies().get("react-resizable-panels:layout");
+If you like this project there are several ways to support it:
 
-  let defaultLayout;
-  if (layout) {
-    defaultLayout = JSON.parse(layout.value);
-  }
+- [Become a GitHub sponsor](https://github.com/sponsors/bvaughn/)
+- or [buy me a coffee](http://givebrian.coffee/)
 
-  return <ClientComponent defaultLayout={defaultLayout} />;
-}
-```
-
-#### 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>
-  );
-}
-```
-
-> [!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";
+## Installation
 
-setNonce("your-nonce-value-here");
-```
-
-#### How can I disable global cursor styles?
+Begin by installing the library from NPM:
 
-```js
-import { disableGlobalCursorStyles } from "react-resizable-panels";
-
-disableGlobalCursorStyles();
+```sh
+npm install react-resizable-panels
 ```
 
-#### 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);
-```
+## TypeScript types
+
+TypeScript definitions are included within the published `dist` folder
+
+## Documentation
+
+Documentation for this project is available at [react-resizable-panels.vercel.app](https://react-resizable-panels.vercel.app/).
+
+### Group
+
+#### Required props
+
+<!-- Group:required:begin -->
+
+<!-- Group:required:end -->
+
+#### Optional props
+
+<!-- Group:optional:begin -->
+
+<table>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>children</td>
+      <td><p>Panel and Separator components that comprise this group.</p>
+</td>
+    </tr>
+    <tr>
+      <td>className</td>
+      <td><p>CSS class name.</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>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>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>
+    <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>
+  </tbody>
+</table>
+
+<!-- Group:optional:end -->
+
+### Panel
+
+#### Required props
+
+<!-- Panel:required:begin -->
+
+<!-- Panel:required:end -->
+
+#### Optional props
+
+<!-- Panel:optional: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>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>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>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; receives a map of Panel id to size.</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>isExpanded(): 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>
+    <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>
+  </tbody>
+</table>
+
+<!-- Panel:optional:end -->
+
+### Separator
+
+#### Required props
+
+<!-- Separator:required:begin -->
+
+<!-- Separator:required:end -->
+
+#### Optional props
+
+<!-- Separator:optional: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-state</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>
+    <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-state</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>
+  </tbody>
+</table>
+
+<!-- Separator:optional:end -->

package/dist/react-resizable-panels.cjs

@@ -0,0 +1,2 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react/jsx-runtime"),p=require("react");function be(e,t){const n=getComputedStyle(e),o=parseFloat(n.fontSize);return t*o}function we(e,t){const n=getComputedStyle(e.ownerDocument.body),o=parseFloat(n.fontSize);return t*o}function Re(e){return e/100*window.innerHeight}function Le(e){return e/100*window.innerWidth}function Pe(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 F({groupSize:e,panelElement:t,styleProp:n}){let o;const[r,i]=Pe(n);switch(i){case"%":{o=r/100*e;break}case"px":{o=r;break}case"rem":{o=we(t,r);break}case"em":{o=be(t,r);break}case"vh":{o=Re(r);break}case"vw":{o=Le(r);break}}return o}function L(e){return parseFloat(e.toFixed(3))}function J({group:e}){const{orientation:t,panels:n}=e;return n.reduce((o,r)=>(o+=t==="horizontal"?r.element.offsetWidth:r.element.offsetHeight,o),0)}function re(e){const{panels:t}=e,n=J({group:e});return t.map(o=>{const{element:r,panelConstraints:i}=o;let a=0;if(i.collapsedSize){const u=F({groupSize:n,panelElement:r,styleProp:i.collapsedSize});a=L(u/n*100)}let s;if(i.defaultSize){const u=F({groupSize:n,panelElement:r,styleProp:i.defaultSize});s=L(u/n*100)}let l=0;if(i.minSize){const u=F({groupSize:n,panelElement:r,styleProp:i.minSize});l=L(u/n*100)}let c=100;if(i.maxSize){const u=F({groupSize:n,panelElement:r,styleProp:i.maxSize});c=L(u/n*100)}return{collapsedSize:a,collapsible:i.collapsible===!0,defaultSize:s,minSize:l,maxSize:c,panelId:o.id}})}class Ce{#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 r=!1,i=null;const a=Array.from(o);for(let s=0;s<a.length;s++){const l=a[s];try{l.call(null,n)}catch(c){i===null&&(r=!0,i=c)}}if(r)throw i}}removeAllListeners(){this.#e={}}removeListener(t,n){const o=this.#e[t];if(o!==void 0){const r=o.indexOf(n);r>=0&&o.splice(r,1)}}}let E={cursorFlags:0,interactionState:{state:"inactive"},mountedGroups:new Map};const T=new Ce;function I(){return E}function G(e){const t=typeof e=="function"?e(E):e;return E===t||(E={...E,...t},t.cursorFlags!==void 0&&T.emit("cursorFlagsChange",E.cursorFlags),t.interactionState!==void 0&&T.emit("interactionStateChange",E.interactionState),t.mountedGroups!==void 0&&T.emit("mountedGroupsChange",E.mountedGroups)),E}const Ee=e=>e,B=()=>{},ue=1,fe=2,de=4,pe=8,ae={coarse:10,precise:5};function K(e,t){return t.sort(e==="horizontal"?Me:Ge)}function Me(e,t){const n=e.element.offsetLeft-t.element.offsetLeft;return n!==0?n:e.element.offsetWidth-t.element.offsetWidth}function Ge(e,t){const n=e.element.offsetTop-t.element.offsetTop;return n!==0?n:e.element.offsetHeight-t.element.offsetHeight}function Ie(e){const{element:t,orientation:n,panels:o,separators:r}=e,i=K(n,Array.from(t.children).filter(c=>c instanceof HTMLElement).map(c=>({element:c}))).map(({element:c})=>c),a=[];let s,l;for(const c of i){const u=o.find(d=>d.element===c);if(u){if(s){const d=s.element.getBoundingClientRect(),h=c.getBoundingClientRect();a.push({group:e,panels:[s,u],separator:l,rect:n==="horizontal"?new DOMRect(d.right,h.top,h.left-d.right,h.height):new DOMRect(h.left,d.bottom,h.width,h.top-d.bottom)})}s=u,l=void 0}else{const d=r.find(h=>h.element===c);d?l=d:(s=void 0,l=void 0)}}return a}function Oe(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 ke(e,t,n){let o,r={x:1/0,y:1/0};for(const i of t){const a=Oe(n,i.rect);switch(e){case"horizontal":{a.x<=r.x&&(o=i,r=a);break}case"vertical":{a.y<=r.y&&(o=i,r=a);break}}}return o?{distance:r,hitRegion:o}:void 0}let H;function Ae(){return H===void 0&&(typeof matchMedia=="function"?H=!!matchMedia("(pointer:coarse)").matches:H=!1),H}function he(e,t){const n=[];return t.forEach((o,r)=>{if(r.disabled)return;const i=Ae()?ae.coarse:ae.precise,a=Ie(r),s=ke(r.orientation,a,{x:e.clientX,y:e.clientY});s&&s.distance.x<=i&&s.distance.y<=i&&n.push(s.hitRegion)}),n}function le(e){if(e.defaultPrevented)return;const{mountedGroups:t}=I(),n=he(e,t),o=new Set,r=new Set,i=new Set,a=new Map;n.forEach(s=>{o.add(s.group),s.panels.forEach(c=>{r.add(c)}),s.separator&&i.add(s.separator);const l=t.get(s.group);l&&a.set(s.group,l.layout)}),G({interactionState:{hitRegions:n,initialLayoutMap:a,pointerDownAtPoint:{x:e.clientX,y:e.clientY},state:"active"}}),n.length&&e.preventDefault()}function Ne({cursorFlags:e,groups:t,state:n}){let o=0,r=0;switch(n){case"active":case"hover":t.forEach(i=>{if(!i.disableCursor)switch(i.orientation){case"horizontal":{o++;break}case"vertical":{r++;break}}})}if(o===0&&r===0)return null;switch(n){case"active":{const i=(e&ue)!==0,a=(e&fe)!==0,s=(e&de)!==0,l=(e&pe)!==0;if(e){if(i)return s?"se-resize":l?"ne-resize":"e-resize";if(a)return s?"sw-resize":l?"nw-resize":"w-resize";if(s)return"s-resize";if(l)return"n-resize"}break}}return o>0&&r>0?"move":o>0?"ew-resize":"ns-resize"}let V=null,C;function q(){C===void 0&&(C=new CSSStyleSheet,document.adoptedStyleSheets=[C]);const{cursorFlags:e,interactionState:t}=I();switch(t.state){case"active":case"hover":{const n=Ne({cursorFlags:e,groups:t.hitRegions.map(o=>o.group),state:t.state});if(V===n)return;V=n,n?C.cssRules.length===0?C.insertRule(`*{cursor: ${n} !important;}`):C.replaceSync(`*{cursor: ${n} !important;}`):C.cssRules.length===1&&C.deleteRule(0);break}case"inactive":{V=null,C.cssRules.length===1&&C.deleteRule(0);break}}}function M(e,t="Assertion error"){if(!e)throw console.error(t),Error(t)}function De(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 R(e,t,n=0){return Math.abs(L(e)-L(t))<=n}function X(e,t){return R(e,t)?0:e>t?1:-1}function D({panelConstraints:e,size:t}){const{collapsedSize:n=0,collapsible:o,maxSize:r=100,minSize:i=0}=e;if(X(t,i)<0)if(o){const a=(n+i)/2;X(t,a)<0?t=n:t=i}else t=i;return t=Math.min(r,t),t=L(t),t}function Te({delta:e,initialLayout:t,panelConstraints:n,pivotIndices:o,prevLayout:r,trigger:i}){if(R(e,0))return t;const a=Object.values(t),s=Object.values(r),l=[...a],[c,u]=o;M(c!=null,"Invalid first pivot index"),M(u!=null,"Invalid second pivot index");let d=0;{const m=e<0?1:-1;let f=e<0?u:c,g=0;for(;;){const z=a[f];M(z!=null,`Previous layout not found for panel index ${f}`);const x=D({panelConstraints:n[f],size:100})-z;if(g+=x,f+=m,f<0||f>=n.length)break}const y=Math.min(Math.abs(e),Math.abs(g));e=e<0?0-y:y}{let f=e<0?c:u;for(;f>=0&&f<n.length;){const g=Math.abs(e)-Math.abs(d),y=a[f];M(y!=null,`Previous layout not found for panel index ${f}`);const z=y-g,b=D({panelConstraints:n[f],size:z});if(!R(y,b)&&(d+=y-b,l[f]=b,d.toFixed(3).localeCompare(Math.abs(e).toFixed(3),void 0,{numeric:!0})>=0))break;e<0?f--:f++}}if(De(s,l))return r;{const m=e<0?u:c,f=a[m];M(f!=null,`Previous layout not found for panel index ${m}`);const g=f+d,y=D({panelConstraints:n[m],size:g});if(l[m]=y,!R(y,g)){let z=g-y,x=e<0?u:c;for(;x>=0&&x<n.length;){const P=l[x];M(P!=null,`Previous layout not found for panel index ${x}`);const O=P+z,k=D({panelConstraints:n[x],size:O});if(R(P,k)||(z-=k-P,l[x]=k),R(z,0))break;e>0?x--:x++}}}const h=Object.values(l).reduce((m,f)=>f+m,0);if(!R(h,100,.1))return r;const v=Object.keys(r);return l.reduce((m,f,g)=>(m[v[g]]=f,m),{})}function Q(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(X(e[n],t[n])!==0)return!1;return!0}function W(e){if(e.defaultPrevented)return;const{interactionState:t,mountedGroups:n}=I();switch(t.state){case"active":{if(e.type!=="pointerleave"&&e.buttons===0){G(i=>i.interactionState.state==="inactive"?i:{cursorFlags:0,interactionState:{state:"inactive"}});return}let o=0;const r=new Map(n);t.hitRegions.forEach(i=>{const{disableCursor:a,element:s,orientation:l,panels:c}=i.group;let u=0;t.state==="active"&&(l==="horizontal"?u=(e.clientX-t.pointerDownAtPoint.x)/s.offsetWidth*100:u=(e.clientY-t.pointerDownAtPoint.y)/s.offsetHeight*100);const d=t.initialLayoutMap.get(i.group),{derivedPanelConstraints:h,layout:v}=n.get(i.group)??{};if(h&&d&&v){const m=Te({delta:u,initialLayout:d,panelConstraints:h,pivotIndices:i.panels.map(f=>c.indexOf(f)),prevLayout:v,trigger:"mouse-or-touch"});if(Q(m,v)){if(u!==0&&!a)switch(l){case"horizontal":{o|=u<0?ue:fe;break}case"vertical":{o|=u<0?de:pe;break}}}else{r.set(i.group,{derivedPanelConstraints:h,layout:m});const f=i.group.panels.map(({id:g})=>g).join(",");i.group.inMemoryLayouts[f]=m}}}),G({cursorFlags:o,mountedGroups:r}),q();break}default:{const o=he(e,n);o.length===0?t.state!=="inactive"&&G({interactionState:{state:"inactive"}}):G({interactionState:{hitRegions:o,state:"hover"}}),q();break}}}function ce(e){if(e.defaultPrevented)return;e.preventDefault();const{interactionState:t}=I();switch(t.state){case"active":G({cursorFlags:0,interactionState:{state:"inactive"}}),q()}}function _e(e){let t=0,n=0;const o={};for(const i of e)if(i.defaultSize!==void 0){t++;const a=L(i.defaultSize);n+=a,o[i.panelId]=a}else o[i.panelId]=void 0;const r=e.length-t;if(r!==0){const i=L((100-n)/r);for(const a of e)a.defaultSize===void 0&&(o[a.panelId]=i)}return o}function $e(e,t,n){const o=n[0];if(!o)return;const r=e.panels.find(a=>a.element===t);if(!r||!r.onResize)return;const i=J({group:e});r.onResize({asPercentage:L(o.inlineSize/i*100),inPixels:o.inlineSize},r.id)}function Y({layout:e,panelConstraints:t}){const o=[...Object.values(e)],r=o.reduce((s,l)=>s+l,0);if(o.length!==t.length)throw Error(`Invalid ${t.length} panel layout: ${o.map(s=>`${s}%`).join(", ")}`);if(!R(r,100)&&o.length>0)for(let s=0;s<t.length;s++){const l=o[s];M(l!=null,`No layout data found for index ${s}`);const c=100/r*l;o[s]=c}let i=0;for(let s=0;s<t.length;s++){const l=o[s];M(l!=null,`No layout data found for index ${s}`);const c=D({panelConstraints:t[s],size:l});l!=c&&(i+=l-c,o[s]=c)}if(!R(i,0))for(let s=0;s<t.length;s++){const l=o[s];M(l!=null,`No layout data found for index ${s}`);const c=l+i,u=D({panelConstraints:t[s],size:c});if(l!==u&&(i-=u-l,o[s]=u,R(i,0)))break}const a=Object.keys(e);return o.reduce((s,l,c)=>(s[a[c]]=l,s),{})}function je(e){let t=!1;const n=new ResizeObserver(l=>{for(const c of l){const{borderBoxSize:u,target:d}=c;d===e.element?t&&G(h=>{const v=h.mountedGroups.get(e);if(v){const m=re(e),f=v.layout,g=Y({layout:f,panelConstraints:m});return{mountedGroups:new Map(h.mountedGroups).set(e,{derivedPanelConstraints:m,layout:g})}}return h}):$e(e,d,u)}});n.observe(e.element),e.panels.forEach(l=>{l.onResize&&n.observe(l.element)});const o=re(e),r=e.panels.map(({id:l})=>l).join(","),i=e.inMemoryLayouts[r]??e.defaultLayout??_e(o),a=Y({layout:i,panelConstraints:o}),s=G(l=>({mountedGroups:new Map(l.mountedGroups).set(e,{derivedPanelConstraints:o,layout:a})}));return t=!0,s.mountedGroups.size===1&&(window.addEventListener("pointerdown",le),window.addEventListener("pointerleave",W),window.addEventListener("pointermove",W),window.addEventListener("pointerup",ce)),function(){const c=G(u=>{const d=new Map(u.mountedGroups);return d.delete(e),{mountedGroups:d}});t=!1,c.mountedGroups.size===0&&(window.removeEventListener("pointerdown",le),window.removeEventListener("pointerleave",W),window.removeEventListener("pointermove",W),window.removeEventListener("pointerup",ce)),n.disconnect()}}function ee(e){const t=p.useId();return`${e??t}`}const _=typeof window<"u"?p.useLayoutEffect:p.useEffect;function te(e){const t=p.useRef(e);return _(()=>{t.current=e},[e]),p.useCallback(n=>t.current?.(n),[t])}function ne(...e){return te(t=>{e.forEach(n=>{if(n)switch(typeof n){case"function":{n(t);break}case"object":{n.current=t;break}}})})}const me="--react-resizable-panels--panel--pointer-events";function ve(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 ge=p.createContext(null);function Fe({groupId:e}){const t=()=>{const{mountedGroups:n}=I();for(const[o,{derivedPanelConstraints:r,layout:i}]of n)if(o.id===e)return{derivedPanelConstraints:r,group:o,layout:i};throw Error(`Group ${e} not found`)};return{getLayout(){const{layout:n}=t();return n},setLayout(n){const{derivedPanelConstraints:o,group:r,layout:i}=t(),a=Y({layout:n,panelConstraints:o});return Q(i,a)||G(s=>({mountedGroups:new Map(s.mountedGroups).set(r,{derivedPanelConstraints:o,layout:a})})),a}}}function He(e,t){const n=p.useRef({getLayout:()=>({}),setLayout:Ee});p.useImperativeHandle(t,()=>n.current,[]),_(()=>{Object.assign(n.current,Fe({groupId:e}))})}function We({children:e,className:t,defaultLayout:n,disableCursor:o,disabled:r,elementRef:i,groupRef:a,id:s,onLayoutChange:l,orientation:c="horizontal",style:u}){const d=p.useRef({}),h=te(S=>{Q(d.current,S)||(d.current=S,l?.(S))}),v=ee(s),[m,f]=p.useState(!1),[g,y]=p.useState(null),z=p.useRef({}),[b,x]=p.useState(n??{}),[P,O]=p.useState([]),[k,ie]=p.useState([]),ye=ne(y,i);He(v,a);const Se=p.useMemo(()=>({id:v,orientation:c,registerPanel:S=>(O(w=>K(c,[...w,S])),()=>{O(w=>w.filter(A=>A!==S))}),registerSeparator:S=>(ie(w=>K(c,[...w,S])),()=>{ie(w=>w.filter(A=>A!==S))})}),[v,c]);_(()=>{if(g!==null&&P.length>0){const S={defaultLayout:n,disableCursor:!!o,disabled:!!r,element:g,id:v,inMemoryLayouts:z.current,orientation:c,panels:P,separators:k},w=je(S),U=I().mountedGroups.get(S);U&&(x(U.layout),h?.(U.layout));const xe=T.addListener("interactionStateChange",j=>{switch(j.state){case"active":case"hover":{f(j.hitRegions.some(N=>N.group===S));break}}}),ze=T.addListener("mountedGroupsChange",j=>{const N=j.get(S);N&&N.derivedPanelConstraints.length>0&&(x(N.layout),h?.(N.layout))});return()=>{w(),xe(),ze()}}},[n,o,r,g,v,h,c,P,k]);const se={[me]:m?"none":void 0};for(const S in b){const w=ve(v,S),A=b[S];se[w]=A}return $.jsx(ge.Provider,{value:Se,children:$.jsx("div",{"aria-orientation":c,className:t,"data-group":v,ref:ye,style:{...u,...se,display:"flex",flexDirection:c==="horizontal"?"row":"column",flexWrap:"nowrap"},children:e})})}function Z(e){return`react-resizable-panels:${e}`}function Ue({id:e,layout:t,storage:n}){try{const o=Z(e);n.setItem(o,JSON.stringify(t))}catch(o){console.error(o)}}function Be({groupId:e,storage:t}){const n=p.useSyncExternalStore(Ve,()=>t.getItem(Z(e)),()=>t.getItem(Z(e))),o=p.useMemo(()=>n?JSON.parse(n):null,[n]),r=p.useCallback(i=>Ue({id:e,layout:i,storage:t}),[e,t]);return{defaultLayout:o,onLayoutChange:r}}function Ve(){return function(){}}function Ke(){return p.useState(null)}function qe(){return p.useRef(null)}function oe(){const e=p.useContext(ge);return M(e,"Unexpected"),e}function Xe({groupId:e,panelId:t}){const n=()=>{const{mountedGroups:a}=I();for(const[s,{derivedPanelConstraints:l,layout:c}]of a)if(s.id===e)return{derivedPanelConstraints:l,group:s,layout:c};throw Error(`Group ${e} not found`)},o=()=>{const a=n().derivedPanelConstraints.find(s=>s.panelId===t);if(a!==void 0)return a;throw Error(`Panel constraints not found for Panel ${t}`)},r=()=>{const a=n().group.panels.find(s=>s.id===t);if(a!==void 0)return a;throw Error(`Layout not found for Panel ${t}`)},i=()=>{const a=n().layout[t];if(a!==void 0)return a;throw Error(`Layout not found for Panel ${t}`)};return{collapse:()=>{const{collapsible:a,collapsedSize:s}=o();i()},expand:()=>{const{collapsible:a,collapsedSize:s,minSize:l}=o();i()},getSize:()=>{const{group:a}=n(),s=i(),{element:l}=r(),c=a.orientation==="horizontal"?l.offsetWidth:l.offsetHeight;return{asPercentage:s,inPixels:c}},isCollapsed:()=>{const{collapsible:a,collapsedSize:s}=o(),l=i();return a&&R(s,l)},resize:a=>{if(i()!==a)switch(typeof a){case"number":{const{group:l}=n(),c=J({group:l});L(a/c*100);break}}}}}function Ye(e,t){const{id:n}=oe(),o=p.useRef({collapse:B,expand:B,getSize:()=>({asPercentage:0,inPixels:0}),isCollapsed:()=>!1,resize:B});p.useImperativeHandle(t,()=>o.current,[]),_(()=>{Object.assign(o.current,Xe({groupId:n,panelId:e}))})}function Ze({children:e,className:t,collapsedSize:n=0,collapsible:o=!1,defaultSize:r,elementRef:i,id:a,maxSize:s="100",minSize:l="0",onResize:c,panelRef:u,style:d}){const h=!!a,v=ee(a),[m,f]=p.useState(null),g=ne(f,i),{id:y,registerPanel:z}=oe(),b=c!==null,x=te(O=>{c?.(O,a)});_(()=>{if(m!==null)return z({element:m,id:v,idIsStable:h,onResize:b?x:void 0,panelConstraints:{collapsedSize:n,collapsible:o,defaultSize:r,maxSize:s,minSize:l}})},[n,o,r,m,b,v,h,s,l,x,z]),Ye(v,u);const P=ve(y,v);return $.jsx("div",{"data-panel":v,ref:g,style:{flexBasis:0,flexGrow:`var(${P}, 1)`,flexShrink:1,overflow:"hidden",pointerEvents:`var(${me})`},children:$.jsx("div",{className:t,style:{width:"100%",height:"100%",...d},children:e})})}function Je(){return p.useState(null)}function Qe(){return p.useRef(null)}function et({children:e,className:t,elementRef:n,id:o,style:r}){const i=ee(o),[a,s]=p.useState(null),[l,c]=p.useState("inactive"),u=ne(s,n),{orientation:d,registerSeparator:h}=oe(),v=d==="horizontal"?"vertical":"horizontal";return _(()=>{if(a!==null){const m={element:a,id:i},f=h(m),g=T.addListener("interactionStateChange",y=>{c(y.state!=="inactive"&&y.hitRegions.some(z=>z.separator===m)?y.state:"inactive")});return()=>{f(),g()}}},[a,i,h]),$.jsx("div",{"aria-orientation":v,children:e,className:t,"data-separator":i,"data-separator-state":l,ref:u,role:"separator",style:{flexBasis:"auto",...r,flexGrow:0,flexShrink:0},tabIndex:0})}exports.Group=We;exports.Panel=Ze;exports.Separator=et;exports.useDefaultLayout=Be;exports.useGroupCallbackRef=Ke;exports.useGroupRef=qe;exports.usePanelCallbackRef=Je;exports.usePanelRef=Qe;
+//# sourceMappingURL=react-resizable-panels.cjs.map