react-zeugma 1.3.1 → 1.4.1

package/README.md

@@ -117,7 +117,6 @@ The context provider that sets up the drag-and-drop state machine, monitors acti
 | `onResizeStart`          | `(currentNode: SplitNode) => void`                                    | No       | Callback triggered when resizing starts on a split node.                                                                                                                     |
 | `onResize`               | `(currentNode: SplitNode, percentage: number) => void`                | No       | Callback triggered continuously while resizing a split node.                                                                                                                 |
 | `onResizeEnd`            | `(currentNode: SplitNode, percentage: number) => void`                | No       | Callback triggered when resizing ends on a split node.                                                                                                                       |
-| `renderResizer`          | `(props: ResizerRenderProps) => ReactNode`                            | No       | Custom renderer function for rendering custom-styled resizer bars.                                                                                                           |
 | `minSplitPercentage`     | `number`                                                              | No       | Minimum resizing limit percentage. Defaults to `5`.                                                                                                                          |
 | `maxSplitPercentage`     | `number`                                                              | No       | Maximum resizing limit percentage. Defaults to `95`.                                                                                                                         |
 
@@ -158,6 +157,22 @@ Defines the interactive drag region inside a `<Pane>`. **Must be placed inside a
 | `className` | `string`              | No       | Custom CSS class for the drag handle wrapper.                    |
 | `style`     | `React.CSSProperties` | No       | Inline styles for the drag handle wrapper.                       |
 
+### `<ResizableContainer>`
+
+A vertical-resize container wrapper that wraps any node (typically `<PaneTree />` or a dashboard component) and allows the user to resize its height by dragging a handle at the bottom edge. Includes smooth scroll parent propagation and drag-to-scroll infinite scrolling behavior.
+
+| Prop               | Type                       | Required | Default          | Description                                                      |
+| :----------------- | :------------------------- | :------- | :--------------- | :--------------------------------------------------------------- |
+| `height`           | `number`                   | No       | `400`            | Controlled height in pixels (or initial height if uncontrolled). |
+| `onHeightChange`   | `(height: number) => void` | No       | —                | Callback function triggered during or after dragging to resize.  |
+| `minHeight`        | `number`                   | No       | `100`            | Minimum allowed height in pixels.                                |
+| `maxHeight`        | `number`                   | No       | `Infinity`       | Maximum allowed height in pixels.                                |
+| `persist`          | `boolean`                  | No       | —                | Whether to persist height changes in localStorage.               |
+| `localStorageKey`  | `string`                   | No       | `'default-pane'` | Custom localStorage key name (prefixed by `zeugma-height:`).     |
+| `resizerHeight`    | `number`                   | No       | `6`              | Height of the resizer drag handle in pixels.                     |
+| `className`        | `string`                   | No       | —                | Custom CSS class applied to the outer container.                 |
+| `resizerClassName` | `string`                   | No       | —                | Custom CSS class applied to the drag handle.                     |
+
 ---
 
 ## Tree Utilities
@@ -258,14 +273,6 @@ export interface PaneRenderProps {
   ) => void
 }
 
