@dynamix-layout/react/dist/index.cjs.js

A powerful React component for creating dynamic, resizable, and draggable layouts.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),v=require("@dynamix-layout/core");var Ee={exports:{}},be={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var ke;function We(){if(ke)return be;ke=1;var m=Symbol.for("react.transitional.element"),l=Symbol.for("react.fragment");function d(w,E,N){var h=null;if(N!==void 0&&(h=""+N),E.key!==void 0&&(h=""+E.key),"key"in E){N={};for(var W in E)W!=="key"&&(N[W]=E[W])}else N=E;return E=N.ref,{$$typeof:m,type:w,key:h,ref:E!==void 0?E:null,props:N}}return be.Fragment=l,be.jsx=d,be.jsxs=d,be}var ve={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var $e;function Me(){return $e||($e=1,process.env.NODE_ENV!=="production"&&function(){function m(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===pe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case U:return"Fragment";case q:return"Profiler";case z:return"StrictMode";case fe:return"Suspense";case le:return"SuspenseList";case ue:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case ce:return"Portal";case j:return(e.displayName||"Context")+".Provider";case P:return(e._context.displayName||"Context")+".Consumer";case M:var a=e.render;return e=e.displayName,e||(e=a.displayName||a.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case de:return a=e.displayName||null,a!==null?a:m(e.type)||"Memo";case oe:a=e._payload,e=e._init;try{return m(e(a))}catch{}}return null}function l(e){return""+e}function d(e){try{l(e);var a=!1}catch{a=!0}if(a){a=console;var y=a.error,R=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return y.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",R),l(e)}}function w(e){if(e===U)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===oe)return"<...>";try{var a=m(e);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function E(){var e=$.A;return e===null?null:e.getOwner()}function N(){return Error("react-stack-top-frame")}function h(e){if(_.call(e,"key")){var a=Object.getOwnPropertyDescriptor(e,"key").get;if(a&&a.isReactWarning)return!1}return e.key!==void 0}function W(e,a){function y(){c||(c=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",a))}y.isReactWarning=!0,Object.defineProperty(e,"key",{get:y,configurable:!0})}function Q(){var e=m(this.type);return L[e]||(L[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function ee(e,a,y,R,A,C,J,I){return y=C.ref,e={$$typeof:ne,type:e,key:a,props:C,_owner:A},(y!==void 0?y:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:Q}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function te(e,a,y,R,A,C,J,I){var T=a.children;if(T!==void 0)if(R)if(me(T)){for(R=0;R<T.length;R++)re(T[R]);Object.freeze&&Object.freeze(T)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else re(T);if(_.call(a,"key")){T=m(e);var Y=Object.keys(a).filter(function(ge){return ge!=="key"});R=0<Y.length?"{key: someKey, "+Y.join(": ..., ")+": ...}":"{key: someKey}",X[T+R]||(Y=0<Y.length?"{"+Y.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,R,T,Y,T),X[T+R]=!0)}if(T=null,y!==void 0&&(d(y),T=""+y),h(a)&&(d(a.key),T=""+a.key),"key"in a){y={};for(var F in a)F!=="key"&&(y[F]=a[F])}else y=a;return T&&W(y,typeof e=="function"?e.displayName||e.name||"Unknown":e),ee(e,T,C,A,E(),y,J,I)}function re(e){typeof e=="object"&&e!==null&&e.$$typeof===ne&&e._store&&(e._store.validated=1)}var H=p,ne=Symbol.for("react.transitional.element"),ce=Symbol.for("react.portal"),U=Symbol.for("react.fragment"),z=Symbol.for("react.strict_mode"),q=Symbol.for("react.profiler"),P=Symbol.for("react.consumer"),j=Symbol.for("react.context"),M=Symbol.for("react.forward_ref"),fe=Symbol.for("react.suspense"),le=Symbol.for("react.suspense_list"),de=Symbol.for("react.memo"),oe=Symbol.for("react.lazy"),ue=Symbol.for("react.activity"),pe=Symbol.for("react.client.reference"),$=H.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,_=Object.prototype.hasOwnProperty,me=Array.isArray,ae=console.createTask?console.createTask:function(){return null};H={"react-stack-bottom-frame":function(e){return e()}};var c,L={},B=H["react-stack-bottom-frame"].bind(H,N)(),se=ae(w(N)),X={};ve.Fragment=U,ve.jsx=function(e,a,y,R,A){var C=1e4>$.recentlyCreatedOwnerStacks++;return te(e,a,y,!1,R,A,C?Error("react-stack-top-frame"):B,C?ae(w(e)):se)},ve.jsxs=function(e,a,y,R,A){var C=1e4>$.recentlyCreatedOwnerStacks++;return te(e,a,y,!0,R,A,C?Error("react-stack-top-frame"):B,C?ae(w(e)):se)}}()),ve}var Pe;function Ye(){return Pe||(Pe=1,process.env.NODE_ENV==="production"?Ee.exports=We():Ee.exports=Me()),Ee.exports}var f=Ye();const Le=({tabOutput:m,rootId:l,layoutTree:d,updateJSON:w,dimensions:E,tabHeadHeight:N,enableTabbar:h,bondWidth:W,minTabHeight:Q,minTabWidth:ee,sliderUpdateTimeout:te,windowResizeTimeout:re,disableSliderTimeout:H,disableResizeTimeout:ne})=>{const ce=p.useRef(new Map),U=p.useRef(new Map),z=p.useRef(new Map),q=p.useRef(new Map),P=p.useRef(null),j=p.useRef([]),[M,fe]=p.useState(d),[le,de]=p.useState(),[oe,ue]=p.useState(),[pe,$]=p.useState(!1),_=p.useRef(null),[me,ae]=p.useState(!1),c=p.useRef({src:void 0,des:void 0,area:void 0,drag:!1}),L=p.useRef({sliderId:void 0,isSliding:!1}),B=p.useMemo(()=>(v.DynamixLayoutCore._bond=W,v.DynamixLayoutCore._minH=Q,v.DynamixLayoutCore._minW=ee,new v.DynamixLayoutCore({tabs:m.keys,tree:M,minW:ee,minH:Q,bond:W,uqid:l,tabsIds:m.name})),[M,m,W,Q,ee,l]),se=n=>{const t=new Map(n);de(t)},X=n=>{const t=new Map(n);ue(t)};v.Node.cache.nodOpts.onChange(n=>{n.forEach((t,i)=>{const r=z.current.get(i);r&&(r.style.width=`${t.nodDims.w}px`,r.style.height=`${t.nodDims.h}px`,r.style.left=`${t.nodDims.x}px`,r.style.top=`${t.nodDims.y}px`);const u=ce.current.get(i);u&&h&&(u.style.width=`${t.nodDims.w}px`,u.style.height=h?`${N}px`:"0px",u.style.left=`${t.nodDims.x}px`,u.style.top=`${t.nodDims.y}px`)})}),v.Node.cache.bndOpts.onChange(n=>{n.forEach((t,i)=>{const r=U.current.get(i);r&&(r.style.width=`${t.nodDims.w}px`,r.style.height=`${t.nodDims.h}px`,r.style.left=`${t.nodDims.x}px`,r.style.top=`${t.nodDims.y}px`)})}),v.Node.cache.tabOpts.onChange(n=>{n.forEach((t,i)=>{const r=q.current.get(i);r&&(r.style.width=`${t.nodDims.w}px`,r.style.height=h?`${t.nodDims.h-N}px`:`${t.nodDims.h}px`,r.style.left=`${t.nodDims.x}px`,r.style.top=h?`${t.nodDims.y+N}px`:`${t.nodDims.y}px`,r.style.display=t.nodOpen?"block":"none")})});const e=n=>{L.current.isSliding&&B.updateSlider(L.current.sliderId,{x:n.clientX,y:n.clientY},H,te)},a=n=>{if(!L.current.isSliding)return;const t=n.currentTarget;L.current.isSliding=!1,L.current.sliderId=void 0,w&&w(v.DynamixLayoutCore._root.toJSON()),t.releasePointerCapture(n.pointerId),t.removeEventListener("pointermove",e),t.removeEventListener("pointerup",a),t.removeEventListener("pointercancel",a)},y=n=>{n.preventDefault();const t=n.currentTarget;L.current.isSliding=!0,L.current.sliderId=t.id,t.setPointerCapture(n.pointerId),t.addEventListener("pointermove",e),t.addEventListener("pointerup",a),t.addEventListener("pointercancel",a)},R=p.useRef({}),A=(n,t,i)=>{if(!P.current||!c.current||!i)return null;c.current.des=i;const r=i.getBoundingClientRect();if(!r)return null;const u=r.width,b=r.height,g=n-r.left,O=t-r.top;let S,D,o,s,x;g<u/3?(S="left",D=r.left,o=r.top,s=u/2,x=b):g>2*u/3?(S="right",D=r.left+u/2,o=r.top,s=u/2,x=b):O<b/3?(S="top",D=r.left,o=r.top,s=u,x=b/2):O>2*b/3?(S="bottom",D=r.left,o=r.top+b/2,s=u,x=b/2):(S="contain",D=r.left+u*.1,o=r.top+b*.1,s=u*.8,x=b*.8);const V=R.current;(V.area!==S||V.left!==D||V.top!==o||V.width!==s||V.height!==x)&&(I(D,o,s,x,S),R.current={area:S,left:D,top:o,width:s,height:x}),c.current.area=S},C=n=>{n.preventDefault(),n.stopPropagation(),n.dataTransfer&&(n.dataTransfer.dropEffect="move");const t=n.currentTarget,i=Array.from(t.childNodes),r=n.clientX,u=n.clientY;if(!P.current||!c.current||i.length===0)return;const b=i[0].parentElement;if(!b)return;const g=b.getBoundingClientRect(),O=i[0],S=i[i.length-1],D=O.getBoundingClientRect(),o=S.getBoundingClientRect();let s=6;if(u<g.top||u>g.bottom)return;if(r>o.right){const k=o.right+1,G=o.top,Z=s-2,K=o.height,ie="right";I(k,G,Z,K,ie),c.current.des=S,c.current.area=ie;return}if(r<D.left){const k=D.left-s+1,G=D.top,Z=s-2,K=D.height,ie="left";I(k,G,Z,K,ie),c.current.des=O,c.current.area=ie;return}let x=null,V=1/0,xe=!1,Re=0;for(let k=0;k<i.length;k++){const G=i[k].getBoundingClientRect(),Z=G.left+G.width/2,K=Math.abs(r-Z);K<V&&(V=K,x=i[k],xe=r<Z,Re=k)}if(i.length>1&&(xe&&Re>0||!xe&&Re<i.length-1)&&(s=i[1].getBoundingClientRect().left-D.right),x){const k=x.getBoundingClientRect(),G=xe?k.left-s+1:k.right+1,Z=k.top,K=s-2,ie=k.height,Ce=xe?"left":"right";I(G,Z,K,ie,Ce),c.current.des=x,c.current.area=Ce}},J=n=>{n.preventDefault(),n.stopPropagation(),n.dataTransfer&&(n.dataTransfer.dropEffect="move");const t=n.currentTarget.dataset.area,i=n.currentTarget.dataset.uid;if(!t||!i||!P.current||!c.current)return;c.current.des=n.currentTarget,c.current.area=t;const r=E();let u=r.x,b=r.y,g=r.w,O=r.h;t==="left"?(u=r.x,b=r.y,g=r.w/2,O=r.h):t==="right"?(u=r.x+r.w/2,b=r.y,g=r.w/2,O=r.h):t==="top"?(u=r.x,b=r.y,g=r.w,O=r.h/2):t==="bottom"&&(u=r.x,b=r.y+r.h/2,g=r.w,O=r.h/2),I(u,b,g,O,t)},I=(n,t,i,r,u)=>{const b=R.current;if(b.area!==u||b.left!==n||b.top!==t||b.width!==i||b.height!==r){const g=P.current;if(g){const O={};for(let S=0;S<g.style.length;S++){const D=g.style[S];D&&(O[D]=g.style.getPropertyValue(D))}Object.assign(g.style,O,{left:`${n}px`,top:`${t}px`,width:`${i}px`,height:`${r}px`,display:"block",zIndex:"100"}),R.current={area:u,left:n,top:t,width:i,height:r}}}},T=n=>{if(n.stopPropagation(),$(!0),document.body.style.cursor="move",n.currentTarget){if(n.dataTransfer){n.dataTransfer.effectAllowed="move";const t=document.createElement("div");t.style.width="1px",t.style.height="1px",t.style.backgroundColor="transparent",t.style.position="absolute",t.style.top="-1000px",document.body.appendChild(t),n.dataTransfer.setDragImage(t,0,0),setTimeout(()=>{t.parentNode&&t.parentNode.removeChild(t)},0)}j.current.forEach(t=>{t&&(t.style.display="block",t.style.zIndex="99")}),z.current.forEach(t=>{t&&(t.style.display="block",t.style.zIndex="95")}),c.current.src=n.currentTarget,c.current.drag=!0}},Y=n=>{if(n.preventDefault(),n.stopPropagation(),document.body.style.cursor="move",n.dataTransfer&&(n.dataTransfer.dropEffect="move"),!c.current?.src)return;const t=n.currentTarget,i=n.clientX,r=n.clientY;_.current&&cancelAnimationFrame(_.current),_.current=requestAnimationFrame(()=>{A(i,r,t)})},F=n=>{if(document.body.style.cursor="default",j.current.forEach(t=>{t&&(t.style.display="none",t.style.zIndex="-1")}),z.current.forEach(t=>{t&&(t.style.display="none",t.style.zIndex="-1")}),_.current&&(cancelAnimationFrame(_.current),_.current=null),P.current&&(P.current.style.display="none",P.current.style.zIndex="-1"),R.current={},c.current.drag=!1,!c.current?.src||!c.current?.des){c.current.area=void 0,c.current.src=void 0,c.current.des=void 0,$(!1);return}if(c.current.src===c.current.des){c.current.area=void 0,c.current.src=void 0,c.current.des=void 0,$(!1);return}if(c.current.src&&c.current.des){if(!c.current.area){console.warn("No area specified for drag and drop"),$(!1);return}if(!B.updateTree(c.current.src.dataset.uid,c.current.des.dataset.uid,c.current.area||"contain")){console.warn("Failed to update layout tree"),$(!1);return}requestAnimationFrame(()=>{se(v.Node.cache.nodOpts.get()),X(v.Node.cache.bndOpts.get()),w&&w(v.DynamixLayoutCore._root.toJSON())})}c.current.area=void 0,c.current.src=void 0,c.current.des=void 0,$(!1)},ge=n=>{n.preventDefault(),n.stopPropagation(),n.dataTransfer&&(n.dataTransfer.dropEffect="move")},we=n=>{n.preventDefault(),n.stopPropagation()},he=n=>{n.preventDefault(),n.stopPropagation()},ye=n=>{const t=n.currentTarget,i=t.dataset.uid;if(!i)return;const r=v.Node.cache.mapElem.get(i);if(!(r instanceof v.Node)){console.warn(`Element with uid ${i} is not a Node instance`);return}if(!r||!r.host||!r.host.unId){console.warn(`Node with uid ${i} not found in mapNode`);return}if(r.host.open==r.name){console.warn(`Node ${r.name} is already open`);return}const u=v.Node.cache.nodOpts.get().get(r.host.unId);if(!u||u.nodOpen&&r?.open)return;r.host.open=r.name,u.nodOpen=r.name,t?.parentElement?.childNodes?.forEach(g=>{g instanceof HTMLDivElement&&g.dataset.uid!==i?g.dataset.state="inactive":g.dataset.state="active"}),u.nodKids?.forEach(g=>{g.nodName==r.name?(g.nodOpen=!0,q.current.get(g.uidNode)?.style.setProperty("display","block")):(g.nodOpen=!1,q.current.get(g.uidNode)?.style.setProperty("display","none"))})};return p.useEffect(()=>{const n=i=>{B.updateDimension(E(),i,re)};n(!0);const t=async i=>n(ne??!1);return window.addEventListener("resize",t),se(v.Node.cache.nodOpts.get()),X(v.Node.cache.bndOpts.get()),v.Node.cache.nodOpts.triggerChange(),v.Node.cache.bndOpts.triggerChange(),v.Node.cache.tabOpts.triggerChange(),w&&w(v.DynamixLayoutCore._root.toJSON()),()=>{window.removeEventListener("resize",t),_.current&&cancelAnimationFrame(_.current)}},[E,ne,re]),p.useEffect(()=>(v.Node.cache.nodOpts.triggerChange(),v.Node.cache.bndOpts.triggerChange(),v.Node.cache.tabOpts.triggerChange(),()=>{_.current&&cancelAnimationFrame(_.current)}),[le,oe]),{tabsets:le,sliders:oe,tabsetsRef:ce,panelsRef:z,tabsRef:q,slidersRef:U,layoutJSON:M,layoutInstance:B,hoverElementRef:P,rootSplitHoverEl:j,dragging:pe,isUpdating:me,setIsUpdating:ae,setDragging:$,setTabsets:de,setSliders:ue,setLayoutJSON:fe,onDragStart:T,onDragOver:Y,onDragEnd:F,onDragEnter:ge,onDragLeave:we,onDrop:he,onPointerDown:y,updateActiveTab:ye,handleRootSplit:J,handleNavbarDragOver:C}},De=p.forwardRef(({children:m,active:l,...d},w)=>f.jsx("div",{ref:w,...d,"data-state":l?"active":"inactive",className:`DefaultWrapTabLabel ${d.className||""}`,style:{alignSelf:"center",padding:"4px 6px",boxSizing:"border-box",fontSize:"14px",borderRadius:"4px",...d.style},children:m}));De.displayName="DefaultWrapTabLabel";const Te=p.forwardRef(({children:m,...l},d)=>f.jsx("div",{ref:d,...l,className:`DefaultWrapTabBody hide-scrollbar ${l.className||""}`,style:{boxSizing:"border-box",height:"100%",width:"100%",display:"grid",overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",...l.style},children:m}));Te.displayName="DefaultWrapTabBody";const Ne=p.forwardRef(({children:m,...l},d)=>f.jsx("div",{ref:d,...l,className:`DefaultWrapTabHead hide-scrollbar ${l.className||""}`,style:{display:"grid",gridAutoFlow:"column",justifyContent:"start",alignItems:"center",gap:"6px",paddingLeft:"8px",backgroundColor:"#dfdfdf",width:"100%",boxSizing:"border-box",height:"100%",overflow:"auto",placeItems:"self-start",scrollbarWidth:"none",msOverflowStyle:"none",...l.style},children:m}));Ne.displayName="DefaultWrapTabHead";const Se=p.forwardRef(({children:m,...l},d)=>f.jsx("div",{ref:d,className:`DefaultWrapTabPanel ${l.className||""}`,...l,style:{display:"grid",alignItems:"center",placeItems:"self-start",boxSizing:"border-box",position:"absolute",borderRadius:"8px",...l.style},children:m}));Se.displayName="DefaultWrapTabPanel";const je=p.forwardRef(({children:m,...l},d)=>f.jsx("div",{ref:d,className:`DefaultHoverElement ${l.className||""}`,...l,style:{position:"absolute",display:"none",zIndex:-1,backgroundColor:"rgba(0, 175, 249, 0.5)",justifyContent:"center",alignItems:"center",opacity:.7,boxSizing:"border-box",fontWeight:"bold",pointerEvents:"none",borderRadius:"10px",transition:"all 0.2s ease",border:"2px dashed rgb(0, 196, 42)",...l.style},children:m}));je.displayName="DefaultHoverElement";const Oe=p.forwardRef(({children:m,direction:l,...d},w)=>f.jsxs("div",{ref:w,...d,className:`DefaultSliderElement ${d.className||""}`,style:{width:"100%",height:"100%",position:"absolute",boxSizing:"border-box",backgroundColor:"white",zIndex:9,cursor:"grab",...d.style},children:[f.jsx("div",{style:{display:"flex",alignItems:"center",gap:"4px",height:"100%",flexDirection:l?"column":"row"},children:l?f.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{transform:"rotate(90deg)"},children:[f.jsx("circle",{cx:"9",cy:"12",r:"1"}),f.jsx("circle",{cx:"9",cy:"5",r:"1"}),f.jsx("circle",{cx:"9",cy:"19",r:"1"}),f.jsx("circle",{cx:"15",cy:"12",r:"1"}),f.jsx("circle",{cx:"15",cy:"5",r:"1"}),f.jsx("circle",{cx:"15",cy:"19",r:"1"})]}):f.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-grip-vertical size-2.5",children:[f.jsx("circle",{cx:"9",cy:"12",r:"1"}),f.jsx("circle",{cx:"9",cy:"5",r:"1"}),f.jsx("circle",{cx:"9",cy:"19",r:"1"}),f.jsx("circle",{cx:"15",cy:"12",r:"1"}),f.jsx("circle",{cx:"15",cy:"5",r:"1"}),f.jsx("circle",{cx:"15",cy:"19",r:"1"})]})}),m]}));Oe.displayName="DefaultSliderElement";const _e=p.forwardRef(({children:m,area:l,size:d={h:"20%",w:"6px"},gap:w="0px",...E},N)=>{let h={};return l==="left"?(h={borderTopRightRadius:"16px",borderBottomRightRadius:"16px",height:d.h,left:w,width:d.w},h.top=`calc(50% - ${h.height} / 2)`):l==="top"?(h={borderBottomLeftRadius:"16px",borderBottomRightRadius:"16px",width:d.h,top:w,height:d.w},h.left=`calc(50% - ${h.width} / 2)`):l==="right"?(h={borderTopLeftRadius:"16px",borderBottomLeftRadius:"16px",height:d.h,right:w,width:d.w},h.top=`calc(50% - ${h.height} / 2)`):l==="bottom"&&(h={borderTopLeftRadius:"16px",borderTopRightRadius:"16px",width:d.h,bottom:w,height:d.w},h.left=`calc(50% - ${h.width} / 2)`),f.jsx("div",{ref:N,...E,className:`RootSplitterHoverEl ${E.className||""}`,style:{position:"absolute",zIndex:-1,display:"none",boxSizing:"border-box",backgroundColor:"#0081f9",cursor:"grab",...h,...E.style},children:m})});_e.displayName="RootSplitterHoverEl";const Ae=m=>{const l=[],d=new Map,w=new Map;for(const[E,N]of m){const h=crypto.randomUUID();l.push(E),d.set(E,{uqid:h,name:E,node:N}),w.set(E,h)}return{keys:l,maps:d,name:w}},Ie=p.forwardRef(({tabs:m,bondWidth:l=v.DynamixLayoutCore._bond,minTabHeight:d=v.DynamixLayoutCore._minH,minTabWidth:w=v.DynamixLayoutCore._minW,updateJSON:E,sliderUpdateTimeout:N=2,windowResizeTimeout:h=2,disableSliderTimeout:W=!0,disableResizeTimeout:Q=!0,HoverElement:ee=je,enableTabbar:te=!0,WrapTabLabel:re=De,WrapTabPanel:H=Se,WrapTabHead:ne=Ne,WrapTabBody:ce=Te,SliderElement:U=Oe,tabHeadHeight:z=v.DynamixLayoutCore._minH,tabNames:q=new Map,layoutTree:P,pad:j={t:0,b:0,l:0,r:0},rootId:M="dynamix-layout-root",hoverElementStyles:fe,sliderElementStyles:le,tabPanelElementStyles:de,tabBodyElementStyles:oe,tabHeadElementStyles:ue,tabLabelElementStyles:pe,RootSplitterHoverElStyles:$,hoverElementClass:_,sliderElementClass:me,tabPanelElementClass:ae,tabBodyElementClass:c,tabHeadElementClass:L,tabLabelElementClass:B,RootSplitterHoverElClass:se,...X},e)=>{const a=p.useMemo(()=>Ae(m),[m]),y=p.useRef(null),R=typeof e=="function"?y:e||y,A=p.useCallback(()=>{const o=R.current;if(!o)return{w:0,h:0,x:0,y:0};const s=o.getBoundingClientRect();return{w:s.width-(j.l+j.r),h:s.height-(j.t+j.b),x:s.left+j.l,y:s.top+j.t}},[R,j.l,j.r,j.t,j.b]),{tabsetsRef:C,slidersRef:J,sliders:I,tabsets:T,hoverElementRef:Y,onDragEnd:F,onDragOver:ge,onDragStart:we,onDragEnter:he,onDragLeave:ye,onDrop:n,dragging:t,panelsRef:i,onPointerDown:r,handleNavbarDragOver:u,updateActiveTab:b,rootSplitHoverEl:g,handleRootSplit:O,tabsRef:S,isUpdating:D}=Le({tabOutput:a,rootId:M,updateJSON:E,enableTabbar:te,layoutTree:P,tabHeadHeight:z,dimensions:A,sliderUpdateTimeout:N,windowResizeTimeout:h,bondWidth:l,minTabHeight:d,minTabWidth:w,disableSliderTimeout:W,disableResizeTimeout:Q});return f.jsxs("div",{id:M,ref:R,...X,"data-testid":M,className:t?"is-dragging":"",style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",...X.style},children:[te&&T&&Array.from(T.values()).map(o=>f.jsxs(p.Fragment,{children:[f.jsx(H,{ref:s=>{const x=o.uidNode;s?i.current.set(x,s):i.current.delete(x)},onDragEnd:F,onDragOver:ge,onDragEnter:he,onDragLeave:ye,onDrop:n,"data-uid":o.uidNode,"data-type":o.typNode,className:"hide-scrollbar DefaultWrapTabPanel "+(ae||""),style:{position:"absolute",...de,width:`${o.nodDims.w}px`,height:`${o.nodDims.h}px`,left:`${o.nodDims.x}px`,top:`${o.nodDims.y}px`,backgroundColor:"transparent"}}),f.jsx(ne,{draggable:!D,"data-uid":o.uidNode,"data-type":"tabset",onDragOver:u,onDragStart:we,onDragEnd:F,onDragEnter:he,onDragLeave:ye,onDrop:n,ref:s=>{const x=o.uidNode;s?C.current.set(x,s):C.current.delete(x)},className:"hide-scrollbar "+(L||""),style:{...ue,position:"absolute",zIndex:99,width:`${o.nodDims.w}px`,height:`${z}px`,left:`${o.nodDims.x}px`,top:`${o.nodDims.y}px`,cursor:D?"wait":"pointer"},children:o.nodKids&&o.nodKids.map(s=>f.jsx(re,{"data-uid":s.uidNode,"data-type":"tab",onDragStart:we,onDragEnd:F,draggable:!D,active:s.nodOpen,className:"hide-scrollbar "+(B||""),style:{cursor:D?"wait":"pointer",...pe},onClick:b,children:q.get(s.nodName)||s.nodName},s.uidNode))})]},o.uidNode)),a.keys.map(o=>{const s=a.maps.get(o)?.uqid;return f.jsx(ce,{id:s,draggable:!1,"data-uid":s,className:"hide-scrollbar "+(c||""),style:{position:"absolute",zIndex:90,overscrollBehavior:"contain",...oe},ref:x=>{s&&(x?S.current.set(s,x):S.current.delete(s))},children:a.maps.get(o)?.node||f.jsx("div",{className:"flex items-center justify-center h-full",children:f.jsx("span",{className:"text-gray-500",children:"No content"})})},o)}),I&&Array.from(I.values()).map(o=>f.jsx(U,{id:o.uidNode,"data-uid":o.uidNode,direction:o.nodeDir,onPointerDown:r,className:"hide-scrollbar "+(me||""),ref:s=>{const x=o.uidNode;s?J.current.set(x,s):J.current.delete(x)},style:{width:`${o.nodDims.w}px`,height:`${o.nodDims.h}px`,left:`${o.nodDims.x}px`,top:`${o.nodDims.y}px`,cursor:o.nodeDir?"ns-resize":"ew-resize",...le}},o.uidNode)),f.jsx(ee,{className:"hide-scrollbar "+(_||""),style:{...fe},ref:Y}),["left","right","top","bottom"].map((o,s)=>f.jsx(_e,{onDragOver:O,onDragEnd:F,onDragEnter:he,onDragLeave:ye,onDrop:n,"data-uid":M,"data-area":o,className:"hide-scrollbar "+(se||""),ref:x=>{x&&(g.current[s]=x)},style:{...$},area:o,size:{h:"25%",w:"8px"}},o))]})});Ie.displayName="DynamixLayout";exports.DefaultHoverElement=je;exports.DefaultSliderElement=Oe;exports.DefaultWrapTabBody=Te;exports.DefaultWrapTabHead=Ne;exports.DefaultWrapTabLabel=De;exports.DefaultWrapTabPanel=Se;exports.DynamixLayout=Ie;exports.RootSplitterHoverEl=_e;exports.getTabOutput=Ae;exports.useDynamixLayout=Le;