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

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

this.dynamix=this.dynamix||{};this.dynamix.layout=this.dynamix.layout||{};this.dynamix.layout.react=function(P,p,b){"use strict";var ke=document.createElement("style");ke.textContent=`@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";.DefaultWrapTabLabel[data-state=active]{background-color:#fff;font-family:Poppins,sans-serif}.DefaultWrapTabLabel[data-state=inactive]{background-color:#dfdfdf;font-family:Poppins,sans-serif}.hide-scrollbar::-webkit-scrollbar{display:none}.is-dragging .DefaultWrapTabBody>*{pointer-events:none}
/*$vite$:1*/`,document.head.appendChild(ke);var Ee={exports:{}},pe={};/**
 * @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 $e;function Ye(){if($e)return pe;$e=1;var m=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function d(w,E,R){var h=null;if(R!==void 0&&(h=""+R),E.key!==void 0&&(h=""+E.key),"key"in E){R={};for(var M in E)M!=="key"&&(R[M]=E[M])}else R=E;return E=R.ref,{$$typeof:m,type:w,key:h,ref:E!==void 0?E:null,props:R}}return pe.Fragment=c,pe.jsx=d,pe.jsxs=d,pe}var me={};/**
 * @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 Pe;function Fe(){return Pe||(Pe=1,process.env.NODE_ENV!=="production"&&function(){function m(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===he?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case q:return"Fragment";case X:return"Profiler";case B:return"StrictMode";case ge:return"Suspense";case de:return"SuspenseList";case fe: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 _:return(e.displayName||"Context")+".Provider";case L:return(e._context.displayName||"Context")+".Consumer";case Y:var a=e.render;return e=e.displayName,e||(e=a.displayName||a.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return a=e.displayName||null,a!==null?a:m(e.type)||"Memo";case ae:a=e._payload,e=e._init;try{return m(e(a))}catch{}}return null}function c(e){return""+e}function d(e){try{c(e);var a=!1}catch{a=!0}if(a){a=console;var y=a.error,D=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.",D),c(e)}}function w(e){if(e===q)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===ae)return"<...>";try{var a=m(e);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function E(){var e=$.A;return e===null?null:e.getOwner()}function R(){return Error("react-stack-top-frame")}function h(e){if(O.call(e,"key")){var a=Object.getOwnPropertyDescriptor(e,"key").get;if(a&&a.isReactWarning)return!1}return e.key!==void 0}function M(e,a){function y(){l||(l=!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 ee(){var e=m(this.type);return A[e]||(A[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 te(e,a,y,D,I,C,V,W){return y=C.ref,e={$$typeof:oe,type:e,key:a,props:C,_owner:I},(y!==void 0?y:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:ee}):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:V}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:W}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function re(e,a,y,D,I,C,V,W){var N=a.children;if(N!==void 0)if(D)if(ye(N)){for(D=0;D<N.length;D++)ne(N[D]);Object.freeze&&Object.freeze(N)}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 ne(N);if(O.call(a,"key")){N=m(e);var F=Object.keys(a).filter(function(xe){return xe!=="key"});D=0<F.length?"{key: someKey, "+F.join(": ..., ")+": ...}":"{key: someKey}",J[N+D]||(F=0<F.length?"{"+F.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} />`,D,N,F,N),J[N+D]=!0)}if(N=null,y!==void 0&&(d(y),N=""+y),h(a)&&(d(a.key),N=""+a.key),"key"in a){y={};for(var z in a)z!=="key"&&(y[z]=a[z])}else y=a;return N&&M(y,typeof e=="function"?e.displayName||e.name||"Unknown":e),te(e,N,C,I,E(),y,V,W)}function ne(e){typeof e=="object"&&e!==null&&e.$$typeof===oe&&e._store&&(e._store.validated=1)}var U=p,oe=Symbol.for("react.transitional.element"),ce=Symbol.for("react.portal"),q=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),X=Symbol.for("react.profiler"),L=Symbol.for("react.consumer"),_=Symbol.for("react.context"),Y=Symbol.for("react.forward_ref"),ge=Symbol.for("react.suspense"),de=Symbol.for("react.suspense_list"),ue=Symbol.for("react.memo"),ae=Symbol.for("react.lazy"),fe=Symbol.for("react.activity"),he=Symbol.for("react.client.reference"),$=U.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,ye=Array.isArray,se=console.createTask?console.createTask:function(){return null};U={"react-stack-bottom-frame":function(e){return e()}};var l,A={},H=U["react-stack-bottom-frame"].bind(U,R)(),ie=se(w(R)),J={};me.Fragment=q,me.jsx=function(e,a,y,D,I){var C=1e4>$.recentlyCreatedOwnerStacks++;return re(e,a,y,!1,D,I,C?Error("react-stack-top-frame"):H,C?se(w(e)):ie)},me.jsxs=function(e,a,y,D,I){var C=1e4>$.recentlyCreatedOwnerStacks++;return re(e,a,y,!0,D,I,C?Error("react-stack-top-frame"):H,C?se(w(e)):ie)}}()),me}var Le;function ze(){return Le||(Le=1,process.env.NODE_ENV==="production"?Ee.exports=Ye():Ee.exports=Fe()),Ee.exports}var f=ze();const Ae=({tabOutput:m,rootId:c,layoutTree:d,updateJSON:w,dimensions:E,tabHeadHeight:R,enableTabbar:h,bondWidth:M,minTabHeight:ee,minTabWidth:te,sliderUpdateTimeout:re,windowResizeTimeout:ne,disableSliderTimeout:U,disableResizeTimeout:oe})=>{const ce=p.useRef(new Map),q=p.useRef(new Map),B=p.useRef(new Map),X=p.useRef(new Map),L=p.useRef(null),_=p.useRef([]),[Y,ge]=p.useState(d),[de,ue]=p.useState(),[ae,fe]=p.useState(),[he,$]=p.useState(!1),O=p.useRef(null),[ye,se]=p.useState(!1),l=p.useRef({src:void 0,des:void 0,area:void 0,drag:!1}),A=p.useRef({sliderId:void 0,isSliding:!1}),H=p.useMemo(()=>(b.DynamixLayoutCore._bond=M,b.DynamixLayoutCore._minH=ee,b.DynamixLayoutCore._minW=te,new b.DynamixLayoutCore({tabs:m.keys,tree:Y,minW:te,minH:ee,bond:M,uqid:c,tabsIds:m.name})),[Y,m,M,ee,te,c]),ie=n=>{const t=new Map(n);ue(t)},J=n=>{const t=new Map(n);fe(t)};b.Node.cache.nodOpts.onChange(n=>{n.forEach((t,i)=>{const r=B.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?`${R}px`:"0px",u.style.left=`${t.nodDims.x}px`,u.style.top=`${t.nodDims.y}px`)})}),b.Node.cache.bndOpts.onChange(n=>{n.forEach((t,i)=>{const r=q.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`)})}),b.Node.cache.tabOpts.onChange(n=>{n.forEach((t,i)=>{const r=X.current.get(i);r&&(r.style.width=`${t.nodDims.w}px`,r.style.height=h?`${t.nodDims.h-R}px`:`${t.nodDims.h}px`,r.style.left=`${t.nodDims.x}px`,r.style.top=h?`${t.nodDims.y+R}px`:`${t.nodDims.y}px`,r.style.display=t.nodOpen?"block":"none")})});const e=n=>{A.current.isSliding&&H.updateSlider(A.current.sliderId,{x:n.clientX,y:n.clientY},U,re)},a=n=>{if(!A.current.isSliding)return;const t=n.currentTarget;A.current.isSliding=!1,A.current.sliderId=void 0,w&&w(b.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;A.current.isSliding=!0,A.current.sliderId=t.id,t.setPointerCapture(n.pointerId),t.addEventListener("pointermove",e),t.addEventListener("pointerup",a),t.addEventListener("pointercancel",a)},D=p.useRef({}),I=(n,t,i)=>{if(!L.current||!l.current||!i)return null;l.current.des=i;const r=i.getBoundingClientRect();if(!r)return null;const u=r.width,v=r.height,g=n-r.left,j=t-r.top;let S,T,o,s,x;g<u/3?(S="left",T=r.left,o=r.top,s=u/2,x=v):g>2*u/3?(S="right",T=r.left+u/2,o=r.top,s=u/2,x=v):j<v/3?(S="top",T=r.left,o=r.top,s=u,x=v/2):j>2*v/3?(S="bottom",T=r.left,o=r.top+v/2,s=u,x=v/2):(S="contain",T=r.left+u*.1,o=r.top+v*.1,s=u*.8,x=v*.8);const G=D.current;(G.area!==S||G.left!==T||G.top!==o||G.width!==s||G.height!==x)&&(W(T,o,s,x,S),D.current={area:S,left:T,top:o,width:s,height:x}),l.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(!L.current||!l.current||i.length===0)return;const v=i[0].parentElement;if(!v)return;const g=v.getBoundingClientRect(),j=i[0],S=i[i.length-1],T=j.getBoundingClientRect(),o=S.getBoundingClientRect();let s=6;if(u<g.top||u>g.bottom)return;if(r>o.right){const k=o.right+1,Z=o.top,K=s-2,Q=o.height,le="right";W(k,Z,K,Q,le),l.current.des=S,l.current.area=le;return}if(r<T.left){const k=T.left-s+1,Z=T.top,K=s-2,Q=T.height,le="left";W(k,Z,K,Q,le),l.current.des=j,l.current.area=le;return}let x=null,G=1/0,we=!1,Ce=0;for(let k=0;k<i.length;k++){const Z=i[k].getBoundingClientRect(),K=Z.left+Z.width/2,Q=Math.abs(r-K);Q<G&&(G=Q,x=i[k],we=r<K,Ce=k)}if(i.length>1&&(we&&Ce>0||!we&&Ce<i.length-1)&&(s=i[1].getBoundingClientRect().left-T.right),x){const k=x.getBoundingClientRect(),Z=we?k.left-s+1:k.right+1,K=k.top,Q=s-2,le=k.height,Me=we?"left":"right";W(Z,K,Q,le,Me),l.current.des=x,l.current.area=Me}},V=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||!L.current||!l.current)return;l.current.des=n.currentTarget,l.current.area=t;const r=E();let u=r.x,v=r.y,g=r.w,j=r.h;t==="left"?(u=r.x,v=r.y,g=r.w/2,j=r.h):t==="right"?(u=r.x+r.w/2,v=r.y,g=r.w/2,j=r.h):t==="top"?(u=r.x,v=r.y,g=r.w,j=r.h/2):t==="bottom"&&(u=r.x,v=r.y+r.h/2,g=r.w,j=r.h/2),W(u,v,g,j,t)},W=(n,t,i,r,u)=>{const v=D.current;if(v.area!==u||v.left!==n||v.top!==t||v.width!==i||v.height!==r){const g=L.current;if(g){const j={};for(let S=0;S<g.style.length;S++){const T=g.style[S];T&&(j[T]=g.style.getPropertyValue(T))}Object.assign(g.style,j,{left:`${n}px`,top:`${t}px`,width:`${i}px`,height:`${r}px`,display:"block",zIndex:"100"}),D.current={area:u,left:n,top:t,width:i,height:r}}}},N=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)}_.current.forEach(t=>{t&&(t.style.display="block",t.style.zIndex="99")}),B.current.forEach(t=>{t&&(t.style.display="block",t.style.zIndex="95")}),l.current.src=n.currentTarget,l.current.drag=!0}},F=n=>{if(n.preventDefault(),n.stopPropagation(),document.body.style.cursor="move",n.dataTransfer&&(n.dataTransfer.dropEffect="move"),!l.current?.src)return;const t=n.currentTarget,i=n.clientX,r=n.clientY;O.current&&cancelAnimationFrame(O.current),O.current=requestAnimationFrame(()=>{I(i,r,t)})},z=n=>{if(document.body.style.cursor="default",_.current.forEach(t=>{t&&(t.style.display="none",t.style.zIndex="-1")}),B.current.forEach(t=>{t&&(t.style.display="none",t.style.zIndex="-1")}),O.current&&(cancelAnimationFrame(O.current),O.current=null),L.current&&(L.current.style.display="none",L.current.style.zIndex="-1"),D.current={},l.current.drag=!1,!l.current?.src||!l.current?.des){l.current.area=void 0,l.current.src=void 0,l.current.des=void 0,$(!1);return}if(l.current.src===l.current.des){l.current.area=void 0,l.current.src=void 0,l.current.des=void 0,$(!1);return}if(l.current.src&&l.current.des){if(!l.current.area){console.warn("No area specified for drag and drop"),$(!1);return}if(!H.updateTree(l.current.src.dataset.uid,l.current.des.dataset.uid,l.current.area||"contain")){console.warn("Failed to update layout tree"),$(!1);return}requestAnimationFrame(()=>{ie(b.Node.cache.nodOpts.get()),J(b.Node.cache.bndOpts.get()),w&&w(b.DynamixLayoutCore._root.toJSON())})}l.current.area=void 0,l.current.src=void 0,l.current.des=void 0,$(!1)},xe=n=>{n.preventDefault(),n.stopPropagation(),n.dataTransfer&&(n.dataTransfer.dropEffect="move")},De=n=>{n.preventDefault(),n.stopPropagation()},be=n=>{n.preventDefault(),n.stopPropagation()},ve=n=>{const t=n.currentTarget,i=t.dataset.uid;if(!i)return;const r=b.Node.cache.mapElem.get(i);if(!(r instanceof b.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=b.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,X.current.get(g.uidNode)?.style.setProperty("display","block")):(g.nodOpen=!1,X.current.get(g.uidNode)?.style.setProperty("display","none"))})};return p.useEffect(()=>{const n=i=>{H.updateDimension(E(),i,ne)};n(!0);const t=async i=>n(oe??!1);return window.addEventListener("resize",t),ie(b.Node.cache.nodOpts.get()),J(b.Node.cache.bndOpts.get()),b.Node.cache.nodOpts.triggerChange(),b.Node.cache.bndOpts.triggerChange(),b.Node.cache.tabOpts.triggerChange(),w&&w(b.DynamixLayoutCore._root.toJSON()),()=>{window.removeEventListener("resize",t),O.current&&cancelAnimationFrame(O.current)}},[E,oe,ne]),p.useEffect(()=>(b.Node.cache.nodOpts.triggerChange(),b.Node.cache.bndOpts.triggerChange(),b.Node.cache.tabOpts.triggerChange(),()=>{O.current&&cancelAnimationFrame(O.current)}),[de,ae]),{tabsets:de,sliders:ae,tabsetsRef:ce,panelsRef:B,tabsRef:X,slidersRef:q,layoutJSON:Y,layoutInstance:H,hoverElementRef:L,rootSplitHoverEl:_,dragging:he,isUpdating:ye,setIsUpdating:se,setDragging:$,setTabsets:ue,setSliders:fe,setLayoutJSON:ge,onDragStart:N,onDragOver:F,onDragEnd:z,onDragEnter:xe,onDragLeave:De,onDrop:be,onPointerDown:y,updateActiveTab:ve,handleRootSplit:V,handleNavbarDragOver:C}},Te=p.forwardRef(({children:m,active:c,...d},w)=>f.jsx("div",{ref:w,...d,"data-state":c?"active":"inactive",className:`DefaultWrapTabLabel ${d.className||""}`,style:{alignSelf:"center",padding:"4px 6px",boxSizing:"border-box",fontSize:"14px",borderRadius:"4px",...d.style},children:m}));Te.displayName="DefaultWrapTabLabel";const Ne=p.forwardRef(({children:m,...c},d)=>f.jsx("div",{ref:d,...c,className:`DefaultWrapTabBody hide-scrollbar ${c.className||""}`,style:{boxSizing:"border-box",height:"100%",width:"100%",display:"grid",overflow:"auto",scrollbarWidth:"none",msOverflowStyle:"none",...c.style},children:m}));Ne.displayName="DefaultWrapTabBody";const Re=p.forwardRef(({children:m,...c},d)=>f.jsx("div",{ref:d,...c,className:`DefaultWrapTabHead hide-scrollbar ${c.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",...c.style},children:m}));Re.displayName="DefaultWrapTabHead";const Se=p.forwardRef(({children:m,...c},d)=>f.jsx("div",{ref:d,className:`DefaultWrapTabPanel ${c.className||""}`,...c,style:{display:"grid",alignItems:"center",placeItems:"self-start",boxSizing:"border-box",position:"absolute",borderRadius:"8px",...c.style},children:m}));Se.displayName="DefaultWrapTabPanel";const _e=p.forwardRef(({children:m,...c},d)=>f.jsx("div",{ref:d,className:`DefaultHoverElement ${c.className||""}`,...c,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)",...c.style},children:m}));_e.displayName="DefaultHoverElement";const je=p.forwardRef(({children:m,direction:c,...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:c?"column":"row"},children:c?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]}));je.displayName="DefaultSliderElement";const Oe=p.forwardRef(({children:m,area:c,size:d={h:"20%",w:"6px"},gap:w="0px",...E},R)=>{let h={};return c==="left"?(h={borderTopRightRadius:"16px",borderBottomRightRadius:"16px",height:d.h,left:w,width:d.w},h.top=`calc(50% - ${h.height} / 2)`):c==="top"?(h={borderBottomLeftRadius:"16px",borderBottomRightRadius:"16px",width:d.h,top:w,height:d.w},h.left=`calc(50% - ${h.width} / 2)`):c==="right"?(h={borderTopLeftRadius:"16px",borderBottomLeftRadius:"16px",height:d.h,right:w,width:d.w},h.top=`calc(50% - ${h.height} / 2)`):c==="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:R,...E,className:`RootSplitterHoverEl ${E.className||""}`,style:{position:"absolute",zIndex:-1,display:"none",boxSizing:"border-box",backgroundColor:"#0081f9",cursor:"grab",...h,...E.style},children:m})});Oe.displayName="RootSplitterHoverEl";const Ie=m=>{const c=[],d=new Map,w=new Map;for(const[E,R]of m){const h=crypto.randomUUID();c.push(E),d.set(E,{uqid:h,name:E,node:R}),w.set(E,h)}return{keys:c,maps:d,name:w}},We=p.forwardRef(({tabs:m,bondWidth:c=b.DynamixLayoutCore._bond,minTabHeight:d=b.DynamixLayoutCore._minH,minTabWidth:w=b.DynamixLayoutCore._minW,updateJSON:E,sliderUpdateTimeout:R=2,windowResizeTimeout:h=2,disableSliderTimeout:M=!0,disableResizeTimeout:ee=!0,HoverElement:te=_e,enableTabbar:re=!0,WrapTabLabel:ne=Te,WrapTabPanel:U=Se,WrapTabHead:oe=Re,WrapTabBody:ce=Ne,SliderElement:q=je,tabHeadHeight:B=b.DynamixLayoutCore._minH,tabNames:X=new Map,layoutTree:L,pad:_={t:0,b:0,l:0,r:0},rootId:Y="dynamix-layout-root",hoverElementStyles:ge,sliderElementStyles:de,tabPanelElementStyles:ue,tabBodyElementStyles:ae,tabHeadElementStyles:fe,tabLabelElementStyles:he,RootSplitterHoverElStyles:$,hoverElementClass:O,sliderElementClass:ye,tabPanelElementClass:se,tabBodyElementClass:l,tabHeadElementClass:A,tabLabelElementClass:H,RootSplitterHoverElClass:ie,...J},e)=>{const a=p.useMemo(()=>Ie(m),[m]),y=p.useRef(null),D=typeof e=="function"?y:e||y,I=p.useCallback(()=>{const o=D.current;if(!o)return{w:0,h:0,x:0,y:0};const s=o.getBoundingClientRect();return{w:s.width-(_.l+_.r),h:s.height-(_.t+_.b),x:s.left+_.l,y:s.top+_.t}},[D,_.l,_.r,_.t,_.b]),{tabsetsRef:C,slidersRef:V,sliders:W,tabsets:N,hoverElementRef:F,onDragEnd:z,onDragOver:xe,onDragStart:De,onDragEnter:be,onDragLeave:ve,onDrop:n,dragging:t,panelsRef:i,onPointerDown:r,handleNavbarDragOver:u,updateActiveTab:v,rootSplitHoverEl:g,handleRootSplit:j,tabsRef:S,isUpdating:T}=Ae({tabOutput:a,rootId:Y,updateJSON:E,enableTabbar:re,layoutTree:L,tabHeadHeight:B,dimensions:I,sliderUpdateTimeout:R,windowResizeTimeout:h,bondWidth:c,minTabHeight:d,minTabWidth:w,disableSliderTimeout:M,disableResizeTimeout:ee});return f.jsxs("div",{id:Y,ref:D,...J,"data-testid":Y,className:t?"is-dragging":"",style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",...J.style},children:[re&&N&&Array.from(N.values()).map(o=>f.jsxs(p.Fragment,{children:[f.jsx(U,{ref:s=>{const x=o.uidNode;s?i.current.set(x,s):i.current.delete(x)},onDragEnd:z,onDragOver:xe,onDragEnter:be,onDragLeave:ve,onDrop:n,"data-uid":o.uidNode,"data-type":o.typNode,className:"hide-scrollbar DefaultWrapTabPanel "+(se||""),style:{position:"absolute",...ue,width:`${o.nodDims.w}px`,height:`${o.nodDims.h}px`,left:`${o.nodDims.x}px`,top:`${o.nodDims.y}px`,backgroundColor:"transparent"}}),f.jsx(oe,{draggable:!T,"data-uid":o.uidNode,"data-type":"tabset",onDragOver:u,onDragStart:De,onDragEnd:z,onDragEnter:be,onDragLeave:ve,onDrop:n,ref:s=>{const x=o.uidNode;s?C.current.set(x,s):C.current.delete(x)},className:"hide-scrollbar "+(A||""),style:{...fe,position:"absolute",zIndex:99,width:`${o.nodDims.w}px`,height:`${B}px`,left:`${o.nodDims.x}px`,top:`${o.nodDims.y}px`,cursor:T?"wait":"pointer"},children:o.nodKids&&o.nodKids.map(s=>f.jsx(ne,{"data-uid":s.uidNode,"data-type":"tab",onDragStart:De,onDragEnd:z,draggable:!T,active:s.nodOpen,className:"hide-scrollbar "+(H||""),style:{cursor:T?"wait":"pointer",...he},onClick:v,children:X.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 "+(l||""),style:{position:"absolute",zIndex:90,overscrollBehavior:"contain",...ae},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)}),W&&Array.from(W.values()).map(o=>f.jsx(q,{id:o.uidNode,"data-uid":o.uidNode,direction:o.nodeDir,onPointerDown:r,className:"hide-scrollbar "+(ye||""),ref:s=>{const x=o.uidNode;s?V.current.set(x,s):V.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",...de}},o.uidNode)),f.jsx(te,{className:"hide-scrollbar "+(O||""),style:{...ge},ref:F}),["left","right","top","bottom"].map((o,s)=>f.jsx(Oe,{onDragOver:j,onDragEnd:z,onDragEnter:be,onDragLeave:ve,onDrop:n,"data-uid":Y,"data-area":o,className:"hide-scrollbar "+(ie||""),ref:x=>{x&&(g.current[s]=x)},style:{...$},area:o,size:{h:"25%",w:"8px"}},o))]})});return We.displayName="DynamixLayout",P.DefaultHoverElement=_e,P.DefaultSliderElement=je,P.DefaultWrapTabBody=Ne,P.DefaultWrapTabHead=Re,P.DefaultWrapTabLabel=Te,P.DefaultWrapTabPanel=Se,P.DynamixLayout=We,P.RootSplitterHoverEl=Oe,P.getTabOutput=Ie,P.useDynamixLayout=Ae,Object.defineProperty(P,Symbol.toStringTag,{value:"Module"}),P}({},React,DynamixLayoutCore);