-export interface ResizerRenderProps {
-  direction: SplitDirection
-  splitPercentage: number
-  resizerSize: number
-  isResizing: boolean
-  onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void
-}
-
 export interface DashboardStateValue {
   layout: TreeNode | null
   onLayoutChange: (newLayout: TreeNode | null) => void
@@ -281,7 +288,6 @@ export interface DashboardStateValue {
   onResizeStart?: (currentNode: SplitNode) => void
   onResize?: (currentNode: SplitNode, percentage: number) => void
   onResizeEnd?: (currentNode: SplitNode, percentage: number) => void
-  renderResizer?: (props: ResizerRenderProps) => ReactNode
   minSplitPercentage?: number
   maxSplitPercentage?: number
 }
@@ -378,7 +384,6 @@ The root context provider. It handles the drag-and-drop event loop and coordinat
 - `onResizeStart?: (currentNode: SplitNode) => void` — (Optional) Callback triggered when resizing starts.
 - `onResize?: (currentNode: SplitNode, percentage: number) => void` — (Optional) Callback triggered during resizing.
 - `onResizeEnd?: (currentNode: SplitNode, percentage: number) => void` — (Optional) Callback triggered when resizing ends.
-- `renderResizer?: (props: ResizerRenderProps) => ReactNode` — (Optional) Custom resizer bar component renderer.
 - `minSplitPercentage?: number` — (Optional) Minimum resizing limit percentage (defaults to `5`).
 - `maxSplitPercentage?: number` — (Optional) Maximum resizing limit percentage (defaults to `95`).
 
@@ -427,6 +432,22 @@ Defines the interactive drag region inside a `<Pane>`. **Must be placed inside a
 
 ---
 
+### `<ResizableContainer>`
+
+A vertical-resize container wrapper that wraps any node (typically `<PaneTree />` or a dashboard component) and allows the user to resize its height by dragging a handle at the bottom edge. Includes smooth scroll parent propagation and drag-to-scroll infinite scrolling behavior.
+
+#### Props
+
+- `height?: number` — Controlled height in pixels (or initial height if uncontrolled). Defaults to `400`.
+- `onHeightChange?: (height: number) => void` — Callback function triggered during or after dragging to resize.
+- `minHeight?: number` — Minimum allowed height in pixels (defaults to `100`).
+- `maxHeight?: number` — Maximum allowed height in pixels (defaults to `Infinity`).
+- `persist?: boolean` — Whether to persist height changes in localStorage.
+- `localStorageKey?: string` — Custom localStorage key name (defaults to `'default-pane'`).
+- `resizerHeight?: number` — Height of the resizer drag handle in pixels (defaults to `6`).
+- `className?: string` — Custom CSS class applied to the outer container.
+- `resizerClassName?: string` — Custom CSS class applied to the drag handle.
+
 ## 3. Programmatic State Utilities
 
 Import these helpers from `react-zeugma` to manipulate the tree layout programmatically in your state handlers:

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 le=react.createContext(void 0),de=react.createContext(void 0);var Y=()=>{let e=react.useContext(le);if(!e)throw new Error("useDashboardState must be used within a DashboardProvider");return e},be=()=>{let e=react.useContext(de);if(!e)throw new Error("useDashboardActions must be used within a DashboardProvider");return e};function $(e,t){if(e===null)return null;if(e.type==="pane")return e.paneId===t?null:e;let o=$(e.first,t),r=$(e.second,t);return o===null?r:r===null?o:{...e,first:o,second:r}}function ie(e,t,o,r,n){if(e===null)return typeof n=="string"?{type:"pane",paneId:n}:n;if(e.type==="pane"){if(e.paneId===t){let l=typeof n=="string"?{type:"pane",paneId:n}:n,a=r==="left"||r==="top";return {type:"split",direction:o,first:a?l:e,second:a?e:l,splitPercentage:50}}return e}return {...e,first:ie(e.first,t,o,r,n)||e.first,second:ie(e.second,t,o,r,n)||e.second}}function Pe(e,t,o){if(e===null)return null;let r=F(e,t),n=F(e,o);if(!r||!n)return e;function l(a){return a.type==="pane"?a.paneId===t?{...n}:a.paneId===o?{...r}:a:{...a,first:l(a.first),second:l(a.second)}}return l(e)}function $e(e,t){if(e===null)return {type:"pane",paneId:t};function o(r,n){return r.type==="pane"?{type:"split",direction:n==="row"?"column":"row",splitPercentage:50,first:r,second:{type:"pane",paneId:t}}:{...r,second:o(r.second,r.direction)}}return o(e,null)}function G(e,t,o){return e===null?null:e===t?{...e,splitPercentage:o}:e.type==="split"?{...e,first:G(e.first,t,o)||e.first,second:G(e.second,t,o)||e.second}:e}function Ve(e,t,o){let r=F(e,t)??{type:"pane",paneId:t},n=$(e,t);if(n===null)return {...r};let l=o==="left"||o==="right"?"row":"column",a=o==="left"||o==="top",p={...r};return {type:"split",direction:l,first:a?p:n,second:a?n:p,splitPercentage:50}}function F(e,t){return e===null?null:e.type==="pane"?e.paneId===t?e:null:F(e.first,t)??F(e.second,t)}function ce(e,t,o){if(e===null)return null;if(e.type==="pane"){if(e.paneId===t){let r=o(e.metadata);if(r===void 0){let{metadata:n,...l}=e;return l}return {...e,metadata:r}}return e}return {...e,first:ce(e.first,t,o)??e.first,second:ce(e.second,t,o)??e.second}}var Je=8,Ke=8,$t=4;var rt=({activeId:e,render:t,className:o})=>{let r=react.useRef(null);return react.useEffect(()=>{let n=l=>{r.current&&(r.current.style.transform=`translate(${l.clientX+12}px, ${l.clientY+12}px)`);};return document.addEventListener("pointermove",n),()=>document.removeEventListener("pointermove",n)},[]),jsxRuntime.jsx("div",{ref:r,className:o,style:{position:"fixed",top:0,left:0,zIndex:9999,pointerEvents:"none"},children:t(e)})},xe=class extends core.PointerSensor{static activators=[{eventName:"onPointerDown",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},Ne=class extends core.TouchSensor{static activators=[{eventName:"onTouchStart",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},it=({layout:e,onChange:t,renderPane:o,renderDragOverlay:r,classNames:n={},fullscreenPaneId:l=null,onFullscreenChange:a,onRemove:p,dragActivationDistance:E=8,snapThreshold:D=8,onDragStart:R,onDragEnd:c,onResizeStart:h,onResize:I,onResizeEnd:S,renderResizer:v,minSplitPercentage:f=5,maxSplitPercentage:b=95,enableDragToDismiss:O=false,dismissThreshold:x=60,onDismissIntentChange:J,children:j})=>{let[g,P]=react.useState(e),[Ie,me]=react.useState(e);e!==Ie&&(me(e),P(e));let[M,ee]=react.useState(null),[A,N]=react.useState(null),C=react.useRef(null),_=react.useRef(null),ae=react.useCallback(s=>{C.current=s;},[]),k=react.useRef(J);k.current=J;let w=react.useRef(g);w.current=g;let T=react.useRef(t);T.current=t;let W=react.useRef(o);W.current=o;let K=react.useRef(S);K.current=S;let te=react.useCallback(s=>W.current(s),[]),ne=react.useMemo(()=>n,[n.pane,n.dropPreview,n.swapPreview,n.dragOverlay,n.resizer,n.dismissPreview]),oe=core.useSensors(core.useSensor(xe,{activationConstraint:{distance:E}}),core.useSensor(Ne,{activationConstraint:{delay:250,tolerance:5}})),Xe=s=>{let u=s.active.id.toString();ee(u),O&&C.current?_.current=C.current.getBoundingClientRect():_.current=null,R&&R(u);},Ye=s=>{if(!O)return;let u=s.active.id.toString(),i=_.current;if(!i){A!==null&&(N(null),k.current?.(null));return}let d=s.activatorEvent,L=null,z=null;if(d instanceof MouseEvent||d instanceof PointerEvent)L=d.clientX+s.delta.x,z=d.clientY+s.delta.y;else if(typeof TouchEvent<"u"&&d instanceof TouchEvent){let m=d.touches[0]||d.changedTouches[0];m&&(L=m.clientX+s.delta.x,z=m.clientY+s.delta.y);}let Z=0;if(L!==null&&z!==null){let m=0,y=0;L<i.left?m=i.left-L:L>i.right&&(m=L-i.right),z<i.top?y=i.top-z:z>i.bottom&&(y=z-i.bottom),Z=Math.sqrt(m*m+y*y);}else {let m=s.active.rect.current.translated;if(m){let y=m.left+m.width/2,U=m.top+m.height/2,q=0,Q=0;y<i.left?q=i.left-y:y>i.right&&(q=y-i.right),U<i.top?Q=i.top-U:U>i.bottom&&(Q=U-i.bottom),Z=Math.sqrt(q*q+Q*Q);}}Z>x?A!==u&&(N(u),k.current?.(u)):A!==null&&(N(null),k.current?.(null));},Be=s=>{ee(null);let{active:u,over:i}=s,d=u.id.toString(),L=O&&A===d;if(N(null),k.current?.(null),_.current=null,L){p?p(d):he(d),c&&c(d,null,null);return}if(!i){c&&c(d,null,null);return}let z=i.id.toString(),Z=z.match(/^drop-root-(left|right|top|bottom)$/);if(Z){let[,X]=Z,re=Ve(g,d,X);P(re),t(re),c&&c(d,"root",{type:"split",direction:X==="left"||X==="right"?"row":"column",position:X});return}let ve=z.match(/^drop-center-(.+)$/);if(ve){let[,X]=ve;if(d!==X){let re=Pe(g,d,X);P(re),t(re);}c&&c(d,X,{type:"swap",position:"center"});return}let m=z.match(/^drop-(left|right|top|bottom)-(.+)$/);if(!m){c&&c(d,null,null);return}let[,y,U]=m;if(d===U){c&&c(d,null,null);return}let q=y==="left"||y==="right"?"row":"column",Q=F(g,d)??{type:"pane",paneId:d},Ge=$(g,d),Fe=ie(Ge,U,q,y,Q);P(Fe),t(Fe),c&&c(d,U,{type:"split",direction:q,position:y});},ze=react.useCallback(s=>{P(s);},[]),he=react.useCallback(s=>{let u=$(w.current,s);P(u),T.current(u);},[]),Ee=react.useCallback(s=>{let u=$e(w.current,s);P(u),T.current(u);},[]),Ce=react.useCallback((s,u)=>{let i=Pe(w.current,s,u);P(i),T.current(i);},[]),Te=react.useCallback((s,u,i,d)=>{let L=F(w.current,d)??{type:"pane",paneId:d},z=$(w.current,d),Z=ie(z,s,u,i,L);P(Z),T.current(Z);},[]),Le=react.useCallback((s,u)=>{let i=G(w.current,s,u);P(i),T.current(i);},[]),Me=react.useCallback((s,u)=>{let i=ce(w.current,s,u);P(i),T.current(i);},[]),Ae=react.useCallback((s,u)=>{let i=G(w.current,s,u);P(i),T.current(i),K.current&&K.current(s,u);},[]),We=react.useMemo(()=>({layout:g,onLayoutChange:ze,renderPane:te,activeId:M,dismissIntentId:A,setContainerRef:ae,fullscreenPaneId:l,classNames:ne,onRemove:p,onFullscreenChange:a,snapThreshold:D,onResizeStart:h,onResize:I,onResizeEnd:Ae,renderResizer:v,minSplitPercentage:f,maxSplitPercentage:b}),[g,M,A,ae,l,ne,p,a,D,h,I,v,f,b,ze,te,Ae]),qe=react.useMemo(()=>({removePane:he,addPane:Ee,swapPanes:Ce,splitPane:Te,updateSplitPercentage:Le,updatePaneMetadata:Me}),[he,Ee,Ce,Te,Le,Me]);return jsxRuntime.jsx(de.Provider,{value:qe,children:jsxRuntime.jsxs(le.Provider,{value:We,children:[jsxRuntime.jsx(core.DndContext,{id:"zeugma-dnd-context",sensors:oe,collisionDetection:core.pointerWithin,onDragStart:Xe,onDragMove:Ye,onDragEnd:Be,children:j}),M&&r&&jsxRuntime.jsx(rt,{activeId:M,render:r,className:`${n.dragOverlay||""} ${M===A?n.dismissPreview||"zeugma-dismiss-preview":""}`.trim()})]})})};var lt={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"}},dt={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"}},ct=({id:e,position:t,activeClassName:o})=>{let{setNodeRef:r,isOver:n}=core.useDroppable({id:e});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:r,style:lt[t]}),n&&jsxRuntime.jsx("div",{className:o,style:dt[t]})]})},_e=({activeId:e,hasOtherPanes:t,dropPreviewClassName:o})=>!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(ct,{id:`drop-root-${r}`,position:r,activeClassName:o},r))});function De({containerRef:e,isRow:t,direction:o,splitPercentage:r,resizerSize:n,snapThreshold:l,layout:a,currentNode:p,onLayoutChange:E,onResizeStart:D,onResizeEnd:R}){let{onResizeStart:c,onResize:h,onResizeEnd:I,minSplitPercentage:S=5,maxSplitPercentage:v=95}=Y();return react.useCallback(f=>{f.preventDefault();let b=e.current;if(!b)return;document.body.classList.add("zeugma-resizing");let O=document.createElement("style");O.id="zeugma-global-cursor-style",O.textContent=`
-      * {
-        cursor: ${t?"col-resize":"row-resize"} !important;
-        user-select: none !important;
-      }
-    `,document.head.appendChild(O),D&&D(),c&&c(p);let x=b.getBoundingClientRect(),J=f.clientX,j=f.clientY,g=r,P=f.currentTarget;P.setAttribute("data-resizing","true");let me=Array.from(document.querySelectorAll('div[role="separator"][data-direction]')).filter(N=>N!==P&&N.getAttribute("data-direction")===o).map(N=>{let C=N.getBoundingClientRect();return t?C.left+C.width/2:C.top+C.height/2}),M=g,ee=N=>{let C=t?(N.clientX-J)/x.width*100:(N.clientY-j)/x.height*100,_=g+C,ae=t?x.left+(x.width-n)*(_/100)+n/2:x.top+(x.height-n)*(_/100)+n/2,k=1/0,w=null;for(let ne of me){let oe=Math.abs(ae-ne);oe<l&&oe<k&&(k=oe,w=ne);}let T=_;w!==null&&(T=t?(w-n/2-x.left)/(x.width-n)*100:(w-n/2-x.top)/(x.height-n)*100);let W=Math.max(S,Math.min(v,T));M=W;let K=b.children[0],te=b.children[b.children.length-1];K&&te&&(K.style.flex=`${W} 1 0%`,te.style.flex=`${100-W} 1 0%`),h&&h(p,W);},A=()=>{document.body.classList.remove("zeugma-resizing"),P.removeAttribute("data-resizing");let N=document.getElementById("zeugma-global-cursor-style");N&&N.remove(),document.removeEventListener("pointermove",ee),document.removeEventListener("pointerup",A);let C=G(a,p,M);console.log("onLayoutChange (finalized) called with percentage:",M),E(C),R&&R(),I&&I(p,M);};document.addEventListener("pointermove",ee),document.addEventListener("pointerup",A);},[e,t,o,r,n,l,a,p,E,D,R,c,h,I,S,v])}var vt=({currentNode:e,resizerSize:t,snapThreshold:o,renderResizer:r})=>{let{layout:n,onLayoutChange:l,classNames:a,renderResizer:p}=Y(),[E,D]=react.useState(false),R=r||p,c=react.useRef(null),{direction:h,first:I,second:S,splitPercentage:v}=e,f=h==="row",b=De({containerRef:c,isRow:f,direction:h,splitPercentage:v,resizerSize:t,snapThreshold:o??8,layout:n,currentNode:e,onLayoutChange:l,onResizeStart:()=>D(true),onResizeEnd:()=>D(false)});return jsxRuntime.jsxs("div",{ref:c,style:{display:"flex",flexDirection:f?"row":"column",width:"100%",height:"100%",overflow:"hidden"},children:[jsxRuntime.jsx("div",{style:{flex:`${v} 1 0%`,overflow:"hidden"},children:jsxRuntime.jsx(Se,{tree:I,resizerSize:t,snapThreshold:o,renderResizer:r})}),R?R({direction:h,splitPercentage:v,resizerSize:t,isResizing:E,onPointerDown:b}):jsxRuntime.jsx("div",{className:a.resizer,"data-direction":h,style:{width:f?`${t}px`:"100%",height:f?"100%":`${t}px`,cursor:f?"col-resize":"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:b,role:"separator","aria-valuenow":v,"aria-valuemin":5,"aria-valuemax":95}),jsxRuntime.jsx("div",{style:{flex:`${100-v} 1 0%`,overflow:"hidden"},children:jsxRuntime.jsx(Se,{tree:S,resizerSize:t,snapThreshold:o,renderResizer:r})})]})},Se=({tree:e,resizerSize:t=4,snapThreshold:o,renderResizer:r})=>{let{layout:n,renderPane:l,activeId:a,dismissIntentId:p,setContainerRef:E,classNames:D,fullscreenPaneId:R,snapThreshold:c}=Y(),h=o!==void 0?o:c,I=react.useMemo(()=>e!==void 0||!a?false:$(n,a)!==null,[e,n,a]);if(R&&!e)return jsxRuntime.jsx("div",{style:{width:"100%",height:"100%",position:"relative"},children:l(R)});let S=e!==void 0?e:n;if(!S)return null;let v=()=>S.type==="pane"?jsxRuntime.jsx("div",{style:{width:"100%",height:"100%",position:"relative"},children:l(S.paneId)}):jsxRuntime.jsx(vt,{currentNode:S,resizerSize:t,snapThreshold:h,renderResizer:r});return e===void 0?jsxRuntime.jsxs("div",{ref:E,className:`zeugma-dashboard-root ${a!==null&&a===p?"zeugma-dashboard-dismiss-active":""}`.trim(),style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:[v(),jsxRuntime.jsx(_e,{activeId:a,hasOtherPanes:I,dropPreviewClassName:D.dropPreview})]}):v()};var ge=react.createContext(null);var xt={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"}},Nt={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"}},Ue=({id:e,position:t,activeClassName:o})=>{let{setNodeRef:r,isOver:n}=core.useDroppable({id:e});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:r,style:xt[t]}),n&&jsxRuntime.jsx("div",{className:o,style:Nt[t]})]})},Dt=({id:e,children:t,style:o})=>{let{layout:r,activeId:n,classNames:l,fullscreenPaneId:a,onRemove:p,onFullscreenChange:E}=Y(),{removePane:D,updatePaneMetadata:R}=be(),c=n!==null&&n!==e,{attributes:h,listeners:I,setNodeRef:S,isDragging:v}=core.useDraggable({id:e}),f=n===e||v,b=a===e,x=react.useMemo(()=>F(r,e),[r,e])?.metadata,J=react.useMemo(()=>({isDragging:f,isFullscreen:b,toggleFullscreen:()=>E?.(b?null:e),remove:()=>{b&&E?.(null),p?p(e):D(e);},metadata:x,updateMetadata:g=>{R(e,g);}}),[f,b,E,e,p,D,x,R]),j=react.useMemo(()=>({...I,...h}),[I,h]);return jsxRuntime.jsx(ge.Provider,{value:j,children:jsxRuntime.jsxs("div",{ref:S,className:l.pane,style:{position:"relative",width:"100%",height:"100%",...o},children:[t(J),c&&jsxRuntime.jsxs("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:[["top","bottom","left","right"].map(g=>jsxRuntime.jsx(Ue,{id:`drop-${g}-${e}`,position:g,activeClassName:l.dropPreview},g)),jsxRuntime.jsx(Ue,{id:`drop-center-${e}`,position:"center",activeClassName:l.swapPreview})]})]})})};var yt=({children:e,className:t,style:o})=>{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",...o},...r,children:e})};exports.DEFAULT_DRAG_ACTIVATION_DISTANCE=Ke;exports.DEFAULT_RESIZER_SIZE=$t;exports.DEFAULT_SNAP_THRESHOLD=Je;exports.DashboardProvider=it;exports.DragHandle=yt;exports.Pane=Dt;exports.PaneTree=Se;exports.addPane=$e;exports.findPane=F;exports.removePane=$;exports.splitPane=ie;exports.splitRoot=Ve;exports.swapPanes=Pe;exports.updatePaneMetadata=ce;exports.updateSplitPercentage=G;exports.useDashboardActions=be;exports.useDashboardState=Y;exports.useResizer=De;//# sourceMappingURL=index.cjs.map
+'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=`
+    * {
+      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
 //# sourceMappingURL=index.cjs.map