react-zeugma 4.1.1 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -6
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +180 -155
- package/dist/index.d.ts +180 -155
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import $t,{createContext,useContext,useState,useRef,useCallback,useEffect,useMemo}from'react';import {DndContext,useDraggable,useDroppable,useSensors,useSensor,pointerWithin,closestCenter,PointerSensor,TouchSensor}from'@dnd-kit/core';import {jsx,Fragment,jsxs}from'react/jsx-runtime';import {createPortal}from'react-dom';function Ae(e){let t=useRef(null);return useEffect(()=>{if(!e){t.current=null;return}let n=r=>{t.current={x:r.clientX,y:r.clientY};},s=r=>{let o=r.touches[0]||r.changedTouches[0];o&&(t.current={x:o.clientX,y:o.clientY});};return window.addEventListener("pointermove",n,{passive:true}),window.addEventListener("touchmove",s,{passive:true}),()=>{window.removeEventListener("pointermove",n),window.removeEventListener("touchmove",s);}},[e]),t}function Fe(e){useEffect(()=>(e?document.body.style.setProperty("cursor","not-allowed","important"):document.body.style.removeProperty("cursor"),()=>{document.body.style.removeProperty("cursor");}),[e]);}function Oe(){let[e,t]=useState({}),n=useRef(true);useEffect(()=>(n.current=true,()=>{n.current=false;}),[]);let s=useCallback((r,o)=>{n.current&&t(i=>i[r]===o?i:{...i,[r]:o});},[]);return {portalTargets:e,registerPortalTarget:s}}var dt=8,pt=8,gn=4;function ie(){return "pane-"+Math.random().toString(36).substring(2,11)}function ue(e,t){if(e===null)return null;if(e.type==="pane")return e.id===t?null:e;let n=ue(e.first,t),s=ue(e.second,t);return n===null?s:s===null?n:{...e,first:n,second:s}}function ae(e,t){if(e===null)return null;if(e.type==="pane"){if(e.tabs.includes(t)){let r=e.tabs.filter(a=>a!==t);if(r.length===0)return null;let o=e.activeTabId;e.activeTabId===t&&(o=r[0]);let i={...e.tabsMetadata};return delete i[t],{...e,tabs:r,activeTabId:o,tabsMetadata:Object.keys(i).length>0?i:void 0}}return e}let n=ae(e.first,t),s=ae(e.second,t);return n===null?s:s===null?n:{...e,first:n,second:s}}function me(e,t,n,s,r){if(e===null)return typeof r=="string"?{type:"pane",id:ie(),tabs:[r],activeTabId:r}:r;if(e.type==="pane"){if(e.id===t){let o=typeof r=="string"?{type:"pane",id:ie(),tabs:[r],activeTabId:r}:r,i=s==="left"||s==="top";return {type:"split",direction:n,first:i?o:e,second:i?e:o,splitPercentage:50}}return e}return {...e,first:me(e.first,t,n,s,r)||e.first,second:me(e.second,t,n,s,r)||e.second}}function Ve(e,t){if(e===null)return {type:"pane",id:ie(),tabs:[t],activeTabId:t};function n(s,r){return s.type==="pane"?{type:"split",direction:r==="row"?"column":"row",splitPercentage:50,first:s,second:{type:"pane",id:ie(),tabs:[t],activeTabId:t}}:{...s,second:n(s.second,s.direction)}}return n(e,null)}function de(e,t,n){return e===null?null:e===t?{...e,splitPercentage:n}:e.type==="split"?{...e,first:de(e.first,t,n)||e.first,second:de(e.second,t,n)||e.second}:e}function ee(e,t){return e===null?null:e.type==="pane"?e.id===t?e:null:ee(e.first,t)??ee(e.second,t)}function G(e,t){return e===null?null:e.type==="pane"?e.tabs.includes(t)?e:null:G(e.first,t)??G(e.second,t)}function he(e,t,n){if(e===null)return null;if(e.type==="pane"){if(e.tabs.includes(t)){let s=e.tabsMetadata||{},r=s[t],o=n(r),i={...s};return o===void 0?delete i[t]:i[t]=o,{...e,tabsMetadata:Object.keys(i).length>0?i:void 0}}return e}return {...e,first:he(e.first,t,n)??e.first,second:he(e.second,t,n)??e.second}}function Pe(e,t,n){if(e===null)return null;if(e.type==="pane"){if(e.id===t){if(n===false){let{locked:s,...r}=e;return r}return {...e,locked:n}}return e}return {...e,first:Pe(e.first,t,n)??e.first,second:Pe(e.second,t,n)??e.second}}function ye(e,t,n){return e===null?null:e.type==="pane"?e.id===t?{...e,activeTabId:n}:e:{...e,first:ye(e.first,t,n)??e.first,second:ye(e.second,t,n)??e.second}}function We(e,t,n){if(e===null)return null;let r=G(e,t)?.tabsMetadata?.[t],o=ae(e,t);if(o===null)return {type:"pane",id:ie(),tabs:[t],activeTabId:t,tabsMetadata:r?{[t]:r}:void 0};function i(a){if(a.type==="pane"){if(a.id===n){let u=[...a.tabs];u.includes(t)||u.push(t);let f={...a.tabsMetadata};return r&&(f[t]=r),{...a,tabs:u,activeTabId:t,tabsMetadata:Object.keys(f).length>0?f:void 0}}return a}return {...a,first:i(a.first),second:i(a.second)}}return i(o)}function Ue(e,t,n,s="before"){if(e===null)return null;let o=G(e,t)?.tabsMetadata?.[t],i=ae(e,t);if(i===null)return {type:"pane",id:ie(),tabs:[t],activeTabId:t,tabsMetadata:o?{[t]:o}:void 0};function a(u){if(u.type==="pane"){if(u.tabs.includes(n)){let I=[...u.tabs].filter(R=>R!==t),b=I.indexOf(n);b<0&&(b=0),s==="after"&&(b+=1),I.splice(b,0,t);let v={...u.tabsMetadata};return o&&(v[t]=o),{...u,tabs:I,activeTabId:t,tabsMetadata:Object.keys(v).length>0?v:void 0}}return u}return {...u,first:a(u.first),second:a(u.second)}}return a(i)}function se(e,t=0,n=0,s=100,r=100,o="root"){if(e===null)return {panes:[],splitters:[]};if(e.type==="pane")return {panes:[{paneId:e.id,left:t,top:n,width:s,height:r,node:e}],splitters:[]};let{direction:i,splitPercentage:a,first:u,second:f}=e,b={id:`splitter-${o}-${i}`,currentNode:e,direction:i,left:i==="row"?t+s*(a/100):t,top:i==="column"?n+r*(a/100):n,width:i==="row"?0:s,height:i==="column"?0:r,parentLeft:t,parentTop:n,parentWidth:s,parentHeight:r},v={panes:[],splitters:[]},R={panes:[],splitters:[]};if(i==="row"){let y=s*(a/100);v=se(u,t,n,y,r,`${o}-L`),R=se(f,t+y,n,s-y,r,`${o}-R`);}else {let y=r*(a/100);v=se(u,t,n,s,y,`${o}-T`),R=se(f,t,n+y,s,r-y,`${o}-B`);}return {panes:[...v.panes,...R.panes],splitters:[b,...v.splitters,...R.splitters]}}function Te({cursor:e,resizerEl:t,onMove:n,onEnd:s}){document.body.classList.add("zeugma-resizing");let r=document.createElement("style");r.id="zeugma-global-cursor-style",r.textContent=`
|
|
2
2
|
* {
|
|
3
3
|
cursor: ${e} !important;
|
|
4
4
|
user-select: none !important;
|
|
5
5
|
}
|
|
6
|
-
`,document.head.appendChild(r),t.setAttribute("data-resizing","true");let o=a=>{n(a);},i=()=>{document.body.classList.remove("zeugma-resizing"),t.removeAttribute("data-resizing");let a=document.getElementById("zeugma-global-cursor-style");a&&a.remove(),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",i),s();};document.addEventListener("pointermove",o),document.addEventListener("pointerup",i);}function Le(e){try{return JSON.stringify(e)}catch{return ""}}function Ft(e){let{initialLayout:t,layout:n,onChange:s,fullscreenPaneId:r,onFullscreenChange:o,locked:i=false,dragActivationDistance:a=8,snapThreshold:l=8,minSplitPercentage:P=5,maxSplitPercentage:D=95,enableDragToDismiss:c=false,dismissThreshold:T=60,onRemove:y,onDragStart:v,onDragEnd:x,onResizeStart:C,onResize:z,onResizeEnd:d,onDismissIntentChange:h}=e,[S,N]=useState(()=>n!==void 0?n:t??null),[W,I]=useState(()=>Le(n!==void 0?n:null)),[X,w]=useState(r||null),[j,b]=useState(i),[O,J]=useState(null),[V,g]=useState(null),[Z,q]=useState(null),H=useRef(null),L=useCallback(p=>{H.current=p;},[]),u=useCallback(p=>{w(p),o?.(p);},[o]);if(useEffect(()=>{b(i);},[i]),useEffect(()=>{r!==void 0&&w(r);},[r]),n!==void 0){let p=Le(n);p!==W&&(I(p),N(n));}let f=useCallback(p=>(...R)=>{let k=S,ae=p(k,...R);Le(k)!==Le(ae)&&(N(ae),s?.(ae));},[S,s]),_=useCallback(f((p,R)=>typeof R=="function"?R(p):R),[f]),re=useCallback(f((p,R)=>ye(p,R)),[f]),ue=useCallback(f((p,R)=>pt(p,R)),[f]),be=useCallback(f((p,R,k,ae,he)=>{let $e=K(p,he)??{type:"pane",id:he,tabs:[he],activeTabId:he},je=ye(p,he);return De(je,R,k,ae,$e)}),[f]),ve=useCallback(f((p,R,k)=>Te(p,R,k)),[f]),Q=useCallback(f((p,R,k)=>_e(p,R,k)),[f]),U=useCallback(f((p,R,k)=>Ue(p,R,k)),[f]),oe=useCallback(f((p,R,k)=>Ye(p,R,k)),[f]),$=useCallback(f((p,R,k)=>ft(p,R,k)),[f]),ze=useCallback(f((p,R,k,ae)=>mt(p,R,k,ae)),[f]),Ie=useCallback(f((p,R)=>fe(p,R)),[f]);return {layout:S,setLayout:_,fullscreenPaneId:X,setFullscreenPaneId:u,locked:j,setLocked:b,activeId:O,setActiveId:J,activeType:V,setActiveType:g,dismissIntentId:Z,setDismissIntentId:q,containerRef:H,setContainerRef:L,dragActivationDistance:a,snapThreshold:l,minSplitPercentage:P,maxSplitPercentage:D,enableDragToDismiss:c,dismissThreshold:T,onRemove:y,onDragStart:v,onDragEnd:x,onResizeStart:C,onResize:z,onResizeEnd:d,onDismissIntentChange:h,removePane:re,addPane:ue,splitPane:be,updateSplitPercentage:ve,updateTabMetadata:Q,updatePaneLock:U,selectTab:oe,mergeTab:$,moveTab:ze,removeTab:Ie}}var Ot=()=>{let e=ne(),t=Ve();return {...e,...t}};var bt=({activeId:e,render:t,className:n})=>{let s=useRef(null);return useEffect(()=>{let r=o=>{s.current&&(s.current.style.transform=`translate(${o.clientX+12}px, ${o.clientY+12}px)`);};return document.addEventListener("pointermove",r),()=>document.removeEventListener("pointermove",r)},[]),jsx("div",{ref:s,className:n,style:{position:"fixed",top:0,left:0,zIndex:9999,pointerEvents:"none"},children:t(e)})};var Xe=class extends PointerSensor{static activators=[{eventName:"onPointerDown",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},qe=class extends TouchSensor{static activators=[{eventName:"onTouchStart",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]};var vt=({tabId:e,target:t,renderWidget:n})=>{let[s,r]=useState(false),o=useRef(null);if(useEffect(()=>{r(true);},[]),useEffect(()=>{if(!s||!o.current)return;let a=o.current;if(t)t.appendChild(a);else {let l=document.getElementById("zeugma-hidden-portal-container");l||(l=document.createElement("div"),l.id="zeugma-hidden-portal-container",l.style.display="none",document.body.appendChild(l)),l.appendChild(a);}},[t,s]),useEffect(()=>()=>{o.current&&o.current.remove();},[]),!s)return null;o.current||(o.current=document.createElement("div"),o.current.className=`zeugma-portal-wrapper-${e}`,o.current.style.width="100%",o.current.style.height="100%");let i=o.current;return !i||!n?null:createPortal(n(e),i)};function nt(e){if(e instanceof MouseEvent||e instanceof PointerEvent)return {x:e.clientX,y:e.clientY};if(typeof TouchEvent<"u"&&e instanceof TouchEvent){let t=e.touches[0]||e.changedTouches[0];if(t)return {x:t.clientX,y:t.clientY}}return null}var tn=e=>{let{renderPane:t,renderWidget:n,renderDragOverlay:s,classNames:r={},children:o,layout:i,setLayout:a,fullscreenPaneId:l,setFullscreenPaneId:P,locked:D,activeId:c,setActiveId:T,activeType:y,setActiveType:v,dismissIntentId:x,setDismissIntentId:C,containerRef:z,setContainerRef:d,dragActivationDistance:h,snapThreshold:S,minSplitPercentage:N,maxSplitPercentage:W,enableDragToDismiss:I,dismissThreshold:X,onRemove:w,onDragStart:j,onDragEnd:b,onResizeStart:O,onResize:J,onResizeEnd:V,onDismissIntentChange:g,removePane:Z,addPane:q,splitPane:H,updateSplitPercentage:L,updateTabMetadata:u,updatePaneLock:f,selectTab:ge,mergeTab:_,moveTab:re,removeTab:ue}=e,{portalTargets:be,registerPortalTarget:ve}=dt(),Q=useRef(null),U=ct(c),[oe,$]=useState(false);ut(oe);let ze=useCallback(m=>t(m),[t]),Ie=useMemo(()=>r,[r.pane,r.paneLocked,r.dropPreview,r.dragOverlay,r.resizer,r.dismissPreview,r.dashboardLocked,r.lockedPreview]),p=useSensors(useSensor(Xe,{activationConstraint:{distance:h}}),useSensor(qe,{activationConstraint:{delay:250,tolerance:5}})),R=useCallback(m=>{let A=pointerWithin(m);if(A.length>0)return A;if(m.active.id.toString().startsWith("tab-header-")){let se=m.droppableContainers.filter(ee=>ee.id.toString().startsWith("tab-drop-"));return closestCenter({...m,droppableContainers:se})}return []},[]),k=m=>{let A=m.active.id.toString(),Y=A.startsWith("tab-header-"),se=Y?A.substring(11):A;T(se),v(Y?"tab":"pane");let ee=m.activatorEvent;U.current=nt(ee),I&&z.current?Q.current=z.current.getBoundingClientRect():Q.current=null,j&&j(se);},ae=m=>{let{over:A}=m,se=(A?.id.toString()||"").startsWith("drop-locked-");if($(se),!I)return;let ee=m.active.id.toString(),Ee=ee.startsWith("tab-header-")?ee.substring(11):ee,M=Q.current;if(!M){x!==null&&(C(null),g?.(null));return}let ke=m.activatorEvent,ie=null,G=null;if(U.current)ie=U.current.x,G=U.current.y;else {let F=nt(ke);F&&(ie=F.x+m.delta.x,G=F.y+m.delta.y);}let de=0;if(ie!==null&&G!==null){let F=0,te=0;ie<M.left?F=M.left-ie:ie>M.right&&(F=ie-M.right),G<M.top?te=M.top-G:G>M.bottom&&(te=G-M.bottom),de=Math.sqrt(F*F+te*te);}else {let F=m.active.rect.current.translated;if(F){let te=F.left+F.width/2,Pe=F.top+F.height/2,pe=0,Se=0;te<M.left?pe=M.left-te:te>M.right&&(pe=te-M.right),Pe<M.top?Se=M.top-Pe:Pe>M.bottom&&(Se=Pe-M.bottom),de=Math.sqrt(pe*pe+Se*Se);}}de>X?x!==Ee&&(C(Ee),g?.(Ee)):x!==null&&(C(null),g?.(null));},he=m=>{T(null),v(null),$(false);let{active:A,over:Y}=m,se=A.id.toString(),ee=se.startsWith("tab-header-"),E=ee?se.substring(11):se,Ee=I&&x===E;if(C(null),g?.(null),Q.current=null,Ee){w?w(E):ue(E),b&&b(E,null,null);return}if(!Y){b&&b(E,null,null);return}let M=Y.id.toString();if(M.startsWith("drop-locked-")){b&&b(E,null,null);return}let ke=M.match(/^tab-drop-(.+)$/);if(ke){let[,Ze]=ke;if(E!==Ze){let Ne="before",st=Y.rect,zt=m.activatorEvent,He=null;if(U.current)He=U.current.x;else {let Ae=nt(zt);Ae&&(He=Ae.x+m.delta.x);}if(He!==null){let Ae=st.left+st.width/2;He>Ae&&(Ne="after");}re(E,Ze,Ne);}b&&b(E,Ze,{type:"swap",position:"center"});return}let ie=M.match(/^drop-(left|right|top|bottom)-(.+)$/);if(!ie){b&&b(E,null,null);return}let[,G,de]=ie,we=K(i,E),F=we&&we.id===de,te=we&&we.tabs.length===1;if(E===de||F&&te){b&&b(E,null,null);return}let Pe=G==="left"||G==="right"?"row":"column",pe;if(ee){let Ne=K(i,E)?.tabsMetadata?.[E];pe={type:"pane",id:ce(),tabs:[E],activeTabId:E,tabsMetadata:Ne?{[E]:Ne}:void 0};}else pe=K(i,E)??{type:"pane",id:ce(),tabs:[E],activeTabId:E};let Se=ee?fe(i,E):ye(i,E),Mt=De(Se,de,Pe,G,pe);a(Mt),b&&b(E,de,{type:"split",direction:Pe,position:G});},$e=useCallback((m,A)=>{V&&V(m,A);},[V]),je=useMemo(()=>({layout:i,onLayoutChange:m=>a(m),renderPane:ze,activeId:c,dismissIntentId:x,setContainerRef:d,fullscreenPaneId:l,classNames:Ie,onRemove:w,onFullscreenChange:P,snapThreshold:S,onResizeStart:O,onResize:J,onResizeEnd:$e,minSplitPercentage:N,maxSplitPercentage:W,locked:D}),[i,c,x,d,l,Ie,w,P,S,O,J,N,W,a,ze,$e,D]),wt=useMemo(()=>({removePane:Z,addPane:q,splitPane:H,updateSplitPercentage:L,updateTabMetadata:u,updatePaneLock:f,selectTab:ge,mergeTab:_,moveTab:re,removeTab:ue}),[Z,q,H,L,u,f,ge,_,re,ue]),Nt=useMemo(()=>{let m=[];function A(Y){Y&&(Y.type==="pane"?m.push(...Y.tabs):(A(Y.first),A(Y.second)));}return A(i),m},[i]),Lt=useMemo(()=>({registerPortalTarget:ve}),[ve]);return jsx(Oe.Provider,{value:wt,children:jsx(Fe.Provider,{value:je,children:jsxs(We.Provider,{value:Lt,children:[jsx(DndContext,{id:"zeugma-dnd-context",sensors:p,collisionDetection:R,onDragStart:k,onDragMove:ae,onDragEnd:he,children:o}),c&&y&&s&&jsx(bt,{activeId:c,render:m=>s(m,y),className:`${r.dragOverlay||""} ${c===x?r.dismissPreview||"zeugma-dismiss-preview":""}`.trim()}),jsx("div",{id:"zeugma-portal-host",style:{display:"none"},children:Nt.map(m=>jsx(vt,{tabId:m,target:be[m]||null,renderWidget:n},m))})]})})})};function rt({containerRef:e,isRow:t,direction:n,splitPercentage:s,resizerSize:r,snapThreshold:o,layout:i,currentNode:a,onLayoutChange:l,onResizeStart:P,onResizeEnd:D,parentLeft:c,parentTop:T,parentWidth:y,parentHeight:v}){let{onResizeStart:x,onResize:C,onResizeEnd:z,minSplitPercentage:d=5,maxSplitPercentage:h=95,locked:S=false}=ne();return useCallback(N=>{if(S)return;N.preventDefault();let W=e.current;if(!W)return;P&&P(),x&&x(a);let I=W.getBoundingClientRect(),X=N.clientX,w=N.clientY,j=s,b=N.currentTarget,O=I.left+I.width*(c/100),J=I.top+I.height*(T/100),V=I.width*(y/100),g=I.height*(v/100),q=Array.from(document.querySelectorAll('div[role="separator"][data-direction]')).filter(L=>L!==b&&L.getAttribute("data-direction")===n).map(L=>{let u=L.getBoundingClientRect();return t?u.left+u.width/2:u.top+u.height/2}),H=j;Be({cursor:t?"col-resize":"row-resize",resizerEl:b,onMove:L=>{let u=t?(L.clientX-X)/V*100:(L.clientY-w)/g*100,f=j+u,ge=t?O+(V-r)*(f/100)+r/2:J+(g-r)*(f/100)+r/2,_=1/0,re=null;for(let Q of q){let U=Math.abs(ge-Q);U<o&&U<_&&(_=U,re=Q);}let ue=f;re!==null&&(ue=t?(re-r/2-O)/(V-r)*100:(re-r/2-J)/(g-r)*100);let be=Math.max(d,Math.min(h,ue));H=be;let ve=Te(i,a,be);if(ve){let{panes:Q,splitters:U}=le(ve),oe=e.current;if(oe){for(let $ of Q)oe.style.setProperty(`--pane-left-${$.paneId}`,`${$.left}%`),oe.style.setProperty(`--pane-top-${$.paneId}`,`${$.top}%`),oe.style.setProperty(`--pane-width-${$.paneId}`,`${$.width}%`),oe.style.setProperty(`--pane-height-${$.paneId}`,`${$.height}%`);for(let $ of U)oe.style.setProperty(`--splitter-pos-${$.id}`,`${$.direction==="row"?$.left:$.top}%`);}}C&&C(a,be);},onEnd:()=>{let L=Te(i,a,H),u=e.current;if(u){let{panes:f,splitters:ge}=le(L);for(let _ of f)u.style.removeProperty(`--pane-left-${_.paneId}`),u.style.removeProperty(`--pane-top-${_.paneId}`),u.style.removeProperty(`--pane-width-${_.paneId}`),u.style.removeProperty(`--pane-height-${_.paneId}`);for(let _ of ge)u.style.removeProperty(`--splitter-pos-${_.id}`);}l(L),D&&D(),z&&z(a,H);}});},[e,t,n,s,r,o,i,a,l,P,D,x,C,z,d,h,c,T,y,v])}var cn=({splitter:e,resizerSize:t,snapThreshold:n,containerRef:s})=>{let{layout:r,onLayoutChange:o,classNames:i,locked:a}=ne(),[l,P]=useState(false),{currentNode:D,direction:c,left:T,top:y,width:v,height:x,parentLeft:C,parentTop:z,parentWidth:d,parentHeight:h}=e,S=c==="row",N=rt({containerRef:s,isRow:S,direction:c,splitPercentage:D.splitPercentage,resizerSize:t,snapThreshold:n,layout:r,currentNode:D,onLayoutChange:o,onResizeStart:()=>P(true),onResizeEnd:()=>P(false),parentLeft:C,parentTop:z,parentWidth:d,parentHeight:h}),W=S?{position:"absolute",left:`calc(var(--splitter-pos-${e.id}, ${T}%) - ${t/2}px)`,top:`calc(${y}% + ${t/2}px)`,width:`${t}px`,height:`calc(${x}% - ${t}px)`,cursor:a?"default":"col-resize",pointerEvents:a?"none":"auto",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box"}:{position:"absolute",left:`calc(${T}% + ${t/2}px)`,top:`calc(var(--splitter-pos-${e.id}, ${y}%) - ${t/2}px)`,width:`calc(${v}% - ${t}px)`,height:`${t}px`,cursor:a?"default":"row-resize",pointerEvents:a?"none":"auto",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box"};return jsx("div",{className:`zeugma-resizer ${i.resizer||""}`.trim(),"data-direction":c,"data-resizing":l||void 0,style:W,onPointerDown:N,role:"separator","aria-valuenow":D.splitPercentage,"aria-valuemin":5,"aria-valuemax":95})},un=on.memo(({paneId:e,renderPane:t})=>jsx(Fragment,{children:t(e)}),(e,t)=>e.paneId===t.paneId&&e.renderPane===t.renderPane),dn=({tree:e,resizerSize:t=4,snapThreshold:n})=>{let{layout:s,renderPane:r,activeId:o,dismissIntentId:i,setContainerRef:a,fullscreenPaneId:l,snapThreshold:P,locked:D,classNames:c}=ne(),T=n!==void 0?n:P??8,y=e!==void 0?e:s,v=useRef(null),{panes:x,splitters:C}=useMemo(()=>y?le(y):{panes:[],splitters:[]},[y]);if(!y)return null;let z=()=>jsxs(Fragment,{children:[x.map(d=>{let h=l===d.paneId;return jsx("div",{style:{position:"absolute",left:h?"0%":`var(--pane-left-${d.paneId}, ${d.left}%)`,top:h?"0%":`var(--pane-top-${d.paneId}, ${d.top}%)`,width:h?"100%":`var(--pane-width-${d.paneId}, ${d.width}%)`,height:h?"100%":`var(--pane-height-${d.paneId}, ${d.height}%)`,overflow:"hidden",zIndex:h?20:1,display:l&&!h?"none":"block",padding:h?"0px":`${t/2}px`,boxSizing:"border-box"},children:jsx(un,{paneId:d.paneId,renderPane:r})},d.paneId)}),!l&&C.map(d=>jsx(cn,{splitter:d,resizerSize:t,snapThreshold:T,containerRef:v},d.id))]});if(e===void 0){let d=o!==null&&o===i,h=N=>{a(N),v.current=N;},S=`zeugma-dashboard-root ${d?"zeugma-dashboard-dismiss-active":""} ${D?c.dashboardLocked||"zeugma-dashboard-locked":""}`.trim();return jsx("div",{ref:h,className:S,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:z()})}return jsx("div",{ref:v,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:z()})};var Rt="zeugma-height:",gn="default-pane";function bn(e){try{let t=localStorage.getItem(Rt+e);if(t!==null){let n=Number(t);if(Number.isFinite(n)&&n>0)return n}}catch{}return null}function xt(e,t){try{localStorage.setItem(Rt+e,String(Math.round(t)));}catch{}}var St=({children:e,active:t=true,height:n,onHeightChange:s,minHeight:r=100,maxHeight:o=1/0,persist:i,localStorageKey:a,resizerHeight:l=6,className:P,resizerClassName:D})=>{let c=i?a||gn:null,T=()=>{let S=(c?bn(c):null)??n??400;return Je(S,r,o)},[y,v]=useState(T),x=useRef(null),C=c?y:n??y,z=useRef(n);useEffect(()=>{if(n!==void 0&&n!==z.current){let S=Je(n,r,o);v(S),c&&xt(c,S);}z.current=n;},[n,r,o,c]);let d=useCallback(()=>o,[o]),h=useCallback(S=>{S.preventDefault();let N=S.clientY,W=C,I=d(),X=S.currentTarget,w=Dt(x.current),j=w?w.scrollTop:0,b=N,O=null,J=(g,Z)=>{let q=Z-j,L=g-N+q,u=Je(W+L,r,I);return x.current&&(x.current.style.height=`${u}px`),u},V=()=>{if(!w)return;let g=w===document.documentElement||w===document.body?{top:0,bottom:window.innerHeight}:w.getBoundingClientRect(),Z=40,q=10,H=0;b>g.bottom-Z?H=Math.min(1,(b-(g.bottom-Z))/Z)*q:b<g.top+Z&&(H=-Math.min(1,(g.top+Z-b)/Z)*q),H!==0&&(w.scrollTop+=H,J(b,w.scrollTop)),O=requestAnimationFrame(V);};O=requestAnimationFrame(V),Be({cursor:"row-resize",resizerEl:X,onMove:g=>{b=g.clientY,w&&J(b,w.scrollTop);},onEnd:()=>{O!==null&&cancelAnimationFrame(O);let g=W;x.current&&(g=x.current.getBoundingClientRect().height),g=Je(g,r,I),v(g),s&&s(g),c&&xt(c,g);}});},[C,r,d,s,c]);return t?jsxs("div",{ref:x,className:`zeugma-resizable-container ${P||""}`.trim(),style:{height:`${C}px`,position:"relative",overflow:"hidden",boxSizing:"border-box"},children:[jsx("div",{style:{height:`calc(100% - ${l}px)`,overflow:"hidden"},children:e}),jsx("div",{className:`zeugma-resizable-handle ${D||""}`.trim(),style:{height:`${l}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(C),"aria-valuemin":r,"aria-valuemax":o===1/0?void 0:o})]}):jsx("div",{className:`zeugma-resizable-container disabled ${P||""}`.trim(),style:{height:"100%",position:"relative",overflow:"hidden",boxSizing:"border-box"},children:jsx("div",{style:{height:"100%",overflow:"hidden"},children:e})})};function Je(e,t,n){return Math.max(t,Math.min(n,e))}function Dt(e){if(typeof window>"u"||!e)return null;let t=e.parentElement;if(!t)return document.documentElement;let s=window.getComputedStyle(t).overflowY;return s==="auto"||s==="scroll"?t:Dt(t)}var Ke=createContext(null);var Sn={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"},full:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:20,pointerEvents:"auto",cursor:"not-allowed"}},Dn={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"},full:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:21,pointerEvents:"none",boxSizing:"border-box"}},Ct=({id:e,position:t,activeClassName:n})=>{let{setNodeRef:s,isOver:r}=useDroppable({id:e});return jsxs(Fragment,{children:[jsx("div",{ref:s,style:Sn[t]}),r&&jsx("div",{className:n,style:Dn[t]})]})},Cn=({id:e,children:t,style:n,locked:s=false})=>{let{layout:r,activeId:o,classNames:i,fullscreenPaneId:a,onFullscreenChange:l,locked:P}=ne(),{removePane:D,updateTabMetadata:c,selectTab:T,removeTab:y}=Ve(),v=useContext(We);if(!v)throw new Error("Pane must be used within a Zeugma provider");let{registerPortalTarget:x}=v,C=useMemo(()=>K(r,e),[r,e]),z=C?.id??e,d=C?.tabs??[e],h=C?.activeTabId??e,S=C?.tabsMetadata,N=S?.[e],W=C?.locked??false,I=s||W,X=P||I,w=P||I,j=o!==null&&o!==e&&(!d.includes(o)||d.length>1)&&!w,{attributes:b,listeners:O,setNodeRef:J}=useDraggable({id:e,disabled:X}),V=o!==null&&d.includes(o),g=a===e,Z=useCallback(()=>jsx("div",{id:`zeugma-tab-target-${h}`,className:"zeugma-tab-content-wrapper",style:{height:"100%",width:"100%"}}),[h]);useEffect(()=>{let u=document.getElementById(`zeugma-tab-target-${h}`);return x(h,u),()=>{x(h,null);}},[h,x]);let q=useMemo(()=>({isDragging:V,isFullscreen:g,toggleFullscreen:()=>l?.(g?null:e),remove:()=>{g&&l?.(null),D(z);},metadata:N,updateMetadata:u=>{c(e,u);},locked:X,tabs:d,activeTabId:h,selectTab:u=>T(z,u),removeTab:u=>{g&&u===h&&l?.(null),y(u);},tabsMetadata:S,updateTabMetadata:(u,f)=>{c(u,f);},renderActiveTab:Z}),[V,g,l,e,y,N,c,X,d,h,T,z,S,Z]),H=useMemo(()=>X?{disabled:true}:{...O,...b},[O,b,X]),L=`${i.pane||""} ${I?i.paneLocked||"zeugma-pane-locked":""}`.trim();return jsx(Ke.Provider,{value:H,children:jsxs("div",{ref:J,className:L,style:{position:"relative",width:"100%",height:"100%",...n},children:[t(q),j&&jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:["top","bottom","left","right"].map(u=>jsx(Ct,{id:`drop-${u}-${e}`,position:u,activeClassName:i.dropPreview},u))}),o!==null&&o!==e&&w&&jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:jsx(Ct,{id:`drop-locked-${e}`,position:"full",activeClassName:i.lockedPreview||"zeugma-locked-preview"})})]})})};var Nn=({children:e,className:t,style:n})=>{let s=useContext(Ke);if(!s)throw new Error("<DragHandle> must be used inside a <Pane>");let{disabled:r,...o}=s;return jsx("div",{className:t,style:{cursor:r?"default":"grab",userSelect:r?"auto":"none",touchAction:r?"auto":"none",...n},...r?{}:o,children:e})};var In=({id:e,locked:t=false,children:n,className:s,style:r})=>{let{locked:o}=ne(),i=t||o,{attributes:a,listeners:l,setNodeRef:P,isDragging:D}=useDraggable({id:`tab-header-${e}`,disabled:i}),{setNodeRef:c,isOver:T}=useDroppable({id:`tab-drop-${e}`,disabled:i});return jsx("div",{ref:v=>{P(v),c(v);},className:s,style:{display:"inline-flex",cursor:i?"default":"grab",...r},...i?{}:l,...i?{}:a,children:n({isDragging:D,isOver:T})})};export{Ht as DEFAULT_DRAG_ACTIVATION_DISTANCE,Wn as DEFAULT_RESIZER_SIZE,Zt as DEFAULT_SNAP_THRESHOLD,Nn as DragHandle,Cn as Pane,dn as PaneTree,St as ResizableContainer,In as Tab,tn as Zeugma,pt as addPane,le as computeLayout,Be as createDragSession,K as findPane,ce as generateUniqueId,ft as mergeTab,mt as moveTab,ye as removePane,fe as removeTab,Le as safeJsonStringify,Ye as selectTab,De as splitPane,Ue as updatePaneLock,Te as updateSplitPercentage,_e as updateTabMetadata,rt as useResizer,Ft as useZeugma,Ot as useZeugmaContext};//# sourceMappingURL=index.js.map
|
|
6
|
+
`,document.head.appendChild(r),t.setAttribute("data-resizing","true");let o=a=>{n(a);},i=()=>{document.body.classList.remove("zeugma-resizing"),t.removeAttribute("data-resizing");let a=document.getElementById("zeugma-global-cursor-style");a&&a.remove(),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",i),s();};document.addEventListener("pointermove",o),document.addEventListener("pointerup",i);}function be(e){try{return JSON.stringify(e)}catch{return ""}}var Me=createContext(void 0),ze=createContext(void 0),xe=createContext(void 0),re=()=>{let e=useContext(Me);if(!e)throw new Error("useZeugmaState must be used within a Zeugma provider");return e},Se=()=>{let e=useContext(ze);if(!e)throw new Error("useZeugmaActions must be used within a Zeugma provider");return e};function mt(e){let{initialLayout:t,layout:n,onChange:s,fullscreenPaneId:r,onFullscreenChange:o,locked:i=false,dragActivationDistance:a=8,snapThreshold:u=8,minSplitPercentage:f=5,maxSplitPercentage:I=95,enableDragToDismiss:b=false,dismissThreshold:v=60,onRemove:R,onDragStart:y,onDragEnd:M,onResizeStart:m,onResize:D,onResizeEnd:g,onDismissIntentChange:C}=e,[T,L]=useState(()=>n!==void 0?n:t??null),[$,U]=useState(()=>be(n!==void 0?n:null)),[Y,z]=useState(r||null),[q,V]=useState(i),[B,J]=useState(null),[j,d]=useState(null),[x,Z]=useState(null),N=useRef(null),E=useCallback(c=>{N.current=c;},[]),l=useCallback(c=>{z(c),o?.(c);},[o]);if(useEffect(()=>{V(i);},[i]),useEffect(()=>{r!==void 0&&z(r);},[r]),n!==void 0){let c=be(n);c!==$&&(U(c),L(n));}let p=useCallback(c=>(...h)=>{let H=T,A=c(H,...h);be(H)!==be(A)&&(L(A),s?.(A));},[T,s]),P=useCallback(p((c,h)=>typeof h=="function"?h(c):h),[p]),Q=useCallback(p((c,h)=>ue(c,h)),[p]),W=useCallback(p((c,h)=>Ve(c,h)),[p]),O=useCallback(p((c,h,H,A,ne)=>{let ce=ee(c,h)??G(c,h);if(!ce)return c;let at=ee(c,ne)??G(c,ne)??{type:"pane",id:ne,tabs:[ne],activeTabId:ne},lt=ue(c,ne);return me(lt,ce.id,H,A,at)}),[p]),X=useCallback(p((c,h,H)=>de(c,h,H)),[p]),F=useCallback(p((c,h,H)=>he(c,h,H)),[p]),S=useCallback(p((c,h,H)=>{let A=ee(c,h)??G(c,h);return A?Pe(c,A.id,H):c}),[p]),w=useCallback(p((c,h,H)=>{let A=ee(c,h)??G(c,h);return A?ye(c,A.id,H):c}),[p]),k=useCallback(p((c,h,H)=>{let A=ee(c,H)??G(c,H);return A?We(c,h,A.id):c}),[p]),oe=useCallback(p((c,h,H,A)=>Ue(c,h,H,A)),[p]),te=useCallback(p((c,h)=>ae(c,h)),[p]);return {layout:T,setLayout:P,fullscreenPaneId:Y,setFullscreenPaneId:l,locked:q,setLocked:V,activeId:B,setActiveId:J,activeType:j,setActiveType:d,dismissIntentId:x,setDismissIntentId:Z,containerRef:N,setContainerRef:E,dragActivationDistance:a,snapThreshold:u,minSplitPercentage:f,maxSplitPercentage:I,enableDragToDismiss:b,dismissThreshold:v,onRemove:R,onDragStart:y,onDragEnd:M,onResizeStart:m,onResize:D,onResizeEnd:g,onDismissIntentChange:C,removePane:Q,addPane:W,splitPane:O,updateSplitPercentage:X,updateTabMetadata:F,updatePaneLock:S,selectTab:w,mergeTab:k,moveTab:oe,removeTab:te}}var gt=()=>{let e=re(),t=Se();return {...e,...t}};var Re=class extends PointerSensor{static activators=[{eventName:"onPointerDown",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},De=class extends TouchSensor{static activators=[{eventName:"onTouchStart",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]};function Ce(e){if(e instanceof MouseEvent||e instanceof PointerEvent)return {x:e.clientX,y:e.clientY};if(typeof TouchEvent<"u"&&e instanceof TouchEvent){let t=e.touches[0]||e.changedTouches[0];if(t)return {x:t.clientX,y:t.clientY}}return null}function Xe(e){let{layout:t,setLayout:n,activeId:s,setActiveId:r,setActiveType:o,dismissIntentId:i,setDismissIntentId:a,setOverTabId:u,setOverTabPosition:f,containerRef:I,dragActivationDistance:b,enableDragToDismiss:v,dismissThreshold:R,onRemove:y,onDragStart:M,onDragEnd:m,onDismissIntentChange:D,removeTab:g,moveTab:C,selectTab:T}=e,L=useRef(null),$=Ae(s),[U,Y]=useState(false);Fe(U);let z=useSensors(useSensor(Re,{activationConstraint:{distance:b}}),useSensor(De,{activationConstraint:{delay:250,tolerance:5}})),q=useCallback(d=>{let x=pointerWithin(d);if(x.length>0)return x;if(d.active.id.toString().startsWith("tab-header-")){let N=d.droppableContainers.filter(E=>E.id.toString().startsWith("tab-drop-"));return closestCenter({...d,droppableContainers:N})}return []},[]);return {sensors:z,collisionDetection:q,onDragStart:d=>{let x=d.active.id.toString(),Z=x.startsWith("tab-header-"),N=Z?x.substring(11):x;r(N),o(Z?"tab":"pane"),u(null),f(null);let E=d.activatorEvent;if($.current=Ce(E),v&&I.current?L.current=I.current.getBoundingClientRect():L.current=null,Z){let l=G(t,N);l&&T(l.id,N);}M&&M(N);},onDragMove:d=>{let{over:x}=d,Z=x?.id.toString()||"",N=Z.startsWith("drop-locked-");Y(N);let E=Z.match(/^tab-drop-(.+)$/);if(E&&x){let[,S]=E,w=d.active.id.toString();if((w.startsWith("tab-header-")?w.substring(11):w)!==S){let te="before",c=x.rect,h=d.activatorEvent,H=null;if($.current)H=$.current.x;else {let A=Ce(h);A&&(H=A.x+d.delta.x);}if(H!==null){let A=c.left+c.width/2;H>A&&(te="after");}u(S),f(te);}else u(null),f(null);}else u(null),f(null);if(!v)return;let l=d.active.id.toString(),_=l.startsWith("tab-header-")?l.substring(11):l,P=L.current;if(!P){i!==null&&(a(null),D?.(null));return}let Q=d.activatorEvent,W=null,O=null;if($.current)W=$.current.x,O=$.current.y;else {let S=Ce(Q);S&&(W=S.x+d.delta.x,O=S.y+d.delta.y);}let X=0;if(W!==null&&O!==null){let S=0,w=0;W<P.left?S=P.left-W:W>P.right&&(S=W-P.right),O<P.top?w=P.top-O:O>P.bottom&&(w=O-P.bottom),X=Math.sqrt(S*S+w*w);}else {let S=d.active.rect.current.translated;if(S){let w=S.left+S.width/2,k=S.top+S.height/2,oe=0,te=0;w<P.left?oe=P.left-w:w>P.right&&(oe=w-P.right),k<P.top?te=P.top-k:k>P.bottom&&(te=k-P.bottom),X=Math.sqrt(oe*oe+te*te);}}X>R?i!==_&&(a(_),D?.(_)):i!==null&&(a(null),D?.(null));},onDragEnd:d=>{r(null),o(null),Y(false),u(null),f(null);let{active:x,over:Z}=d,N=x.id.toString(),E=N.startsWith("tab-header-"),l=E?N.substring(11):N,p=v&&i===l;if(a(null),D?.(null),L.current=null,p){y?y(l):g(l),m&&m(l,null,null);return}if(!Z){m&&m(l,null,null);return}let _=Z.id.toString();if(_.startsWith("drop-locked-")){m&&m(l,null,null);return}let P=_.match(/^tab-drop-(.+)$/);if(P){let[,c]=P;if(l!==c){let h="before",H=Z.rect,A=d.activatorEvent,ne=null;if($.current)ne=$.current.x;else {let ce=Ce(A);ce&&(ne=ce.x+d.delta.x);}if(ne!==null){let ce=H.left+H.width/2;ne>ce&&(h="after");}C(l,c,h),m&&m(l,c,{type:"move",position:"center"});}else m&&m(l,null,null);return}let Q=_.match(/^drop-(left|right|top|bottom)-(.+)$/);if(!Q){m&&m(l,null,null);return}let[,W,O]=Q,X=E?G(t,l):ee(t,l),F=X&&X.id===O,S=X&&X.tabs.length===1;if(l===O||F&&S){m&&m(l,null,null);return}let w=W==="left"||W==="right"?"row":"column",k;if(E){let h=G(t,l)?.tabsMetadata?.[l];k={type:"pane",id:ie(),tabs:[l],activeTabId:l,tabsMetadata:h?{[l]:h}:void 0};}else k=ee(t,l)??{type:"pane",id:ie(),tabs:[l],activeTabId:l};let oe=E?ae(t,l):ue(t,l),te=me(oe,O,w,W,k);n(te),m&&m(l,O,{type:"split",direction:w,position:W});},onDragCancel:()=>{r(null),o(null),Y(false),u(null),f(null),a(null),D?.(null),L.current=null;}}}var qe=({activeId:e,render:t,className:n})=>{let s=useRef(null);return useEffect(()=>{let r=o=>{s.current&&(s.current.style.transform=`translate(${o.clientX+12}px, ${o.clientY+12}px)`);};return document.addEventListener("pointermove",r),()=>document.removeEventListener("pointermove",r)},[]),jsx("div",{ref:s,className:n,style:{position:"fixed",top:0,left:0,zIndex:9999,pointerEvents:"none"},children:t(e)})};var Je=({tabId:e,target:t,renderWidget:n})=>{let[s,r]=useState(false),o=useRef(null);if(useEffect(()=>{r(true);},[]),useEffect(()=>{if(!s||!o.current)return;let a=o.current;if(t)t.appendChild(a);else {let u=document.getElementById("zeugma-hidden-portal-container");u||(u=document.createElement("div"),u.id="zeugma-hidden-portal-container",u.style.display="none",document.body.appendChild(u)),u.appendChild(a);}},[t,s]),useEffect(()=>()=>{o.current&&o.current.remove();},[]),!s)return null;o.current||(o.current=document.createElement("div"),o.current.className=`zeugma-portal-wrapper-${e}`,o.current.style.width="100%",o.current.style.height="100%");let i=o.current;return !i||!n?null:createPortal(n(e),i)};var Lt=e=>{let t=e,{renderPane:n,renderWidget:s,renderDragOverlay:r,classNames:o={},children:i,layout:a,setLayout:u,fullscreenPaneId:f,setFullscreenPaneId:I,locked:b,activeId:v,activeType:R,dismissIntentId:y,setContainerRef:M,snapThreshold:m,minSplitPercentage:D,maxSplitPercentage:g,onRemove:C,onResizeStart:T,onResize:L,onResizeEnd:$,removePane:U,addPane:Y,updateTabMetadata:z,updatePaneLock:q,selectTab:V,mergeTab:B,removeTab:J}=t,{portalTargets:j,registerPortalTarget:d}=Oe(),[x,Z]=useState(null),[N,E]=useState(null),l=Xe({...t,setOverTabId:Z,setOverTabPosition:E}),p=useCallback(F=>n(F),[n]),_=useMemo(()=>o,[o.dashboard,o.dashboardDismissActive,o.pane,o.paneLocked,o.dropPreview,o.dragOverlay,o.resizer,o.dismissPreview,o.dashboardLocked,o.lockedPreview,o.tabDropPreview]),P=useCallback((F,S)=>{$&&$(F,S);},[$]),Q=useMemo(()=>({layout:a,setLayout:u,renderPane:p,activeId:v,dismissIntentId:y,overTabId:x,overTabPosition:N,setContainerRef:M,fullscreenPaneId:f,classNames:_,onRemove:C,onFullscreenChange:I,snapThreshold:m,onResizeStart:T,onResize:L,onResizeEnd:P,minSplitPercentage:D,maxSplitPercentage:g,locked:b}),[a,v,y,x,N,M,f,_,C,I,m,T,L,D,g,u,p,P,b]),W=useMemo(()=>({removePane:U,addPane:Y,updateTabMetadata:z,updatePaneLock:q,selectTab:V,mergeTab:B,removeTab:J}),[U,Y,z,q,V,B,J]),O=useMemo(()=>{let F=[];function S(w){w&&(w.type==="pane"?F.push(...w.tabs):(S(w.first),S(w.second)));}return S(a),F},[a]),X=useMemo(()=>({registerPortalTarget:d}),[d]);return jsx(ze.Provider,{value:W,children:jsx(Me.Provider,{value:Q,children:jsxs(xe.Provider,{value:X,children:[jsx(DndContext,{id:"zeugma-dnd-context",...l,children:i}),v&&R&&r&&jsx(qe,{activeId:v,render:F=>r(F,R),className:`${o.dragOverlay||""} ${v===y&&o.dismissPreview||""}`.trim()}),jsx("div",{id:"zeugma-portal-host",style:{display:"none"},children:O.map(F=>jsx(Je,{tabId:F,target:j[F]||null,renderWidget:s},F))})]})})})};function Ze({containerRef:e,isRow:t,direction:n,splitPercentage:s,resizerSize:r,snapThreshold:o,layout:i,currentNode:a,onLayoutChange:u,onResizeStart:f,onResizeEnd:I,parentLeft:b,parentTop:v,parentWidth:R,parentHeight:y}){let{onResizeStart:M,onResize:m,onResizeEnd:D,minSplitPercentage:g=5,maxSplitPercentage:C=95,locked:T=false}=re();return useCallback(L=>{if(T)return;L.preventDefault();let $=e.current;if(!$)return;f&&f(),M&&M(a);let U=$.getBoundingClientRect(),Y=L.clientX,z=L.clientY,q=s,V=L.currentTarget,B=U.left+U.width*(b/100),J=U.top+U.height*(v/100),j=U.width*(R/100),d=U.height*(y/100),Z=Array.from(document.querySelectorAll('div[role="separator"][data-direction]')).filter(E=>E!==V&&E.getAttribute("data-direction")===n).map(E=>{let l=E.getBoundingClientRect();return t?l.left+l.width/2:l.top+l.height/2}),N=q;Te({cursor:t?"col-resize":"row-resize",resizerEl:V,onMove:E=>{let l=t?(E.clientX-Y)/j*100:(E.clientY-z)/d*100,p=q+l,_=t?B+(j-r)*(p/100)+r/2:J+(d-r)*(p/100)+r/2,P=1/0,Q=null;for(let F of Z){let S=Math.abs(_-F);S<o&&S<P&&(P=S,Q=F);}let W=p;Q!==null&&(W=t?(Q-r/2-B)/(j-r)*100:(Q-r/2-J)/(d-r)*100);let O=Math.max(g,Math.min(C,W));N=O;let X=de(i,a,O);if(X){let{panes:F,splitters:S}=se(X),w=e.current;if(w){for(let k of F)w.style.setProperty(`--pane-left-${k.paneId}`,`${k.left}%`),w.style.setProperty(`--pane-top-${k.paneId}`,`${k.top}%`),w.style.setProperty(`--pane-width-${k.paneId}`,`${k.width}%`),w.style.setProperty(`--pane-height-${k.paneId}`,`${k.height}%`);for(let k of S)w.style.setProperty(`--splitter-pos-${k.id}`,`${k.direction==="row"?k.left:k.top}%`);}}m&&m(a,O);},onEnd:()=>{let E=de(i,a,N),l=e.current;if(l){let{panes:p,splitters:_}=se(E);for(let P of p)l.style.removeProperty(`--pane-left-${P.paneId}`),l.style.removeProperty(`--pane-top-${P.paneId}`),l.style.removeProperty(`--pane-width-${P.paneId}`),l.style.removeProperty(`--pane-height-${P.paneId}`);for(let P of _)l.style.removeProperty(`--splitter-pos-${P.id}`);}u(E),I&&I(),D&&D(a,N);}});},[e,t,n,s,r,o,i,a,u,f,I,M,m,D,g,C,b,v,R,y])}var At=({splitter:e,resizerSize:t,snapThreshold:n,containerRef:s})=>{let{layout:r,setLayout:o,classNames:i,locked:a}=re(),[u,f]=useState(false),{currentNode:I,direction:b,left:v,top:R,width:y,height:M,parentLeft:m,parentTop:D,parentWidth:g,parentHeight:C}=e,T=b==="row",L=Ze({containerRef:s,isRow:T,direction:b,splitPercentage:I.splitPercentage,resizerSize:t,snapThreshold:n,layout:r,currentNode:I,onLayoutChange:o,onResizeStart:()=>f(true),onResizeEnd:()=>f(false),parentLeft:m,parentTop:D,parentWidth:g,parentHeight:C}),$=T?{position:"absolute",left:`calc(var(--splitter-pos-${e.id}, ${v}%) - ${t/2}px)`,top:`calc(${R}% + ${t/2}px)`,width:`${t}px`,height:`calc(${M}% - ${t}px)`,cursor:a?"default":"col-resize",pointerEvents:a?"none":"auto",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box"}:{position:"absolute",left:`calc(${v}% + ${t/2}px)`,top:`calc(var(--splitter-pos-${e.id}, ${R}%) - ${t/2}px)`,width:`calc(${y}% - ${t}px)`,height:`${t}px`,cursor:a?"default":"row-resize",pointerEvents:a?"none":"auto",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box"};return jsx("div",{className:i.resizer||"","data-direction":b,"data-resizing":u||void 0,style:$,onPointerDown:L,role:"separator","aria-valuenow":I.splitPercentage,"aria-valuemin":5,"aria-valuemax":95})},Ft=$t.memo(({paneId:e,renderPane:t})=>jsx(Fragment,{children:t(e)}),(e,t)=>e.paneId===t.paneId&&e.renderPane===t.renderPane),Ot=({tree:e,resizerSize:t=4,snapThreshold:n})=>{let{layout:s,renderPane:r,activeId:o,dismissIntentId:i,setContainerRef:a,fullscreenPaneId:u,snapThreshold:f,locked:I,classNames:b}=re(),v=n!==void 0?n:f??8,R=e!==void 0?e:s,y=useRef(null),{panes:M,splitters:m}=useMemo(()=>R?se(R):{panes:[],splitters:[]},[R]);if(!R)return null;let D=()=>jsxs(Fragment,{children:[M.map(g=>{let C=u===g.paneId;return jsx("div",{style:{position:"absolute",left:C?"0%":`var(--pane-left-${g.paneId}, ${g.left}%)`,top:C?"0%":`var(--pane-top-${g.paneId}, ${g.top}%)`,width:C?"100%":`var(--pane-width-${g.paneId}, ${g.width}%)`,height:C?"100%":`var(--pane-height-${g.paneId}, ${g.height}%)`,overflow:"hidden",zIndex:C?20:1,display:u&&!C?"none":"block",padding:C?"0px":`${t/2}px`,boxSizing:"border-box"},children:jsx(Ft,{paneId:g.paneId,renderPane:r})},g.paneId)}),!u&&m.map(g=>jsx(At,{splitter:g,resizerSize:t,snapThreshold:v,containerRef:y},g.id))]});if(e===void 0){let g=o!==null&&o===i,C=L=>{a(L),y.current=L;},T=`${b.dashboard||""} ${g&&b.dashboardDismissActive||""} ${I&&b.dashboardLocked||""}`.trim();return jsx("div",{ref:C,className:T,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:D()})}return jsx("div",{ref:y,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:D()})};var nt="zeugma-height:",_t="default-pane";function Yt(e){try{let t=localStorage.getItem(nt+e);if(t!==null){let n=Number(t);if(Number.isFinite(n)&&n>0)return n}}catch{}return null}function tt(e,t){try{localStorage.setItem(nt+e,String(Math.round(t)));}catch{}}var rt=({children:e,active:t=true,height:n,onHeightChange:s,minHeight:r=100,maxHeight:o=1/0,persist:i,localStorageKey:a,resizerHeight:u=6,className:f,resizerClassName:I})=>{let b=i?a||_t:null,v=()=>{let T=(b?Yt(b):null)??n??400;return Ee(T,r,o)},[R,y]=useState(v),M=useRef(null),m=b?R:n??R,D=useRef(n);useEffect(()=>{if(n!==void 0&&n!==D.current){let T=Ee(n,r,o);y(T),b&&tt(b,T);}D.current=n;},[n,r,o,b]);let g=useCallback(()=>o,[o]),C=useCallback(T=>{T.preventDefault();let L=T.clientY,$=m,U=g(),Y=T.currentTarget,z=ot(M.current),q=z?z.scrollTop:0,V=L,B=null,J=(d,x)=>{let Z=x-q,E=d-L+Z,l=Ee($+E,r,U);return M.current&&(M.current.style.height=`${l}px`),l},j=()=>{if(!z)return;let d=z===document.documentElement||z===document.body?{top:0,bottom:window.innerHeight}:z.getBoundingClientRect(),x=40,Z=10,N=0;V>d.bottom-x?N=Math.min(1,(V-(d.bottom-x))/x)*Z:V<d.top+x&&(N=-Math.min(1,(d.top+x-V)/x)*Z),N!==0&&(z.scrollTop+=N,J(V,z.scrollTop)),B=requestAnimationFrame(j);};B=requestAnimationFrame(j),Te({cursor:"row-resize",resizerEl:Y,onMove:d=>{V=d.clientY,z&&J(V,z.scrollTop);},onEnd:()=>{B!==null&&cancelAnimationFrame(B);let d=$;M.current&&(d=M.current.getBoundingClientRect().height),d=Ee(d,r,U),y(d),s&&s(d),b&&tt(b,d);}});},[m,r,g,s,b]);return t?jsxs("div",{ref:M,className:`zeugma-resizable-container ${f||""}`.trim(),style:{height:`${m}px`,position:"relative",overflow:"hidden",boxSizing:"border-box"},children:[jsx("div",{style:{height:`calc(100% - ${u}px)`,overflow:"hidden"},children:e}),jsx("div",{className:`zeugma-resizable-handle ${I||""}`.trim(),style:{height:`${u}px`,cursor:"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:C,role:"separator","aria-orientation":"horizontal","aria-valuenow":Math.round(m),"aria-valuemin":r,"aria-valuemax":o===1/0?void 0:o})]}):jsx("div",{className:`zeugma-resizable-container disabled ${f||""}`.trim(),style:{height:"100%",position:"relative",overflow:"hidden",boxSizing:"border-box"},children:jsx("div",{style:{height:"100%",overflow:"hidden"},children:e})})};function Ee(e,t,n){return Math.max(t,Math.min(n,e))}function ot(e){if(typeof window>"u"||!e)return null;let t=e.parentElement;if(!t)return document.documentElement;let s=window.getComputedStyle(t).overflowY;return s==="auto"||s==="scroll"?t:ot(t)}var Ne=createContext(null);var en={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"},full:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:20,pointerEvents:"auto",cursor:"not-allowed"}},tn={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"},full:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:21,pointerEvents:"none",boxSizing:"border-box"}},st=({id:e,position:t,activeClassName:n})=>{let{setNodeRef:s,isOver:r}=useDroppable({id:e});return jsxs(Fragment,{children:[jsx("div",{ref:s,style:en[t]}),r&&jsx("div",{className:n,style:tn[t]})]})},nn=({id:e,children:t,style:n,locked:s=false})=>{let r=useRef(null),{layout:o,activeId:i,classNames:a,fullscreenPaneId:u,onFullscreenChange:f,locked:I}=re(),{removePane:b,updateTabMetadata:v,selectTab:R,removeTab:y}=Se(),M=useContext(xe);if(!M)throw new Error("Pane must be used within a Zeugma provider");let{registerPortalTarget:m}=M,D=useMemo(()=>ee(o,e),[o,e]),g=D?.id??e,C=D?.tabs??[e],T=D?.activeTabId??e,L=D?.tabsMetadata,$=L?.[e],U=D?.locked??false,Y=s||U,z=I||Y,q=I||Y,V=i!==null&&i!==e&&(!C.includes(i)||C.length>1)&&!q,{attributes:B,listeners:J,setNodeRef:j}=useDraggable({id:e,disabled:z}),d=i!==null&&C.includes(i),x=u===e,Z=useCallback(()=>jsx("div",{ref:r,id:`zeugma-tab-target-${T}`,className:"zeugma-tab-content-wrapper",style:{height:"100%",width:"100%"}}),[T]);useEffect(()=>{let p=r.current;return m(T,p),()=>{m(T,null);}},[T,m]);let N=useMemo(()=>({isDragging:d,isFullscreen:x,toggleFullscreen:()=>f?.(x?null:e),remove:()=>{x&&f?.(null),b(g);},metadata:$,updateMetadata:p=>{v(e,p);},locked:z,tabs:C,activeTabId:T,selectTab:p=>R(g,p),removeTab:p=>{x&&p===T&&f?.(null),y(p);},tabsMetadata:L,updateTabMetadata:(p,_)=>{v(p,_);},renderActiveTab:Z}),[d,x,f,e,y,$,v,z,C,T,R,g,L,Z]),E=useMemo(()=>z?{disabled:true}:{...J,...B},[J,B,z]),l=`${a.pane||""} ${Y&&a.paneLocked||""}`.trim();return jsx(Ne.Provider,{value:E,children:jsxs("div",{ref:j,className:l,style:{position:"relative",width:"100%",height:"100%",...n},children:[t(N),V&&jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:["top","bottom","left","right"].map(p=>jsx(st,{id:`drop-${p}-${e}`,position:p,activeClassName:a.dropPreview},p))}),i!==null&&i!==e&&q&&jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:jsx(st,{id:`drop-locked-${e}`,position:"full",activeClassName:a.lockedPreview||""})})]})})};var sn=({children:e,className:t,style:n})=>{let s=useContext(Ne);if(!s)throw new Error("<DragHandle> must be used inside a <Pane>");let{disabled:r,...o}=s;return jsx("div",{className:t,style:{cursor:r?"default":"grab",userSelect:r?"auto":"none",touchAction:r?"auto":"none",...n},...r?{}:o,children:e})};var un=({id:e,locked:t=false,children:n,className:s,style:r})=>{let{locked:o,classNames:i={},overTabId:a,overTabPosition:u}=re(),f=t||o,{attributes:I,listeners:b,setNodeRef:v,isDragging:R}=useDraggable({id:`tab-header-${e}`,disabled:f}),{setNodeRef:y,isOver:M}=useDroppable({id:`tab-drop-${e}`,disabled:f}),m=C=>{v(C),y(C);},D=M&&a===e,g=D?u:null;return jsxs("div",{ref:m,className:s,style:{display:"inline-flex",position:"relative",cursor:f?"default":"grab",...r},...f?{}:b,...f?{}:I,children:[n({isDragging:R,isOver:D}),D&&g&&jsx("div",{className:i.tabDropPreview||"",style:{position:"absolute",top:0,bottom:0,width:"2px",backgroundColor:"#6366f1",left:g==="before"?0:void 0,right:g==="after"?0:void 0,pointerEvents:"none",zIndex:10}})]})};export{pt as DEFAULT_DRAG_ACTIVATION_DISTANCE,gn as DEFAULT_RESIZER_SIZE,dt as DEFAULT_SNAP_THRESHOLD,sn as DragHandle,nn as Pane,Ot as PaneTree,xe as PortalRegistryContext,rt as ResizableContainer,un as Tab,Lt as Zeugma,ze as ZeugmaActionsContext,Me as ZeugmaStateContext,Ve as addPane,se as computeLayout,Te as createDragSession,ee as findPaneById,G as findPaneContainingTab,ie as generateUniqueId,We as mergeTab,Ue as moveTab,ue as removePane,ae as removeTab,be as safeJsonStringify,ye as selectTab,me as splitPane,Pe as updatePaneLock,de as updateSplitPercentage,he as updateTabMetadata,Ze as useResizer,mt as useZeugma,Se as useZeugmaActions,gt as useZeugmaContext,re as useZeugmaState};//# sourceMappingURL=index.js.map
|
|
7
7
|
//# sourceMappingURL=index.js.map
|