react-zeugma 4.0.0 → 4.1.1
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 +37 -18
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +77 -3
- package/dist/index.d.ts +77 -3
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -19,8 +19,10 @@ interface PaneNode {
|
|
|
19
19
|
type TreeNode = SplitNode | PaneNode;
|
|
20
20
|
|
|
21
21
|
interface UseZeugmaOptions {
|
|
22
|
-
/** Initial layout tree model defining pane organization
|
|
23
|
-
initialLayout
|
|
22
|
+
/** Initial layout tree model defining pane organization for uncontrolled mode. Only used on initial mount. */
|
|
23
|
+
initialLayout?: TreeNode | null;
|
|
24
|
+
/** Controlled layout tree model. If provided, the hook will run in controlled mode and sync with this value. */
|
|
25
|
+
layout?: TreeNode | null;
|
|
24
26
|
/** Callback triggered when the layout changes via drag-and-drop actions, splits, swaps, or resizes. */
|
|
25
27
|
onChange?: (newLayout: TreeNode | null) => void;
|
|
26
28
|
/** The ID of the pane that is currently taking up the full dashboard area. Null if no pane is fullscreen. */
|
|
@@ -133,9 +135,79 @@ interface ZeugmaProps extends ZeugmaController {
|
|
|
133
135
|
/** Child nodes nested inside the Zeugma context, usually containing a <PaneTree> or similar layout viewer. */
|
|
134
136
|
children: ReactNode;
|
|
135
137
|
}
|
|
138
|
+
/**
|
|
139
|
+
* State context — holds reactive values that change during runtime.
|
|
140
|
+
* All consumers of this context will re-render when any of these values change.
|
|
141
|
+
*/
|
|
142
|
+
interface ZeugmaStateValue {
|
|
143
|
+
/** The current active layout tree structure, or null if empty. */
|
|
144
|
+
layout: TreeNode | null;
|
|
145
|
+
/** Callback to update the layout tree. */
|
|
146
|
+
onLayoutChange: (newLayout: TreeNode | null, localOnly?: boolean) => void;
|
|
147
|
+
/** Renders the inner content of a pane given its unique ID. */
|
|
148
|
+
renderPane: (paneId: string) => ReactNode;
|
|
149
|
+
/** The ID of the pane currently being dragged, or null. */
|
|
150
|
+
activeId: string | null;
|
|
151
|
+
/** The ID of the pane currently targeted for dismiss/drag-out, or null. */
|
|
152
|
+
dismissIntentId: string | null;
|
|
153
|
+
/** Ref setter to measure and track the dashboard root container element. */
|
|
154
|
+
setContainerRef: (element: HTMLElement | null) => void;
|
|
155
|
+
/** The ID of the pane currently zoomed to fullscreen, or null. */
|
|
156
|
+
fullscreenPaneId: string | null;
|
|
157
|
+
/** Normalized or overridden CSS classes for custom layout styling. */
|
|
158
|
+
classNames: ZeugmaClassNames;
|
|
159
|
+
/** Callback triggered when a pane is closed/removed from the dashboard. */
|
|
160
|
+
onRemove?: (paneId: string) => void;
|
|
161
|
+
/** Callback triggered to toggle fullscreen status for a pane. */
|
|
162
|
+
onFullscreenChange?: (paneId: string | null) => void;
|
|
163
|
+
/** Threshold in pixels to snap layout resizers to adjacent edges. */
|
|
164
|
+
snapThreshold?: number;
|
|
165
|
+
/** Callback triggered when a split pane starts being resized. */
|
|
166
|
+
onResizeStart?: (currentNode: SplitNode) => void;
|
|
167
|
+
/** Callback triggered continuously during a split pane resize. */
|
|
168
|
+
onResize?: (currentNode: SplitNode, percentage: number) => void;
|
|
169
|
+
/** Callback triggered when a split pane resize action is completed. */
|
|
170
|
+
onResizeEnd?: (currentNode: SplitNode, percentage: number) => void;
|
|
171
|
+
/** Minimum split percentage allowed when resizing. */
|
|
172
|
+
minSplitPercentage?: number;
|
|
173
|
+
/** Maximum split percentage allowed when resizing. */
|
|
174
|
+
maxSplitPercentage?: number;
|
|
175
|
+
/** Whether the layout is globally locked. */
|
|
176
|
+
locked: boolean;
|
|
177
|
+
}
|
|
178
|
+
/**
|
|
179
|
+
* Actions context — holds stable dispatch functions with permanent identity.
|
|
180
|
+
* Consumers of only this context will never re-render from layout/drag state changes.
|
|
181
|
+
*/
|
|
182
|
+
interface ZeugmaActionsValue {
|
|
183
|
+
/** Removes the specified pane from the layout tree and collapses its parent split. */
|
|
184
|
+
removePane: (paneId: string) => void;
|
|
185
|
+
/** Appends/inserts a pane at the bottom-rightmost leaf of the layout tree. */
|
|
186
|
+
addPane: (paneId: string) => void;
|
|
187
|
+
/** Splits a target pane with a new pane in the specified direction and side. */
|
|
188
|
+
splitPane: (targetId: string, direction: SplitDirection, splitType: 'left' | 'right' | 'top' | 'bottom', paneToAdd: string) => void;
|
|
189
|
+
/** Updates the split percentage of a specific split branch node. */
|
|
190
|
+
updateSplitPercentage: (currentNode: SplitNode, percentage: number) => void;
|
|
191
|
+
/** Stable callback to update metadata for a specific tab. */
|
|
192
|
+
updateTabMetadata: (tabId: string, updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined) => void;
|
|
193
|
+
/** Stable callback to update the locked status of a specific pane in the layout tree. */
|
|
194
|
+
updatePaneLock: (paneId: string, locked: boolean) => void;
|
|
195
|
+
/** Stable callback to activate a tab within a pane. */
|
|
196
|
+
selectTab: (paneId: string, tabId: string) => void;
|
|
197
|
+
/** Stable callback to merge a dragged tab/pane into another pane's tab list. */
|
|
198
|
+
mergeTab: (draggedTabId: string, targetPaneId: string) => void;
|
|
199
|
+
/** Stable callback to move/reorder a tab to another pane next to a target tab. */
|
|
200
|
+
moveTab: (draggedTabId: string, targetTabId: string, position?: 'before' | 'after') => void;
|
|
201
|
+
/** Stable callback to remove/close a specific tab from the layout. */
|
|
202
|
+
removeTab: (tabId: string) => void;
|
|
203
|
+
}
|
|
204
|
+
interface ZeugmaContextValue extends ZeugmaStateValue, ZeugmaActionsValue {
|
|
205
|
+
}
|
|
136
206
|
|
|
137
207
|
declare function useZeugma(options: UseZeugmaOptions): ZeugmaController;
|
|
138
208
|
|
|
209
|
+
declare const useZeugmaContext: () => ZeugmaContextValue;
|
|
210
|
+
|
|
139
211
|
declare const Zeugma: React.FC<ZeugmaProps>;
|
|
140
212
|
|
|
141
213
|
interface UseResizerProps {
|
|
@@ -363,4 +435,6 @@ interface DragSessionConfig {
|
|
|
363
435
|
}
|
|
364
436
|
declare function createDragSession({ cursor, resizerEl, onMove, onEnd }: DragSessionConfig): void;
|
|
365
437
|
|
|
366
|
-
|
|
438
|
+
declare function safeJsonStringify(val: unknown): string;
|
|
439
|
+
|
|
440
|
+
export { type ComputedPane, type ComputedSplitter, DEFAULT_DRAG_ACTIVATION_DISTANCE, DEFAULT_RESIZER_SIZE, DEFAULT_SNAP_THRESHOLD, DragHandle, type DragHandleProps, type DragSessionConfig, Pane, type PaneNode, type PaneProps, type PaneRenderProps, PaneTree, ResizableContainer, type ResizableContainerProps, type SplitDirection, type SplitNode, Tab, type TabProps, type TabRenderProps, type TreeNode, type UseZeugmaOptions, Zeugma, type ZeugmaClassNames, type ZeugmaContextValue, type ZeugmaController, type ZeugmaProps, addPane, computeLayout, createDragSession, findPane, generateUniqueId, mergeTab, moveTab, removePane, removeTab, safeJsonStringify, selectTab, splitPane, updatePaneLock, updateSplitPercentage, updateTabMetadata, useResizer, useZeugma, useZeugmaContext };
|
package/dist/index.d.ts
CHANGED
|
@@ -19,8 +19,10 @@ interface PaneNode {
|
|
|
19
19
|
type TreeNode = SplitNode | PaneNode;
|
|
20
20
|
|
|
21
21
|
interface UseZeugmaOptions {
|
|
22
|
-
/** Initial layout tree model defining pane organization
|
|
23
|
-
initialLayout
|
|
22
|
+
/** Initial layout tree model defining pane organization for uncontrolled mode. Only used on initial mount. */
|
|
23
|
+
initialLayout?: TreeNode | null;
|
|
24
|
+
/** Controlled layout tree model. If provided, the hook will run in controlled mode and sync with this value. */
|
|
25
|
+
layout?: TreeNode | null;
|
|
24
26
|
/** Callback triggered when the layout changes via drag-and-drop actions, splits, swaps, or resizes. */
|
|
25
27
|
onChange?: (newLayout: TreeNode | null) => void;
|
|
26
28
|
/** The ID of the pane that is currently taking up the full dashboard area. Null if no pane is fullscreen. */
|
|
@@ -133,9 +135,79 @@ interface ZeugmaProps extends ZeugmaController {
|
|
|
133
135
|
/** Child nodes nested inside the Zeugma context, usually containing a <PaneTree> or similar layout viewer. */
|
|
134
136
|
children: ReactNode;
|
|
135
137
|
}
|
|
138
|
+
/**
|
|
139
|
+
* State context — holds reactive values that change during runtime.
|
|
140
|
+
* All consumers of this context will re-render when any of these values change.
|
|
141
|
+
*/
|
|
142
|
+
interface ZeugmaStateValue {
|
|
143
|
+
/** The current active layout tree structure, or null if empty. */
|
|
144
|
+
layout: TreeNode | null;
|
|
145
|
+
/** Callback to update the layout tree. */
|
|
146
|
+
onLayoutChange: (newLayout: TreeNode | null, localOnly?: boolean) => void;
|
|
147
|
+
/** Renders the inner content of a pane given its unique ID. */
|
|
148
|
+
renderPane: (paneId: string) => ReactNode;
|
|
149
|
+
/** The ID of the pane currently being dragged, or null. */
|
|
150
|
+
activeId: string | null;
|
|
151
|
+
/** The ID of the pane currently targeted for dismiss/drag-out, or null. */
|
|
152
|
+
dismissIntentId: string | null;
|
|
153
|
+
/** Ref setter to measure and track the dashboard root container element. */
|
|
154
|
+
setContainerRef: (element: HTMLElement | null) => void;
|
|
155
|
+
/** The ID of the pane currently zoomed to fullscreen, or null. */
|
|
156
|
+
fullscreenPaneId: string | null;
|
|
157
|
+
/** Normalized or overridden CSS classes for custom layout styling. */
|
|
158
|
+
classNames: ZeugmaClassNames;
|
|
159
|
+
/** Callback triggered when a pane is closed/removed from the dashboard. */
|
|
160
|
+
onRemove?: (paneId: string) => void;
|
|
161
|
+
/** Callback triggered to toggle fullscreen status for a pane. */
|
|
162
|
+
onFullscreenChange?: (paneId: string | null) => void;
|
|
163
|
+
/** Threshold in pixels to snap layout resizers to adjacent edges. */
|
|
164
|
+
snapThreshold?: number;
|
|
165
|
+
/** Callback triggered when a split pane starts being resized. */
|
|
166
|
+
onResizeStart?: (currentNode: SplitNode) => void;
|
|
167
|
+
/** Callback triggered continuously during a split pane resize. */
|
|
168
|
+
onResize?: (currentNode: SplitNode, percentage: number) => void;
|
|
169
|
+
/** Callback triggered when a split pane resize action is completed. */
|
|
170
|
+
onResizeEnd?: (currentNode: SplitNode, percentage: number) => void;
|
|
171
|
+
/** Minimum split percentage allowed when resizing. */
|
|
172
|
+
minSplitPercentage?: number;
|
|
173
|
+
/** Maximum split percentage allowed when resizing. */
|
|
174
|
+
maxSplitPercentage?: number;
|
|
175
|
+
/** Whether the layout is globally locked. */
|
|
176
|
+
locked: boolean;
|
|
177
|
+
}
|
|
178
|
+
/**
|
|
179
|
+
* Actions context — holds stable dispatch functions with permanent identity.
|
|
180
|
+
* Consumers of only this context will never re-render from layout/drag state changes.
|
|
181
|
+
*/
|
|
182
|
+
interface ZeugmaActionsValue {
|
|
183
|
+
/** Removes the specified pane from the layout tree and collapses its parent split. */
|
|
184
|
+
removePane: (paneId: string) => void;
|
|
185
|
+
/** Appends/inserts a pane at the bottom-rightmost leaf of the layout tree. */
|
|
186
|
+
addPane: (paneId: string) => void;
|
|
187
|
+
/** Splits a target pane with a new pane in the specified direction and side. */
|
|
188
|
+
splitPane: (targetId: string, direction: SplitDirection, splitType: 'left' | 'right' | 'top' | 'bottom', paneToAdd: string) => void;
|
|
189
|
+
/** Updates the split percentage of a specific split branch node. */
|
|
190
|
+
updateSplitPercentage: (currentNode: SplitNode, percentage: number) => void;
|
|
191
|
+
/** Stable callback to update metadata for a specific tab. */
|
|
192
|
+
updateTabMetadata: (tabId: string, updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined) => void;
|
|
193
|
+
/** Stable callback to update the locked status of a specific pane in the layout tree. */
|
|
194
|
+
updatePaneLock: (paneId: string, locked: boolean) => void;
|
|
195
|
+
/** Stable callback to activate a tab within a pane. */
|
|
196
|
+
selectTab: (paneId: string, tabId: string) => void;
|
|
197
|
+
/** Stable callback to merge a dragged tab/pane into another pane's tab list. */
|
|
198
|
+
mergeTab: (draggedTabId: string, targetPaneId: string) => void;
|
|
199
|
+
/** Stable callback to move/reorder a tab to another pane next to a target tab. */
|
|
200
|
+
moveTab: (draggedTabId: string, targetTabId: string, position?: 'before' | 'after') => void;
|
|
201
|
+
/** Stable callback to remove/close a specific tab from the layout. */
|
|
202
|
+
removeTab: (tabId: string) => void;
|
|
203
|
+
}
|
|
204
|
+
interface ZeugmaContextValue extends ZeugmaStateValue, ZeugmaActionsValue {
|
|
205
|
+
}
|
|
136
206
|
|
|
137
207
|
declare function useZeugma(options: UseZeugmaOptions): ZeugmaController;
|
|
138
208
|
|
|
209
|
+
declare const useZeugmaContext: () => ZeugmaContextValue;
|
|
210
|
+
|
|
139
211
|
declare const Zeugma: React.FC<ZeugmaProps>;
|
|
140
212
|
|
|
141
213
|
interface UseResizerProps {
|
|
@@ -363,4 +435,6 @@ interface DragSessionConfig {
|
|
|
363
435
|
}
|
|
364
436
|
declare function createDragSession({ cursor, resizerEl, onMove, onEnd }: DragSessionConfig): void;
|
|
365
437
|
|
|
366
|
-
|
|
438
|
+
declare function safeJsonStringify(val: unknown): string;
|
|
439
|
+
|
|
440
|
+
export { type ComputedPane, type ComputedSplitter, DEFAULT_DRAG_ACTIVATION_DISTANCE, DEFAULT_RESIZER_SIZE, DEFAULT_SNAP_THRESHOLD, DragHandle, type DragHandleProps, type DragSessionConfig, Pane, type PaneNode, type PaneProps, type PaneRenderProps, PaneTree, ResizableContainer, type ResizableContainerProps, type SplitDirection, type SplitNode, Tab, type TabProps, type TabRenderProps, type TreeNode, type UseZeugmaOptions, Zeugma, type ZeugmaClassNames, type ZeugmaContextValue, type ZeugmaController, type ZeugmaProps, addPane, computeLayout, createDragSession, findPane, generateUniqueId, mergeTab, moveTab, removePane, removeTab, safeJsonStringify, selectTab, splitPane, updatePaneLock, updateSplitPercentage, updateTabMetadata, useResizer, useZeugma, useZeugmaContext };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import en,{createContext,useState,useRef,useCallback,useEffect,useMemo,useContext}from'react';import {createPortal}from'react-dom';import {useSensors,useSensor,pointerWithin,closestCenter,DndContext,useDraggable,useDroppable,PointerSensor,TouchSensor}from'@dnd-kit/core';import {jsx,Fragment,jsxs}from'react/jsx-runtime';var ze=createContext(void 0),Ie=createContext(void 0);var oe=()=>{let e=useContext(ze);if(!e)throw new Error("useZeugmaState must be used within a Zeugma provider");return e},nt=()=>{let e=useContext(Ie);if(!e)throw new Error("useZeugmaActions must be used within a Zeugma provider");return e};function rt(e){let t=useRef(null);return useEffect(()=>{if(!e){t.current=null;return}let r=n=>{t.current={x:n.clientX,y:n.clientY};},o=n=>{let s=n.touches[0]||n.changedTouches[0];s&&(t.current={x:s.clientX,y:s.clientY});};return window.addEventListener("pointermove",r,{passive:true}),window.addEventListener("touchmove",o,{passive:true}),()=>{window.removeEventListener("pointermove",r),window.removeEventListener("touchmove",o);}},[e]),t}function ot(e){useEffect(()=>(e?document.body.style.setProperty("cursor","not-allowed","important"):document.body.style.removeProperty("cursor"),()=>{document.body.style.removeProperty("cursor");}),[e]);}function st(){let[e,t]=useState({}),r=useCallback((o,n)=>{t(s=>s[o]===n?s:{...s,[o]:n});},[]);return {portalTargets:e,registerPortalTarget:r}}var $e=createContext(void 0);var Ht=8,Zt=8,An=4;function ie(){return "pane-"+Math.random().toString(36).substring(2,11)}function be(e,t){if(e===null)return null;if(e.type==="pane")return e.id===t?null:e;let r=be(e.first,t),o=be(e.second,t);return r===null?o:o===null?r:{...e,first:r,second:o}}function de(e,t){if(e===null)return null;if(e.type==="pane"){if(e.tabs.includes(t)){let n=e.tabs.filter(a=>a!==t);if(n.length===0)return null;let s=e.activeTabId;e.activeTabId===t&&(s=n[0]);let i={...e.tabsMetadata};return delete i[t],{...e,tabs:n,activeTabId:s,tabsMetadata:Object.keys(i).length>0?i:void 0}}return e}let r=de(e.first,t),o=de(e.second,t);return r===null?o:o===null?r:{...e,first:r,second:o}}function ye(e,t,r,o,n){if(e===null)return typeof n=="string"?{type:"pane",id:ie(),tabs:[n],activeTabId:n}:n;if(e.type==="pane"){if(e.id===t||e.tabs.includes(t)){let s=typeof n=="string"?{type:"pane",id:ie(),tabs:[n],activeTabId:n}:n,i=o==="left"||o==="top";return {type:"split",direction:r,first:i?s:e,second:i?e:s,splitPercentage:50}}return e}return {...e,first:ye(e.first,t,r,o,n)||e.first,second:ye(e.second,t,r,o,n)||e.second}}function it(e,t){if(e===null)return {type:"pane",id:ie(),tabs:[t],activeTabId:t};function r(o,n){return o.type==="pane"?{type:"split",direction:n==="row"?"column":"row",splitPercentage:50,first:o,second:{type:"pane",id:ie(),tabs:[t],activeTabId:t}}:{...o,second:r(o.second,o.direction)}}return r(e,null)}function ve(e,t,r){return e===null?null:e===t?{...e,splitPercentage:r}:e.type==="split"?{...e,first:ve(e.first,t,r)||e.first,second:ve(e.second,t,r)||e.second}:e}function q(e,t){return e===null?null:e.type==="pane"?e.id===t||e.tabs.includes(t)?e:null:q(e.first,t)??q(e.second,t)}function ke(e,t,r){if(e===null)return null;if(e.type==="pane"){if(e.id===t||e.tabs.includes(t)){let o=e.tabsMetadata||{},n=o[t],s=r(n),i={...o};return s===void 0?delete i[t]:i[t]=s,{...e,tabsMetadata:Object.keys(i).length>0?i:void 0}}return e}return {...e,first:ke(e.first,t,r)??e.first,second:ke(e.second,t,r)??e.second}}function He(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:o,...n}=e;return n}return {...e,locked:r}}return e}return {...e,first:He(e.first,t,r)??e.first,second:He(e.second,t,r)??e.second}}function Ze(e,t,r){return e===null?null:e.type==="pane"?e.id===t||e.tabs.includes(t)?{...e,activeTabId:r}:e:{...e,first:Ze(e.first,t,r)??e.first,second:Ze(e.second,t,r)??e.second}}function at(e,t,r){if(e===null)return null;let n=q(e,t)?.tabsMetadata?.[t],s=de(e,t);if(s===null)return {type:"pane",id:ie(),tabs:[t],activeTabId:t,tabsMetadata:n?{[t]:n}:void 0};function i(a){if(a.type==="pane"){if(a.id===r||a.tabs.includes(r)){let l=[...a.tabs];l.includes(t)||l.push(t);let y={...a.tabsMetadata};return n&&(y[t]=n),{...a,tabs:l,activeTabId:t,tabsMetadata:Object.keys(y).length>0?y:void 0}}return a}return {...a,first:i(a.first),second:i(a.second)}}return i(s)}function lt(e,t,r,o="before"){if(e===null)return null;let s=q(e,t)?.tabsMetadata?.[t],i=de(e,t);if(i===null)return {type:"pane",id:ie(),tabs:[t],activeTabId:t,tabsMetadata:s?{[t]:s}:void 0};function a(l){if(l.type==="pane"){if(l.id===r||l.tabs.includes(r)){let D=[...l.tabs].filter(T=>T!==t),c=D.indexOf(r);c<0&&(c=0),o==="after"&&(c+=1),D.splice(c,0,t);let x={...l.tabsMetadata};return s&&(x[t]=s),{...l,tabs:D,activeTabId:t,tabsMetadata:Object.keys(x).length>0?x:void 0}}return l}return {...l,first:a(l.first),second:a(l.second)}}return a(i)}function se(e,t=0,r=0,o=100,n=100,s="root"){if(e===null)return {panes:[],splitters:[]};if(e.type==="pane")return {panes:[{paneId:e.id,left:t,top:r,width:o,height:n,node:e}],splitters:[]};let{direction:i,splitPercentage:a,first:l,second:y}=e,c={id:`splitter-${s}-${i}`,currentNode:e,direction:i,left:i==="row"?t+o*(a/100):t,top:i==="column"?r+n*(a/100):r,width:i==="row"?0:o,height:i==="column"?0:n,parentLeft:t,parentTop:r,parentWidth:o,parentHeight:n},x={panes:[],splitters:[]},T={panes:[],splitters:[]};if(i==="row"){let v=o*(a/100);x=se(l,t,r,v,n,`${s}-L`),T=se(y,t+v,r,o-v,n,`${s}-R`);}else {let v=n*(a/100);x=se(l,t,r,o,v,`${s}-T`),T=se(y,t,r+v,o,n-v,`${s}-B`);}return {panes:[...x.panes,...T.panes],splitters:[c,...x.splitters,...T.splitters]}}function At(e){let{initialLayout:t,onChange:r,fullscreenPaneId:o,onFullscreenChange:n,locked:s=false,dragActivationDistance:i=8,snapThreshold:a=8,minSplitPercentage:l=5,maxSplitPercentage:y=95,enableDragToDismiss:D=false,dismissThreshold:c=60,onRemove:x,onDragStart:T,onDragEnd:v,onResizeStart:R,onResize:E,onResizeEnd:L,onDismissIntentChange:p}=e,[b,f]=useState(t),[z,A]=useState(o||null),[I,V]=useState(s),[w,K]=useState(null),[h,F]=useState(null),[Y,O]=useState(null),m=useRef(null),$=useCallback(u=>{m.current=u;},[]),_=useCallback(u=>{A(u),n?.(u);},[n]);useEffect(()=>{V(s);},[s]),useEffect(()=>{o!==void 0&&A(o);},[o]);let k=useRef(true);useEffect(()=>{if(k.current){k.current=false;return}r?.(b);},[b,r]);let N=useCallback(u=>{f(S=>be(S,u));},[]),d=useCallback(u=>{f(S=>it(S,u));},[]),B=useCallback((u,S,P,te)=>{f(Re=>{let _e=q(Re,te)??{type:"pane",id:te,tabs:[te],activeTabId:te},Ye=be(Re,te);return ye(Ye,u,S,P,_e)});},[]),ae=useCallback((u,S)=>{f(P=>ve(P,u,S));},[]),W=useCallback((u,S)=>{f(P=>ke(P,u,S));},[]),ee=useCallback((u,S)=>{f(P=>He(P,u,S));},[]),le=useCallback((u,S)=>{f(P=>Ze(P,u,S));},[]),fe=useCallback((u,S)=>{f(P=>at(P,u,S));},[]),me=useCallback((u,S,P)=>{f(te=>lt(te,u,S,P));},[]),j=useCallback(u=>{f(S=>de(S,u));},[]);return {layout:b,setLayout:f,fullscreenPaneId:z,setFullscreenPaneId:_,locked:I,setLocked:V,activeId:w,setActiveId:K,activeType:h,setActiveType:F,dismissIntentId:Y,setDismissIntentId:O,containerRef:m,setContainerRef:$,dragActivationDistance:i,snapThreshold:a,minSplitPercentage:l,maxSplitPercentage:y,enableDragToDismiss:D,dismissThreshold:c,onRemove:x,onDragStart:T,onDragEnd:v,onResizeStart:R,onResize:E,onResizeEnd:L,onDismissIntentChange:p,removePane:N,addPane:d,splitPane:B,updateSplitPercentage:ae,updateTabMetadata:W,updatePaneLock:ee,selectTab:le,mergeTab:fe,moveTab:me,removeTab:j}}var ut=({activeId:e,render:t,className:r})=>{let o=useRef(null);return useEffect(()=>{let n=s=>{o.current&&(o.current.style.transform=`translate(${s.clientX+12}px, ${s.clientY+12}px)`);};return document.addEventListener("pointermove",n),()=>document.removeEventListener("pointermove",n)},[]),jsx("div",{ref:o,className:r,style:{position:"fixed",top:0,left:0,zIndex:9999,pointerEvents:"none"},children:t(e)})};var Ae=class extends PointerSensor{static activators=[{eventName:"onPointerDown",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},Fe=class extends TouchSensor{static activators=[{eventName:"onTouchStart",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]};function qe(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 Kt=e=>{let{renderPane:t,renderWidget:r,renderDragOverlay:o,classNames:n={},children:s,layout:i,setLayout:a,fullscreenPaneId:l,setFullscreenPaneId:y,locked:D,activeId:c,setActiveId:x,activeType:T,setActiveType:v,dismissIntentId:R,setDismissIntentId:E,containerRef:L,setContainerRef:p,dragActivationDistance:b,snapThreshold:f,minSplitPercentage:z,maxSplitPercentage:A,enableDragToDismiss:I,dismissThreshold:V,onRemove:w,onDragStart:K,onDragEnd:h,onResizeStart:F,onResize:Y,onResizeEnd:O,onDismissIntentChange:m,removePane:$,addPane:_,splitPane:k,updateSplitPercentage:N,updateTabMetadata:d,updatePaneLock:B,selectTab:ae,mergeTab:W,moveTab:ee,removeTab:le}=e,{portalTargets:fe,registerPortalTarget:me}=st(),j=useRef(null),u=rt(c),[S,P]=useState(false);ot(S);let te=useCallback(g=>t(g),[t]),Re=useMemo(()=>n,[n.pane,n.paneLocked,n.dropPreview,n.dragOverlay,n.resizer,n.dismissPreview,n.dashboardLocked,n.lockedPreview]),_e=useSensors(useSensor(Ae,{activationConstraint:{distance:b}}),useSensor(Fe,{activationConstraint:{delay:250,tolerance:5}})),Ye=useCallback(g=>{let H=pointerWithin(g);if(H.length>0)return H;if(g.active.id.toString().startsWith("tab-header-")){let ne=g.droppableContainers.filter(J=>J.id.toString().startsWith("tab-drop-"));return closestCenter({...g,droppableContainers:ne})}return []},[]),Rt=g=>{let H=g.active.id.toString(),U=H.startsWith("tab-header-"),ne=U?H.substring(11):H;x(ne),v(U?"tab":"pane");let J=g.activatorEvent;u.current=qe(J),I&&L.current?j.current=L.current.getBoundingClientRect():j.current=null,K&&K(ne);},St=g=>{let{over:H}=g,ne=(H?.id.toString()||"").startsWith("drop-locked-");if(P(ne),!I)return;let J=g.active.id.toString(),Se=J.startsWith("tab-header-")?J.substring(11):J,M=j.current;if(!M){R!==null&&(E(null),m?.(null));return}let we=g.activatorEvent,re=null,X=null;if(u.current)re=u.current.x,X=u.current.y;else {let Z=qe(we);Z&&(re=Z.x+g.delta.x,X=Z.y+g.delta.y);}let ce=0;if(re!==null&&X!==null){let Z=0,Q=0;re<M.left?Z=M.left-re:re>M.right&&(Z=re-M.right),X<M.top?Q=M.top-X:X>M.bottom&&(Q=X-M.bottom),ce=Math.sqrt(Z*Z+Q*Q);}else {let Z=g.active.rect.current.translated;if(Z){let Q=Z.left+Z.width/2,ge=Z.top+Z.height/2,ue=0,Pe=0;Q<M.left?ue=M.left-Q:Q>M.right&&(ue=Q-M.right),ge<M.top?Pe=M.top-ge:ge>M.bottom&&(Pe=ge-M.bottom),ce=Math.sqrt(ue*ue+Pe*Pe);}}ce>V?R!==Se&&(E(Se),m?.(Se)):R!==null&&(E(null),m?.(null));},Dt=g=>{x(null),v(null),P(false);let{active:H,over:U}=g,ne=H.id.toString(),J=ne.startsWith("tab-header-"),C=J?ne.substring(11):ne,Se=I&&R===C;if(E(null),m?.(null),j.current=null,Se){w?w(C):le(C),h&&h(C,null,null);return}if(!U){h&&h(C,null,null);return}let M=U.id.toString();if(M.startsWith("drop-locked-")){h&&h(C,null,null);return}let we=M.match(/^tab-drop-(.+)$/);if(we){let[,Ne]=we;if(C!==Ne){let Ee="before",Je=U.rect,Lt=g.activatorEvent,Me=null;if(u.current)Me=u.current.x;else {let Le=qe(Lt);Le&&(Me=Le.x+g.delta.x);}if(Me!==null){let Le=Je.left+Je.width/2;Me>Le&&(Ee="after");}ee(C,Ne,Ee);}h&&h(C,Ne,{type:"swap",position:"center"});return}let re=M.match(/^drop-(left|right|top|bottom)-(.+)$/);if(!re){h&&h(C,null,null);return}let[,X,ce]=re,De=q(i,C),Z=De&&De.id===ce,Q=De&&De.tabs.length===1;if(C===ce||Z&&Q){h&&h(C,null,null);return}let ge=X==="left"||X==="right"?"row":"column",ue;if(J){let Ee=q(i,C)?.tabsMetadata?.[C];ue={type:"pane",id:ie(),tabs:[C],activeTabId:C,tabsMetadata:Ee?{[C]:Ee}:void 0};}else ue=q(i,C)??{type:"pane",id:ie(),tabs:[C],activeTabId:C};let Pe=J?de(i,C):be(i,C),Mt=ye(Pe,ce,ge,X,ue);a(Mt),h&&h(C,ce,{type:"split",direction:ge,position:X});},je=useCallback((g,H)=>{O&&O(g,H);},[O]),Et=useMemo(()=>({layout:i,onLayoutChange:g=>a(g),renderPane:te,activeId:c,dismissIntentId:R,setContainerRef:p,fullscreenPaneId:l,classNames:Re,onRemove:w,onFullscreenChange:y,snapThreshold:f,onResizeStart:F,onResize:Y,onResizeEnd:je,minSplitPercentage:z,maxSplitPercentage:A,locked:D}),[i,c,R,p,l,Re,w,y,f,F,Y,z,A,a,te,je,D]),Ct=useMemo(()=>({removePane:$,addPane:_,splitPane:k,updateSplitPercentage:N,updateTabMetadata:d,updatePaneLock:B,selectTab:ae,mergeTab:W,moveTab:ee,removeTab:le}),[$,_,k,N,d,B,ae,W,ee,le]),wt=useMemo(()=>{let g=[];function H(U){U&&(U.type==="pane"?g.push(...U.tabs):(H(U.first),H(U.second)));}return H(i),g},[i]),Nt=useMemo(()=>({registerPortalTarget:me}),[me]);return jsx(Ie.Provider,{value:Ct,children:jsx(ze.Provider,{value:Et,children:jsxs($e.Provider,{value:Nt,children:[jsx(DndContext,{id:"zeugma-dnd-context",sensors:_e,collisionDetection:Ye,onDragStart:Rt,onDragMove:St,onDragEnd:Dt,children:s}),c&&T&&o&&jsx(ut,{activeId:c,render:g=>o(g,T),className:`${n.dragOverlay||""} ${c===R?n.dismissPreview||"zeugma-dismiss-preview":""}`.trim()}),jsx("div",{id:"zeugma-portal-host",style:{display:"none"},children:wt.map(g=>jsx(jt,{tabId:g,target:fe[g]||null,renderWidget:r},g))})]})})})},jt=({tabId:e,target:t,renderWidget:r})=>{let o=useRef(null);!o.current&&typeof window<"u"&&(o.current=document.createElement("div"),o.current.className=`zeugma-portal-wrapper-${e}`,o.current.style.width="100%",o.current.style.height="100%");let n=o.current;return useEffect(()=>{if(n)if(t)t.appendChild(n);else {let s=document.getElementById("zeugma-hidden-portal-container");s||(s=document.createElement("div"),s.id="zeugma-hidden-portal-container",s.style.display="none",document.body.appendChild(s)),s.appendChild(n);}},[t,n]),useEffect(()=>()=>{o.current&&o.current.remove();},[]),!n||!r?null:createPortal(r(e),n)};function Oe({cursor:e,resizerEl:t,onMove:r,onEnd:o}){document.body.classList.add("zeugma-resizing");let n=document.createElement("style");n.id="zeugma-global-cursor-style",n.textContent=`
|
|
1
|
+
import on,{createContext,useState,useRef,useCallback,useEffect,useMemo,useContext}from'react';import {useSensors,useSensor,pointerWithin,closestCenter,DndContext,useDraggable,useDroppable,PointerSensor,TouchSensor}from'@dnd-kit/core';import {jsx,Fragment,jsxs}from'react/jsx-runtime';import {createPortal}from'react-dom';var Fe=createContext(void 0),Oe=createContext(void 0);var ne=()=>{let e=useContext(Fe);if(!e)throw new Error("useZeugmaState must be used within a Zeugma provider");return e},Ve=()=>{let e=useContext(Oe);if(!e)throw new Error("useZeugmaActions must be used within a Zeugma provider");return e};function ct(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 ut(e){useEffect(()=>(e?document.body.style.setProperty("cursor","not-allowed","important"):document.body.style.removeProperty("cursor"),()=>{document.body.style.removeProperty("cursor");}),[e]);}function dt(){let[e,t]=useState({}),n=useRef(true);useEffect(()=>(n.current=true,()=>{n.current=false;}),[]);let s=useCallback((r,o)=>{setTimeout(()=>{n.current&&t(i=>i[r]===o?i:{...i,[r]:o});},0);},[]);return {portalTargets:e,registerPortalTarget:s}}var We=createContext(void 0);var Zt=8,Ht=8,Wn=4;function ce(){return "pane-"+Math.random().toString(36).substring(2,11)}function ye(e,t){if(e===null)return null;if(e.type==="pane")return e.id===t?null:e;let n=ye(e.first,t),s=ye(e.second,t);return n===null?s:s===null?n:{...e,first:n,second:s}}function fe(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=fe(e.first,t),s=fe(e.second,t);return n===null?s:s===null?n:{...e,first:n,second:s}}function De(e,t,n,s,r){if(e===null)return typeof r=="string"?{type:"pane",id:ce(),tabs:[r],activeTabId:r}:r;if(e.type==="pane"){if(e.id===t||e.tabs.includes(t)){let o=typeof r=="string"?{type:"pane",id:ce(),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:De(e.first,t,n,s,r)||e.first,second:De(e.second,t,n,s,r)||e.second}}function pt(e,t){if(e===null)return {type:"pane",id:ce(),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:ce(),tabs:[t],activeTabId:t}}:{...s,second:n(s.second,s.direction)}}return n(e,null)}function Te(e,t,n){return e===null?null:e===t?{...e,splitPercentage:n}:e.type==="split"?{...e,first:Te(e.first,t,n)||e.first,second:Te(e.second,t,n)||e.second}:e}function K(e,t){return e===null?null:e.type==="pane"?e.id===t||e.tabs.includes(t)?e:null:K(e.first,t)??K(e.second,t)}function _e(e,t,n){if(e===null)return null;if(e.type==="pane"){if(e.id===t||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:_e(e.first,t,n)??e.first,second:_e(e.second,t,n)??e.second}}function Ue(e,t,n){if(e===null)return null;if(e.type==="pane"){if(e.id===t||e.tabs.includes(t)){if(n===false){let{locked:s,...r}=e;return r}return {...e,locked:n}}return e}return {...e,first:Ue(e.first,t,n)??e.first,second:Ue(e.second,t,n)??e.second}}function Ye(e,t,n){return e===null?null:e.type==="pane"?e.id===t||e.tabs.includes(t)?{...e,activeTabId:n}:e:{...e,first:Ye(e.first,t,n)??e.first,second:Ye(e.second,t,n)??e.second}}function ft(e,t,n){if(e===null)return null;let r=K(e,t)?.tabsMetadata?.[t],o=fe(e,t);if(o===null)return {type:"pane",id:ce(),tabs:[t],activeTabId:t,tabsMetadata:r?{[t]:r}:void 0};function i(a){if(a.type==="pane"){if(a.id===n||a.tabs.includes(n)){let l=[...a.tabs];l.includes(t)||l.push(t);let P={...a.tabsMetadata};return r&&(P[t]=r),{...a,tabs:l,activeTabId:t,tabsMetadata:Object.keys(P).length>0?P:void 0}}return a}return {...a,first:i(a.first),second:i(a.second)}}return i(o)}function mt(e,t,n,s="before"){if(e===null)return null;let o=K(e,t)?.tabsMetadata?.[t],i=fe(e,t);if(i===null)return {type:"pane",id:ce(),tabs:[t],activeTabId:t,tabsMetadata:o?{[t]:o}:void 0};function a(l){if(l.type==="pane"){if(l.id===n||l.tabs.includes(n)){let D=[...l.tabs].filter(y=>y!==t),c=D.indexOf(n);c<0&&(c=0),s==="after"&&(c+=1),D.splice(c,0,t);let T={...l.tabsMetadata};return o&&(T[t]=o),{...l,tabs:D,activeTabId:t,tabsMetadata:Object.keys(T).length>0?T:void 0}}return l}return {...l,first:a(l.first),second:a(l.second)}}return a(i)}function le(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:l,second:P}=e,c={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},T={panes:[],splitters:[]},y={panes:[],splitters:[]};if(i==="row"){let v=s*(a/100);T=le(l,t,n,v,r,`${o}-L`),y=le(P,t+v,n,s-v,r,`${o}-R`);}else {let v=r*(a/100);T=le(l,t,n,s,v,`${o}-T`),y=le(P,t,n+v,s,r-v,`${o}-B`);}return {panes:[...T.panes,...y.panes],splitters:[c,...T.splitters,...y.splitters]}}function Be({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(n),t.setAttribute("data-resizing","true");let s=a=>{r(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",s),document.removeEventListener("pointerup",i),o();};document.addEventListener("pointermove",s),document.addEventListener("pointerup",i);}function Ge({containerRef:e,isRow:t,direction:r,splitPercentage:o,resizerSize:n,snapThreshold:s,layout:i,currentNode:a,onLayoutChange:l,onResizeStart:y,onResizeEnd:D,parentLeft:c,parentTop:x,parentWidth:T,parentHeight:v}){let{onResizeStart:R,onResize:E,onResizeEnd:L,minSplitPercentage:p=5,maxSplitPercentage:b=95,locked:f=false}=oe();return useCallback(z=>{if(f)return;z.preventDefault();let A=e.current;if(!A)return;y&&y(),R&&R(a);let I=A.getBoundingClientRect(),V=z.clientX,w=z.clientY,K=o,h=z.currentTarget,F=I.left+I.width*(c/100),Y=I.top+I.height*(x/100),O=I.width*(T/100),m=I.height*(v/100),_=Array.from(document.querySelectorAll('div[role="separator"][data-direction]')).filter(N=>N!==h&&N.getAttribute("data-direction")===r).map(N=>{let d=N.getBoundingClientRect();return t?d.left+d.width/2:d.top+d.height/2}),k=K;Oe({cursor:t?"col-resize":"row-resize",resizerEl:h,onMove:N=>{let d=t?(N.clientX-V)/O*100:(N.clientY-w)/m*100,B=K+d,ae=t?F+(O-n)*(B/100)+n/2:Y+(m-n)*(B/100)+n/2,W=1/0,ee=null;for(let j of _){let u=Math.abs(ae-j);u<s&&u<W&&(W=u,ee=j);}let le=B;ee!==null&&(le=t?(ee-n/2-F)/(O-n)*100:(ee-n/2-Y)/(m-n)*100);let fe=Math.max(p,Math.min(b,le));k=fe;let me=ve(i,a,fe);if(me){let{panes:j,splitters:u}=se(me),S=e.current;if(S){for(let P of j)S.style.setProperty(`--pane-left-${P.paneId}`,`${P.left}%`),S.style.setProperty(`--pane-top-${P.paneId}`,`${P.top}%`),S.style.setProperty(`--pane-width-${P.paneId}`,`${P.width}%`),S.style.setProperty(`--pane-height-${P.paneId}`,`${P.height}%`);for(let P of u)S.style.setProperty(`--splitter-pos-${P.id}`,`${P.direction==="row"?P.left:P.top}%`);}}E&&E(a,fe);},onEnd:()=>{let N=ve(i,a,k),d=e.current;if(d){let{panes:B,splitters:ae}=se(N);for(let W of B)d.style.removeProperty(`--pane-left-${W.paneId}`),d.style.removeProperty(`--pane-top-${W.paneId}`),d.style.removeProperty(`--pane-width-${W.paneId}`),d.style.removeProperty(`--pane-height-${W.paneId}`);for(let W of ae)d.style.removeProperty(`--splitter-pos-${W.id}`);}l(N),D&&D(),L&&L(a,k);}});},[e,t,r,o,n,s,i,a,l,y,D,R,E,L,p,b,c,x,T,v])}var on=({splitter:e,resizerSize:t,snapThreshold:r,containerRef:o})=>{let{layout:n,onLayoutChange:s,classNames:i,locked:a}=oe(),[l,y]=useState(false),{currentNode:D,direction:c,left:x,top:T,width:v,height:R,parentLeft:E,parentTop:L,parentWidth:p,parentHeight:b}=e,f=c==="row",z=Ge({containerRef:o,isRow:f,direction:c,splitPercentage:D.splitPercentage,resizerSize:t,snapThreshold:r,layout:n,currentNode:D,onLayoutChange:s,onResizeStart:()=>y(true),onResizeEnd:()=>y(false),parentLeft:E,parentTop:L,parentWidth:p,parentHeight:b}),A=f?{position:"absolute",left:`calc(var(--splitter-pos-${e.id}, ${x}%) - ${t/2}px)`,top:`calc(${T}% + ${t/2}px)`,width:`${t}px`,height:`calc(${R}% - ${t}px)`,cursor:a?"default":"col-resize",pointerEvents:a?"none":"auto",zIndex:10,userSelect:"none",touchAction:"none",boxSizing:"border-box"}:{position:"absolute",left:`calc(${x}% + ${t/2}px)`,top:`calc(var(--splitter-pos-${e.id}, ${T}%) - ${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:A,onPointerDown:z,role:"separator","aria-valuenow":D.splitPercentage,"aria-valuemin":5,"aria-valuemax":95})},sn=en.memo(({paneId:e,renderPane:t})=>jsx(Fragment,{children:t(e)}),(e,t)=>e.paneId===t.paneId&&e.renderPane===t.renderPane),an=({tree:e,resizerSize:t=4,snapThreshold:r})=>{let{layout:o,renderPane:n,activeId:s,dismissIntentId:i,setContainerRef:a,fullscreenPaneId:l,snapThreshold:y,locked:D,classNames:c}=oe(),x=r!==void 0?r:y??8,T=e!==void 0?e:o,v=useRef(null),{panes:R,splitters:E}=useMemo(()=>T?se(T):{panes:[],splitters:[]},[T]);if(!T)return null;let L=()=>jsxs(Fragment,{children:[R.map(p=>{let b=l===p.paneId;return jsx("div",{style:{position:"absolute",left:b?"0%":`var(--pane-left-${p.paneId}, ${p.left}%)`,top:b?"0%":`var(--pane-top-${p.paneId}, ${p.top}%)`,width:b?"100%":`var(--pane-width-${p.paneId}, ${p.width}%)`,height:b?"100%":`var(--pane-height-${p.paneId}, ${p.height}%)`,overflow:"hidden",zIndex:b?20:1,display:l&&!b?"none":"block",padding:b?"0px":`${t/2}px`,boxSizing:"border-box"},children:jsx(sn,{paneId:p.paneId,renderPane:n})},p.paneId)}),!l&&E.map(p=>jsx(on,{splitter:p,resizerSize:t,snapThreshold:x,containerRef:v},p.id))]});if(e===void 0){let p=s!==null&&s===i,b=z=>{a(z),v.current=z;},f=`zeugma-dashboard-root ${p?"zeugma-dashboard-dismiss-active":""} ${D?c.dashboardLocked||"zeugma-dashboard-locked":""}`.trim();return jsx("div",{ref:b,className:f,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:L()})}return jsx("div",{ref:v,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:L()})};var ht="zeugma-height:",dn="default-pane";function pn(e){try{let t=localStorage.getItem(ht+e);if(t!==null){let r=Number(t);if(Number.isFinite(r)&&r>0)return r}}catch{}return null}function vt(e,t){try{localStorage.setItem(ht+e,String(Math.round(t)));}catch{}}var Pt=({children:e,active:t=true,height:r,onHeightChange:o,minHeight:n=100,maxHeight:s=1/0,persist:i,localStorageKey:a,resizerHeight:l=6,className:y,resizerClassName:D})=>{let c=i?a||dn:null,x=()=>{let f=(c?pn(c):null)??r??400;return Ve(f,n,s)},[T,v]=useState(x),R=useRef(null),E=c?T:r??T,L=useRef(r);useEffect(()=>{if(r!==void 0&&r!==L.current){let f=Ve(r,n,s);v(f),c&&vt(c,f);}L.current=r;},[r,n,s,c]);let p=useCallback(()=>s,[s]),b=useCallback(f=>{f.preventDefault();let z=f.clientY,A=E,I=p(),V=f.currentTarget,w=yt(R.current),K=w?w.scrollTop:0,h=z,F=null,Y=(m,$)=>{let _=$-K,N=m-z+_,d=Ve(A+N,n,I);return R.current&&(R.current.style.height=`${d}px`),d},O=()=>{if(!w)return;let m=w===document.documentElement||w===document.body?{top:0,bottom:window.innerHeight}:w.getBoundingClientRect(),$=40,_=10,k=0;h>m.bottom-$?k=Math.min(1,(h-(m.bottom-$))/$)*_:h<m.top+$&&(k=-Math.min(1,(m.top+$-h)/$)*_),k!==0&&(w.scrollTop+=k,Y(h,w.scrollTop)),F=requestAnimationFrame(O);};F=requestAnimationFrame(O),Oe({cursor:"row-resize",resizerEl:V,onMove:m=>{h=m.clientY,w&&Y(h,w.scrollTop);},onEnd:()=>{F!==null&&cancelAnimationFrame(F);let m=A;R.current&&(m=R.current.getBoundingClientRect().height),m=Ve(m,n,I),v(m),o&&o(m),c&&vt(c,m);}});},[E,n,p,o,c]);return t?jsxs("div",{ref:R,className:`zeugma-resizable-container ${y||""}`.trim(),style:{height:`${E}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:b,role:"separator","aria-orientation":"horizontal","aria-valuenow":Math.round(E),"aria-valuemin":n,"aria-valuemax":s===1/0?void 0:s})]}):jsx("div",{className:`zeugma-resizable-container disabled ${y||""}`.trim(),style:{height:"100%",position:"relative",overflow:"hidden",boxSizing:"border-box"},children:jsx("div",{style:{height:"100%",overflow:"hidden"},children:e})})};function Ve(e,t,r){return Math.max(t,Math.min(r,e))}function yt(e){if(typeof window>"u"||!e)return null;let t=e.parentElement;if(!t)return document.documentElement;let o=window.getComputedStyle(t).overflowY;return o==="auto"||o==="scroll"?t:yt(t)}var Ue=createContext(null);var yn={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"}},Tt=({id:e,position:t,activeClassName:r})=>{let{setNodeRef:o,isOver:n}=useDroppable({id:e});return jsxs(Fragment,{children:[jsx("div",{ref:o,style:yn[t]}),n&&jsx("div",{className:r,style:Tn[t]})]})},xn=({id:e,children:t,style:r,locked:o=false})=>{let{layout:n,activeId:s,classNames:i,fullscreenPaneId:a,onFullscreenChange:l,locked:y}=oe(),{removePane:D,updateTabMetadata:c,selectTab:x,removeTab:T}=nt(),v=useContext($e);if(!v)throw new Error("Pane must be used within a Zeugma provider");let{registerPortalTarget:R}=v,E=useMemo(()=>q(n,e),[n,e]),L=E?.id??e,p=E?.tabs??[e],b=E?.activeTabId??e,f=E?.tabsMetadata,z=f?.[e],A=E?.locked??false,I=o||A,V=y||I,w=y||I,K=s!==null&&s!==e&&(!p.includes(s)||p.length>1)&&!w,{attributes:h,listeners:F,setNodeRef:Y}=useDraggable({id:e,disabled:V}),O=s!==null&&p.includes(s),m=a===e,$=useCallback(()=>jsx("div",{id:`zeugma-tab-target-${b}`,className:"zeugma-tab-content-wrapper",style:{height:"100%",width:"100%"}}),[b]);useEffect(()=>{let d=document.getElementById(`zeugma-tab-target-${b}`);return R(b,d),()=>{R(b,null);}},[b,R]);let _=useMemo(()=>({isDragging:O,isFullscreen:m,toggleFullscreen:()=>l?.(m?null:e),remove:()=>{m&&l?.(null),D(L);},metadata:z,updateMetadata:d=>{c(e,d);},locked:V,tabs:p,activeTabId:b,selectTab:d=>x(L,d),removeTab:d=>{m&&d===b&&l?.(null),T(d);},tabsMetadata:f,updateTabMetadata:(d,B)=>{c(d,B);},renderActiveTab:$}),[O,m,l,e,T,z,c,V,p,b,x,L,f,$]),k=useMemo(()=>V?{disabled:true}:{...F,...h},[F,h,V]),N=`${i.pane||""} ${I?i.paneLocked||"zeugma-pane-locked":""}`.trim();return jsx(Ue.Provider,{value:k,children:jsxs("div",{ref:Y,className:N,style:{position:"relative",width:"100%",height:"100%",...r},children:[t(_),K&&jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:["top","bottom","left","right"].map(d=>jsx(Tt,{id:`drop-${d}-${e}`,position:d,activeClassName:i.dropPreview},d))}),s!==null&&s!==e&&w&&jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:jsx(Tt,{id:`drop-locked-${e}`,position:"full",activeClassName:i.lockedPreview||"zeugma-locked-preview"})})]})})};var Dn=({children:e,className:t,style:r})=>{let o=useContext(Ue);if(!o)throw new Error("<DragHandle> must be used inside a <Pane>");let{disabled:n,...s}=o;return jsx("div",{className:t,style:{cursor:n?"default":"grab",userSelect:n?"auto":"none",touchAction:n?"auto":"none",...r},...n?{}:s,children:e})};var Nn=({id:e,locked:t=false,children:r,className:o,style:n})=>{let{locked:s}=oe(),i=t||s,{attributes:a,listeners:l,setNodeRef:y,isDragging:D}=useDraggable({id:`tab-header-${e}`,disabled:i}),{setNodeRef:c,isOver:x}=useDroppable({id:`tab-drop-${e}`,disabled:i});return jsx("div",{ref:v=>{y(v),c(v);},className:o,style:{display:"inline-flex",cursor:i?"default":"grab",...n},...i?{}:l,...i?{}:a,children:r({isDragging:D,isOver:x})})};export{Zt as DEFAULT_DRAG_ACTIVATION_DISTANCE,An as DEFAULT_RESIZER_SIZE,Ht as DEFAULT_SNAP_THRESHOLD,Dn as DragHandle,xn as Pane,an as PaneTree,Pt as ResizableContainer,Nn as Tab,Kt as Zeugma,it as addPane,se as computeLayout,Oe as createDragSession,q as findPane,ie as generateUniqueId,at as mergeTab,lt as moveTab,be as removePane,de as removeTab,Ze as selectTab,ye as splitPane,He as updatePaneLock,ve as updateSplitPercentage,ke as updateTabMetadata,Ge as useResizer,At as useZeugma};//# 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 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
|
|
7
7
|
//# sourceMappingURL=index.js.map
|