react-zeugma 1.3.1 → 1.4.0

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 ae=react.createContext(void 0),le=react.createContext(void 0);var K=()=>{let e=react.useContext(ae);if(!e)throw new Error("useDashboardState must be used within a DashboardProvider");return e},Pe=()=>{let e=react.useContext(le);if(!e)throw new Error("useDashboardActions must be used within a DashboardProvider");return e};function B(e,t){if(e===null)return null;if(e.type==="pane")return e.paneId===t?null:e;let n=B(e.first,t),r=B(e.second,t);return n===null?r:r===null?n:{...e,first:n,second:r}}function ie(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:ie(e.first,t,n,r,o)||e.first,second:ie(e.second,t,n,r,o)||e.second}}function xe(e,t,n){if(e===null)return null;let r=_(e,t),o=_(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 _e(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 j(e,t,n){return e===null?null:e===t?{...e,splitPercentage:n}:e.type==="split"?{...e,first:j(e.first,t,n)||e.first,second:j(e.second,t,n)||e.second}:e}function Oe(e,t,n){let r=_(e,t)??{type:"pane",paneId:t},o=B(e,t);if(o===null)return {...r};let i=n==="left"||n==="right"?"row":"column",c=n==="left"||n==="top",d={...r};return {type:"split",direction:i,first:c?d:o,second:c?o:d,splitPercentage:50}}function _(e,t){return e===null?null:e.type==="pane"?e.paneId===t?e:null:_(e.first,t)??_(e.second,t)}function ce(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:ce(e.first,t,n)??e.first,second:ce(e.second,t,n)??e.second}}var rt=8,it=8,Jt=4;var pt=({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")}]},ft=({layout:e,onChange:t,renderPane:n,renderDragOverlay:r,classNames:o={},fullscreenPaneId:i=null,onFullscreenChange:c,onRemove:d,dragActivationDistance:w=8,snapThreshold:b=8,onDragStart:I,onDragEnd:s,onResizeStart:x,onResize:m,onResizeEnd:z,minSplitPercentage:C=5,maxSplitPercentage:T=95,enableDragToDismiss:S=false,dismissThreshold:y=60,onDismissIntentChange:V,children:L})=>{let[E,f]=react.useState(e),[ne,oe]=react.useState(e);e!==ne&&(oe(e),f(e));let[v,M]=react.useState(null),[h,F]=react.useState(null),q=react.useRef(null),Z=react.useRef(null),g=react.useCallback(l=>{q.current=l;},[]),R=react.useRef(V);R.current=V;let P=react.useRef(E);P.current=E;let D=react.useRef(t);D.current=t;let k=react.useRef(n);k.current=n;let Y=react.useRef(z);Y.current=z;let ee=react.useCallback(l=>k.current(l),[]),Ie=react.useMemo(()=>o,[o.pane,o.dropPreview,o.swapPreview,o.dragOverlay,o.resizer,o.dismissPreview]),Je=core.useSensors(core.useSensor(Re,{activationConstraint:{distance:w}}),core.useSensor(De,{activationConstraint:{delay:250,tolerance:5}})),Qe=l=>{let p=l.active.id.toString();M(p),S&&q.current?Z.current=q.current.getBoundingClientRect():Z.current=null,I&&I(p);},je=l=>{if(!S)return;let p=l.active.id.toString(),a=Z.current;if(!a){h!==null&&(F(null),R.current?.(null));return}let u=l.activatorEvent,$=null,H=null;if(u instanceof MouseEvent||u instanceof PointerEvent)$=u.clientX+l.delta.x,H=u.clientY+l.delta.y;else if(typeof TouchEvent<"u"&&u instanceof TouchEvent){let N=u.touches[0]||u.changedTouches[0];N&&($=N.clientX+l.delta.x,H=N.clientY+l.delta.y);}let U=0;if($!==null&&H!==null){let N=0,A=0;$<a.left?N=a.left-$:$>a.right&&(N=$-a.right),H<a.top?A=a.top-H:H>a.bottom&&(A=H-a.bottom),U=Math.sqrt(N*N+A*A);}else {let N=l.active.rect.current.translated;if(N){let A=N.left+N.width/2,W=N.top+N.height/2,Q=0,te=0;A<a.left?Q=a.left-A:A>a.right&&(Q=A-a.right),W<a.top?te=a.top-W:W>a.bottom&&(te=W-a.bottom),U=Math.sqrt(Q*Q+te*te);}}U>y?h!==p&&(F(p),R.current?.(p)):h!==null&&(F(null),R.current?.(null));},et=l=>{M(null);let{active:p,over:a}=l,u=p.id.toString(),$=S&&h===u;if(F(null),R.current?.(null),Z.current=null,$){d?d(u):ve(u),s&&s(u,null,null);return}if(!a){s&&s(u,null,null);return}let H=a.id.toString(),U=H.match(/^drop-root-(left|right|top|bottom)$/);if(U){let[,G]=U,re=Oe(E,u,G);f(re),t(re),s&&s(u,"root",{type:"split",direction:G==="left"||G==="right"?"row":"column",position:G});return}let be=H.match(/^drop-center-(.+)$/);if(be){let[,G]=be;if(u!==G){let re=xe(E,u,G);f(re),t(re);}s&&s(u,G,{type:"swap",position:"center"});return}let N=H.match(/^drop-(left|right|top|bottom)-(.+)$/);if(!N){s&&s(u,null,null);return}let[,A,W]=N;if(u===W){s&&s(u,null,null);return}let Q=A==="left"||A==="right"?"row":"column",te=_(E,u)??{type:"pane",paneId:u},ot=B(E,u),He=ie(ot,W,Q,A,te);f(He),t(He),s&&s(u,W,{type:"split",direction:Q,position:A});},ze=react.useCallback(l=>{f(l);},[]),ve=react.useCallback(l=>{let p=B(P.current,l);f(p),D.current(p);},[]),Ce=react.useCallback(l=>{let p=_e(P.current,l);f(p),D.current(p);},[]),Te=react.useCallback((l,p)=>{let a=xe(P.current,l,p);f(a),D.current(a);},[]),Le=react.useCallback((l,p,a,u)=>{let $=_(P.current,u)??{type:"pane",paneId:u},H=B(P.current,u),U=ie(H,l,p,a,$);f(U),D.current(U);},[]),Me=react.useCallback((l,p)=>{let a=j(P.current,l,p);f(a),D.current(a);},[]),Ae=react.useCallback((l,p)=>{let a=ce(P.current,l,p);f(a),D.current(a);},[]),Fe=react.useCallback((l,p)=>{let a=j(P.current,l,p);f(a),D.current(a),Y.current&&Y.current(l,p);},[]),tt=react.useMemo(()=>({layout:E,onLayoutChange:ze,renderPane:ee,activeId:v,dismissIntentId:h,setContainerRef:g,fullscreenPaneId:i,classNames:Ie,onRemove:d,onFullscreenChange:c,snapThreshold:b,onResizeStart:x,onResize:m,onResizeEnd:Fe,minSplitPercentage:C,maxSplitPercentage:T}),[E,v,h,g,i,Ie,d,c,b,x,m,C,T,ze,ee,Fe]),nt=react.useMemo(()=>({removePane:ve,addPane:Ce,swapPanes:Te,splitPane:Le,updateSplitPercentage:Me,updatePaneMetadata:Ae}),[ve,Ce,Te,Le,Me,Ae]);return jsxRuntime.jsx(le.Provider,{value:nt,children:jsxRuntime.jsxs(ae.Provider,{value:tt,children:[jsxRuntime.jsx(core.DndContext,{id:"zeugma-dnd-context",sensors:Je,collisionDetection:core.pointerWithin,onDragStart:Qe,onDragMove:je,onDragEnd:et,children:L}),v&&r&&jsxRuntime.jsx(pt,{activeId:v,render:r,className:`${o.dragOverlay||""} ${v===h?o.dismissPreview||"zeugma-dismiss-preview":""}`.trim()})]})})};var ht={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"}},vt={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"}},bt=({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:ht[t]}),o&&jsxRuntime.jsx("div",{className:n,style:vt[t]})]})},ke=({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(bt,{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=d=>{n(d);},c=()=>{document.body.classList.remove("zeugma-resizing"),t.removeAttribute("data-resizing");let d=document.getElementById("zeugma-global-cursor-style");d&&d.remove(),document.removeEventListener("pointermove",i),document.removeEventListener("pointerup",c),r();};document.addEventListener("pointermove",i),document.addEventListener("pointerup",c);}function Ne({containerRef:e,isRow:t,direction:n,splitPercentage:r,resizerSize:o,snapThreshold:i,layout:c,currentNode:d,onLayoutChange:w,onResizeStart:b,onResizeEnd:I}){let{onResizeStart:s,onResize:x,onResizeEnd:m,minSplitPercentage:z=5,maxSplitPercentage:C=95}=K();return react.useCallback(T=>{T.preventDefault();let S=e.current;if(!S)return;b&&b(),s&&s(d);let y=S.getBoundingClientRect(),V=T.clientX,L=T.clientY,E=r,f=T.currentTarget,oe=Array.from(document.querySelectorAll('div[role="separator"][data-direction]')).filter(M=>M!==f&&M.getAttribute("data-direction")===n).map(M=>{let h=M.getBoundingClientRect();return t?h.left+h.width/2:h.top+h.height/2}),v=E;fe({cursor:t?"col-resize":"row-resize",resizerEl:f,onMove:M=>{let h=t?(M.clientX-V)/y.width*100:(M.clientY-L)/y.height*100,F=E+h,q=t?y.left+(y.width-o)*(F/100)+o/2:y.top+(y.height-o)*(F/100)+o/2,Z=1/0,g=null;for(let Y of oe){let ee=Math.abs(q-Y);ee<i&&ee<Z&&(Z=ee,g=Y);}let R=F;g!==null&&(R=t?(g-o/2-y.left)/(y.width-o)*100:(g-o/2-y.top)/(y.height-o)*100);let P=Math.max(z,Math.min(C,R));v=P;let D=S.children[0],k=S.children[S.children.length-1];D&&k&&(D.style.flex=`${P} 1 0%`,k.style.flex=`${100-P} 1 0%`),x&&x(d,P);},onEnd:()=>{let M=j(c,d,v);w(M),I&&I(),m&&m(d,v);}});},[e,t,n,r,o,i,c,d,w,b,I,s,x,m,z,C])}var wt=({currentNode:e,resizerSize:t,snapThreshold:n})=>{let{layout:r,onLayoutChange:o,classNames:i}=K(),[c,d]=react.useState(false),w=react.useRef(null),{direction:b,first:I,second:s,splitPercentage:x}=e,m=b==="row",z=Ne({containerRef:w,isRow:m,direction:b,splitPercentage:x,resizerSize:t,snapThreshold:n??8,layout:r,currentNode:e,onLayoutChange:o,onResizeStart:()=>d(true),onResizeEnd:()=>d(false)});return jsxRuntime.jsxs("div",{ref:w,style:{display:"flex",flexDirection:m?"row":"column",width:"100%",height:"100%",overflow:"hidden"},children:[jsxRuntime.jsx("div",{style:{flex:`${x} 1 0%`,overflow:"hidden"},children:jsxRuntime.jsx(we,{tree:I,resizerSize:t,snapThreshold:n})}),jsxRuntime.jsx("div",{className:`zeugma-resizer ${i.resizer||""}`.trim(),"data-direction":b,"data-resizing":c||void 0,style:{width:m?`${t}px`:"100%",height:m?"100%":`${t}px`,cursor:m?"col-resize":"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:z,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:c,setContainerRef:d,classNames:w,fullscreenPaneId:b,snapThreshold:I}=K(),s=n!==void 0?n:I,x=react.useMemo(()=>e!==void 0||!i?false:B(r,i)!==null,[e,r,i]);if(b&&!e)return jsxRuntime.jsx("div",{style:{width:"100%",height:"100%",position:"relative"},children:o(b)});let m=e!==void 0?e:r;if(!m)return null;let z=()=>m.type==="pane"?jsxRuntime.jsx("div",{style:{width:"100%",height:"100%",position:"relative"},children:o(m.paneId)}):jsxRuntime.jsx(wt,{currentNode:m,resizerSize:t,snapThreshold:s});return e===void 0?jsxRuntime.jsxs("div",{ref:d,className:`zeugma-dashboard-root ${i!==null&&i===c?"zeugma-dashboard-dismiss-active":""}`.trim(),style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:[z(),jsxRuntime.jsx(ke,{activeId:i,hasOtherPanes:x,dropPreviewClassName:w.dropPreview})]}):z()};var qe="zeugma-height:",It="default-pane";function zt(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 Xe(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:d,resizerHeight:w=6,className:b,resizerClassName:I})=>{let s=c?d||It:null,x=()=>{let L=(s?zt(s):null)??n??400;return me(L,o,i)},[m,z]=react.useState(x),C=react.useRef(null),T=s?m:n??m,S=react.useRef(n);react.useEffect(()=>{if(n!==void 0&&n!==S.current){let L=me(n,o,i);z(L),s&&Xe(s,L);}S.current=n;},[n,o,i,s]);let y=react.useCallback(()=>i,[i]),V=react.useCallback(L=>{L.preventDefault();let E=L.clientY,f=T,ne=y(),oe=L.currentTarget,v=Ge(C.current),M=v?v.scrollTop:0,h=E,F=null,q=(g,R)=>{let P=R-M,k=g-E+P,Y=me(f+k,o,ne);return C.current&&(C.current.style.height=`${Y}px`),Y},Z=()=>{if(!v)return;let g=v===document.documentElement||v===document.body?{top:0,bottom:window.innerHeight}:v.getBoundingClientRect(),R=40,P=10,D=0;h>g.bottom-R?D=Math.min(1,(h-(g.bottom-R))/R)*P:h<g.top+R&&(D=-Math.min(1,(g.top+R-h)/R)*P),D!==0&&(v.scrollTop+=D,q(h,v.scrollTop)),F=requestAnimationFrame(Z);};F=requestAnimationFrame(Z),fe({cursor:"row-resize",resizerEl:oe,onMove:g=>{h=g.clientY,v&&q(h,v.scrollTop);},onEnd:()=>{F!==null&&cancelAnimationFrame(F);let g=f;C.current&&(g=C.current.getBoundingClientRect().height),g=me(g,o,ne),z(g),r&&r(g),s&&Xe(s,g);}});},[T,o,y,r,s]);return t?jsxRuntime.jsxs("div",{ref:C,className:`zeugma-resizable-container ${b||""}`.trim(),style:{height:`${T}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 ${I||""}`.trim(),style:{height:`${w}px`,cursor:"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:V,role:"separator","aria-orientation":"horizontal","aria-valuenow":Math.round(T),"aria-valuemin":o,"aria-valuemax":i===1/0?void 0:i})]}):jsxRuntime.jsx("div",{className:`zeugma-resizable-container disabled ${b||""}`.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 he=react.createContext(null);var At={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"}},Ft={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:At[t]}),o&&jsxRuntime.jsx("div",{className:n,style:Ft[t]})]})},Ht=({id:e,children:t,style:n})=>{let{layout:r,activeId:o,classNames:i,fullscreenPaneId:c,onRemove:d,onFullscreenChange:w}=K(),{removePane:b,updatePaneMetadata:I}=Pe(),s=o!==null&&o!==e,{attributes:x,listeners:m,setNodeRef:z,isDragging:C}=core.useDraggable({id:e}),T=o===e||C,S=c===e,V=react.useMemo(()=>_(r,e),[r,e])?.metadata,L=react.useMemo(()=>({isDragging:T,isFullscreen:S,toggleFullscreen:()=>w?.(S?null:e),remove:()=>{S&&w?.(null),d?d(e):b(e);},metadata:V,updateMetadata:f=>{I(e,f);}}),[T,S,w,e,d,b,V,I]),E=react.useMemo(()=>({...m,...x}),[m,x]);return jsxRuntime.jsx(he.Provider,{value:E,children:jsxRuntime.jsxs("div",{ref:z,className:i.pane,style:{position:"relative",width:"100%",height:"100%",...n},children:[t(L),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(f=>jsxRuntime.jsx(Ke,{id:`drop-${f}-${e}`,position:f,activeClassName:i.dropPreview},f)),jsxRuntime.jsx(Ke,{id:`drop-center-${e}`,position:"center",activeClassName:i.swapPreview})]})]})})};var _t=({children:e,className:t,style:n})=>{let r=react.useContext(he);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=it;exports.DEFAULT_RESIZER_SIZE=Jt;exports.DEFAULT_SNAP_THRESHOLD=rt;exports.DashboardProvider=ft;exports.DragHandle=_t;exports.Pane=Ht;exports.PaneTree=we;exports.ResizableContainer=We;exports.addPane=_e;exports.createDragSession=fe;exports.findPane=_;exports.removePane=B;exports.splitPane=ie;exports.splitRoot=Oe;exports.swapPanes=xe;exports.updatePaneMetadata=ce;exports.updateSplitPercentage=j;exports.useDashboardActions=Pe;exports.useDashboardState=K;exports.useResizer=Ne;//# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map