react-zeugma 1.4.1 → 2.0.0

package/README.md

@@ -41,7 +41,7 @@ Import the core components and configure the layout state inside your React appl
 
 ```tsx
 import { useState } from 'react'
-import { DashboardProvider, PaneTree, Pane, DragHandle, TreeNode } from 'react-zeugma'
+import { Zeugma, PaneTree, Pane, DragHandle, TreeNode } from 'react-zeugma'
 
 const initialLayout: TreeNode = {
   type: 'split',
@@ -81,11 +81,11 @@ export default function Dashboard() {
   const [layout, setLayout] = useState<TreeNode | null>(initialLayout)
 
   return (
-    <DashboardProvider layout={layout} onChange={setLayout} renderPane={(id) => <MyPane id={id} />}>
+    <Zeugma layout={layout} onChange={setLayout} renderPane={(id) => <MyPane id={id} />}>
       <div className="w-screen h-screen">
         <PaneTree />
       </div>
-    </DashboardProvider>
+    </Zeugma>
   )
 }
 ```
@@ -94,7 +94,7 @@ export default function Dashboard() {
 
 ## API Reference
 
-### `<DashboardProvider>`
+### `<Zeugma>`
 
 The context provider that sets up the drag-and-drop state machine, monitors active drags, and registers layout change notifications.
 
@@ -122,7 +122,7 @@ The context provider that sets up the drag-and-drop state machine, monitors acti
 
 ### `<PaneTree>`
 
-Recursively renders the split nodes and pane nodes. Must be placed inside `<DashboardProvider>`.
+Recursively renders the split nodes and pane nodes. Must be placed inside `<Zeugma>`.
 
 | Prop          | Type               | Required | Description                                                         |
 | ------------- | ------------------ | -------- | ------------------------------------------------------------------- |
@@ -210,7 +210,7 @@ Recursively searches the layout tree and returns the target `PaneNode` if found,
 Use custom CSS or styling rules to style resizers, dragging states, drop previews, or active nodes by overriding `classNames` in the provider.
 
 ```tsx
-<DashboardProvider
+<Zeugma
   layout={layout}
   onChange={setLayout}
   renderPane={renderPane}
@@ -225,7 +225,7 @@ Use custom CSS or styling rules to style resizers, dragging states, drop preview
   }}
 >
   <PaneTree />
-</DashboardProvider>
+</Zeugma>
 ```
 
 ---
@@ -273,12 +273,12 @@ export interface PaneRenderProps {
   ) => void
 }
 
