react-zeugma 2.3.0 → 3.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 +46 -13
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +101 -16
- package/dist/index.d.ts +101 -16
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -12
package/README.md
CHANGED
|
@@ -105,7 +105,7 @@ The context provider that sets up the drag-and-drop state machine, monitors acti
|
|
|
105
105
|
| `renderPane` | `(paneId: string) => ReactNode` | Yes | Renderer function lookup that returns a `<Pane>` structure. |
|
|
106
106
|
| `classNames` | `ZeugmaClassNames` | No | Custom classes for overriding pane, resizer, and drop preview overlays. |
|
|
107
107
|
| `fullscreenPaneId` | `string \| null` | No | Active ID of the pane taking full viewport coverage. |
|
|
108
|
-
| `renderDragOverlay` | `(activeId: string) => ReactNode`
|
|
108
|
+
| `renderDragOverlay` | `(activeId: string, type: 'pane' \| 'tab') => ReactNode` | No | Renders a custom cursor-following drag preview overlay. |
|
|
109
109
|
| `onFullscreenChange` | `(paneId: string \| null) => void` | No | Callback triggered when a pane enters or leaves fullscreen. |
|
|
110
110
|
| `onRemove` | `(paneId: string) => void` | No | Callback triggered when a pane is closed/removed from the layout tree. |
|
|
111
111
|
| `dragActivationDistance` | `number` | No | Minimum pointer drag distance (in pixels) required to activate dragging. Defaults to `8`. |
|
|
@@ -119,6 +119,7 @@ The context provider that sets up the drag-and-drop state machine, monitors acti
|
|
|
119
119
|
| `onResizeEnd` | `(currentNode: SplitNode, percentage: number) => void` | No | Callback triggered when resizing ends on a split node. |
|
|
120
120
|
| `minSplitPercentage` | `number` | No | Minimum resizing limit percentage. Defaults to `5`. |
|
|
121
121
|
| `maxSplitPercentage` | `number` | No | Maximum resizing limit percentage. Defaults to `95`. |
|
|
122
|
+
| `renderWidget` | `(tabId: string) => ReactNode` | No | Render function mapping tab IDs to React elements. Used to render tab widgets inside portals. |
|
|
122
123
|
|
|
123
124
|
### `<PaneTree>`
|
|
124
125
|
|
|
@@ -140,12 +141,13 @@ Wraps the individual pane components inside the renderer. Utilizes a render prop
|
|
|
140
141
|
|
|
141
142
|
#### Render Props: `PaneRenderProps`
|
|
142
143
|
|
|
143
|
-
| Parameter | Type
|
|
144
|
-
| ------------------ |
|
|
145
|
-
| `isDragging` | `boolean`
|
|
146
|
-
| `isFullscreen` | `boolean`
|
|
147
|
-
| `toggleFullscreen` | `() => void`
|
|
148
|
-
| `remove` | `() => void`
|
|
144
|
+
| Parameter | Type | Description |
|
|
145
|
+
| ------------------ | ----------------- | -------------------------------------------------------------------------------- |
|
|
146
|
+
| `isDragging` | `boolean` | Returns `true` if the node wrapper is actively being dragged. |
|
|
147
|
+
| `isFullscreen` | `boolean` | Returns `true` if the pane is zoomed/fullscreen. |
|
|
148
|
+
| `toggleFullscreen` | `() => void` | Callback to toggle fullscreen viewport coverage. |
|
|
149
|
+
| `remove` | `() => void` | Triggers removal of this pane from the layout tree. |
|
|
150
|
+
| `renderActiveTab` | `() => ReactNode` | Renders the target placeholder element for the currently active tab in the pane. |
|
|
149
151
|
|
|
150
152
|
### `<DragHandle>`
|
|
151
153
|
|
|
@@ -267,6 +269,16 @@ export interface PaneRenderProps {
|
|
|
267
269
|
updateMetadata: (
|
|
268
270
|
updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined,
|
|
269
271
|
) => void
|
|
272
|
+
tabs: string[]
|
|
273
|
+
activeTabId: string
|
|
274
|
+
selectTab: (tabId: string) => void
|
|
275
|
+
removeTab: (tabId: string) => void
|
|
276
|
+
tabsMetadata: Record<string, Record<string, unknown>> | undefined
|
|
277
|
+
updateTabMetadata: (
|
|
278
|
+
tabId: string,
|
|
279
|
+
updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined,
|
|
280
|
+
) => void
|
|
281
|
+
renderActiveTab: () => ReactNode
|
|
270
282
|
}
|
|
271
283
|
|
|
272
284
|
export interface ZeugmaStateValue {
|
|
@@ -299,10 +311,15 @@ export interface ZeugmaActionsValue {
|
|
|
299
311
|
paneToAdd: string,
|
|
300
312
|
) => void
|
|
301
313
|
updateSplitPercentage: (currentNode: SplitNode, percentage: number) => void
|
|
302
|
-
|
|
303
|
-
|
|
314
|
+
updateTabMetadata: (
|
|
315
|
+
tabId: string,
|
|
304
316
|
updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined,
|
|
305
317
|
) => void
|
|
318
|
+
updatePaneLock: (paneId: string, locked: boolean) => void
|
|
319
|
+
selectTab: (paneId: string, tabId: string) => void
|
|
320
|
+
mergeTab: (draggedTabId: string, targetPaneId: string) => void
|
|
321
|
+
moveTab: (draggedTabId: string, targetTabId: string, position?: 'before' | 'after') => void
|
|
322
|
+
removeTab: (tabId: string) => void
|
|
306
323
|
}
|
|
307
324
|
```
|
|
308
325
|
|
|
@@ -366,7 +383,7 @@ The root context provider. It handles the drag-and-drop event loop and coordinat
|
|
|
366
383
|
- `layout: TreeNode | null` — The current dashboard layout tree.
|
|
367
384
|
- `onChange: (newLayout: TreeNode | null) => void` — Callback triggered when the layout tree changes (resizing, dragging to split, dragging to swap).
|
|
368
385
|
- `renderPane: (paneId: string) => ReactNode` — Callback to render the contents of a pane given its ID.
|
|
369
|
-
- `renderDragOverlay?: (activeId: string) => ReactNode` — (Optional) Renders a custom cursor-following drag preview.
|
|
386
|
+
- `renderDragOverlay?: (activeId: string, type: 'pane' | 'tab') => ReactNode` — (Optional) Renders a custom cursor-following drag preview.
|
|
370
387
|
- `classNames?: ZeugmaClassNames` — (Optional) CSS class overrides for styling various layout elements.
|
|
371
388
|
- `fullscreenPaneId?: string | null` — (Optional) ID of the pane currently in fullscreen mode.
|
|
372
389
|
- `onFullscreenChange?: (paneId: string | null) => void` — (Optional) Callback triggered when a pane enters/leaves fullscreen.
|
|
@@ -382,6 +399,7 @@ The root context provider. It handles the drag-and-drop event loop and coordinat
|
|
|
382
399
|
- `onResizeEnd?: (currentNode: SplitNode, percentage: number) => void` — (Optional) Callback triggered when resizing ends.
|
|
383
400
|
- `minSplitPercentage?: number` — (Optional) Minimum resizing limit percentage (defaults to `5`).
|
|
384
401
|
- `maxSplitPercentage?: number` — (Optional) Maximum resizing limit percentage (defaults to `95`).
|
|
402
|
+
- `renderWidget?: (tabId: string) => ReactNode` — (Optional) Render function mapping tab IDs to React elements. Used to render tab widgets inside portals.
|
|
385
403
|
|
|
386
404
|
### `<PaneTree>`
|
|
387
405
|
|
|
@@ -413,6 +431,16 @@ interface PaneRenderProps {
|
|
|
413
431
|
updateMetadata: (
|
|
414
432
|
updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined,
|
|
415
433
|
) => void
|
|
434
|
+
tabs: string[]
|
|
435
|
+
activeTabId: string
|
|
436
|
+
selectTab: (tabId: string) => void
|
|
437
|
+
removeTab: (tabId: string) => void
|
|
438
|
+
tabsMetadata: Record<string, Record<string, unknown>> | undefined
|
|
439
|
+
updateTabMetadata: (
|
|
440
|
+
tabId: string,
|
|
441
|
+
updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined,
|
|
442
|
+
) => void
|
|
443
|
+
renderActiveTab: () => ReactNode
|
|
416
444
|
}
|
|
417
445
|
```
|
|
418
446
|
|
|
@@ -454,8 +482,8 @@ Import these helpers from `react-zeugma` to manipulate the tree layout programma
|
|
|
454
482
|
Splits a specific target pane by nesting it under a new `SplitNode` along with a new pane.
|
|
455
483
|
- **`swapPanes(tree: TreeNode | null, idA: string, idB: string): TreeNode | null`**
|
|
456
484
|
Swaps the positions of two panes in the tree.
|
|
457
|
-
- **`
|
|
458
|
-
Updates the metadata of a specific
|
|
485
|
+
- **`updateTabMetadata(tree: TreeNode | null, tabId: string, updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined): TreeNode | null`**
|
|
486
|
+
Updates the metadata of a specific tab.
|
|
459
487
|
- **`findPane(tree: TreeNode | null, paneId: string): PaneNode | null`**
|
|
460
488
|
Recursively searches the layout tree and returns the target `PaneNode` if found, or `null` otherwise.
|
|
461
489
|
|
|
@@ -471,7 +499,12 @@ The actions returned by `useZeugmaActions()` are:
|
|
|
471
499
|
- **`swapPanes(paneIdA: string, paneIdB: string) => void`**
|
|
472
500
|
- **`splitPane(targetId: string, direction: SplitDirection, splitType: string, paneToAdd: string) => void`**
|
|
473
501
|
- **`updateSplitPercentage(currentNode: SplitNode, percentage: number) => void`**
|
|
474
|
-
- **`
|
|
502
|
+
- **`updateTabMetadata(tabId: string, updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined) => void`**
|
|
503
|
+
- **`updatePaneLock(paneId: string, locked: boolean) => void`**
|
|
504
|
+
- **`selectTab(paneId: string, tabId: string) => void`**
|
|
505
|
+
- **`mergeTab(draggedTabId: string, targetPaneId: string) => void`**
|
|
506
|
+
- **`moveTab(draggedTabId: string, targetTabId: string, position?: 'before' | 'after') => void`**
|
|
507
|
+
- **`removeTab(tabId: string) => void`**
|
|
475
508
|
|
|
476
509
|
---
|
|
477
510
|
|
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
'use strict';var react=require('react'),core=require('@dnd-kit/core'),jsxRuntime=require('react/jsx-runtime');var ve=react.createContext(void 0),be=react.createContext(void 0);var G=()=>{let e=react.useContext(ve);if(!e)throw new Error("useZeugmaState must be used within a Zeugma provider");return e},Te=()=>{let e=react.useContext(be);if(!e)throw new Error("useZeugmaActions must be used within a Zeugma provider");return e};function Ue(e){let t=react.useRef(null);return react.useEffect(()=>{if(!e){t.current=null;return}let o=n=>{t.current={x:n.clientX,y:n.clientY};},r=n=>{let i=n.touches[0]||n.changedTouches[0];i&&(t.current={x:i.clientX,y:i.clientY});};return window.addEventListener("pointermove",o,{passive:true}),window.addEventListener("touchmove",r,{passive:true}),()=>{window.removeEventListener("pointermove",o),window.removeEventListener("touchmove",r);}},[e]),t}function We(e){react.useEffect(()=>(e?document.body.style.setProperty("cursor","not-allowed","important"):document.body.style.removeProperty("cursor"),()=>{document.body.style.removeProperty("cursor");}),[e]);}function ae(e,t){if(e===null)return null;if(e.type==="pane")return e.paneId===t?null:e;let o=ae(e.first,t),r=ae(e.second,t);return o===null?r:r===null?o:{...e,first:o,second:r}}function ue(e,t,o,r,n){if(e===null)return typeof n=="string"?{type:"pane",paneId:n}:n;if(e.type==="pane"){if(e.paneId===t){let i=typeof n=="string"?{type:"pane",paneId:n}:n,s=r==="left"||r==="top";return {type:"split",direction:o,first:s?i:e,second:s?e:i,splitPercentage:50}}return e}return {...e,first:ue(e.first,t,o,r,n)||e.first,second:ue(e.second,t,o,r,n)||e.second}}function ze(e,t,o){if(e===null)return null;let r=B(e,t),n=B(e,o);if(!r||!n)return e;function i(s){return s.type==="pane"?s.paneId===t?{...n}:s.paneId===o?{...r}:s:{...s,first:i(s.first),second:i(s.second)}}return i(e)}function Be(e,t){if(e===null)return {type:"pane",paneId:t};function o(r,n){return r.type==="pane"?{type:"split",direction:n==="row"?"column":"row",splitPercentage:50,first:r,second:{type:"pane",paneId:t}}:{...r,second:o(r.second,r.direction)}}return o(e,null)}function te(e,t,o){return e===null?null:e===t?{...e,splitPercentage:o}:e.type==="split"?{...e,first:te(e.first,t,o)||e.first,second:te(e.second,t,o)||e.second}:e}function B(e,t){return e===null?null:e.type==="pane"?e.paneId===t?e:null:B(e.first,t)??B(e.second,t)}function he(e,t,o){if(e===null)return null;if(e.type==="pane"){if(e.paneId===t){let r=o(e.metadata);if(r===void 0){let{metadata:n,...i}=e;return i}return {...e,metadata:r}}return e}return {...e,first:he(e.first,t,o)??e.first,second:he(e.second,t,o)??e.second}}function Pe(e,t,o){if(e===null)return null;if(e.type==="pane"){if(e.paneId===t){if(o===false){let{locked:r,...n}=e;return n}return {...e,locked:o}}return e}return {...e,first:Pe(e.first,t,o)??e.first,second:Pe(e.second,t,o)??e.second}}var st=8,at=8,Xt=4;var Xe=({activeId:e,render:t,className:o})=>{let r=react.useRef(null);return react.useEffect(()=>{let n=i=>{r.current&&(r.current.style.transform=`translate(${i.clientX+12}px, ${i.clientY+12}px)`);};return document.addEventListener("pointermove",n),()=>document.removeEventListener("pointermove",n)},[]),jsxRuntime.jsx("div",{ref:r,className:o,style:{position:"fixed",top:0,left:0,zIndex:9999,pointerEvents:"none"},children:t(e)})};var xe=class extends core.PointerSensor{static activators=[{eventName:"onPointerDown",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},ye=class extends core.TouchSensor{static activators=[{eventName:"onTouchStart",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]};function Ke(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 vt=({layout:e,onChange:t,renderPane:o,renderDragOverlay:r,classNames:n={},fullscreenPaneId:i=null,onFullscreenChange:s,onRemove:c,dragActivationDistance:x=8,snapThreshold:y=8,onDragStart:z,onDragEnd:a,onResizeStart:R,onResize:m,onResizeEnd:d,minSplitPercentage:E=5,maxSplitPercentage:L=95,enableDragToDismiss:S=false,dismissThreshold:f=60,onDismissIntentChange:v,locked:w=false,children:D})=>{let[u,b]=react.useState(e),[X,N]=react.useState(e);e!==X&&(N(e),b(e));let[k,Z]=react.useState(null),[I,C]=react.useState(null),Y=react.useRef(null),g=react.useRef(null),A=Ue(k),W=react.useCallback(l=>{Y.current=l;},[]),[O,M]=react.useState(false);We(O);let H=react.useCallback(l=>o(l),[o]),oe=react.useMemo(()=>n,[n.pane,n.paneLocked,n.dropPreview,n.swapPreview,n.dragOverlay,n.resizer,n.dismissPreview,n.dashboardLocked,n.lockedPreview]),Le=core.useSensors(core.useSensor(xe,{activationConstraint:{distance:x}}),core.useSensor(ye,{activationConstraint:{delay:250,tolerance:5}})),me=l=>{let p=l.active.id.toString();Z(p);let T=l.activatorEvent;A.current=Ke(T),S&&Y.current?g.current=Y.current.getBoundingClientRect():g.current=null,z&&z(p);},re=l=>{let{over:p}=l,P=(p?.id.toString()||"").startsWith("drop-locked-");if(M(P),!S)return;let K=l.active.id.toString(),h=g.current;if(!h){I!==null&&(C(null),v?.(null));return}let J=l.activatorEvent,U=null,F=null;if(A.current)U=A.current.x,F=A.current.y;else {let $=Ke(J);$&&(U=$.x+l.delta.x,F=$.y+l.delta.y);}let Q=0;if(U!==null&&F!==null){let $=0,V=0;U<h.left?$=h.left-U:U>h.right&&($=U-h.right),F<h.top?V=h.top-F:F>h.bottom&&(V=F-h.bottom),Q=Math.sqrt($*$+V*V);}else {let $=l.active.rect.current.translated;if($){let V=$.left+$.width/2,j=$.top+$.height/2,q=0,ee=0;V<h.left?q=h.left-V:V>h.right&&(q=V-h.right),j<h.top?ee=h.top-j:j>h.bottom&&(ee=j-h.bottom),Q=Math.sqrt(q*q+ee*ee);}}Q>f?I!==K&&(C(K),v?.(K)):I!==null&&(C(null),v?.(null));},ge=l=>{Z(null),M(false);let{active:p,over:T}=l,P=p.id.toString(),K=S&&I===P;if(C(null),v?.(null),g.current=null,K){c?c(P):le(P),a&&a(P,null,null);return}if(!T){a&&a(P,null,null);return}let h=T.id.toString();if(h.startsWith("drop-locked-")){a&&a(P,null,null);return}let J=h.match(/^drop-center-(.+)$/);if(J){let[,q]=J;if(P!==q){let ee=ze(u,P,q);b(ee),t(ee);}a&&a(P,q,{type:"swap",position:"center"});return}let U=h.match(/^drop-(left|right|top|bottom)-(.+)$/);if(!U){a&&a(P,null,null);return}let[,F,Q]=U;if(P===Q){a&&a(P,null,null);return}let Ne=F==="left"||F==="right"?"row":"column",$=B(u,P)??{type:"pane",paneId:P},V=ae(u,P),j=ue(V,Q,Ne,F,$);b(j),t(j),a&&a(P,Q,{type:"split",direction:Ne,position:F});},ie=react.useCallback((l,p=false)=>{b(l),p||t(l);},[t]),le=react.useCallback(l=>{let p=ae(u,l);b(p),t(p);},[u,t]),ce=react.useCallback(l=>{let p=Be(u,l);b(p),t(p);},[u,t]),se=react.useCallback((l,p)=>{let T=ze(u,l,p);b(T),t(T);},[u,t]),Ae=react.useCallback((l,p,T,P)=>{let K=B(u,P)??{type:"pane",paneId:P},h=ae(u,P),J=ue(h,l,p,T,K);b(J),t(J);},[u,t]),ke=react.useCallback((l,p)=>{let T=te(u,l,p);b(T),t(T);},[u,t]),He=react.useCallback((l,p)=>{let T=he(u,l,p);b(T),t(T);},[u,t]),Fe=react.useCallback((l,p)=>{let T=Pe(u,l,p);b(T),t(T);},[u,t]),Oe=react.useCallback((l,p)=>{d&&d(l,p);},[d]),ot=react.useMemo(()=>({layout:u,onLayoutChange:ie,renderPane:H,activeId:k,dismissIntentId:I,setContainerRef:W,fullscreenPaneId:i,classNames:oe,onRemove:c,onFullscreenChange:s,snapThreshold:y,onResizeStart:R,onResize:m,onResizeEnd:Oe,minSplitPercentage:E,maxSplitPercentage:L,locked:w}),[u,k,I,W,i,oe,c,s,y,R,m,E,L,ie,H,Oe,w]),rt=react.useMemo(()=>({removePane:le,addPane:ce,swapPanes:se,splitPane:Ae,updateSplitPercentage:ke,updatePaneMetadata:He,updatePaneLock:Fe}),[le,ce,se,Ae,ke,He,Fe]);return jsxRuntime.jsx(be.Provider,{value:rt,children:jsxRuntime.jsxs(ve.Provider,{value:ot,children:[jsxRuntime.jsx(core.DndContext,{id:"zeugma-dnd-context",sensors:Le,collisionDetection:core.pointerWithin,onDragStart:me,onDragMove:re,onDragEnd:ge,children:D}),k&&r&&jsxRuntime.jsx(Xe,{activeId:k,render:r,className:`${n.dragOverlay||""} ${k===I?n.dismissPreview||"zeugma-dismiss-preview":""}`.trim()})]})})};function Se({cursor:e,resizerEl:t,onMove:o,onEnd:r}){document.body.classList.add("zeugma-resizing");let n=document.createElement("style");n.id="zeugma-global-cursor-style",n.textContent=`
|
|
1
|
+
'use strict';var nn=require('react'),reactDom=require('react-dom'),core=require('@dnd-kit/core'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var nn__default=/*#__PURE__*/_interopDefault(nn);var De=nn.createContext(void 0),Me=nn.createContext(void 0);var Q=()=>{let e=nn.useContext(De);if(!e)throw new Error("useZeugmaState must be used within a Zeugma provider");return e},We=()=>{let e=nn.useContext(Me);if(!e)throw new Error("useZeugmaActions must be used within a Zeugma provider");return e};function bt(e){let t=nn.useRef(null);return nn.useEffect(()=>{if(!e){t.current=null;return}let r=n=>{t.current={x:n.clientX,y:n.clientY};},i=n=>{let o=n.touches[0]||n.changedTouches[0];o&&(t.current={x:o.clientX,y:o.clientY});};return window.addEventListener("pointermove",r,{passive:true}),window.addEventListener("touchmove",i,{passive:true}),()=>{window.removeEventListener("pointermove",r),window.removeEventListener("touchmove",i);}},[e]),t}function gt(e){nn.useEffect(()=>(e?document.body.style.setProperty("cursor","not-allowed","important"):document.body.style.removeProperty("cursor"),()=>{document.body.style.removeProperty("cursor");}),[e]);}function vt(){let[e,t]=nn.useState({}),r=nn.useCallback((i,n)=>{t(o=>o[i]===n?o:{...o,[i]:n});},[]);return {portalTargets:e,registerPortalTarget:r}}var Ce=nn.createContext(void 0);function he(e,t){if(e===null)return null;if(e.type==="pane")return e.id===t?null:e;let r=he(e.first,t),i=he(e.second,t);return r===null?i:i===null?r:{...e,first:r,second:i}}function de(e,t){if(e===null)return null;if(e.type==="pane"){if(e.tabs.includes(t)){let n=e.tabs.filter(s=>s!==t);if(n.length===0)return null;let o=e.activeTabId;return e.activeTabId===t&&(o=n[0]),{...e,tabs:n,activeTabId:o}}return e}let r=de(e.first,t),i=de(e.second,t);return r===null?i:i===null?r:{...e,first:r,second:i}}function we(e,t,r,i,n){if(e===null)return typeof n=="string"?{type:"pane",id:n,tabs:[n],activeTabId:n}:n;if(e.type==="pane"){if(e.id===t||e.tabs.includes(t)){let o=typeof n=="string"?{type:"pane",id:n,tabs:[n],activeTabId:n}:n,s=i==="left"||i==="top";return {type:"split",direction:r,first:s?o:e,second:s?e:o,splitPercentage:50}}return e}return {...e,first:we(e.first,t,r,i,n)||e.first,second:we(e.second,t,r,i,n)||e.second}}function _e(e,t,r){if(e===null)return null;let i=_(e,t),n=_(e,r);if(!i||!n)return e;function o(s){return s.type==="pane"?s.id===i.id?{...n}:s.id===n.id?{...i}:s:{...s,first:o(s.first),second:o(s.second)}}return o(e)}function ht(e,t){if(e===null)return {type:"pane",id:t,tabs:[t],activeTabId:t};function r(i,n){return i.type==="pane"?{type:"split",direction:n==="row"?"column":"row",splitPercentage:50,first:i,second:{type:"pane",id:t,tabs:[t],activeTabId:t}}:{...i,second:r(i.second,i.direction)}}return r(e,null)}function pe(e,t,r){return e===null?null:e===t?{...e,splitPercentage:r}:e.type==="split"?{...e,first:pe(e.first,t,r)||e.first,second:pe(e.second,t,r)||e.second}:e}function _(e,t){return e===null?null:e.type==="pane"?e.id===t||e.tabs.includes(t)?e:null:_(e.first,t)??_(e.second,t)}function ze(e,t,r){if(e===null)return null;if(e.type==="pane"){if(e.id===t||e.tabs.includes(t)){let i=e.tabsMetadata||{},n=i[t],o=r(n),s={...i};return o===void 0?delete s[t]:s[t]=o,{...e,tabsMetadata:Object.keys(s).length>0?s:void 0}}return e}return {...e,first:ze(e.first,t,r)??e.first,second:ze(e.second,t,r)??e.second}}function $e(e,t,r){if(e===null)return null;if(e.type==="pane"){if(e.id===t||e.tabs.includes(t)){if(r===false){let{locked:i,...n}=e;return n}return {...e,locked:r}}return e}return {...e,first:$e(e.first,t,r)??e.first,second:$e(e.second,t,r)??e.second}}function Ie(e,t,r){return e===null?null:e.type==="pane"?e.id===t||e.tabs.includes(t)?{...e,activeTabId:r}:e:{...e,first:Ie(e.first,t,r)??e.first,second:Ie(e.second,t,r)??e.second}}function Pt(e,t,r){if(e===null)return null;let n=_(e,t)?.tabsMetadata?.[t],o=de(e,t);if(o===null)return {type:"pane",id:t,tabs:[t],activeTabId:t,tabsMetadata:n?{[t]:n}:void 0};function s(c){if(c.type==="pane"){if(c.id===r||c.tabs.includes(r)){let d=[...c.tabs];d.includes(t)||d.push(t);let T={...c.tabsMetadata};return n&&(T[t]=n),{...c,tabs:d,activeTabId:t,tabsMetadata:Object.keys(T).length>0?T:void 0}}return c}return {...c,first:s(c.first),second:s(c.second)}}return s(o)}function Ye(e,t,r,i="before"){if(e===null)return null;let o=_(e,t)?.tabsMetadata?.[t],s=de(e,t);if(s===null)return {type:"pane",id:t,tabs:[t],activeTabId:t,tabsMetadata:o?{[t]:o}:void 0};function c(d){if(d.type==="pane"){if(d.id===r||d.tabs.includes(r)){let S=[...d.tabs].filter(x=>x!==t),g=S.indexOf(r);g<0&&(g=0),i==="after"&&(g+=1),S.splice(g,0,t);let p={...d.tabsMetadata};return o&&(p[t]=o),{...d,tabs:S,activeTabId:t,tabsMetadata:Object.keys(p).length>0?p:void 0}}return d}return {...d,first:c(d.first),second:c(d.second)}}return c(s)}function j(e,t=0,r=0,i=100,n=100,o="root"){if(e===null)return {panes:[],splitters:[]};if(e.type==="pane")return {panes:[{paneId:e.id,left:t,top:r,width:i,height:n,node:e}],splitters:[]};let{direction:s,splitPercentage:c,first:d,second:T}=e,g={id:`splitter-${o}-${s}`,currentNode:e,direction:s,left:s==="row"?t+i*(c/100):t,top:s==="column"?r+n*(c/100):r,width:s==="row"?0:i,height:s==="column"?0:n,parentLeft:t,parentTop:r,parentWidth:i,parentHeight:n},p={panes:[],splitters:[]},x={panes:[],splitters:[]};if(s==="row"){let P=i*(c/100);p=j(d,t,r,P,n,`${o}-L`),x=j(T,t+P,r,i-P,n,`${o}-R`);}else {let P=n*(c/100);p=j(d,t,r,i,P,`${o}-T`),x=j(T,t,r+P,i,n-P,`${o}-B`);}return {panes:[...p.panes,...x.panes],splitters:[g,...p.splitters,...x.splitters]}}var Ot=8,Vt=8,Vn=4;var yt=({activeId:e,render:t,className:r})=>{let i=nn.useRef(null);return nn.useEffect(()=>{let n=o=>{i.current&&(i.current.style.transform=`translate(${o.clientX+12}px, ${o.clientY+12}px)`);};return document.addEventListener("pointermove",n),()=>document.removeEventListener("pointermove",n)},[]),jsxRuntime.jsx("div",{ref:i,className:r,style:{position:"fixed",top:0,left:0,zIndex:9999,pointerEvents:"none"},children:t(e)})};var ke=class extends core.PointerSensor{static activators=[{eventName:"onPointerDown",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},He=class extends core.TouchSensor{static activators=[{eventName:"onTouchStart",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]};function Be(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 Qt=({layout:e,onChange:t,renderPane:r,renderWidget:i,renderDragOverlay:n,classNames:o={},fullscreenPaneId:s=null,onFullscreenChange:c,onRemove:d,dragActivationDistance:T=8,snapThreshold:S=8,onDragStart:g,onDragEnd:p,onResizeStart:x,onResize:P,onResizeEnd:E,minSplitPercentage:N=5,maxSplitPercentage:$=95,enableDragToDismiss:b=false,dismissThreshold:y=60,onDismissIntentChange:R,locked:I=false,children:B})=>{let[l,w]=nn.useState(e),[k,ee]=nn.useState(e);e!==k&&(ee(e),w(e));let[D,V]=nn.useState(null),[q,Y]=nn.useState(null),[v,H]=nn.useState(null),{portalTargets:G,registerPortalTarget:F}=vt(),M=nn.useRef(null),f=nn.useRef(null),O=bt(D),me=nn.useCallback(a=>{M.current=a;},[]),[U,le]=nn.useState(false);gt(U);let xe=nn.useCallback(a=>r(a),[r]),be=nn.useMemo(()=>o,[o.pane,o.paneLocked,o.dropPreview,o.swapPreview,o.dragOverlay,o.resizer,o.dismissPreview,o.dashboardLocked,o.lockedPreview]),Se=core.useSensors(core.useSensor(ke,{activationConstraint:{distance:T}}),core.useSensor(He,{activationConstraint:{delay:250,tolerance:5}})),ge=nn.useCallback(a=>{let u=core.pointerWithin(a);if(u.length>0)return u;if(a.active.id.toString().startsWith("tab-header-")){let C=a.droppableContainers.filter(W=>W.id.toString().startsWith("tab-drop-"));return core.closestCenter({...a,droppableContainers:C})}return []},[]),ce=a=>{let u=a.active.id.toString(),m=u.startsWith("tab-header-"),C=m?u.substring(11):u;V(C),Y(m?"tab":"pane");let W=a.activatorEvent;O.current=Be(W),b&&M.current?f.current=M.current.getBoundingClientRect():f.current=null,g&&g(C);},te=a=>{let{over:u}=a,C=(u?.id.toString()||"").startsWith("drop-locked-");if(le(C),!b)return;let W=a.active.id.toString(),ne=W.startsWith("tab-header-")?W.substring(11):W,L=f.current;if(!L){v!==null&&(H(null),R?.(null));return}let Ee=a.activatorEvent,K=null,J=null;if(O.current)K=O.current.x,J=O.current.y;else {let z=Be(Ee);z&&(K=z.x+a.delta.x,J=z.y+a.delta.y);}let re=0;if(K!==null&&J!==null){let z=0,X=0;K<L.left?z=L.left-K:K>L.right&&(z=K-L.right),J<L.top?X=L.top-J:J>L.bottom&&(X=J-L.bottom),re=Math.sqrt(z*z+X*X);}else {let z=a.active.rect.current.translated;if(z){let X=z.left+z.width/2,ve=z.top+z.height/2,ue=0,oe=0;X<L.left?ue=L.left-X:X>L.right&&(ue=X-L.right),ve<L.top?oe=L.top-ve:ve>L.bottom&&(oe=ve-L.bottom),re=Math.sqrt(ue*ue+oe*oe);}}re>y?v!==ne&&(H(ne),R?.(ne)):v!==null&&(H(null),R?.(null));},A=a=>{V(null),Y(null),le(false);let{active:u,over:m}=a,C=u.id.toString(),W=C.startsWith("tab-header-"),h=W?C.substring(11):C,ne=b&&v===h;if(H(null),R?.(null),f.current=null,ne){d?d(h):Ve(h),p&&p(h,null,null);return}if(!m){p&&p(h,null,null);return}let L=m.id.toString();if(L.startsWith("drop-locked-")){p&&p(h,null,null);return}let Ee=L.match(/^tab-drop-(.+)$/);if(Ee){let[,ie]=Ee;if(h!==ie){let se="before",ut=m.rect,kt=a.activatorEvent,Le=null;if(O.current)Le=O.current.x;else {let Ne=Be(kt);Ne&&(Le=Ne.x+a.delta.x);}if(Le!==null){let Ne=ut.left+ut.width/2;Le>Ne&&(se="after");}let dt=Ye(l,h,ie,se);w(dt),t(dt);}p&&p(h,ie,{type:"swap",position:"center"});return}let K=L.match(/^drop-center-(.+)$/);if(K){let[,ie]=K;if(h!==ie){let se=_e(l,h,ie);w(se),t(se);}p&&p(h,ie,{type:"swap",position:"center"});return}let J=L.match(/^drop-(left|right|top|bottom)-(.+)$/);if(!J){p&&p(h,null,null);return}let[,re,Te]=J,z=_(l,h),X=z&&z.id===Te,ve=z&&z.tabs.length===1;if(h===Te||X&&ve){p&&p(h,null,null);return}let ue=re==="left"||re==="right"?"row":"column",oe;if(W){let se=_(l,h)?.tabsMetadata?.[h];oe={type:"pane",id:h,tabs:[h],activeTabId:h,tabsMetadata:se?{[h]:se}:void 0};}else oe=_(l,h)??{type:"pane",id:h,tabs:[h],activeTabId:h};let It=W?de(l,h):he(l,h),ct=we(It,Te,ue,re,oe);w(ct),t(ct),p&&p(h,Te,{type:"split",direction:ue,position:re});},Je=nn.useCallback((a,u=false)=>{w(a),u||t(a);},[t]),Qe=nn.useCallback(a=>{let u=he(l,a);w(u),t(u);},[l,t]),je=nn.useCallback(a=>{let u=ht(l,a);w(u),t(u);},[l,t]),et=nn.useCallback((a,u)=>{let m=_e(l,a,u);w(m),t(m);},[l,t]),tt=nn.useCallback((a,u,m,C)=>{let W=_(l,C)??{type:"pane",id:C,tabs:[C],activeTabId:C},h=he(l,C),ne=we(h,a,u,m,W);w(ne),t(ne);},[l,t]),nt=nn.useCallback((a,u)=>{let m=Ie(l,a,u);w(m),t(m);},[l,t]),rt=nn.useCallback((a,u)=>{let m=Pt(l,a,u);w(m),t(m);},[l,t]),ot=nn.useCallback((a,u,m)=>{let C=Ye(l,a,u,m);w(C),t(C);},[l,t]),Ve=nn.useCallback(a=>{let u=de(l,a);w(u),t(u);},[l,t]),it=nn.useCallback((a,u)=>{let m=pe(l,a,u);w(m),t(m);},[l,t]),st=nn.useCallback((a,u)=>{let m=ze(l,a,u);w(m),t(m);},[l,t]),at=nn.useCallback((a,u)=>{let m=$e(l,a,u);w(m),t(m);},[l,t]),lt=nn.useCallback((a,u)=>{E&&E(a,u);},[E]),Mt=nn.useMemo(()=>({layout:l,onLayoutChange:Je,renderPane:xe,activeId:D,dismissIntentId:v,setContainerRef:me,fullscreenPaneId:s,classNames:be,onRemove:d,onFullscreenChange:c,snapThreshold:S,onResizeStart:x,onResize:P,onResizeEnd:lt,minSplitPercentage:N,maxSplitPercentage:$,locked:I}),[l,D,v,me,s,be,d,c,S,x,P,N,$,Je,xe,lt,I]),Ct=nn.useMemo(()=>({removePane:Qe,addPane:je,swapPanes:et,splitPane:tt,updateSplitPercentage:it,updateTabMetadata:st,updatePaneLock:at,selectTab:nt,mergeTab:rt,moveTab:ot,removeTab:Ve}),[Qe,je,et,tt,it,st,at,nt,rt,ot,Ve]),zt=nn.useMemo(()=>{let a=[];function u(m){m&&(m.type==="pane"?a.push(...m.tabs):(u(m.first),u(m.second)));}return u(l),a},[l]),$t=nn.useMemo(()=>({registerPortalTarget:F}),[F]);return jsxRuntime.jsx(Me.Provider,{value:Ct,children:jsxRuntime.jsx(De.Provider,{value:Mt,children:jsxRuntime.jsxs(Ce.Provider,{value:$t,children:[jsxRuntime.jsx(core.DndContext,{id:"zeugma-dnd-context",sensors:Se,collisionDetection:ge,onDragStart:ce,onDragMove:te,onDragEnd:A,children:B}),D&&q&&n&&jsxRuntime.jsx(yt,{activeId:D,render:a=>n(a,q),className:`${o.dragOverlay||""} ${D===v?o.dismissPreview||"zeugma-dismiss-preview":""}`.trim()}),jsxRuntime.jsx("div",{id:"zeugma-portal-host",style:{display:"none"},children:zt.map(a=>jsxRuntime.jsx(jt,{tabId:a,target:G[a]||null,renderWidget:i},a))})]})})})},jt=({tabId:e,target:t,renderWidget:r})=>{let i=nn.useRef(null);!i.current&&typeof window<"u"&&(i.current=document.createElement("div"),i.current.className=`zeugma-portal-wrapper-${e}`,i.current.style.width="100%",i.current.style.height="100%");let n=i.current;return nn.useEffect(()=>{if(n)if(t)t.appendChild(n);else {let o=document.getElementById("zeugma-hidden-portal-container");o||(o=document.createElement("div"),o.id="zeugma-hidden-portal-container",o.style.display="none",document.body.appendChild(o)),o.appendChild(n);}},[t,n]),nn.useEffect(()=>()=>{i.current&&i.current.remove();},[]),!n||!r?null:reactDom.createPortal(r(e),n)};function Ze({cursor:e,resizerEl:t,onMove:r,onEnd:i}){document.body.classList.add("zeugma-resizing");let n=document.createElement("style");n.id="zeugma-global-cursor-style",n.textContent=`
|
|
2
2
|
* {
|
|
3
3
|
cursor: ${e} !important;
|
|
4
4
|
user-select: none !important;
|
|
5
5
|
}
|
|
6
|
-
`,document.head.appendChild(n),t.setAttribute("data-resizing","true");let i=c=>{o(c);},s=()=>{document.body.classList.remove("zeugma-resizing"),t.removeAttribute("data-resizing");let c=document.getElementById("zeugma-global-cursor-style");c&&c.remove(),document.removeEventListener("pointermove",i),document.removeEventListener("pointerup",s),r();};document.addEventListener("pointermove",i),document.addEventListener("pointerup",s);}function Ce({containerRef:e,isRow:t,direction:o,splitPercentage:r,resizerSize:n,snapThreshold:i,layout:s,currentNode:c,onLayoutChange:x,onResizeStart:y,onResizeEnd:z,parentLeft:a,parentTop:R,parentWidth:m,parentHeight:d}){let{onResizeStart:E,onResize:L,onResizeEnd:S,minSplitPercentage:f=5,maxSplitPercentage:v=95,locked:w=false}=G();return react.useCallback(D=>{if(w)return;D.preventDefault();let u=e.current;if(!u)return;y&&y(),E&&E(c);let b=u.getBoundingClientRect(),X=D.clientX,N=D.clientY,k=r,Z=D.currentTarget,I=b.left+b.width*(a/100),C=b.top+b.height*(R/100),Y=b.width*(m/100),g=b.height*(d/100),W=Array.from(document.querySelectorAll('div[role="separator"][data-direction]')).filter(M=>M!==Z&&M.getAttribute("data-direction")===o).map(M=>{let H=M.getBoundingClientRect();return t?H.left+H.width/2:H.top+H.height/2}),O=k;Se({cursor:t?"col-resize":"row-resize",resizerEl:Z,onMove:M=>{let H=t?(M.clientX-X)/Y*100:(M.clientY-N)/g*100,oe=k+H,Le=t?I+(Y-n)*(oe/100)+n/2:C+(g-n)*(oe/100)+n/2,me=1/0,re=null;for(let ce of W){let se=Math.abs(Le-ce);se<i&&se<me&&(me=se,re=ce);}let ge=oe;re!==null&&(ge=t?(re-n/2-I)/(Y-n)*100:(re-n/2-C)/(g-n)*100);let ie=Math.max(f,Math.min(v,ge));O=ie;let le=te(s,c,ie);x(le,true),L&&L(c,ie);},onEnd:()=>{let M=te(s,c,O);x(M),z&&z(),S&&S(c,O);}});},[e,t,o,r,n,i,s,c,x,y,z,E,L,S,f,v,a,R,m,d])}function pe(e,t=0,o=0,r=100,n=100,i="root"){if(e.type==="pane")return {panes:[{paneId:e.paneId,left:t,top:o,width:r,height:n,node:e}],splitters:[]};let{direction:s,splitPercentage:c,first:x,second:y}=e,a={id:`splitter-${i}-${s}`,currentNode:e,direction:s,left:s==="row"?t+r*(c/100):t,top:s==="column"?o+n*(c/100):o,width:s==="row"?0:r,height:s==="column"?0:n,parentLeft:t,parentTop:o,parentWidth:r,parentHeight:n},R={panes:[],splitters:[]},m={panes:[],splitters:[]};if(s==="row"){let d=r*(c/100);R=pe(x,t,o,d,n,`${i}-L`),m=pe(y,t+d,o,r-d,n,`${i}-R`);}else {let d=n*(c/100);R=pe(x,t,o,r,d,`${i}-T`),m=pe(y,t,o+d,r,n-d,`${i}-B`);}return {panes:[...R.panes,...m.panes],splitters:[a,...R.splitters,...m.splitters]}}var St=({splitter:e,resizerSize:t,snapThreshold:o,containerRef:r})=>{let{layout:n,onLayoutChange:i,classNames:s,locked:c}=G(),[x,y]=react.useState(false),{currentNode:z,direction:a,left:R,top:m,width:d,height:E,parentLeft:L,parentTop:S,parentWidth:f,parentHeight:v}=e,w=a==="row",D=Ce({containerRef:r,isRow:w,direction:a,splitPercentage:z.splitPercentage,resizerSize:t,snapThreshold:o,layout:n,currentNode:z,onLayoutChange:i,onResizeStart:()=>y(true),onResizeEnd:()=>y(false),parentLeft:L,parentTop:S,parentWidth:f,parentHeight:v}),u=w?{position:"absolute",left:`calc(${R}% - ${t/2}px)`,top:`${m}%`,width:`${t}px`,height:`${E}%`,cursor:c?"default":"col-resize",pointerEvents:c?"none":"auto",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box"}:{position:"absolute",left:`${R}%`,top:`calc(${m}% - ${t/2}px)`,width:`${d}%`,height:`${t}px`,cursor:c?"default":"row-resize",pointerEvents:c?"none":"auto",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box"};return jsxRuntime.jsx("div",{className:`zeugma-resizer ${s.resizer||""}`.trim(),"data-direction":a,"data-resizing":x||void 0,style:u,onPointerDown:D,role:"separator","aria-valuenow":z.splitPercentage,"aria-valuemin":5,"aria-valuemax":95})},wt=({tree:e,resizerSize:t=4,snapThreshold:o})=>{let{layout:r,renderPane:n,activeId:i,dismissIntentId:s,setContainerRef:c,fullscreenPaneId:x,snapThreshold:y,locked:z,classNames:a}=G(),R=o!==void 0?o:y??8,m=e!==void 0?e:r,d=react.useRef(null),{panes:E,splitters:L}=react.useMemo(()=>m?pe(m):{panes:[],splitters:[]},[m]);if(!m)return null;let S=()=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[E.map(f=>{let v=x===f.paneId;return jsxRuntime.jsx("div",{style:{position:"absolute",left:v?"0%":`${f.left}%`,top:v?"0%":`${f.top}%`,width:v?"100%":`${f.width}%`,height:v?"100%":`${f.height}%`,overflow:"hidden",zIndex:v?20:1,display:x&&!v?"none":"block",padding:v?"0px":`${t/2}px`,boxSizing:"border-box"},children:n(f.paneId)},f.paneId)}),!x&&L.map(f=>jsxRuntime.jsx(St,{splitter:f,resizerSize:t,snapThreshold:R,containerRef:d},f.id))]});if(e===void 0){let f=i!==null&&i===s,v=D=>{c(D),d.current=D;},w=`zeugma-dashboard-root ${f?"zeugma-dashboard-dismiss-active":""} ${z?a.dashboardLocked||"zeugma-dashboard-locked":""}`.trim();return jsxRuntime.jsx("div",{ref:v,className:w,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:S()})}return jsxRuntime.jsx("div",{ref:d,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:S()})};var et="zeugma-height:",Tt="default-pane";function zt(e){try{let t=localStorage.getItem(et+e);if(t!==null){let o=Number(t);if(Number.isFinite(o)&&o>0)return o}}catch{}return null}function je(e,t){try{localStorage.setItem(et+e,String(Math.round(t)));}catch{}}var tt=({children:e,active:t=true,height:o,onHeightChange:r,minHeight:n=100,maxHeight:i=1/0,persist:s,localStorageKey:c,resizerHeight:x=6,className:y,resizerClassName:z})=>{let a=s?c||Tt:null,R=()=>{let w=(a?zt(a):null)??o??400;return we(w,n,i)},[m,d]=react.useState(R),E=react.useRef(null),L=a?m:o??m,S=react.useRef(o);react.useEffect(()=>{if(o!==void 0&&o!==S.current){let w=we(o,n,i);d(w),a&&je(a,w);}S.current=o;},[o,n,i,a]);let f=react.useCallback(()=>i,[i]),v=react.useCallback(w=>{w.preventDefault();let D=w.clientY,u=L,b=f(),X=w.currentTarget,N=nt(E.current),k=N?N.scrollTop:0,Z=D,I=null,C=(g,A)=>{let W=A-k,M=g-D+W,H=we(u+M,n,b);return E.current&&(E.current.style.height=`${H}px`),H},Y=()=>{if(!N)return;let g=N===document.documentElement||N===document.body?{top:0,bottom:window.innerHeight}:N.getBoundingClientRect(),A=40,W=10,O=0;Z>g.bottom-A?O=Math.min(1,(Z-(g.bottom-A))/A)*W:Z<g.top+A&&(O=-Math.min(1,(g.top+A-Z)/A)*W),O!==0&&(N.scrollTop+=O,C(Z,N.scrollTop)),I=requestAnimationFrame(Y);};I=requestAnimationFrame(Y),Se({cursor:"row-resize",resizerEl:X,onMove:g=>{Z=g.clientY,N&&C(Z,N.scrollTop);},onEnd:()=>{I!==null&&cancelAnimationFrame(I);let g=u;E.current&&(g=E.current.getBoundingClientRect().height),g=we(g,n,b),d(g),r&&r(g),a&&je(a,g);}});},[L,n,f,r,a]);return t?jsxRuntime.jsxs("div",{ref:E,className:`zeugma-resizable-container ${y||""}`.trim(),style:{height:`${L}px`,position:"relative",overflow:"hidden",boxSizing:"border-box"},children:[jsxRuntime.jsx("div",{style:{height:`calc(100% - ${x}px)`,overflow:"hidden"},children:e}),jsxRuntime.jsx("div",{className:`zeugma-resizable-handle ${z||""}`.trim(),style:{height:`${x}px`,cursor:"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:v,role:"separator","aria-orientation":"horizontal","aria-valuenow":Math.round(L),"aria-valuemin":n,"aria-valuemax":i===1/0?void 0:i})]}):jsxRuntime.jsx("div",{className:`zeugma-resizable-container disabled ${y||""}`.trim(),style:{height:"100%",position:"relative",overflow:"hidden",boxSizing:"border-box"},children:jsxRuntime.jsx("div",{style:{height:"100%",overflow:"hidden"},children:e})})};function we(e,t,o){return Math.max(t,Math.min(o,e))}function nt(e){if(typeof window>"u"||!e)return null;let t=e.parentElement;if(!t)return document.documentElement;let r=window.getComputedStyle(t).overflowY;return r==="auto"||r==="scroll"?t:nt(t)}var Ee=react.createContext(null);var $t={top:{position:"absolute",top:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},bottom:{position:"absolute",bottom:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},left:{position:"absolute",top:"25%",left:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},right:{position:"absolute",top:"25%",right:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},center:{position:"absolute",top:"25%",left:"25%",width:"50%",height:"50%",zIndex:20,pointerEvents:"auto"},full:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:20,pointerEvents:"auto",cursor:"not-allowed"}},Zt={top:{position:"absolute",top:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},bottom:{position:"absolute",bottom:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},left:{position:"absolute",top:0,bottom:0,left:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},right:{position:"absolute",top:0,bottom:0,right:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},center:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:21,pointerEvents:"none",boxSizing:"border-box"},full:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:21,pointerEvents:"none",boxSizing:"border-box"}},$e=({id:e,position:t,activeClassName:o})=>{let{setNodeRef:r,isOver:n}=core.useDroppable({id:e});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:r,style:$t[t]}),n&&jsxRuntime.jsx("div",{className:o,style:Zt[t]})]})},At=({id:e,children:t,style:o,locked:r=false})=>{let{layout:n,activeId:i,classNames:s,fullscreenPaneId:c,onRemove:x,onFullscreenChange:y,locked:z}=G(),{removePane:a,updatePaneMetadata:R}=Te(),m=react.useMemo(()=>B(n,e),[n,e]),d=m?.metadata,E=m?.locked??false,L=r||E,S=z||L,f=z||L,v=i!==null&&i!==e&&!f,{attributes:w,listeners:D,setNodeRef:u,isDragging:b}=core.useDraggable({id:e,disabled:S}),X=i===e||b,N=c===e,k=react.useMemo(()=>({isDragging:X,isFullscreen:N,toggleFullscreen:()=>y?.(N?null:e),remove:()=>{N&&y?.(null),x?x(e):a(e);},metadata:d,updateMetadata:C=>{R(e,C);},locked:S}),[X,N,y,e,x,a,d,R,S]),Z=react.useMemo(()=>S?{disabled:true}:{...D,...w},[D,w,S]),I=`${s.pane||""} ${L?s.paneLocked||"zeugma-pane-locked":""}`.trim();return jsxRuntime.jsx(Ee.Provider,{value:Z,children:jsxRuntime.jsxs("div",{ref:u,className:I,style:{position:"relative",width:"100%",height:"100%",...o},children:[t(k),v&&jsxRuntime.jsxs("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:[["top","bottom","left","right"].map(C=>jsxRuntime.jsx($e,{id:`drop-${C}-${e}`,position:C,activeClassName:s.dropPreview},C)),jsxRuntime.jsx($e,{id:`drop-center-${e}`,position:"center",activeClassName:s.swapPreview})]}),i!==null&&i!==e&&f&&jsxRuntime.jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:jsxRuntime.jsx($e,{id:`drop-locked-${e}`,position:"full",activeClassName:s.lockedPreview||"zeugma-locked-preview"})})]})})};var Ft=({children:e,className:t,style:o})=>{let r=react.useContext(Ee);if(!r)throw new Error("<DragHandle> must be used inside a <Pane>");let{disabled:n,...i}=r;return jsxRuntime.jsx("div",{className:t,style:{cursor:n?"default":"grab",userSelect:n?"auto":"none",touchAction:n?"auto":"none",...o},...n?{}:i,children:e})};exports.DEFAULT_DRAG_ACTIVATION_DISTANCE=at;exports.DEFAULT_RESIZER_SIZE=Xt;exports.DEFAULT_SNAP_THRESHOLD=st;exports.DragHandle=Ft;exports.Pane=At;exports.PaneTree=wt;exports.ResizableContainer=tt;exports.Zeugma=vt;exports.addPane=Be;exports.createDragSession=Se;exports.findPane=B;exports.removePane=ae;exports.splitPane=ue;exports.swapPanes=ze;exports.updatePaneLock=Pe;exports.updatePaneMetadata=he;exports.updateSplitPercentage=te;exports.useResizer=Ce;exports.useZeugmaActions=Te;exports.useZeugmaState=G;//# sourceMappingURL=index.cjs.map
|
|
6
|
+
`,document.head.appendChild(n),t.setAttribute("data-resizing","true");let o=c=>{r(c);},s=()=>{document.body.classList.remove("zeugma-resizing"),t.removeAttribute("data-resizing");let c=document.getElementById("zeugma-global-cursor-style");c&&c.remove(),document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",s),i();};document.addEventListener("pointermove",o),document.addEventListener("pointerup",s);}function Xe({containerRef:e,isRow:t,direction:r,splitPercentage:i,resizerSize:n,snapThreshold:o,layout:s,currentNode:c,onLayoutChange:d,onResizeStart:T,onResizeEnd:S,parentLeft:g,parentTop:p,parentWidth:x,parentHeight:P}){let{onResizeStart:E,onResize:N,onResizeEnd:$,minSplitPercentage:b=5,maxSplitPercentage:y=95,locked:R=false}=Q();return nn.useCallback(I=>{if(R)return;I.preventDefault();let B=e.current;if(!B)return;T&&T(),E&&E(c);let l=B.getBoundingClientRect(),w=I.clientX,k=I.clientY,ee=i,D=I.currentTarget,V=l.left+l.width*(g/100),q=l.top+l.height*(p/100),Y=l.width*(x/100),v=l.height*(P/100),G=Array.from(document.querySelectorAll('div[role="separator"][data-direction]')).filter(M=>M!==D&&M.getAttribute("data-direction")===r).map(M=>{let f=M.getBoundingClientRect();return t?f.left+f.width/2:f.top+f.height/2}),F=ee;Ze({cursor:t?"col-resize":"row-resize",resizerEl:D,onMove:M=>{let f=t?(M.clientX-w)/Y*100:(M.clientY-k)/v*100,O=ee+f,me=t?V+(Y-n)*(O/100)+n/2:q+(v-n)*(O/100)+n/2,U=1/0,le=null;for(let ge of G){let ce=Math.abs(me-ge);ce<o&&ce<U&&(U=ce,le=ge);}let xe=O;le!==null&&(xe=t?(le-n/2-V)/(Y-n)*100:(le-n/2-q)/(v-n)*100);let be=Math.max(b,Math.min(y,xe));F=be;let Se=pe(s,c,be);if(Se){let{panes:ge,splitters:ce}=j(Se),te=e.current;if(te){for(let A of ge)te.style.setProperty(`--pane-left-${A.paneId}`,`${A.left}%`),te.style.setProperty(`--pane-top-${A.paneId}`,`${A.top}%`),te.style.setProperty(`--pane-width-${A.paneId}`,`${A.width}%`),te.style.setProperty(`--pane-height-${A.paneId}`,`${A.height}%`);for(let A of ce)te.style.setProperty(`--splitter-pos-${A.id}`,`${A.direction==="row"?A.left:A.top}%`);}}N&&N(c,be);},onEnd:()=>{let M=pe(s,c,F),f=e.current;if(f){let{panes:O,splitters:me}=j(M);for(let U of O)f.style.removeProperty(`--pane-left-${U.paneId}`),f.style.removeProperty(`--pane-top-${U.paneId}`),f.style.removeProperty(`--pane-width-${U.paneId}`),f.style.removeProperty(`--pane-height-${U.paneId}`);for(let U of me)f.style.removeProperty(`--splitter-pos-${U.id}`);}d(M),S&&S(),$&&$(c,F);}});},[e,t,r,i,n,o,s,c,d,T,S,E,N,$,b,y,g,p,x,P])}var an=({splitter:e,resizerSize:t,snapThreshold:r,containerRef:i})=>{let{layout:n,onLayoutChange:o,classNames:s,locked:c}=Q(),[d,T]=nn.useState(false),{currentNode:S,direction:g,left:p,top:x,width:P,height:E,parentLeft:N,parentTop:$,parentWidth:b,parentHeight:y}=e,R=g==="row",I=Xe({containerRef:i,isRow:R,direction:g,splitPercentage:S.splitPercentage,resizerSize:t,snapThreshold:r,layout:n,currentNode:S,onLayoutChange:o,onResizeStart:()=>T(true),onResizeEnd:()=>T(false),parentLeft:N,parentTop:$,parentWidth:b,parentHeight:y}),B=R?{position:"absolute",left:`calc(var(--splitter-pos-${e.id}, ${p}%) - ${t/2}px)`,top:`calc(${x}% + ${t/2}px)`,width:`${t}px`,height:`calc(${E}% - ${t}px)`,cursor:c?"default":"col-resize",pointerEvents:c?"none":"auto",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box"}:{position:"absolute",left:`calc(${p}% + ${t/2}px)`,top:`calc(var(--splitter-pos-${e.id}, ${x}%) - ${t/2}px)`,width:`calc(${P}% - ${t}px)`,height:`${t}px`,cursor:c?"default":"row-resize",pointerEvents:c?"none":"auto",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box"};return jsxRuntime.jsx("div",{className:`zeugma-resizer ${s.resizer||""}`.trim(),"data-direction":g,"data-resizing":d||void 0,style:B,onPointerDown:I,role:"separator","aria-valuenow":S.splitPercentage,"aria-valuemin":5,"aria-valuemax":95})},ln=nn__default.default.memo(({paneId:e,renderPane:t})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:t(e)}),(e,t)=>e.paneId===t.paneId&&e.renderPane===t.renderPane),cn=({tree:e,resizerSize:t=4,snapThreshold:r})=>{let{layout:i,renderPane:n,activeId:o,dismissIntentId:s,setContainerRef:c,fullscreenPaneId:d,snapThreshold:T,locked:S,classNames:g}=Q(),p=r!==void 0?r:T??8,x=e!==void 0?e:i,P=nn.useRef(null),{panes:E,splitters:N}=nn.useMemo(()=>x?j(x):{panes:[],splitters:[]},[x]);if(!x)return null;let $=()=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[E.map(b=>{let y=d===b.paneId;return jsxRuntime.jsx("div",{style:{position:"absolute",left:y?"0%":`var(--pane-left-${b.paneId}, ${b.left}%)`,top:y?"0%":`var(--pane-top-${b.paneId}, ${b.top}%)`,width:y?"100%":`var(--pane-width-${b.paneId}, ${b.width}%)`,height:y?"100%":`var(--pane-height-${b.paneId}, ${b.height}%)`,overflow:"hidden",zIndex:y?20:1,display:d&&!y?"none":"block",padding:y?"0px":`${t/2}px`,boxSizing:"border-box"},children:jsxRuntime.jsx(ln,{paneId:b.paneId,renderPane:n})},b.paneId)}),!d&&N.map(b=>jsxRuntime.jsx(an,{splitter:b,resizerSize:t,snapThreshold:p,containerRef:P},b.id))]});if(e===void 0){let b=o!==null&&o===s,y=I=>{c(I),P.current=I;},R=`zeugma-dashboard-root ${b?"zeugma-dashboard-dismiss-active":""} ${S?g.dashboardLocked||"zeugma-dashboard-locked":""}`.trim();return jsxRuntime.jsx("div",{ref:y,className:R,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:$()})}return jsxRuntime.jsx("div",{ref:P,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:$()})};var Lt="zeugma-height:",fn="default-pane";function mn(e){try{let t=localStorage.getItem(Lt+e);if(t!==null){let r=Number(t);if(Number.isFinite(r)&&r>0)return r}}catch{}return null}function Et(e,t){try{localStorage.setItem(Lt+e,String(Math.round(t)));}catch{}}var Nt=({children:e,active:t=true,height:r,onHeightChange:i,minHeight:n=100,maxHeight:o=1/0,persist:s,localStorageKey:c,resizerHeight:d=6,className:T,resizerClassName:S})=>{let g=s?c||fn:null,p=()=>{let R=(g?mn(g):null)??r??400;return Ae(R,n,o)},[x,P]=nn.useState(p),E=nn.useRef(null),N=g?x:r??x,$=nn.useRef(r);nn.useEffect(()=>{if(r!==void 0&&r!==$.current){let R=Ae(r,n,o);P(R),g&&Et(g,R);}$.current=r;},[r,n,o,g]);let b=nn.useCallback(()=>o,[o]),y=nn.useCallback(R=>{R.preventDefault();let I=R.clientY,B=N,l=b(),w=R.currentTarget,k=Dt(E.current),ee=k?k.scrollTop:0,D=I,V=null,q=(v,H)=>{let G=H-ee,M=v-I+G,f=Ae(B+M,n,l);return E.current&&(E.current.style.height=`${f}px`),f},Y=()=>{if(!k)return;let v=k===document.documentElement||k===document.body?{top:0,bottom:window.innerHeight}:k.getBoundingClientRect(),H=40,G=10,F=0;D>v.bottom-H?F=Math.min(1,(D-(v.bottom-H))/H)*G:D<v.top+H&&(F=-Math.min(1,(v.top+H-D)/H)*G),F!==0&&(k.scrollTop+=F,q(D,k.scrollTop)),V=requestAnimationFrame(Y);};V=requestAnimationFrame(Y),Ze({cursor:"row-resize",resizerEl:w,onMove:v=>{D=v.clientY,k&&q(D,k.scrollTop);},onEnd:()=>{V!==null&&cancelAnimationFrame(V);let v=B;E.current&&(v=E.current.getBoundingClientRect().height),v=Ae(v,n,l),P(v),i&&i(v),g&&Et(g,v);}});},[N,n,b,i,g]);return t?jsxRuntime.jsxs("div",{ref:E,className:`zeugma-resizable-container ${T||""}`.trim(),style:{height:`${N}px`,position:"relative",overflow:"hidden",boxSizing:"border-box"},children:[jsxRuntime.jsx("div",{style:{height:`calc(100% - ${d}px)`,overflow:"hidden"},children:e}),jsxRuntime.jsx("div",{className:`zeugma-resizable-handle ${S||""}`.trim(),style:{height:`${d}px`,cursor:"row-resize",position:"relative",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box",flexShrink:0},onPointerDown:y,role:"separator","aria-orientation":"horizontal","aria-valuenow":Math.round(N),"aria-valuemin":n,"aria-valuemax":o===1/0?void 0:o})]}):jsxRuntime.jsx("div",{className:`zeugma-resizable-container disabled ${T||""}`.trim(),style:{height:"100%",position:"relative",overflow:"hidden",boxSizing:"border-box"},children:jsxRuntime.jsx("div",{style:{height:"100%",overflow:"hidden"},children:e})})};function Ae(e,t,r){return Math.max(t,Math.min(r,e))}function Dt(e){if(typeof window>"u"||!e)return null;let t=e.parentElement;if(!t)return document.documentElement;let i=window.getComputedStyle(t).overflowY;return i==="auto"||i==="scroll"?t:Dt(t)}var Oe=nn.createContext(null);var Tn={top:{position:"absolute",top:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},bottom:{position:"absolute",bottom:0,left:"25%",width:"50%",height:"25%",zIndex:20,pointerEvents:"auto"},left:{position:"absolute",top:"25%",left:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},right:{position:"absolute",top:"25%",right:0,width:"25%",height:"50%",zIndex:20,pointerEvents:"auto"},center:{position:"absolute",top:"25%",left:"25%",width:"50%",height:"50%",zIndex:20,pointerEvents:"auto"},full:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:20,pointerEvents:"auto",cursor:"not-allowed"}},wn={top:{position:"absolute",top:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},bottom:{position:"absolute",bottom:0,left:0,right:0,height:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},left:{position:"absolute",top:0,bottom:0,left:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},right:{position:"absolute",top:0,bottom:0,right:0,width:"50%",zIndex:21,pointerEvents:"none",boxSizing:"border-box"},center:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:21,pointerEvents:"none",boxSizing:"border-box"},full:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:21,pointerEvents:"none",boxSizing:"border-box"}},Ge=({id:e,position:t,activeClassName:r})=>{let{setNodeRef:i,isOver:n}=core.useDroppable({id:e});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:i,style:Tn[t]}),n&&jsxRuntime.jsx("div",{className:r,style:wn[t]})]})},Rn=({id:e,children:t,style:r,locked:i=false})=>{let{layout:n,activeId:o,classNames:s,fullscreenPaneId:c,onFullscreenChange:d,locked:T}=Q(),{removePane:S,updateTabMetadata:g,selectTab:p,removeTab:x}=We(),P=nn.useContext(Ce);if(!P)throw new Error("Pane must be used within a Zeugma provider");let{registerPortalTarget:E}=P,N=nn.useMemo(()=>_(n,e),[n,e]),$=N?.id??e,b=N?.tabs??[e],y=N?.activeTabId??e,R=N?.tabsMetadata,I=R?.[e],B=N?.locked??false,l=i||B,w=T||l,k=T||l,ee=o!==null&&o!==e&&(!b.includes(o)||b.length>1)&&!k,{attributes:D,listeners:V,setNodeRef:q}=core.useDraggable({id:e,disabled:w}),Y=o!==null&&b.includes(o),v=c===e,H=nn.useCallback(()=>jsxRuntime.jsx("div",{id:`zeugma-tab-target-${y}`,className:"zeugma-tab-content-wrapper",style:{height:"100%",width:"100%"}}),[y]);nn.useEffect(()=>{let f=document.getElementById(`zeugma-tab-target-${y}`);return E(y,f),()=>{E(y,null);}},[y,E]);let G=nn.useMemo(()=>({isDragging:Y,isFullscreen:v,toggleFullscreen:()=>d?.(v?null:e),remove:()=>{v&&d?.(null),S($);},metadata:I,updateMetadata:f=>{g(e,f);},locked:w,tabs:b,activeTabId:y,selectTab:f=>p($,f),removeTab:f=>{v&&f===y&&d?.(null),x(f);},tabsMetadata:R,updateTabMetadata:(f,O)=>{g(f,O);},renderActiveTab:H}),[Y,v,d,e,x,I,g,w,b,y,p,$,R,H]),F=nn.useMemo(()=>w?{disabled:true}:{...V,...D},[V,D,w]),M=`${s.pane||""} ${l?s.paneLocked||"zeugma-pane-locked":""}`.trim();return jsxRuntime.jsx(Oe.Provider,{value:F,children:jsxRuntime.jsxs("div",{ref:q,className:M,style:{position:"relative",width:"100%",height:"100%",...r},children:[t(G),ee&&jsxRuntime.jsxs("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:[["top","bottom","left","right"].map(f=>jsxRuntime.jsx(Ge,{id:`drop-${f}-${e}`,position:f,activeClassName:s.dropPreview},f)),!b.includes(o)&&jsxRuntime.jsx(Ge,{id:`drop-center-${e}`,position:"center",activeClassName:s.swapPreview})]}),o!==null&&o!==e&&k&&jsxRuntime.jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:jsxRuntime.jsx(Ge,{id:`drop-locked-${e}`,position:"full",activeClassName:s.lockedPreview||"zeugma-locked-preview"})})]})})};var Ln=({children:e,className:t,style:r})=>{let i=nn.useContext(Oe);if(!i)throw new Error("<DragHandle> must be used inside a <Pane>");let{disabled:n,...o}=i;return jsxRuntime.jsx("div",{className:t,style:{cursor:n?"default":"grab",userSelect:n?"auto":"none",touchAction:n?"auto":"none",...r},...n?{}:o,children:e})};var Cn=({id:e,locked:t=false,children:r,className:i,style:n})=>{let{locked:o}=Q(),s=t||o,{attributes:c,listeners:d,setNodeRef:T,isDragging:S}=core.useDraggable({id:`tab-header-${e}`,disabled:s}),{setNodeRef:g,isOver:p}=core.useDroppable({id:`tab-drop-${e}`,disabled:s});return jsxRuntime.jsx("div",{ref:P=>{T(P),g(P);},className:i,style:{display:"inline-flex",cursor:s?"default":"grab",...n},...s?{}:d,...s?{}:c,children:r({isDragging:S,isOver:p})})};exports.DEFAULT_DRAG_ACTIVATION_DISTANCE=Vt;exports.DEFAULT_RESIZER_SIZE=Vn;exports.DEFAULT_SNAP_THRESHOLD=Ot;exports.DragHandle=Ln;exports.Pane=Rn;exports.PaneTree=cn;exports.ResizableContainer=Nt;exports.Tab=Cn;exports.Zeugma=Qt;exports.addPane=ht;exports.computeLayout=j;exports.createDragSession=Ze;exports.findPane=_;exports.mergeTab=Pt;exports.moveTab=Ye;exports.removePane=he;exports.removeTab=de;exports.selectTab=Ie;exports.splitPane=we;exports.swapPanes=_e;exports.updatePaneLock=$e;exports.updateSplitPercentage=pe;exports.updateTabMetadata=ze;exports.useResizer=Xe;exports.useZeugmaActions=We;exports.useZeugmaState=Q;//# sourceMappingURL=index.cjs.map
|
|
7
7
|
//# sourceMappingURL=index.cjs.map
|