react-zeugma 3.0.0 → 4.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 +70 -180
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +75 -104
- package/dist/index.d.ts +75 -104
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
### Core Features
|
|
16
16
|
|
|
17
17
|
- **Recursive Split Trees**: Nest rows and columns to any depth using a simple serialized JSON node structure.
|
|
18
|
-
- **
|
|
18
|
+
- **4-Zone Docking Previews**: Drag panels on the top, bottom, left, or right edges of another pane to split it.
|
|
19
19
|
- **Native Flexbox Resizers**: Fluid, non-blocking split handles built on pointer events.
|
|
20
20
|
- **Accessible Drag-and-Drop**: Built on top of the performant and accessible [`@dnd-kit`](https://dndkit.com) toolkit.
|
|
21
21
|
- **Fullscreen Zoom Toggle**: Programmatically expand any pane to cover the entire viewport and snap it back instantly.
|
|
@@ -37,23 +37,22 @@ npm install react-zeugma
|
|
|
37
37
|
|
|
38
38
|
## Quick Start
|
|
39
39
|
|
|
40
|
-
Import the core components and configure the layout state inside your React application.
|
|
40
|
+
Import the core components and configure the layout state inside your React application using the `useZeugma` hook.
|
|
41
41
|
|
|
42
42
|
```tsx
|
|
43
|
-
import {
|
|
44
|
-
import { Zeugma, PaneTree, Pane, DragHandle, TreeNode } from 'react-zeugma'
|
|
43
|
+
import { useZeugma, Zeugma, PaneTree, Pane, DragHandle, TreeNode } from 'react-zeugma'
|
|
45
44
|
|
|
46
45
|
const initialLayout: TreeNode = {
|
|
47
46
|
type: 'split',
|
|
48
47
|
direction: 'row',
|
|
49
48
|
splitPercentage: 20,
|
|
50
|
-
first: { type: 'pane',
|
|
49
|
+
first: { type: 'pane', id: 'explorer', tabs: ['explorer'], activeTabId: 'explorer' },
|
|
51
50
|
second: {
|
|
52
51
|
type: 'split',
|
|
53
52
|
direction: 'row',
|
|
54
53
|
splitPercentage: 50,
|
|
55
|
-
first: { type: 'pane',
|
|
56
|
-
second: { type: 'pane',
|
|
54
|
+
first: { type: 'pane', id: 'editor', tabs: ['editor'], activeTabId: 'editor' },
|
|
55
|
+
second: { type: 'pane', id: 'preview', tabs: ['preview'], activeTabId: 'preview' },
|
|
57
56
|
},
|
|
58
57
|
}
|
|
59
58
|
|
|
@@ -78,10 +77,10 @@ function MyPane({ id }: { id: string }) {
|
|
|
78
77
|
}
|
|
79
78
|
|
|
80
79
|
export default function Dashboard() {
|
|
81
|
-
const
|
|
80
|
+
const zeugma = useZeugma({ initialLayout })
|
|
82
81
|
|
|
83
82
|
return (
|
|
84
|
-
<Zeugma
|
|
83
|
+
<Zeugma {...zeugma} renderPane={(id) => <MyPane id={id} />}>
|
|
85
84
|
<div className="w-screen h-screen">
|
|
86
85
|
<PaneTree />
|
|
87
86
|
</div>
|
|
@@ -96,30 +95,37 @@ export default function Dashboard() {
|
|
|
96
95
|
|
|
97
96
|
### `<Zeugma>`
|
|
98
97
|
|
|
99
|
-
The context provider that sets up the drag-and-drop state machine, monitors active drags, and registers layout change notifications.
|
|
100
|
-
|
|
101
|
-
| Prop
|
|
102
|
-
|
|
|
103
|
-
| `
|
|
104
|
-
| `
|
|
105
|
-
| `
|
|
106
|
-
| `
|
|
107
|
-
| `
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
| `
|
|
116
|
-
| `
|
|
117
|
-
| `
|
|
118
|
-
| `
|
|
119
|
-
| `
|
|
120
|
-
| `
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
98
|
+
The context provider that sets up the drag-and-drop state machine, monitors active drags, and registers layout change notifications. It extends `ZeugmaController` directly; you typically spread the controller object returned by `useZeugma` onto it.
|
|
99
|
+
|
|
100
|
+
| Prop | Type | Required | Description |
|
|
101
|
+
| -------------------- | -------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
102
|
+
| `...controllerProps` | `ZeugmaController` | Yes | All properties returned by `useZeugma(options)`. Usually passed by spreading the controller object (e.g., `{...zeugma}`). |
|
|
103
|
+
| `renderPane` | `(paneId: string) => ReactNode` | Yes | Renderer function lookup that returns a `<Pane>` structure. |
|
|
104
|
+
| `classNames` | `ZeugmaClassNames` | No | Custom classes for overriding pane, resizer, and drop preview overlays. |
|
|
105
|
+
| `renderDragOverlay` | `(activeId: string, type: 'pane' \| 'tab') => ReactNode` | No | Renders a custom cursor-following drag preview overlay. |
|
|
106
|
+
| `renderWidget` | `(tabId: string) => ReactNode` | No | Render function mapping tab IDs to React elements. Used to render tab widgets inside portals. |
|
|
107
|
+
|
|
108
|
+
### `useZeugma(options)`
|
|
109
|
+
|
|
110
|
+
A custom state hook that initializes and manages the recursive layout tree and handles drag-and-drop actions.
|
|
111
|
+
|
|
112
|
+
| Option | Type | Default | Description |
|
|
113
|
+
| ------------------------ | --------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------- |
|
|
114
|
+
| `initialLayout` | `TreeNode \| null` | Yes | Initial layout tree structure. |
|
|
115
|
+
| `locked` | `boolean` | `false` | If true, layout resizes and drags are disabled. |
|
|
116
|
+
| `dragActivationDistance` | `number` | `8` | Minimum pointer drag distance (in pixels) required to activate dragging. |
|
|
117
|
+
| `snapThreshold` | `number` | `8` | Threshold in pixels to snap layout resizers to adjacent edges. |
|
|
118
|
+
| `minSplitPercentage` | `number` | `5` | Minimum resizing limit percentage. |
|
|
119
|
+
| `maxSplitPercentage` | `number` | `95` | Maximum resizing limit percentage. |
|
|
120
|
+
| `enableDragToDismiss` | `boolean` | `false` | If true, enables the drag-out-to-dismiss gesture to close widgets. |
|
|
121
|
+
| `dismissThreshold` | `number` | `60` | Distance in pixels outside container bounds required to trigger dismissal. |
|
|
122
|
+
| `onRemove` | `(paneId: string) => void` | — | Callback triggered when a pane is removed. |
|
|
123
|
+
| `onDragStart` | `(activeId: string) => void` | — | Callback triggered when dragging starts. |
|
|
124
|
+
| `onDragEnd` | `(activeId: string, overId: string \| null, dropAction: any) => void` | — | Callback triggered when dragging ends. |
|
|
125
|
+
| `onResizeStart` | `(currentNode: SplitNode) => void` | — | Callback triggered when resizing starts. |
|
|
126
|
+
| `onResize` | `(currentNode: SplitNode, percentage: number) => void` | — | Callback triggered during resizing. |
|
|
127
|
+
| `onResizeEnd` | `(currentNode: SplitNode, percentage: number) => void` | — | Callback triggered when resizing ends. |
|
|
128
|
+
| `onDismissIntentChange` | `(paneId: string \| null) => void` | — | Callback triggered when drag-out intent changes. |
|
|
123
129
|
|
|
124
130
|
### `<PaneTree>`
|
|
125
131
|
|
|
@@ -189,10 +195,6 @@ Recursively scans the layout tree, removes the targeted pane node, and collapses
|
|
|
189
195
|
|
|
190
196
|
Recursively matches the bottommost/rightmost pane leaf in the tree, splits it, and inserts the target `paneToAdd`.
|
|
191
197
|
|
|
192
|
-
#### `swapPanes(tree: TreeNode | null, idA: string, idB: string): TreeNode | null`
|
|
193
|
-
|
|
194
|
-
Swaps the positions of `idA` and `idB` nodes directly inside the tree structure.
|
|
195
|
-
|
|
196
198
|
#### `splitPane(tree, targetId, direction, splitType, paneToAdd)`
|
|
197
199
|
|
|
198
200
|
Splits the targeted `targetId` pane inside the tree with `direction` (_row_ / _column_) and type (_left_, _right_, _top_, _bottom_) to insert `paneToAdd`.
|
|
@@ -209,17 +211,13 @@ Use custom CSS or styling rules to style resizers, dragging states, drop preview
|
|
|
209
211
|
|
|
210
212
|
```tsx
|
|
211
213
|
<Zeugma
|
|
212
|
-
|
|
213
|
-
onChange={setLayout}
|
|
214
|
-
renderPane={renderPane}
|
|
214
|
+
{...zeugma}
|
|
215
215
|
classNames={{
|
|
216
216
|
// resizer handles
|
|
217
217
|
resizer:
|
|
218
218
|
'bg-transparent hover:bg-indigo-500/50 active:bg-indigo-500 transition-colors duration-150',
|
|
219
219
|
// split previews
|
|
220
220
|
dropPreview: 'bg-indigo-500/10 border-2 border-dashed border-indigo-500/50 backdrop-blur-xs',
|
|
221
|
-
// swap previews
|
|
222
|
-
swapPreview: 'bg-amber-500/10 border-2 border-dashed border-amber-500/50 backdrop-blur-xs',
|
|
223
221
|
}}
|
|
224
222
|
>
|
|
225
223
|
<PaneTree />
|
|
@@ -250,77 +248,6 @@ export interface PaneNode {
|
|
|
250
248
|
}
|
|
251
249
|
|
|
252
250
|
export type TreeNode = SplitNode | PaneNode
|
|
253
|
-
|
|
254
|
-
export interface ZeugmaClassNames {
|
|
255
|
-
pane?: string
|
|
256
|
-
dropPreview?: string
|
|
257
|
-
swapPreview?: string
|
|
258
|
-
dragOverlay?: string
|
|
259
|
-
resizer?: string
|
|
260
|
-
dragOut?: string
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
export interface PaneRenderProps {
|
|
264
|
-
isDragging: boolean
|
|
265
|
-
isFullscreen: boolean
|
|
266
|
-
toggleFullscreen: () => void
|
|
267
|
-
remove: () => void
|
|
268
|
-
metadata: Record<string, unknown> | undefined
|
|
269
|
-
updateMetadata: (
|
|
270
|
-
updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined,
|
|
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
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
export interface ZeugmaStateValue {
|
|
285
|
-
layout: TreeNode | null
|
|
286
|
-
onLayoutChange: (newLayout: TreeNode | null) => void
|
|
287
|
-
renderPane: (paneId: string) => ReactNode
|
|
288
|
-
activeId: string | null
|
|
289
|
-
dismissIntentId: string | null
|
|
290
|
-
setContainerRef: (element: HTMLElement | null) => void
|
|
291
|
-
fullscreenPaneId: string | null
|
|
292
|
-
classNames: ZeugmaClassNames
|
|
293
|
-
onRemove?: (paneId: string) => void
|
|
294
|
-
onFullscreenChange?: (paneId: string | null) => void
|
|
295
|
-
snapThreshold?: number
|
|
296
|
-
onResizeStart?: (currentNode: SplitNode) => void
|
|
297
|
-
onResize?: (currentNode: SplitNode, percentage: number) => void
|
|
298
|
-
onResizeEnd?: (currentNode: SplitNode, percentage: number) => void
|
|
299
|
-
minSplitPercentage?: number
|
|
300
|
-
maxSplitPercentage?: number
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
export interface ZeugmaActionsValue {
|
|
304
|
-
removePane: (paneId: string) => void
|
|
305
|
-
addPane: (paneId: string) => void
|
|
306
|
-
swapPanes: (paneIdA: string, paneIdB: string) => void
|
|
307
|
-
splitPane: (
|
|
308
|
-
targetId: string,
|
|
309
|
-
direction: SplitDirection,
|
|
310
|
-
splitType: 'left' | 'right' | 'top' | 'bottom',
|
|
311
|
-
paneToAdd: string,
|
|
312
|
-
) => void
|
|
313
|
-
updateSplitPercentage: (currentNode: SplitNode, percentage: number) => void
|
|
314
|
-
updateTabMetadata: (
|
|
315
|
-
tabId: string,
|
|
316
|
-
updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined,
|
|
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
|
|
323
|
-
}
|
|
324
251
|
```
|
|
325
252
|
|
|
326
253
|
---
|
|
@@ -380,27 +307,34 @@ The root context provider. It handles the drag-and-drop event loop and coordinat
|
|
|
380
307
|
|
|
381
308
|
#### Props
|
|
382
309
|
|
|
383
|
-
-
|
|
384
|
-
- `onChange: (newLayout: TreeNode | null) => void` — Callback triggered when the layout tree changes (resizing, dragging to split, dragging to swap).
|
|
310
|
+
- `...controllerProps: ZeugmaController` — The controller properties returned by the `useZeugma` hook (typically passed via `{...zeugma}`).
|
|
385
311
|
- `renderPane: (paneId: string) => ReactNode` — Callback to render the contents of a pane given its ID.
|
|
386
312
|
- `renderDragOverlay?: (activeId: string, type: 'pane' | 'tab') => ReactNode` — (Optional) Renders a custom cursor-following drag preview.
|
|
387
313
|
- `classNames?: ZeugmaClassNames` — (Optional) CSS class overrides for styling various layout elements.
|
|
388
|
-
- `fullscreenPaneId?: string | null` — (Optional) ID of the pane currently in fullscreen mode.
|
|
389
|
-
- `onFullscreenChange?: (paneId: string | null) => void` — (Optional) Callback triggered when a pane enters/leaves fullscreen.
|
|
390
|
-
- `onRemove?: (paneId: string) => void` — (Optional) Callback triggered when a pane is closed/removed.
|
|
391
|
-
- `dragActivationDistance?: number` — (Optional) Minimum pointer drag distance (in pixels) required to activate dragging. Defaults to `8`.
|
|
392
|
-
- `enableDragToDismiss?: boolean` — (Optional) Whether to enable the drag-out-to-dismiss gesture. Defaults to `false`.
|
|
393
|
-
- `dragOutThreshold?: number` — (Optional) Distance in pixels outside the container boundaries required to activate drag-out mode. Defaults to `60`.
|
|
394
|
-
- `onDragOutChange?: (activeId: string | null) => void` — (Optional) Callback triggered when the drag-out state changes.
|
|
395
|
-
- `onDragStart?: (activeId: string) => void` — (Optional) Callback triggered when dragging starts on a pane.
|
|
396
|
-
- `onDragEnd?: (activeId: string, overId: string | null, dropAction: any) => void` — (Optional) Callback triggered when dragging ends, providing swap or split details.
|
|
397
|
-
- `onResizeStart?: (currentNode: SplitNode) => void` — (Optional) Callback triggered when resizing starts.
|
|
398
|
-
- `onResize?: (currentNode: SplitNode, percentage: number) => void` — (Optional) Callback triggered during resizing.
|
|
399
|
-
- `onResizeEnd?: (currentNode: SplitNode, percentage: number) => void` — (Optional) Callback triggered when resizing ends.
|
|
400
|
-
- `minSplitPercentage?: number` — (Optional) Minimum resizing limit percentage (defaults to `5`).
|
|
401
|
-
- `maxSplitPercentage?: number` — (Optional) Maximum resizing limit percentage (defaults to `95`).
|
|
402
314
|
- `renderWidget?: (tabId: string) => ReactNode` — (Optional) Render function mapping tab IDs to React elements. Used to render tab widgets inside portals.
|
|
403
315
|
|
|
316
|
+
### `useZeugma(options)`
|
|
317
|
+
|
|
318
|
+
A custom hook to manage the dashboard layout state.
|
|
319
|
+
|
|
320
|
+
#### Options
|
|
321
|
+
|
|
322
|
+
- `initialLayout: TreeNode | null` — Initial layout tree.
|
|
323
|
+
- `locked?: boolean` — Whether the layout is globally locked.
|
|
324
|
+
- `dragActivationDistance?: number` — Minimum pointer drag distance (in pixels) required to activate dragging (defaults to `8`).
|
|
325
|
+
- `snapThreshold?: number` — Threshold in pixels to snap layout resizers to adjacent edges (defaults to `8`).
|
|
326
|
+
- `minSplitPercentage?: number` — Minimum resizing limit percentage (defaults to `5`).
|
|
327
|
+
- `maxSplitPercentage?: number` — Maximum resizing limit percentage (defaults to `95`).
|
|
328
|
+
- `enableDragToDismiss?: boolean` — Whether to enable drag-out-to-dismiss (defaults to `false`).
|
|
329
|
+
- `dismissThreshold?: number` — Distance in pixels outside container bounds required to trigger dismissal (defaults to `60`).
|
|
330
|
+
- `onRemove?: (paneId: string) => void` — Callback when a pane is removed.
|
|
331
|
+
- `onDragStart?: (activeId: string) => void` — Callback when dragging starts.
|
|
332
|
+
- `onDragEnd?: (activeId: string, overId: string | null, dropAction: any) => void` — Callback when dragging ends.
|
|
333
|
+
- `onResizeStart?: (currentNode: SplitNode) => void` — Callback when resizing starts.
|
|
334
|
+
- `onResize?: (currentNode: SplitNode, percentage: number) => void` — Callback during resizing.
|
|
335
|
+
- `onResizeEnd?: (currentNode: SplitNode, percentage: number) => void` — Callback when resizing ends.
|
|
336
|
+
- `onDismissIntentChange?: (paneId: string | null) => void` — Callback when drag-out intent changes.
|
|
337
|
+
|
|
404
338
|
### `<PaneTree>`
|
|
405
339
|
|
|
406
340
|
Recursively renders the split nodes and pane nodes. Must be placed inside `<Zeugma>`.
|
|
@@ -480,46 +414,24 @@ Import these helpers from `react-zeugma` to manipulate the tree layout programma
|
|
|
480
414
|
Removes a pane from the tree and collapses the leftover sibling split node.
|
|
481
415
|
- **`splitPane(tree: TreeNode | null, targetId: string, direction: SplitDirection, splitType: 'left' | 'right' | 'top' | 'bottom', paneToAdd: string): TreeNode | null`**
|
|
482
416
|
Splits a specific target pane by nesting it under a new `SplitNode` along with a new pane.
|
|
483
|
-
- **`swapPanes(tree: TreeNode | null, idA: string, idB: string): TreeNode | null`**
|
|
484
|
-
Swaps the positions of two panes in the tree.
|
|
485
417
|
- **`updateTabMetadata(tree: TreeNode | null, tabId: string, updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined): TreeNode | null`**
|
|
486
418
|
Updates the metadata of a specific tab.
|
|
487
419
|
- **`findPane(tree: TreeNode | null, paneId: string): PaneNode | null`**
|
|
488
420
|
Recursively searches the layout tree and returns the target `PaneNode` if found, or `null` otherwise.
|
|
489
421
|
|
|
490
|
-
Alternatively, you can consume state and mutation helpers directly from the context hooks:
|
|
491
|
-
|
|
492
|
-
- **`useZeugmaState()`**: Returns the reactive state values (e.g., `layout`, `activeId`, `classNames`). Consumers of this hook will re-render whenever layout state updates.
|
|
493
|
-
- **`useZeugmaActions()`**: Returns the stable layout mutation actions (e.g., `removePane`, `splitPane`). Because these actions have a permanent identity, consumers of this hook **will not** re-render when layout state changes, providing a significant performance optimization.
|
|
494
|
-
|
|
495
|
-
The actions returned by `useZeugmaActions()` are:
|
|
496
|
-
|
|
497
|
-
- **`removePane(paneId: string) => void`**
|
|
498
|
-
- **`addPane(paneId: string) => void`**
|
|
499
|
-
- **`swapPanes(paneIdA: string, paneIdB: string) => void`**
|
|
500
|
-
- **`splitPane(targetId: string, direction: SplitDirection, splitType: string, paneToAdd: string) => void`**
|
|
501
|
-
- **`updateSplitPercentage(currentNode: SplitNode, percentage: number) => void`**
|
|
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`**
|
|
508
|
-
|
|
509
422
|
---
|
|
510
423
|
|
|
511
424
|
## 4. Basic Integration Recipe
|
|
512
425
|
|
|
513
426
|
```tsx
|
|
514
|
-
import {
|
|
515
|
-
import { Zeugma, PaneTree, Pane, DragHandle, TreeNode } from 'react-zeugma'
|
|
427
|
+
import { useZeugma, Zeugma, PaneTree, Pane, DragHandle, TreeNode } from 'react-zeugma'
|
|
516
428
|
|
|
517
429
|
const initialLayout: TreeNode = {
|
|
518
430
|
type: 'split',
|
|
519
431
|
direction: 'row',
|
|
520
432
|
splitPercentage: 50,
|
|
521
|
-
first: { type: 'pane',
|
|
522
|
-
second: { type: 'pane',
|
|
433
|
+
first: { type: 'pane', id: 'sidebar', tabs: ['sidebar'], activeTabId: 'sidebar' },
|
|
434
|
+
second: { type: 'pane', id: 'main', tabs: ['main'], activeTabId: 'main' },
|
|
523
435
|
}
|
|
524
436
|
|
|
525
437
|
function CustomPane({ id }: { id: string }) {
|
|
@@ -544,23 +456,12 @@ function CustomPane({ id }: { id: string }) {
|
|
|
544
456
|
}
|
|
545
457
|
|
|
546
458
|
export default function App() {
|
|
547
|
-
const
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
const handleRemove = (paneId: string) => {
|
|
551
|
-
// Remove the pane and update layout
|
|
552
|
-
setLayout((prev) => removePane(prev, paneId))
|
|
553
|
-
}
|
|
459
|
+
const zeugma = useZeugma({
|
|
460
|
+
initialLayout,
|
|
461
|
+
})
|
|
554
462
|
|
|
555
463
|
return (
|
|
556
|
-
<Zeugma
|
|
557
|
-
layout={layout}
|
|
558
|
-
onChange={setLayout}
|
|
559
|
-
renderPane={(id) => <CustomPane id={id} />}
|
|
560
|
-
fullscreenPaneId={fullscreenId}
|
|
561
|
-
onFullscreenChange={setFullscreenId}
|
|
562
|
-
onRemove={handleRemove}
|
|
563
|
-
>
|
|
464
|
+
<Zeugma {...zeugma} renderPane={(id) => <CustomPane id={id} />}>
|
|
564
465
|
<div style={{ width: '100vw', height: '100vh' }}>
|
|
565
466
|
<PaneTree />
|
|
566
467
|
</div>
|
|
@@ -579,7 +480,6 @@ export default function App() {
|
|
|
579
480
|
interface ZeugmaClassNames {
|
|
580
481
|
pane?: string // Applied to the outer wrapper of <Pane>
|
|
581
482
|
dropPreview?: string // Applied to the preview box when hovering over edge dropzones
|
|
582
|
-
swapPreview?: string // Applied to the preview box when hovering over center dropzone
|
|
583
483
|
dragOverlay?: string // Applied to the cursor-following drag preview portal
|
|
584
484
|
resizer?: string // Applied to the drag-to-resize split bar
|
|
585
485
|
}
|
|
@@ -598,16 +498,6 @@ interface ZeugmaClassNames {
|
|
|
598
498
|
}
|
|
599
499
|
|
|
600
500
|
/* Edge drop previews */
|
|
601
|
-
.my-drop-preview {
|
|
602
|
-
background-color: rgba(59, 130, 246, 0.2);
|
|
603
|
-
border: 2px dashed #3b82f6;
|
|
604
|
-
}
|
|
605
|
-
|
|
606
|
-
/* Center swap preview */
|
|
607
|
-
.my-swap-preview {
|
|
608
|
-
background-color: rgba(16, 185, 129, 0.25);
|
|
609
|
-
border: 2px solid #10b981;
|
|
610
|
-
}
|
|
611
501
|
```
|
|
612
502
|
````
|
|
613
503
|
|
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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=`
|
|
1
|
+
'use strict';var en=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 en__default=/*#__PURE__*/_interopDefault(en);var ze=en.createContext(void 0),Ie=en.createContext(void 0);var oe=()=>{let e=en.useContext(ze);if(!e)throw new Error("useZeugmaState must be used within a Zeugma provider");return e},nt=()=>{let e=en.useContext(Ie);if(!e)throw new Error("useZeugmaActions must be used within a Zeugma provider");return e};function rt(e){let t=en.useRef(null);return en.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){en.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]=en.useState({}),r=en.useCallback((o,n)=>{t(s=>s[o]===n?s:{...s,[o]:n});},[]);return {portalTargets:e,registerPortalTarget:r}}var $e=en.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]=en.useState(t),[z,A]=en.useState(o||null),[I,V]=en.useState(s),[w,K]=en.useState(null),[h,F]=en.useState(null),[Y,O]=en.useState(null),m=en.useRef(null),$=en.useCallback(u=>{m.current=u;},[]),_=en.useCallback(u=>{A(u),n?.(u);},[n]);en.useEffect(()=>{V(s);},[s]),en.useEffect(()=>{o!==void 0&&A(o);},[o]);let k=en.useRef(true);en.useEffect(()=>{if(k.current){k.current=false;return}r?.(b);},[b,r]);let N=en.useCallback(u=>{f(S=>be(S,u));},[]),d=en.useCallback(u=>{f(S=>it(S,u));},[]),B=en.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=en.useCallback((u,S)=>{f(P=>ve(P,u,S));},[]),W=en.useCallback((u,S)=>{f(P=>ke(P,u,S));},[]),ee=en.useCallback((u,S)=>{f(P=>He(P,u,S));},[]),le=en.useCallback((u,S)=>{f(P=>Ze(P,u,S));},[]),fe=en.useCallback((u,S)=>{f(P=>at(P,u,S));},[]),me=en.useCallback((u,S,P)=>{f(te=>lt(te,u,S,P));},[]),j=en.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=en.useRef(null);return en.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)},[]),jsxRuntime.jsx("div",{ref:o,className:r,style:{position:"fixed",top:0,left:0,zIndex:9999,pointerEvents:"none"},children:t(e)})};var Ae=class extends core.PointerSensor{static activators=[{eventName:"onPointerDown",handler:({nativeEvent:t})=>!t.target?.closest(".drag-cancel")}]},Fe=class extends core.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=en.useRef(null),u=rt(c),[S,P]=en.useState(false);ot(S);let te=en.useCallback(g=>t(g),[t]),Re=en.useMemo(()=>n,[n.pane,n.paneLocked,n.dropPreview,n.dragOverlay,n.resizer,n.dismissPreview,n.dashboardLocked,n.lockedPreview]),_e=core.useSensors(core.useSensor(Ae,{activationConstraint:{distance:b}}),core.useSensor(Fe,{activationConstraint:{delay:250,tolerance:5}})),Ye=en.useCallback(g=>{let H=core.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 core.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=en.useCallback((g,H)=>{O&&O(g,H);},[O]),Et=en.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=en.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=en.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=en.useMemo(()=>({registerPortalTarget:me}),[me]);return jsxRuntime.jsx(Ie.Provider,{value:Ct,children:jsxRuntime.jsx(ze.Provider,{value:Et,children:jsxRuntime.jsxs($e.Provider,{value:Nt,children:[jsxRuntime.jsx(core.DndContext,{id:"zeugma-dnd-context",sensors:_e,collisionDetection:Ye,onDragStart:Rt,onDragMove:St,onDragEnd:Dt,children:s}),c&&T&&o&&jsxRuntime.jsx(ut,{activeId:c,render:g=>o(g,T),className:`${n.dragOverlay||""} ${c===R?n.dismissPreview||"zeugma-dismiss-preview":""}`.trim()}),jsxRuntime.jsx("div",{id:"zeugma-portal-host",style:{display:"none"},children:wt.map(g=>jsxRuntime.jsx(jt,{tabId:g,target:fe[g]||null,renderWidget:r},g))})]})})})},jt=({tabId:e,target:t,renderWidget:r})=>{let o=en.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 en.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]),en.useEffect(()=>()=>{o.current&&o.current.remove();},[]),!n||!r?null:reactDom.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=`
|
|
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 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
|
|
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 en.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]=en.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 jsxRuntime.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__default.default.memo(({paneId:e,renderPane:t})=>jsxRuntime.jsx(jsxRuntime.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=en.useRef(null),{panes:R,splitters:E}=en.useMemo(()=>T?se(T):{panes:[],splitters:[]},[T]);if(!T)return null;let L=()=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[R.map(p=>{let b=l===p.paneId;return jsxRuntime.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:jsxRuntime.jsx(sn,{paneId:p.paneId,renderPane:n})},p.paneId)}),!l&&E.map(p=>jsxRuntime.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 jsxRuntime.jsx("div",{ref:b,className:f,style:{position:"relative",width:"100%",height:"100%",overflow:"hidden"},children:L()})}return jsxRuntime.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]=en.useState(x),R=en.useRef(null),E=c?T:r??T,L=en.useRef(r);en.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=en.useCallback(()=>s,[s]),b=en.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?jsxRuntime.jsxs("div",{ref:R,className:`zeugma-resizable-container ${y||""}`.trim(),style:{height:`${E}px`,position:"relative",overflow:"hidden",boxSizing:"border-box"},children:[jsxRuntime.jsx("div",{style:{height:`calc(100% - ${l}px)`,overflow:"hidden"},children:e}),jsxRuntime.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})]}):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 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=en.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}=core.useDroppable({id:e});return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:o,style:yn[t]}),n&&jsxRuntime.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=en.useContext($e);if(!v)throw new Error("Pane must be used within a Zeugma provider");let{registerPortalTarget:R}=v,E=en.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}=core.useDraggable({id:e,disabled:V}),O=s!==null&&p.includes(s),m=a===e,$=en.useCallback(()=>jsxRuntime.jsx("div",{id:`zeugma-tab-target-${b}`,className:"zeugma-tab-content-wrapper",style:{height:"100%",width:"100%"}}),[b]);en.useEffect(()=>{let d=document.getElementById(`zeugma-tab-target-${b}`);return R(b,d),()=>{R(b,null);}},[b,R]);let _=en.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=en.useMemo(()=>V?{disabled:true}:{...F,...h},[F,h,V]),N=`${i.pane||""} ${I?i.paneLocked||"zeugma-pane-locked":""}`.trim();return jsxRuntime.jsx(Ue.Provider,{value:k,children:jsxRuntime.jsxs("div",{ref:Y,className:N,style:{position:"relative",width:"100%",height:"100%",...r},children:[t(_),K&&jsxRuntime.jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:["top","bottom","left","right"].map(d=>jsxRuntime.jsx(Tt,{id:`drop-${d}-${e}`,position:d,activeClassName:i.dropPreview},d))}),s!==null&&s!==e&&w&&jsxRuntime.jsx("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:15,pointerEvents:"none"},children:jsxRuntime.jsx(Tt,{id:`drop-locked-${e}`,position:"full",activeClassName:i.lockedPreview||"zeugma-locked-preview"})})]})})};var Dn=({children:e,className:t,style:r})=>{let o=en.useContext(Ue);if(!o)throw new Error("<DragHandle> must be used inside a <Pane>");let{disabled:n,...s}=o;return jsxRuntime.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}=core.useDraggable({id:`tab-header-${e}`,disabled:i}),{setNodeRef:c,isOver:x}=core.useDroppable({id:`tab-drop-${e}`,disabled:i});return jsxRuntime.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})})};exports.DEFAULT_DRAG_ACTIVATION_DISTANCE=Zt;exports.DEFAULT_RESIZER_SIZE=An;exports.DEFAULT_SNAP_THRESHOLD=Ht;exports.DragHandle=Dn;exports.Pane=xn;exports.PaneTree=an;exports.ResizableContainer=Pt;exports.Tab=Nn;exports.Zeugma=Kt;exports.addPane=it;exports.computeLayout=se;exports.createDragSession=Oe;exports.findPane=q;exports.generateUniqueId=ie;exports.mergeTab=at;exports.moveTab=lt;exports.removePane=be;exports.removeTab=de;exports.selectTab=Ze;exports.splitPane=ye;exports.updatePaneLock=He;exports.updateSplitPercentage=ve;exports.updateTabMetadata=ke;exports.useResizer=Ge;exports.useZeugma=At;//# sourceMappingURL=index.cjs.map
|
|
7
7
|
//# sourceMappingURL=index.cjs.map
|