-export interface DashboardStateValue {
+export interface ZeugmaStateValue {
   layout: TreeNode | null
   onLayoutChange: (newLayout: TreeNode | null) => void
   renderPane: (paneId: string) => ReactNode
   activeId: string | null
-  draggedOutId: string | null
+  dismissIntentId: string | null
   setContainerRef: (element: HTMLElement | null) => void
   fullscreenPaneId: string | null
   classNames: ZeugmaClassNames
@@ -292,7 +292,7 @@ export interface DashboardStateValue {
   maxSplitPercentage?: number
 }
 
-export interface DashboardActionsValue {
+export interface ZeugmaActionsValue {
   removePane: (paneId: string) => void
   addPane: (paneId: string) => void
   swapPanes: (paneIdA: string, paneIdB: string) => void
@@ -361,7 +361,7 @@ export type TreeNode = SplitNode | PaneNode
 
 ## 2. Core Components
 
-### `<DashboardProvider>`
+### `<Zeugma>`
 
 The root context provider. It handles the drag-and-drop event loop and coordinates the layout state.
 
@@ -389,7 +389,7 @@ The root context provider. It handles the drag-and-drop event loop and coordinat
 
 ### `<PaneTree>`
 
-Recursively renders the split nodes and pane nodes. Must be placed inside `<DashboardProvider>`.
+Recursively renders the split nodes and pane nodes. Must be placed inside `<Zeugma>`.
 
 #### Props
 
@@ -467,10 +467,10 @@ Import these helpers from `react-zeugma` to manipulate the tree layout programma
 
 Alternatively, you can consume state and mutation helpers directly from the context hooks:
 
-- **`useDashboardState()`**: Returns the reactive state values (e.g., `layout`, `activeId`, `classNames`). Consumers of this hook will re-render whenever layout state updates.
-- **`useDashboardActions()`**: Returns the stable layout mutation actions (e.g., `removePane`, `splitPane`). Because these actions have a permanent identity, consumers of this hook **will not** re-render when layout state changes, providing a significant performance optimization.
+- **`useZeugmaState()`**: Returns the reactive state values (e.g., `layout`, `activeId`, `classNames`). Consumers of this hook will re-render whenever layout state updates.
+- **`useZeugmaActions()`**: Returns the stable layout mutation actions (e.g., `removePane`, `splitPane`). Because these actions have a permanent identity, consumers of this hook **will not** re-render when layout state changes, providing a significant performance optimization.
 
-The actions returned by `useDashboardActions()` are:
+The actions returned by `useZeugmaActions()` are:
 
 - **`removePane(paneId: string) => void`**
 - **`addPane(paneId: string) => void`**
@@ -485,7 +485,7 @@ The actions returned by `useDashboardActions()` are:
 
 ```tsx
 import { useState } from 'react'
-import { DashboardProvider, PaneTree, Pane, DragHandle, TreeNode } from 'react-zeugma'
+import { Zeugma, PaneTree, Pane, DragHandle, TreeNode } from 'react-zeugma'
 
 const initialLayout: TreeNode = {
   type: 'split',
@@ -526,7 +526,7 @@ export default function App() {
   }
 
   return (
-    <DashboardProvider
+    <Zeugma
       layout={layout}
       onChange={setLayout}
       renderPane={(id) => <CustomPane id={id} />}
@@ -537,7 +537,7 @@ export default function App() {
       <div style={{ width: '100vw', height: '100vh' }}>
         <PaneTree />
       </div>
-    </DashboardProvider>
+    </Zeugma>
   )
 }
 ```
@@ -546,7 +546,7 @@ export default function App() {
 
 ## 5. Styling Customization
 
-`react-zeugma` is style-agnostic and relies on class name configuration for visual states. Define classes in your styling framework and pass them via the `classNames` prop on `<DashboardProvider>`:
+`react-zeugma` is style-agnostic and relies on class name configuration for visual states. Define classes in your styling framework and pass them via the `classNames` prop on `<Zeugma>`:
 
 ```ts
 interface ZeugmaClassNames {

package/dist/index.cjs

@@ -1,7 +1,7 @@
-'use strict';var react=require('react'),core=require('@dnd-kit/core'),jsxRuntime=require('react/jsx-runtime');var se=react.createContext(void 0),ae=react.createContext(void 0);var G=()=>{let e=react.useContext(se);if(!e)throw new Error("useDashboardState must be used within a DashboardProvider");return e},be=()=>{let e=react.useContext(ae);if(!e)throw new Error("useDashboardActions must be used within a DashboardProvider");return e};function Y(e,t){if(e===null)return null;if(e.type==="pane")return e.paneId===t?null:e;let n=Y(e.first,t),r=Y(e.second,t);return n===null?r:r===null?n:{...e,first:n,second:r}}function re(e,t,n,r,o){if(e===null)return typeof o=="string"?{type:"pane",paneId:o}:o;if(e.type==="pane"){if(e.paneId===t){let i=typeof o=="string"?{type:"pane",paneId:o}:o,d=r==="left"||r==="top";return {type:"split",direction:n,first:d?i:e,second:d?e:i,splitPercentage:50}}return e}return {...e,first:re(e.first,t,n,r,o)||e.first,second:re(e.second,t,n,r,o)||e.second}}function Pe(e,t,n){if(e===null)return null;let r=O(e,t),o=O(e,n);if(!r||!o)return e;function i(d){return d.type==="pane"?d.paneId===t?{...o}:d.paneId===n?{...r}:d:{...d,first:i(d.first),second:i(d.second)}}return i(e)}function Ze(e,t){if(e===null)return {type:"pane",paneId:t};function n(r,o){return r.type==="pane"?{type:"split",direction:o==="row"?"column":"row",splitPercentage:50,first:r,second:{type:"pane",paneId:t}}:{...r,second:n(r.second,r.direction)}}return n(e,null)}function Q(e,t,n){return e===null?null:e===t?{...e,splitPercentage:n}:e.type==="split"?{...e,first:Q(e.first,t,n)||e.first,second:Q(e.second,t,n)||e.second}:e}function _e(e,t,n){let r=O(e,t)??{type:"pane",paneId:t},o=Y(e,t);if(o===null)return {...r};let i=n==="left"||n==="right"?"row":"column",d=n==="left"||n==="top",c={...r};return {type:"split",direction:i,first:d?c:o,second:d?o:c,splitPercentage:50}}function O(e,t){return e===null?null:e.type==="pane"?e.paneId===t?e:null:O(e.first,t)??O(e.second,t)}function le(e,t,n){if(e===null)return null;if(e.type==="pane"){if(e.paneId===t){let r=n(e.metadata);if(r===void 0){let{metadata:o,...i}=e;return i}return {...e,metadata:r}}return e}return {...e,first:le(e.first,t,n)??e.first,second:le(e.second,t,n)??e.second}}var je=8,et=8,Xt=4;var at=({activeId:e,render:t,className:n})=>{let r=react.useRef(null);return react.useEffect(()=>{let o=i=>{r.current&&(r.current.style.transform=`translate(${i.clientX+12}px, ${i.clientY+12}px)`);};return document.addEventListener("pointermove",o),()=>document.removeEventListener("pointermove",o)},[]),jsxRuntime.jsx("div",{ref:r,className:n,style:{position:"fixed",top:0,left:0,zIndex:9999,pointerEvents:"none"},children:t(e)})},Re=class extends core.PointerSensor{static activators=[{eventName:"onPointerDown",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},De=class extends core.TouchSensor{static activators=[{eventName:"onTouchStart",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},lt=({layout:e,onChange:t,renderPane:n,renderDragOverlay:r,classNames:o={},fullscreenPaneId:i=null,onFullscreenChange:d,onRemove:c,dragActivationDistance:D=8,snapThreshold:P=8,onDragStart:y,onDragEnd:s,onResizeStart:x,onResize:g,onResizeEnd:N,minSplitPercentage:E=5,maxSplitPercentage:I=95,enableDragToDismiss:S=false,dismissThreshold:w=60,onDismissIntentChange:H,children:z})=>{let[u,m]=react.useState(e),[ee,te]=react.useState(e);e!==ee&&(te(e),m(e));let[b,T]=react.useState(null),[v,M]=react.useState(null),B=react.useRef(null),Z=react.useRef(null),h=react.useCallback(l=>{B.current=l;},[]),C=react.useCallback(l=>n(l),[n]),F=react.useMemo(()=>o,[o.pane,o.dropPreview,o.swapPreview,o.dragOverlay,o.resizer,o.dismissPreview]),_=core.useSensors(core.useSensor(Re,{activationConstraint:{distance:D}}),core.useSensor(De,{activationConstraint:{delay:250,tolerance:5}})),X=l=>{let f=l.active.id.toString();T(f),S&&B.current?Z.current=B.current.getBoundingClientRect():Z.current=null,y&&y(f);},K=l=>{if(!S)return;let f=l.active.id.toString(),a=Z.current;if(!a){v!==null&&(M(null),H?.(null));return}let p=l.activatorEvent,$=null,A=null;if(p instanceof MouseEvent||p instanceof PointerEvent)$=p.clientX+l.delta.x,A=p.clientY+l.delta.y;else if(typeof TouchEvent<"u"&&p instanceof TouchEvent){let R=p.touches[0]||p.changedTouches[0];R&&($=R.clientX+l.delta.x,A=R.clientY+l.delta.y);}let k=0;if($!==null&&A!==null){let R=0,L=0;$<a.left?R=a.left-$:$>a.right&&(R=$-a.right),A<a.top?L=a.top-A:A>a.bottom&&(L=A-a.bottom),k=Math.sqrt(R*R+L*L);}else {let R=l.active.rect.current.translated;if(R){let L=R.left+R.width/2,q=R.top+R.height/2,J=0,j=0;L<a.left?J=a.left-L:L>a.right&&(J=L-a.right),q<a.top?j=a.top-q:q>a.bottom&&(j=q-a.bottom),k=Math.sqrt(J*J+j*j);}}k>w?v!==f&&(M(f),H?.(f)):v!==null&&(M(null),H?.(null));},ne=l=>{T(null);let{active:f,over:a}=l,p=f.id.toString(),$=S&&v===p;if(M(null),H?.(null),Z.current=null,$){c?c(p):he(p),s&&s(p,null,null);return}if(!a){s&&s(p,null,null);return}let A=a.id.toString(),k=A.match(/^drop-root-(left|right|top|bottom)$/);if(k){let[,W]=k,oe=_e(u,p,W);m(oe),t(oe),s&&s(p,"root",{type:"split",direction:W==="left"||W==="right"?"row":"column",position:W});return}let ve=A.match(/^drop-center-(.+)$/);if(ve){let[,W]=ve;if(p!==W){let oe=Pe(u,p,W);m(oe),t(oe);}s&&s(p,W,{type:"swap",position:"center"});return}let R=A.match(/^drop-(left|right|top|bottom)-(.+)$/);if(!R){s&&s(p,null,null);return}let[,L,q]=R;if(p===q){s&&s(p,null,null);return}let J=L==="left"||L==="right"?"row":"column",j=O(u,p)??{type:"pane",paneId:p},Qe=Y(u,p),Fe=re(Qe,q,J,L,j);m(Fe),t(Fe),s&&s(p,q,{type:"split",direction:J,position:L});},Ie=react.useCallback(l=>{m(l),t(l);},[t]),he=react.useCallback(l=>{let f=Y(u,l);m(f),t(f);},[u,t]),ze=react.useCallback(l=>{let f=Ze(u,l);m(f),t(f);},[u,t]),Te=react.useCallback((l,f)=>{let a=Pe(u,l,f);m(a),t(a);},[u,t]),Ce=react.useCallback((l,f,a,p)=>{let $=O(u,p)??{type:"pane",paneId:p},A=Y(u,p),k=re(A,l,f,a,$);m(k),t(k);},[u,t]),Le=react.useCallback((l,f)=>{let a=Q(u,l,f);m(a),t(a);},[u,t]),Me=react.useCallback((l,f)=>{let a=le(u,l,f);m(a),t(a);},[u,t]),Ae=react.useCallback((l,f)=>{let a=Q(u,l,f);m(a),t(a),N&&N(l,f);},[u,t,N]),Ke=react.useMemo(()=>({layout:u,onLayoutChange:Ie,renderPane:C,activeId:b,dismissIntentId:v,setContainerRef:h,fullscreenPaneId:i,classNames:F,onRemove:c,onFullscreenChange:d,snapThreshold:P,onResizeStart:x,onResize:g,onResizeEnd:Ae,minSplitPercentage:E,maxSplitPercentage:I}),[u,b,v,h,i,F,c,d,P,x,g,E,I,Ie,C,Ae]),Je=react.useMemo(()=>({removePane:he,addPane:ze,swapPanes:Te,splitPane:Ce,updateSplitPercentage:Le,updatePaneMetadata:Me}),[he,ze,Te,Ce,Le,Me]);return jsxRuntime.jsx(ae.Provider,{value:Je,children:jsxRuntime.jsxs(se.Provider,{value:Ke,children:[jsxRuntime.jsx(core.DndContext,{id:"zeugma-dnd-context",sensors:_,collisionDetection:core.pointerWithin,onDragStart:X,onDragMove:K,onDragEnd:ne,children:z}),b&&r&&jsxRuntime.jsx(at,{activeId:b,render:r,className:`${o.dragOverlay||""} ${b===v?o.dismissPreview||"zeugma-dismiss-preview":""}`.trim()})]})})};var ut={top:{position:"absolute",top:0,left:0,right:0,height:"32px",zIndex:30,pointerEvents:"auto"},bottom:{position:"absolute",bottom:0,left:0,right:0,height:"32px",zIndex:30,pointerEvents:"auto"},left:{position:"absolute",top:0,bottom:0,left:0,width:"32px",zIndex:30,pointerEvents:"auto"},right:{position:"absolute",top:0,bottom:0,right:0,width:"32px",zIndex:30,pointerEvents:"auto"}},pt={top:{position:"absolute",top:0,left:0,right:0,height:"50%",zIndex:31,pointerEvents:"none",boxSizing:"border-box"},bottom:{position:"absolute",bottom:0,left:0,right:0,height:"50%",zIndex:31,pointerEvents:"none",boxSizing:"border-box"},left:{position:"absolute",top:0,bottom:0,left:0,width:"50%",zIndex:31,pointerEvents:"none",boxSizing:"border-box"},right:{position:"absolute",top:0,bottom:0,right:0,width:"50%",zIndex:31,pointerEvents:"none",boxSizing:"border-box"}},ft=({id:e,position:t,activeClassName:n})=>{let{setNodeRef:r,isOver:o}=core.useDroppable({id:e});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:r,style:ut[t]}),o&&jsxRuntime.jsx("div",{className:n,style:pt[t]})]})},Ve=({activeId:e,hasOtherPanes:t,dropPreviewClassName:n})=>!e||!t?null:jsxRuntime.jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:30,pointerEvents:"none"},children:["top","bottom","left","right"].map(r=>jsxRuntime.jsx(ft,{id:`drop-root-${r}`,position:r,activeClassName:n},r))});function pe({cursor:e,resizerEl:t,onMove:n,onEnd:r}){document.body.classList.add("zeugma-resizing");let o=document.createElement("style");o.id="zeugma-global-cursor-style",o.textContent=`
+'use strict';var react=require('react'),core=require('@dnd-kit/core'),jsxRuntime=require('react/jsx-runtime');var se=react.createContext(void 0),ae=react.createContext(void 0);var G=()=>{let e=react.useContext(se);if(!e)throw new Error("useZeugmaState must be used within a Zeugma provider");return e},Pe=()=>{let e=react.useContext(ae);if(!e)throw new Error("useZeugmaActions must be used within a Zeugma provider");return e};function k(e,t){if(e===null)return null;if(e.type==="pane")return e.paneId===t?null:e;let n=k(e.first,t),r=k(e.second,t);return n===null?r:r===null?n:{...e,first:n,second:r}}function re(e,t,n,r,o){if(e===null)return typeof o=="string"?{type:"pane",paneId:o}:o;if(e.type==="pane"){if(e.paneId===t){let i=typeof o=="string"?{type:"pane",paneId:o}:o,c=r==="left"||r==="top";return {type:"split",direction:n,first:c?i:e,second:c?e:i,splitPercentage:50}}return e}return {...e,first:re(e.first,t,n,r,o)||e.first,second:re(e.second,t,n,r,o)||e.second}}function xe(e,t,n){if(e===null)return null;let r=V(e,t),o=V(e,n);if(!r||!o)return e;function i(c){return c.type==="pane"?c.paneId===t?{...o}:c.paneId===n?{...r}:c:{...c,first:i(c.first),second:i(c.second)}}return i(e)}function Fe(e,t){if(e===null)return {type:"pane",paneId:t};function n(r,o){return r.type==="pane"?{type:"split",direction:o==="row"?"column":"row",splitPercentage:50,first:r,second:{type:"pane",paneId:t}}:{...r,second:n(r.second,r.direction)}}return n(e,null)}function Q(e,t,n){return e===null?null:e===t?{...e,splitPercentage:n}:e.type==="split"?{...e,first:Q(e.first,t,n)||e.first,second:Q(e.second,t,n)||e.second}:e}function $e(e,t,n){let r=V(e,t)??{type:"pane",paneId:t},o=k(e,t);if(o===null)return {...r};let i=n==="left"||n==="right"?"row":"column",c=n==="left"||n==="top",u={...r};return {type:"split",direction:i,first:c?u:o,second:c?o:u,splitPercentage:50}}function V(e,t){return e===null?null:e.type==="pane"?e.paneId===t?e:null:V(e.first,t)??V(e.second,t)}function le(e,t,n){if(e===null)return null;if(e.type==="pane"){if(e.paneId===t){let r=n(e.metadata);if(r===void 0){let{metadata:o,...i}=e;return i}return {...e,metadata:r}}return e}return {...e,first:le(e.first,t,n)??e.first,second:le(e.second,t,n)??e.second}}var et=8,tt=8,Xt=4;var _e=({activeId:e,render:t,className:n})=>{let r=react.useRef(null);return react.useEffect(()=>{let o=i=>{r.current&&(r.current.style.transform=`translate(${i.clientX+12}px, ${i.clientY+12}px)`);};return document.addEventListener("pointermove",o),()=>document.removeEventListener("pointermove",o)},[]),jsxRuntime.jsx("div",{ref:r,className:n,style:{position:"fixed",top:0,left:0,zIndex:9999,pointerEvents:"none"},children:t(e)})};var ce=class extends core.PointerSensor{static activators=[{eventName:"onPointerDown",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},ue=class extends core.TouchSensor{static activators=[{eventName:"onTouchStart",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]};var ut=({layout:e,onChange:t,renderPane:n,renderDragOverlay:r,classNames:o={},fullscreenPaneId:i=null,onFullscreenChange:c,onRemove:u,dragActivationDistance:w=8,snapThreshold:P=8,onDragStart:N,onDragEnd:s,onResizeStart:x,onResize:g,onResizeEnd:y,minSplitPercentage:z=5,maxSplitPercentage:D=95,enableDragToDismiss:S=false,dismissThreshold:E=60,onDismissIntentChange:H,children:I})=>{let[d,m]=react.useState(e),[ee,te]=react.useState(e);e!==ee&&(te(e),m(e));let[b,T]=react.useState(null),[h,M]=react.useState(null),X=react.useRef(null),$=react.useRef(null),v=react.useCallback(l=>{X.current=l;},[]),C=react.useCallback(l=>n(l),[n]),A=react.useMemo(()=>o,[o.pane,o.dropPreview,o.swapPreview,o.dragOverlay,o.resizer,o.dismissPreview]),_=core.useSensors(core.useSensor(ce,{activationConstraint:{distance:w}}),core.useSensor(ue,{activationConstraint:{delay:250,tolerance:5}})),B=l=>{let f=l.active.id.toString();T(f),S&&X.current?$.current=X.current.getBoundingClientRect():$.current=null,N&&N(f);},K=l=>{if(!S)return;let f=l.active.id.toString(),a=$.current;if(!a){h!==null&&(M(null),H?.(null));return}let p=l.activatorEvent,F=null,Z=null;if(p instanceof MouseEvent||p instanceof PointerEvent)F=p.clientX+l.delta.x,Z=p.clientY+l.delta.y;else if(typeof TouchEvent<"u"&&p instanceof TouchEvent){let R=p.touches[0]||p.changedTouches[0];R&&(F=R.clientX+l.delta.x,Z=R.clientY+l.delta.y);}let Y=0;if(F!==null&&Z!==null){let R=0,L=0;F<a.left?R=a.left-F:F>a.right&&(R=F-a.right),Z<a.top?L=a.top-Z:Z>a.bottom&&(L=Z-a.bottom),Y=Math.sqrt(R*R+L*L);}else {let R=l.active.rect.current.translated;if(R){let L=R.left+R.width/2,q=R.top+R.height/2,J=0,j=0;L<a.left?J=a.left-L:L>a.right&&(J=L-a.right),q<a.top?j=a.top-q:q>a.bottom&&(j=q-a.bottom),Y=Math.sqrt(J*J+j*j);}}Y>E?h!==f&&(M(f),H?.(f)):h!==null&&(M(null),H?.(null));},ne=l=>{T(null);let{active:f,over:a}=l,p=f.id.toString(),F=S&&h===p;if(M(null),H?.(null),$.current=null,F){u?u(p):he(p),s&&s(p,null,null);return}if(!a){s&&s(p,null,null);return}let Z=a.id.toString(),Y=Z.match(/^drop-root-(left|right|top|bottom)$/);if(Y){let[,W]=Y,oe=$e(d,p,W);m(oe),t(oe),s&&s(p,"root",{type:"split",direction:W==="left"||W==="right"?"row":"column",position:W});return}let be=Z.match(/^drop-center-(.+)$/);if(be){let[,W]=be;if(p!==W){let oe=xe(d,p,W);m(oe),t(oe);}s&&s(p,W,{type:"swap",position:"center"});return}let R=Z.match(/^drop-(left|right|top|bottom)-(.+)$/);if(!R){s&&s(p,null,null);return}let[,L,q]=R;if(p===q){s&&s(p,null,null);return}let J=L==="left"||L==="right"?"row":"column",j=V(d,p)??{type:"pane",paneId:p},je=k(d,p),Ze=re(je,q,J,L,j);m(Ze),t(Ze),s&&s(p,q,{type:"split",direction:J,position:L});},ze=react.useCallback(l=>{m(l),t(l);},[t]),he=react.useCallback(l=>{let f=k(d,l);m(f),t(f);},[d,t]),De=react.useCallback(l=>{let f=Fe(d,l);m(f),t(f);},[d,t]),Ie=react.useCallback((l,f)=>{let a=xe(d,l,f);m(a),t(a);},[d,t]),Te=react.useCallback((l,f,a,p)=>{let F=V(d,p)??{type:"pane",paneId:p},Z=k(d,p),Y=re(Z,l,f,a,F);m(Y),t(Y);},[d,t]),Ce=react.useCallback((l,f)=>{let a=Q(d,l,f);m(a),t(a);},[d,t]),Le=react.useCallback((l,f)=>{let a=le(d,l,f);m(a),t(a);},[d,t]),Me=react.useCallback((l,f)=>{let a=Q(d,l,f);m(a),t(a),y&&y(l,f);},[d,t,y]),Je=react.useMemo(()=>({layout:d,onLayoutChange:ze,renderPane:C,activeId:b,dismissIntentId:h,setContainerRef:v,fullscreenPaneId:i,classNames:A,onRemove:u,onFullscreenChange:c,snapThreshold:P,onResizeStart:x,onResize:g,onResizeEnd:Me,minSplitPercentage:z,maxSplitPercentage:D}),[d,b,h,v,i,A,u,c,P,x,g,z,D,ze,C,Me]),Qe=react.useMemo(()=>({removePane:he,addPane:De,swapPanes:Ie,splitPane:Te,updateSplitPercentage:Ce,updatePaneMetadata:Le}),[he,De,Ie,Te,Ce,Le]);return jsxRuntime.jsx(ae.Provider,{value:Qe,children:jsxRuntime.jsxs(se.Provider,{value:Je,children:[jsxRuntime.jsx(core.DndContext,{id:"zeugma-dnd-context",sensors:_,collisionDetection:core.pointerWithin,onDragStart:B,onDragMove:K,onDragEnd:ne,children:I}),b&&r&&jsxRuntime.jsx(_e,{activeId:b,render:r,className:`${o.dragOverlay||""} ${b===h?o.dismissPreview||"zeugma-dismiss-preview":""}`.trim()})]})})};var ft={top:{position:"absolute",top:0,left:0,right:0,height:"32px",zIndex:30,pointerEvents:"auto"},bottom:{position:"absolute",bottom:0,left:0,right:0,height:"32px",zIndex:30,pointerEvents:"auto"},left:{position:"absolute",top:0,bottom:0,left:0,width:"32px",zIndex:30,pointerEvents:"auto"},right:{position:"absolute",top:0,bottom:0,right:0,width:"32px",zIndex:30,pointerEvents:"auto"}},mt={top:{position:"absolute",top:0,left:0,right:0,height:"50%",zIndex:31,pointerEvents:"none",boxSizing:"border-box"},bottom:{position:"absolute",bottom:0,left:0,right:0,height:"50%",zIndex:31,pointerEvents:"none",boxSizing:"border-box"},left:{position:"absolute",top:0,bottom:0,left:0,width:"50%",zIndex:31,pointerEvents:"none",boxSizing:"border-box"},right:{position:"absolute",top:0,bottom:0,right:0,width:"50%",zIndex:31,pointerEvents:"none",boxSizing:"border-box"}},gt=({id:e,position:t,activeClassName:n})=>{let{setNodeRef:r,isOver:o}=core.useDroppable({id:e});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:r,style:ft[t]}),o&&jsxRuntime.jsx("div",{className:n,style:mt[t]})]})},Ye=({activeId:e,hasOtherPanes:t,dropPreviewClassName:n})=>!e||!t?null:jsxRuntime.jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:30,pointerEvents:"none"},children:["top","bottom","left","right"].map(r=>jsxRuntime.jsx(gt,{id:`drop-root-${r}`,position:r,activeClassName:n},r))});function fe({cursor:e,resizerEl:t,onMove:n,onEnd:r}){document.body.classList.add("zeugma-resizing");let o=document.createElement("style");o.id="zeugma-global-cursor-style",o.textContent=`
     * {
       cursor: ${e} !important;
       user-select: none !important;
     }
-  `,document.head.appendChild(o),t.setAttribute("data-resizing","true");let i=c=>{n(c);},d=()=>{document.body.classList.remove("zeugma-resizing"),t.removeAttribute("data-resizing");let c=document.getElementById("zeugma-global-cursor-style");c&&c.remove(),document.removeEventListener("pointermove",i),document.removeEventListener("pointerup",d),r();};document.addEventListener("pointermove",i),document.addEventListener("pointerup",d);}function Ne({containerRef:e,isRow:t,direction:n,splitPercentage:r,resizerSize:o,snapThreshold:i,layout:d,currentNode:c,onLayoutChange:D,onResizeStart:P,onResizeEnd:y}){let{onResizeStart:s,onResize:x,onResizeEnd:g,minSplitPercentage:N=5,maxSplitPercentage:E=95}=G();return react.useCallback(I=>{I.preventDefault();let S=e.current;if(!S)return;P&&P(),s&&s(c);let w=S.getBoundingClientRect(),H=I.clientX,z=I.clientY,u=r,m=I.currentTarget,te=Array.from(document.querySelectorAll('div[role="separator"][data-direction]')).filter(T=>T!==m&&T.getAttribute("data-direction")===n).map(T=>{let v=T.getBoundingClientRect();return t?v.left+v.width/2:v.top+v.height/2}),b=u;pe({cursor:t?"col-resize":"row-resize",resizerEl:m,onMove:T=>{let v=t?(T.clientX-H)/w.width*100:(T.clientY-z)/w.height*100,M=u+v,B=t?w.left+(w.width-o)*(M/100)+o/2:w.top+(w.height-o)*(M/100)+o/2,Z=1/0,h=null;for(let K of te){let ne=Math.abs(B-K);ne<i&&ne<Z&&(Z=ne,h=K);}let C=M;h!==null&&(C=t?(h-o/2-w.left)/(w.width-o)*100:(h-o/2-w.top)/(w.height-o)*100);let F=Math.max(N,Math.min(E,C));b=F;let _=S.children[0],X=S.children[S.children.length-1];_&&X&&(_.style.flex=`${F} 1 0%`,X.style.flex=`${100-F} 1 0%`),x&&x(c,F);},onEnd:()=>{let T=Q(d,c,b);D(T),y&&y(),g&&g(c,b);}});},[e,t,n,r,o,i,d,c,D,P,y,s,x,g,N,E])}var xt=({currentNode:e,resizerSize:t,snapThreshold:n})=>{let{layout:r,onLayoutChange:o,classNames:i}=G(),[d,c]=react.useState(false),D=react.useRef(null),{direction:P,first:y,second:s,splitPercentage:x}=e,g=P==="row",N=Ne({containerRef:D,isRow:g,direction:P,splitPercentage:x,resizerSize:t,snapThreshold:n??8,layout:r,currentNode:e,onLayoutChange:o,onResizeStart:()=>c(true),onResizeEnd:()=>c(false)});return jsxRuntime.jsxs("div",{ref:D,style:{display:"flex",flexDirection:g?"row":"column",width:"100%",height:"100%",overflow:"hidden"},children:[jsxRuntime.jsx("div",{style:{flex:`${x} 1 0%`,overflow:"hidden"},children:jsxRuntime.jsx(we,{tree:y,resizerSize:t,snapThreshold:n})}),jsxRuntime.jsx("div",{className:`zeugma-resizer ${i.resizer||""}`.trim(),"data-direction":P,"data-resizing":d||void 0,style:{width:g?`${t}px`:"100%",height:g?"100%":`${t}px`,cursor:g?"col-resize":"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:N,role:"separator","aria-valuenow":x,"aria-valuemin":5,"aria-valuemax":95}),jsxRuntime.jsx("div",{style:{flex:`${100-x} 1 0%`,overflow:"hidden"},children:jsxRuntime.jsx(we,{tree:s,resizerSize:t,snapThreshold:n})})]})},we=({tree:e,resizerSize:t=4,snapThreshold:n})=>{let{layout:r,renderPane:o,activeId:i,dismissIntentId:d,setContainerRef:c,classNames:D,fullscreenPaneId:P,snapThreshold:y}=G(),s=n!==void 0?n:y,x=react.useMemo(()=>e!==void 0||!i?false:Y(r,i)!==null,[e,r,i]);if(P&&!e)return jsxRuntime.jsx("div",{style:{width:"100%",height:"100%",position:"relative"},children:o(P)});let g=e!==void 0?e:r;if(!g)return null;let N=()=>g.type==="pane"?jsxRuntime.jsx("div",{style:{width:"100%",height:"100%",position:"relative"},children:o(g.paneId)}):jsxRuntime.jsx(xt,{currentNode:g,resizerSize:t,snapThreshold:s});return e===void 0?jsxRuntime.jsxs("div",{ref:c,className:`zeugma-dashboard-root ${i!==null&&i===d?"zeugma-dashboard-dismiss-active":""}`.trim(),style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:[N(),jsxRuntime.jsx(Ve,{activeId:i,hasOtherPanes:x,dropPreviewClassName:D.dropPreview})]}):N()};var Xe="zeugma-height:",Dt="default-pane";function Nt(e){try{let t=localStorage.getItem(Xe+e);if(t!==null){let n=Number(t);if(Number.isFinite(n)&&n>0)return n}}catch{}return null}function Be(e,t){try{localStorage.setItem(Xe+e,String(Math.round(t)));}catch{}}var qe=({children:e,active:t=true,height:n,onHeightChange:r,minHeight:o=100,maxHeight:i=1/0,persist:d,localStorageKey:c,resizerHeight:D=6,className:P,resizerClassName:y})=>{let s=d?c||Dt:null,x=()=>{let z=(s?Nt(s):null)??n??400;return fe(z,o,i)},[g,N]=react.useState(x),E=react.useRef(null),I=s?g:n??g,S=react.useRef(n);react.useEffect(()=>{if(n!==void 0&&n!==S.current){let z=fe(n,o,i);N(z),s&&Be(s,z);}S.current=n;},[n,o,i,s]);let w=react.useCallback(()=>i,[i]),H=react.useCallback(z=>{z.preventDefault();let u=z.clientY,m=I,ee=w(),te=z.currentTarget,b=We(E.current),T=b?b.scrollTop:0,v=u,M=null,B=(h,C)=>{let F=C-T,X=h-u+F,K=fe(m+X,o,ee);return E.current&&(E.current.style.height=`${K}px`),K},Z=()=>{if(!b)return;let h=b===document.documentElement||b===document.body?{top:0,bottom:window.innerHeight}:b.getBoundingClientRect(),C=40,F=10,_=0;v>h.bottom-C?_=Math.min(1,(v-(h.bottom-C))/C)*F:v<h.top+C&&(_=-Math.min(1,(h.top+C-v)/C)*F),_!==0&&(b.scrollTop+=_,B(v,b.scrollTop)),M=requestAnimationFrame(Z);};M=requestAnimationFrame(Z),pe({cursor:"row-resize",resizerEl:te,onMove:h=>{v=h.clientY,b&&B(v,b.scrollTop);},onEnd:()=>{M!==null&&cancelAnimationFrame(M);let h=m;E.current&&(h=E.current.getBoundingClientRect().height),h=fe(h,o,ee),N(h),r&&r(h),s&&Be(s,h);}});},[I,o,w,r,s]);return t?jsxRuntime.jsxs("div",{ref:E,className:`zeugma-resizable-container ${P||""}`.trim(),style:{height:`${I}px`,position:"relative",overflow:"hidden",boxSizing:"border-box"},children:[jsxRuntime.jsx("div",{style:{height:`calc(100% - ${D}px)`,overflow:"hidden"},children:e}),jsxRuntime.jsx("div",{className:`zeugma-resizable-handle ${y||""}`.trim(),style:{height:`${D}px`,cursor:"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:H,role:"separator","aria-orientation":"horizontal","aria-valuenow":Math.round(I),"aria-valuemin":o,"aria-valuemax":i===1/0?void 0:i})]}):jsxRuntime.jsx("div",{className:`zeugma-resizable-container disabled ${P||""}`.trim(),style:{height:"100%",position:"relative",overflow:"hidden",boxSizing:"border-box"},children:jsxRuntime.jsx("div",{style:{height:"100%",overflow:"hidden"},children:e})})};function fe(e,t,n){return Math.max(t,Math.min(n,e))}function We(e){if(typeof window>"u"||!e)return null;let t=e.parentElement;if(!t)return document.documentElement;let r=window.getComputedStyle(t).overflowY;return r==="auto"||r==="scroll"?t:We(t)}var ge=react.createContext(null);var zt={top:{position:"absolute",top:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},bottom:{position:"absolute",bottom:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},left:{position:"absolute",top:"25%",left:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},right:{position:"absolute",top:"25%",right:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},center:{position:"absolute",top:"25%",left:"25%",width:"50%",height:"50%",zIndex:20,pointerEvents:"auto"}},Tt={top:{position:"absolute",top:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},bottom:{position:"absolute",bottom:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},left:{position:"absolute",top:0,bottom:0,left:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},right:{position:"absolute",top:0,bottom:0,right:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},center:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:21,pointerEvents:"none",boxSizing:"border-box"}},Ge=({id:e,position:t,activeClassName:n})=>{let{setNodeRef:r,isOver:o}=core.useDroppable({id:e});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:r,style:zt[t]}),o&&jsxRuntime.jsx("div",{className:n,style:Tt[t]})]})},Ct=({id:e,children:t,style:n})=>{let{layout:r,activeId:o,classNames:i,fullscreenPaneId:d,onRemove:c,onFullscreenChange:D}=G(),{removePane:P,updatePaneMetadata:y}=be(),s=o!==null&&o!==e,{attributes:x,listeners:g,setNodeRef:N,isDragging:E}=core.useDraggable({id:e}),I=o===e||E,S=d===e,H=react.useMemo(()=>O(r,e),[r,e])?.metadata,z=react.useMemo(()=>({isDragging:I,isFullscreen:S,toggleFullscreen:()=>D?.(S?null:e),remove:()=>{S&&D?.(null),c?c(e):P(e);},metadata:H,updateMetadata:m=>{y(e,m);}}),[I,S,D,e,c,P,H,y]),u=react.useMemo(()=>({...g,...x}),[g,x]);return jsxRuntime.jsx(ge.Provider,{value:u,children:jsxRuntime.jsxs("div",{ref:N,className:i.pane,style:{position:"relative",width:"100%",height:"100%",...n},children:[t(z),s&&jsxRuntime.jsxs("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:[["top","bottom","left","right"].map(m=>jsxRuntime.jsx(Ge,{id:`drop-${m}-${e}`,position:m,activeClassName:i.dropPreview},m)),jsxRuntime.jsx(Ge,{id:`drop-center-${e}`,position:"center",activeClassName:i.swapPreview})]})]})})};var At=({children:e,className:t,style:n})=>{let r=react.useContext(ge);if(!r)throw new Error("<DragHandle> must be used inside a <Pane>");return jsxRuntime.jsx("div",{className:t,style:{cursor:"grab",userSelect:"none",touchAction:"none",...n},...r,children:e})};exports.DEFAULT_DRAG_ACTIVATION_DISTANCE=et;exports.DEFAULT_RESIZER_SIZE=Xt;exports.DEFAULT_SNAP_THRESHOLD=je;exports.DashboardProvider=lt;exports.DragHandle=At;exports.Pane=Ct;exports.PaneTree=we;exports.ResizableContainer=qe;exports.addPane=Ze;exports.createDragSession=pe;exports.findPane=O;exports.removePane=Y;exports.splitPane=re;exports.splitRoot=_e;exports.swapPanes=Pe;exports.updatePaneMetadata=le;exports.updateSplitPercentage=Q;exports.useDashboardActions=be;exports.useDashboardState=G;exports.useResizer=Ne;//# sourceMappingURL=index.cjs.map
+  `,document.head.appendChild(o),t.setAttribute("data-resizing","true");let i=u=>{n(u);},c=()=>{document.body.classList.remove("zeugma-resizing"),t.removeAttribute("data-resizing");let u=document.getElementById("zeugma-global-cursor-style");u&&u.remove(),document.removeEventListener("pointermove",i),document.removeEventListener("pointerup",c),r();};document.addEventListener("pointermove",i),document.addEventListener("pointerup",c);}function we({containerRef:e,isRow:t,direction:n,splitPercentage:r,resizerSize:o,snapThreshold:i,layout:c,currentNode:u,onLayoutChange:w,onResizeStart:P,onResizeEnd:N}){let{onResizeStart:s,onResize:x,onResizeEnd:g,minSplitPercentage:y=5,maxSplitPercentage:z=95}=G();return react.useCallback(D=>{D.preventDefault();let S=e.current;if(!S)return;P&&P(),s&&s(u);let E=S.getBoundingClientRect(),H=D.clientX,I=D.clientY,d=r,m=D.currentTarget,te=Array.from(document.querySelectorAll('div[role="separator"][data-direction]')).filter(T=>T!==m&&T.getAttribute("data-direction")===n).map(T=>{let h=T.getBoundingClientRect();return t?h.left+h.width/2:h.top+h.height/2}),b=d;fe({cursor:t?"col-resize":"row-resize",resizerEl:m,onMove:T=>{let h=t?(T.clientX-H)/E.width*100:(T.clientY-I)/E.height*100,M=d+h,X=t?E.left+(E.width-o)*(M/100)+o/2:E.top+(E.height-o)*(M/100)+o/2,$=1/0,v=null;for(let K of te){let ne=Math.abs(X-K);ne<i&&ne<$&&($=ne,v=K);}let C=M;v!==null&&(C=t?(v-o/2-E.left)/(E.width-o)*100:(v-o/2-E.top)/(E.height-o)*100);let A=Math.max(y,Math.min(z,C));b=A;let _=S.children[0],B=S.children[S.children.length-1];_&&B&&(_.style.flex=`${A} 1 0%`,B.style.flex=`${100-A} 1 0%`),x&&x(u,A);},onEnd:()=>{let T=Q(c,u,b);w(T),N&&N(),g&&g(u,b);}});},[e,t,n,r,o,i,c,u,w,P,N,s,x,g,y,z])}var Rt=({currentNode:e,resizerSize:t,snapThreshold:n})=>{let{layout:r,onLayoutChange:o,classNames:i}=G(),[c,u]=react.useState(false),w=react.useRef(null),{direction:P,first:N,second:s,splitPercentage:x}=e,g=P==="row",y=we({containerRef:w,isRow:g,direction:P,splitPercentage:x,resizerSize:t,snapThreshold:n??8,layout:r,currentNode:e,onLayoutChange:o,onResizeStart:()=>u(true),onResizeEnd:()=>u(false)});return jsxRuntime.jsxs("div",{ref:w,style:{display:"flex",flexDirection:g?"row":"column",width:"100%",height:"100%",overflow:"hidden"},children:[jsxRuntime.jsx("div",{style:{flex:`${x} 1 0%`,overflow:"hidden"},children:jsxRuntime.jsx(ye,{tree:N,resizerSize:t,snapThreshold:n})}),jsxRuntime.jsx("div",{className:`zeugma-resizer ${i.resizer||""}`.trim(),"data-direction":P,"data-resizing":c||void 0,style:{width:g?`${t}px`:"100%",height:g?"100%":`${t}px`,cursor:g?"col-resize":"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:y,role:"separator","aria-valuenow":x,"aria-valuemin":5,"aria-valuemax":95}),jsxRuntime.jsx("div",{style:{flex:`${100-x} 1 0%`,overflow:"hidden"},children:jsxRuntime.jsx(ye,{tree:s,resizerSize:t,snapThreshold:n})})]})},ye=({tree:e,resizerSize:t=4,snapThreshold:n})=>{let{layout:r,renderPane:o,activeId:i,dismissIntentId:c,setContainerRef:u,classNames:w,fullscreenPaneId:P,snapThreshold:N}=G(),s=n!==void 0?n:N,x=react.useMemo(()=>e!==void 0||!i?false:k(r,i)!==null,[e,r,i]);if(P&&!e)return jsxRuntime.jsx("div",{style:{width:"100%",height:"100%",position:"relative"},children:o(P)});let g=e!==void 0?e:r;if(!g)return null;let y=()=>g.type==="pane"?jsxRuntime.jsx("div",{style:{width:"100%",height:"100%",position:"relative"},children:o(g.paneId)}):jsxRuntime.jsx(Rt,{currentNode:g,resizerSize:t,snapThreshold:s});return e===void 0?jsxRuntime.jsxs("div",{ref:u,className:`zeugma-dashboard-root ${i!==null&&i===c?"zeugma-dashboard-dismiss-active":""}`.trim(),style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:[y(),jsxRuntime.jsx(Ye,{activeId:i,hasOtherPanes:x,dropPreviewClassName:w.dropPreview})]}):y()};var qe="zeugma-height:",Et="default-pane";function Nt(e){try{let t=localStorage.getItem(qe+e);if(t!==null){let n=Number(t);if(Number.isFinite(n)&&n>0)return n}}catch{}return null}function Be(e,t){try{localStorage.setItem(qe+e,String(Math.round(t)));}catch{}}var We=({children:e,active:t=true,height:n,onHeightChange:r,minHeight:o=100,maxHeight:i=1/0,persist:c,localStorageKey:u,resizerHeight:w=6,className:P,resizerClassName:N})=>{let s=c?u||Et:null,x=()=>{let I=(s?Nt(s):null)??n??400;return me(I,o,i)},[g,y]=react.useState(x),z=react.useRef(null),D=s?g:n??g,S=react.useRef(n);react.useEffect(()=>{if(n!==void 0&&n!==S.current){let I=me(n,o,i);y(I),s&&Be(s,I);}S.current=n;},[n,o,i,s]);let E=react.useCallback(()=>i,[i]),H=react.useCallback(I=>{I.preventDefault();let d=I.clientY,m=D,ee=E(),te=I.currentTarget,b=Ge(z.current),T=b?b.scrollTop:0,h=d,M=null,X=(v,C)=>{let A=C-T,B=v-d+A,K=me(m+B,o,ee);return z.current&&(z.current.style.height=`${K}px`),K},$=()=>{if(!b)return;let v=b===document.documentElement||b===document.body?{top:0,bottom:window.innerHeight}:b.getBoundingClientRect(),C=40,A=10,_=0;h>v.bottom-C?_=Math.min(1,(h-(v.bottom-C))/C)*A:h<v.top+C&&(_=-Math.min(1,(v.top+C-h)/C)*A),_!==0&&(b.scrollTop+=_,X(h,b.scrollTop)),M=requestAnimationFrame($);};M=requestAnimationFrame($),fe({cursor:"row-resize",resizerEl:te,onMove:v=>{h=v.clientY,b&&X(h,b.scrollTop);},onEnd:()=>{M!==null&&cancelAnimationFrame(M);let v=m;z.current&&(v=z.current.getBoundingClientRect().height),v=me(v,o,ee),y(v),r&&r(v),s&&Be(s,v);}});},[D,o,E,r,s]);return t?jsxRuntime.jsxs("div",{ref:z,className:`zeugma-resizable-container ${P||""}`.trim(),style:{height:`${D}px`,position:"relative",overflow:"hidden",boxSizing:"border-box"},children:[jsxRuntime.jsx("div",{style:{height:`calc(100% - ${w}px)`,overflow:"hidden"},children:e}),jsxRuntime.jsx("div",{className:`zeugma-resizable-handle ${N||""}`.trim(),style:{height:`${w}px`,cursor:"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:H,role:"separator","aria-orientation":"horizontal","aria-valuenow":Math.round(D),"aria-valuemin":o,"aria-valuemax":i===1/0?void 0:i})]}):jsxRuntime.jsx("div",{className:`zeugma-resizable-container disabled ${P||""}`.trim(),style:{height:"100%",position:"relative",overflow:"hidden",boxSizing:"border-box"},children:jsxRuntime.jsx("div",{style:{height:"100%",overflow:"hidden"},children:e})})};function me(e,t,n){return Math.max(t,Math.min(n,e))}function Ge(e){if(typeof window>"u"||!e)return null;let t=e.parentElement;if(!t)return document.documentElement;let r=window.getComputedStyle(t).overflowY;return r==="auto"||r==="scroll"?t:Ge(t)}var ve=react.createContext(null);var Ct={top:{position:"absolute",top:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},bottom:{position:"absolute",bottom:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},left:{position:"absolute",top:"25%",left:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},right:{position:"absolute",top:"25%",right:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},center:{position:"absolute",top:"25%",left:"25%",width:"50%",height:"50%",zIndex:20,pointerEvents:"auto"}},Lt={top:{position:"absolute",top:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},bottom:{position:"absolute",bottom:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},left:{position:"absolute",top:0,bottom:0,left:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},right:{position:"absolute",top:0,bottom:0,right:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},center:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:21,pointerEvents:"none",boxSizing:"border-box"}},Ke=({id:e,position:t,activeClassName:n})=>{let{setNodeRef:r,isOver:o}=core.useDroppable({id:e});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:r,style:Ct[t]}),o&&jsxRuntime.jsx("div",{className:n,style:Lt[t]})]})},Mt=({id:e,children:t,style:n})=>{let{layout:r,activeId:o,classNames:i,fullscreenPaneId:c,onRemove:u,onFullscreenChange:w}=G(),{removePane:P,updatePaneMetadata:N}=Pe(),s=o!==null&&o!==e,{attributes:x,listeners:g,setNodeRef:y,isDragging:z}=core.useDraggable({id:e}),D=o===e||z,S=c===e,H=react.useMemo(()=>V(r,e),[r,e])?.metadata,I=react.useMemo(()=>({isDragging:D,isFullscreen:S,toggleFullscreen:()=>w?.(S?null:e),remove:()=>{S&&w?.(null),u?u(e):P(e);},metadata:H,updateMetadata:m=>{N(e,m);}}),[D,S,w,e,u,P,H,N]),d=react.useMemo(()=>({...g,...x}),[g,x]);return jsxRuntime.jsx(ve.Provider,{value:d,children:jsxRuntime.jsxs("div",{ref:y,className:i.pane,style:{position:"relative",width:"100%",height:"100%",...n},children:[t(I),s&&jsxRuntime.jsxs("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:[["top","bottom","left","right"].map(m=>jsxRuntime.jsx(Ke,{id:`drop-${m}-${e}`,position:m,activeClassName:i.dropPreview},m)),jsxRuntime.jsx(Ke,{id:`drop-center-${e}`,position:"center",activeClassName:i.swapPreview})]})]})})};var Ht=({children:e,className:t,style:n})=>{let r=react.useContext(ve);if(!r)throw new Error("<DragHandle> must be used inside a <Pane>");return jsxRuntime.jsx("div",{className:t,style:{cursor:"grab",userSelect:"none",touchAction:"none",...n},...r,children:e})};exports.DEFAULT_DRAG_ACTIVATION_DISTANCE=tt;exports.DEFAULT_RESIZER_SIZE=Xt;exports.DEFAULT_SNAP_THRESHOLD=et;exports.DragHandle=Ht;exports.Pane=Mt;exports.PaneTree=ye;exports.ResizableContainer=We;exports.Zeugma=ut;exports.addPane=Fe;exports.createDragSession=fe;exports.findPane=V;exports.removePane=k;exports.splitPane=re;exports.splitRoot=$e;exports.swapPanes=xe;exports.updatePaneMetadata=le;exports.updateSplitPercentage=Q;exports.useResizer=we;exports.useZeugmaActions=Pe;exports.useZeugmaState=G;//# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map