react-panel-layout 0.2.0 → 0.3.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/dist/FloatingPanelFrame-0MnRbFkV.cjs +2 -0
- package/dist/FloatingPanelFrame-0MnRbFkV.cjs.map +1 -0
- package/dist/FloatingPanelFrame-BkjBp0S5.js +96 -0
- package/dist/FloatingPanelFrame-BkjBp0S5.js.map +1 -0
- package/dist/GridLayout-B0W3Tdan.cjs +2 -0
- package/dist/GridLayout-B0W3Tdan.cjs.map +1 -0
- package/dist/{GridLayout-CmzKfbPP.js → GridLayout-C0uqEj9E.js} +467 -466
- package/dist/GridLayout-C0uqEj9E.js.map +1 -0
- package/dist/components/paneling/FloatingPanelFrame.d.ts +2 -2
- package/dist/components/window/Drawer.d.ts +0 -3
- package/dist/config.cjs +1 -1
- package/dist/config.js +1 -1
- package/dist/constants/styles.d.ts +87 -86
- package/dist/floating.cjs +1 -1
- package/dist/floating.cjs.map +1 -1
- package/dist/floating.js +7 -64
- package/dist/floating.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +4 -4
- package/dist/types.d.ts +11 -0
- package/package.json +1 -1
- package/dist/GridLayout-CmzKfbPP.js.map +0 -1
- package/dist/GridLayout-Dx3Qofl0.cjs +0 -2
- package/dist/GridLayout-Dx3Qofl0.cjs.map +0 -1
- package/dist/styles-BMEhL6I0.cjs +0 -2
- package/dist/styles-BMEhL6I0.cjs.map +0 -1
- package/dist/styles-BnvLfp6e.js +0 -49
- package/dist/styles-BnvLfp6e.js.map +0 -1
|
@@ -22,87 +22,88 @@ export declare const CSS_VAR_PREFIX = "rpl";
|
|
|
22
22
|
/**
|
|
23
23
|
* Tab colors - used in TabBar component
|
|
24
24
|
*/
|
|
25
|
-
export declare const COLOR_TAB_FG = "var(--rpl-color-tab-fg)";
|
|
26
|
-
export declare const COLOR_TAB_ACTIVE_BG = "var(--rpl-color-tab-active-bg)";
|
|
27
|
-
export declare const COLOR_TABBAR_BG = "var(--rpl-color-tabbar-bg)";
|
|
25
|
+
export declare const COLOR_TAB_FG = "var(--rpl-color-tab-fg, #d5d7de)";
|
|
26
|
+
export declare const COLOR_TAB_ACTIVE_BG = "var(--rpl-color-tab-active-bg, #2b2d35)";
|
|
27
|
+
export declare const COLOR_TABBAR_BG = "var(--rpl-color-tabbar-bg, #1e1f24)";
|
|
28
28
|
/**
|
|
29
29
|
* Panel colors - used in panel layouts
|
|
30
30
|
*/
|
|
31
|
-
export declare const COLOR_PANEL_BORDER = "var(--rpl-color-panel-border)";
|
|
32
|
-
export declare const COLOR_PANEL_BG = "var(--rpl-color-panel-bg)";
|
|
31
|
+
export declare const COLOR_PANEL_BORDER = "var(--rpl-color-panel-border, rgba(0, 0, 0, 0.3))";
|
|
32
|
+
export declare const COLOR_PANEL_BG = "var(--rpl-color-panel-bg, #0b0b0c)";
|
|
33
33
|
/**
|
|
34
34
|
* Primary color - used for resize handles, highlights
|
|
35
35
|
*/
|
|
36
|
-
export declare const COLOR_PRIMARY = "var(--rpl-color-primary)";
|
|
37
|
-
export declare const COLOR_RESIZE_HANDLE_IDLE = "var(--rpl-color-resize-handle-idle)";
|
|
38
|
-
export declare const COLOR_RESIZE_HANDLE_HOVER = "var(--rpl-color-resize-handle-hover)";
|
|
39
|
-
export declare const COLOR_RESIZE_HANDLE_ACTIVE = "var(--rpl-color-resize-handle-active)";
|
|
36
|
+
export declare const COLOR_PRIMARY = "var(--rpl-color-primary, #2196f3)";
|
|
37
|
+
export declare const COLOR_RESIZE_HANDLE_IDLE = "var(--rpl-color-resize-handle-idle, rgba(255, 255, 255, 0.12))";
|
|
38
|
+
export declare const COLOR_RESIZE_HANDLE_HOVER = "var(--rpl-color-resize-handle-hover, rgba(33, 150, 243, 0.35))";
|
|
39
|
+
export declare const COLOR_RESIZE_HANDLE_ACTIVE = "var(--rpl-color-resize-handle-active, rgba(33, 150, 243, 0.55))";
|
|
40
40
|
/**
|
|
41
41
|
* Drop suggestion overlay colors
|
|
42
42
|
*/
|
|
43
|
-
export declare const COLOR_DROP_SUGGEST_BORDER = "var(--rpl-color-drop-suggest-border)";
|
|
44
|
-
export declare const COLOR_DROP_SUGGEST_BG = "var(--rpl-color-drop-suggest-bg)";
|
|
43
|
+
export declare const COLOR_DROP_SUGGEST_BORDER = "var(--rpl-color-drop-suggest-border, rgba(90, 150, 255, 0.9))";
|
|
44
|
+
export declare const COLOR_DROP_SUGGEST_BG = "var(--rpl-color-drop-suggest-bg, rgba(90, 150, 255, 0.15))";
|
|
45
45
|
/**
|
|
46
46
|
* Tab drag overlay colors
|
|
47
47
|
*/
|
|
48
|
-
export declare const COLOR_TABDRAG_BG = "var(--rpl-color-tabdrag-bg)";
|
|
49
|
-
export declare const COLOR_TABDRAG_FG = "var(--rpl-color-tabdrag-fg)";
|
|
50
|
-
export declare const COLOR_TABDRAG_BORDER = "var(--rpl-color-tabdrag-border)";
|
|
51
|
-
export declare const COLOR_TABDRAG_SHADOW = "var(--rpl-color-tabdrag-shadow)";
|
|
48
|
+
export declare const COLOR_TABDRAG_BG = "var(--rpl-color-tabdrag-bg, rgba(34, 36, 42, 0.95))";
|
|
49
|
+
export declare const COLOR_TABDRAG_FG = "var(--rpl-color-tabdrag-fg, #e9ebf0)";
|
|
50
|
+
export declare const COLOR_TABDRAG_BORDER = "var(--rpl-color-tabdrag-border, rgba(120, 160, 255, 0.6))";
|
|
51
|
+
export declare const COLOR_TABDRAG_SHADOW = "var(--rpl-color-tabdrag-shadow, 0 6px 20px rgba(0, 0, 0, 0.35))";
|
|
52
52
|
/**
|
|
53
53
|
* Insert guide colors
|
|
54
54
|
*/
|
|
55
|
-
export declare const COLOR_INSERT_GUIDE = "var(--rpl-color-insert-guide)";
|
|
56
|
-
export declare const COLOR_INSERT_GUIDE_SHADOW = "var(--rpl-color-insert-guide-shadow)";
|
|
55
|
+
export declare const COLOR_INSERT_GUIDE = "var(--rpl-color-insert-guide, rgba(120, 160, 255, 0.95))";
|
|
56
|
+
export declare const COLOR_INSERT_GUIDE_SHADOW = "var(--rpl-color-insert-guide-shadow, 0 0 0 2px rgba(120, 160, 255, 0.2))";
|
|
57
57
|
/**
|
|
58
58
|
* Node editor / floating panel colors
|
|
59
59
|
* These are used by Drawer and FloatingPanelFrame components
|
|
60
60
|
*/
|
|
61
|
-
export declare const COLOR_NODE_EDITOR_SURFACE = "var(--rpl-color-surface)";
|
|
62
|
-
export declare const COLOR_NODE_EDITOR_SURFACE_2 = "var(--rpl-color-surface-2)";
|
|
63
|
-
export declare const COLOR_NODE_EDITOR_BORDER = "var(--rpl-color-border)";
|
|
64
|
-
export declare const COLOR_NODE_EDITOR_MUTED_FG = "var(--rpl-color-muted-fg)";
|
|
65
|
-
export declare const COLOR_NODE_EDITOR_CARD_SHADOW = "var(--rpl-shadow-card)";
|
|
61
|
+
export declare const COLOR_NODE_EDITOR_SURFACE = "var(--rpl-color-surface, #fff)";
|
|
62
|
+
export declare const COLOR_NODE_EDITOR_SURFACE_2 = "var(--rpl-color-surface-2, #fafafa)";
|
|
63
|
+
export declare const COLOR_NODE_EDITOR_BORDER = "var(--rpl-color-border, #e5e7eb)";
|
|
64
|
+
export declare const COLOR_NODE_EDITOR_MUTED_FG = "var(--rpl-color-muted-fg, #6b7280)";
|
|
65
|
+
export declare const COLOR_NODE_EDITOR_CARD_SHADOW = "var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))";
|
|
66
|
+
export declare const COLOR_DRAWER_BACKDROP = "var(--rpl-color-drawer-backdrop, rgba(0, 0, 0, 0.5))";
|
|
66
67
|
/**
|
|
67
68
|
* Tab sizing
|
|
68
69
|
*/
|
|
69
|
-
export declare const SIZE_TAB_FONT = "var(--rpl-size-tab-font)";
|
|
70
|
-
export declare const SPACE_TAB_PADDING_Y = "var(--rpl-space-tab-padding-y)";
|
|
71
|
-
export declare const SPACE_TAB_PADDING_X = "var(--rpl-space-tab-padding-x)";
|
|
70
|
+
export declare const SIZE_TAB_FONT = "var(--rpl-size-tab-font, 12px)";
|
|
71
|
+
export declare const SPACE_TAB_PADDING_Y = "var(--rpl-space-tab-padding-y, 4px)";
|
|
72
|
+
export declare const SPACE_TAB_PADDING_X = "var(--rpl-space-tab-padding-x, 8px)";
|
|
72
73
|
/**
|
|
73
74
|
* Tabbar spacing
|
|
74
75
|
*/
|
|
75
|
-
export declare const SPACE_TABBAR_GAP = "var(--rpl-space-tabbar-gap)";
|
|
76
|
-
export declare const SPACE_TABBAR_PADDING_Y = "var(--rpl-space-tabbar-padding-y)";
|
|
77
|
-
export declare const SPACE_TABBAR_PADDING_X = "var(--rpl-space-tabbar-padding-x)";
|
|
76
|
+
export declare const SPACE_TABBAR_GAP = "var(--rpl-space-tabbar-gap, 6px)";
|
|
77
|
+
export declare const SPACE_TABBAR_PADDING_Y = "var(--rpl-space-tabbar-padding-y, 4px)";
|
|
78
|
+
export declare const SPACE_TABBAR_PADDING_X = "var(--rpl-space-tabbar-padding-x, 6px)";
|
|
78
79
|
/**
|
|
79
80
|
* Border radius (decorative, using CSS variables)
|
|
80
81
|
*/
|
|
81
|
-
export declare const RADIUS_TAB = "var(--rpl-radius-tab)";
|
|
82
|
-
export declare const RADIUS_SUGGEST = "var(--rpl-radius-suggest)";
|
|
82
|
+
export declare const RADIUS_TAB = "var(--rpl-radius-tab, 4px)";
|
|
83
|
+
export declare const RADIUS_SUGGEST = "var(--rpl-radius-suggest, 6px)";
|
|
83
84
|
/**
|
|
84
85
|
* Border widths
|
|
85
86
|
*/
|
|
86
|
-
export declare const SIZE_SUGGEST_BORDER = "var(--rpl-size-suggest-border)";
|
|
87
|
+
export declare const SIZE_SUGGEST_BORDER = "var(--rpl-size-suggest-border, 2px)";
|
|
87
88
|
/**
|
|
88
89
|
* Handle thicknesses
|
|
89
90
|
* Note: SIZE_GRID_HANDLE_THICKNESS is kept as number for JavaScript calculations
|
|
90
91
|
*/
|
|
91
92
|
export declare const SIZE_GRID_HANDLE_THICKNESS = 4;
|
|
92
|
-
export declare const SIZE_RESIZE_HANDLE_THICKNESS = "var(--rpl-size-resize-handle-thickness)";
|
|
93
|
-
export declare const SIZE_SPLIT_HANDLE_THICKNESS = "var(--rpl-size-split-handle-thickness)";
|
|
93
|
+
export declare const SIZE_RESIZE_HANDLE_THICKNESS = "var(--rpl-size-resize-handle-thickness, 4px)";
|
|
94
|
+
export declare const SIZE_SPLIT_HANDLE_THICKNESS = "var(--rpl-size-split-handle-thickness, 6px)";
|
|
94
95
|
/**
|
|
95
96
|
* Drop suggest padding
|
|
96
97
|
*/
|
|
97
|
-
export declare const SPACE_DROP_SUGGEST_PADDING = "var(--rpl-space-drop-suggest-padding)";
|
|
98
|
-
export declare const Z_OVERLAY = "var(--rpl-z-overlay)";
|
|
99
|
-
export declare const Z_TABDRAG_OVERLAY = "var(--rpl-z-tabdrag-overlay)";
|
|
100
|
-
export declare const Z_DIALOG_OVERLAY = "var(--rpl-z-dialog-overlay)";
|
|
98
|
+
export declare const SPACE_DROP_SUGGEST_PADDING = "var(--rpl-space-drop-suggest-padding, 6px)";
|
|
99
|
+
export declare const Z_OVERLAY = "var(--rpl-z-overlay, 9998)";
|
|
100
|
+
export declare const Z_TABDRAG_OVERLAY = "var(--rpl-z-tabdrag-overlay, 9999)";
|
|
101
|
+
export declare const Z_DIALOG_OVERLAY = "var(--rpl-z-dialog-overlay, 10000)";
|
|
101
102
|
/**
|
|
102
103
|
* Resize Handle
|
|
103
104
|
*/
|
|
104
|
-
export declare const RESIZE_HANDLE_THICKNESS = "var(--rpl-size-resize-handle-thickness)";
|
|
105
|
-
export declare const RESIZE_HANDLE_Z_INDEX = "var(--rpl-z-resize-handle)";
|
|
105
|
+
export declare const RESIZE_HANDLE_THICKNESS = "var(--rpl-size-resize-handle-thickness, 4px)";
|
|
106
|
+
export declare const RESIZE_HANDLE_Z_INDEX = "var(--rpl-z-resize-handle, 1000)";
|
|
106
107
|
/**
|
|
107
108
|
* Grid Track Resize Handle
|
|
108
109
|
*/
|
|
@@ -110,72 +111,72 @@ export declare const GRID_HANDLE_THICKNESS = 4;
|
|
|
110
111
|
/**
|
|
111
112
|
* Grid Layer Resize Handles
|
|
112
113
|
*/
|
|
113
|
-
export declare const GRID_LAYER_CORNER_HIT_SIZE = "var(--rpl-size-grid-layer-corner-hit)";
|
|
114
|
-
export declare const GRID_LAYER_EDGE_HIT_THICKNESS = "var(--rpl-size-grid-layer-edge-hit-thickness)";
|
|
114
|
+
export declare const GRID_LAYER_CORNER_HIT_SIZE = "var(--rpl-size-grid-layer-corner-hit, 14px)";
|
|
115
|
+
export declare const GRID_LAYER_EDGE_HIT_THICKNESS = "var(--rpl-size-grid-layer-edge-hit-thickness, 12px)";
|
|
115
116
|
/**
|
|
116
117
|
* Drop Suggest Overlay
|
|
117
118
|
*/
|
|
118
|
-
export declare const DROP_SUGGEST_Z_INDEX = "var(--rpl-z-overlay)";
|
|
119
|
-
export declare const DROP_SUGGEST_BORDER_WIDTH = "var(--rpl-size-suggest-border)";
|
|
120
|
-
export declare const DROP_SUGGEST_BORDER_RADIUS = "var(--rpl-radius-suggest)";
|
|
121
|
-
export declare const DROP_SUGGEST_BORDER_COLOR = "var(--rpl-color-drop-suggest-border)";
|
|
122
|
-
export declare const DROP_SUGGEST_BG_COLOR = "var(--rpl-color-drop-suggest-bg)";
|
|
123
|
-
export declare const DROP_SUGGEST_PADDING = "var(--rpl-space-drop-suggest-padding)";
|
|
119
|
+
export declare const DROP_SUGGEST_Z_INDEX = "var(--rpl-z-overlay, 9998)";
|
|
120
|
+
export declare const DROP_SUGGEST_BORDER_WIDTH = "var(--rpl-size-suggest-border, 2px)";
|
|
121
|
+
export declare const DROP_SUGGEST_BORDER_RADIUS = "var(--rpl-radius-suggest, 6px)";
|
|
122
|
+
export declare const DROP_SUGGEST_BORDER_COLOR = "var(--rpl-color-drop-suggest-border, rgba(90, 150, 255, 0.9))";
|
|
123
|
+
export declare const DROP_SUGGEST_BG_COLOR = "var(--rpl-color-drop-suggest-bg, rgba(90, 150, 255, 0.15))";
|
|
124
|
+
export declare const DROP_SUGGEST_PADDING = "var(--rpl-space-drop-suggest-padding, 6px)";
|
|
124
125
|
export declare const DROP_SUGGEST_PADDING_PX = 6;
|
|
125
126
|
/**
|
|
126
127
|
* Tab Drag Overlay
|
|
127
128
|
*/
|
|
128
|
-
export declare const TAB_DRAG_OVERLAY_Z_INDEX = "var(--rpl-z-tabdrag-overlay)";
|
|
129
|
-
export declare const TAB_DRAG_PREVIEW_OFFSET_X = "var(--rpl-space-tab-drag-preview-offset-x)";
|
|
130
|
-
export declare const TAB_DRAG_PREVIEW_OFFSET_Y = "var(--rpl-space-tab-drag-preview-offset-y)";
|
|
131
|
-
export declare const TAB_DRAG_PREVIEW_BORDER_RADIUS = "var(--rpl-radius-tab-drag-preview)";
|
|
132
|
-
export declare const TAB_DRAG_PREVIEW_PADDING_Y = "var(--rpl-space-tab-drag-preview-padding-y)";
|
|
133
|
-
export declare const TAB_DRAG_PREVIEW_PADDING_X = "var(--rpl-space-tab-drag-preview-padding-x)";
|
|
134
|
-
export declare const TAB_DRAG_PREVIEW_FONT_SIZE = "var(--rpl-size-tab-drag-preview-font)";
|
|
135
|
-
export declare const TAB_DRAG_INSERT_GUIDE_WIDTH = "var(--rpl-size-tab-drag-insert-guide-width)";
|
|
136
|
-
export declare const TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS = "var(--rpl-radius-tab-drag-insert-guide)";
|
|
137
|
-
export declare const TAB_DRAG_PREVIEW_BG_COLOR = "var(--rpl-color-tabdrag-bg)";
|
|
138
|
-
export declare const TAB_DRAG_PREVIEW_FG_COLOR = "var(--rpl-color-tabdrag-fg)";
|
|
139
|
-
export declare const TAB_DRAG_PREVIEW_BORDER_COLOR = "var(--rpl-color-tabdrag-border)";
|
|
140
|
-
export declare const TAB_DRAG_PREVIEW_SHADOW = "var(--rpl-color-tabdrag-shadow)";
|
|
141
|
-
export declare const TAB_DRAG_INSERT_GUIDE_COLOR = "var(--rpl-color-insert-guide)";
|
|
142
|
-
export declare const TAB_DRAG_INSERT_GUIDE_SHADOW = "var(--rpl-color-insert-guide-shadow)";
|
|
129
|
+
export declare const TAB_DRAG_OVERLAY_Z_INDEX = "var(--rpl-z-tabdrag-overlay, 9999)";
|
|
130
|
+
export declare const TAB_DRAG_PREVIEW_OFFSET_X = "var(--rpl-space-tab-drag-preview-offset-x, 12px)";
|
|
131
|
+
export declare const TAB_DRAG_PREVIEW_OFFSET_Y = "var(--rpl-space-tab-drag-preview-offset-y, 12px)";
|
|
132
|
+
export declare const TAB_DRAG_PREVIEW_BORDER_RADIUS = "var(--rpl-radius-tab-drag-preview, 6px)";
|
|
133
|
+
export declare const TAB_DRAG_PREVIEW_PADDING_Y = "var(--rpl-space-tab-drag-preview-padding-y, 4px)";
|
|
134
|
+
export declare const TAB_DRAG_PREVIEW_PADDING_X = "var(--rpl-space-tab-drag-preview-padding-x, 8px)";
|
|
135
|
+
export declare const TAB_DRAG_PREVIEW_FONT_SIZE = "var(--rpl-size-tab-drag-preview-font, 12px)";
|
|
136
|
+
export declare const TAB_DRAG_INSERT_GUIDE_WIDTH = "var(--rpl-size-tab-drag-insert-guide-width, 2px)";
|
|
137
|
+
export declare const TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS = "var(--rpl-radius-tab-drag-insert-guide, 1px)";
|
|
138
|
+
export declare const TAB_DRAG_PREVIEW_BG_COLOR = "var(--rpl-color-tabdrag-bg, rgba(34, 36, 42, 0.95))";
|
|
139
|
+
export declare const TAB_DRAG_PREVIEW_FG_COLOR = "var(--rpl-color-tabdrag-fg, #e9ebf0)";
|
|
140
|
+
export declare const TAB_DRAG_PREVIEW_BORDER_COLOR = "var(--rpl-color-tabdrag-border, rgba(120, 160, 255, 0.6))";
|
|
141
|
+
export declare const TAB_DRAG_PREVIEW_SHADOW = "var(--rpl-color-tabdrag-shadow, 0 6px 20px rgba(0, 0, 0, 0.35))";
|
|
142
|
+
export declare const TAB_DRAG_INSERT_GUIDE_COLOR = "var(--rpl-color-insert-guide, rgba(120, 160, 255, 0.95))";
|
|
143
|
+
export declare const TAB_DRAG_INSERT_GUIDE_SHADOW = "var(--rpl-color-insert-guide-shadow, 0 0 0 2px rgba(120, 160, 255, 0.2))";
|
|
143
144
|
/**
|
|
144
145
|
* Dialog Overlay
|
|
145
146
|
*/
|
|
146
|
-
export declare const DIALOG_OVERLAY_Z_INDEX = "var(--rpl-z-dialog-overlay)";
|
|
147
|
+
export declare const DIALOG_OVERLAY_Z_INDEX = "var(--rpl-z-dialog-overlay, 10000)";
|
|
147
148
|
/**
|
|
148
149
|
* Floating Panel Frame
|
|
149
150
|
*/
|
|
150
|
-
export declare const FLOATING_PANEL_BORDER_RADIUS = "var(--rpl-radius-floating-panel)";
|
|
151
|
-
export declare const FLOATING_PANEL_GAP = "var(--rpl-space-floating-panel-gap)";
|
|
152
|
-
export declare const FLOATING_PANEL_HEADER_PADDING_Y = "var(--rpl-space-floating-panel-header-padding-y)";
|
|
153
|
-
export declare const FLOATING_PANEL_HEADER_PADDING_X = "var(--rpl-space-floating-panel-header-padding-x)";
|
|
154
|
-
export declare const FLOATING_PANEL_CONTENT_PADDING = "var(--rpl-space-floating-panel-content-padding)";
|
|
155
|
-
export declare const FLOATING_PANEL_META_FONT_SIZE = "var(--rpl-size-floating-panel-meta-font)";
|
|
156
|
-
export declare const FLOATING_PANEL_CONTROLS_GAP = "var(--rpl-space-floating-panel-controls-gap)";
|
|
157
|
-
export declare const FLOATING_PANEL_SURFACE_COLOR = "var(--rpl-color-surface)";
|
|
158
|
-
export declare const FLOATING_PANEL_SURFACE_2_COLOR = "var(--rpl-color-surface-2)";
|
|
159
|
-
export declare const FLOATING_PANEL_BORDER_COLOR = "var(--rpl-color-border)";
|
|
160
|
-
export declare const FLOATING_PANEL_MUTED_FG_COLOR = "var(--rpl-color-muted-fg)";
|
|
161
|
-
export declare const FLOATING_PANEL_SHADOW = "var(--rpl-shadow-card)";
|
|
151
|
+
export declare const FLOATING_PANEL_BORDER_RADIUS = "var(--rpl-radius-floating-panel, 8px)";
|
|
152
|
+
export declare const FLOATING_PANEL_GAP = "var(--rpl-space-floating-panel-gap, 8px)";
|
|
153
|
+
export declare const FLOATING_PANEL_HEADER_PADDING_Y = "var(--rpl-space-floating-panel-header-padding-y, 8px)";
|
|
154
|
+
export declare const FLOATING_PANEL_HEADER_PADDING_X = "var(--rpl-space-floating-panel-header-padding-x, 12px)";
|
|
155
|
+
export declare const FLOATING_PANEL_CONTENT_PADDING = "var(--rpl-space-floating-panel-content-padding, 12px)";
|
|
156
|
+
export declare const FLOATING_PANEL_META_FONT_SIZE = "var(--rpl-size-floating-panel-meta-font, 12px)";
|
|
157
|
+
export declare const FLOATING_PANEL_CONTROLS_GAP = "var(--rpl-space-floating-panel-controls-gap, 6px)";
|
|
158
|
+
export declare const FLOATING_PANEL_SURFACE_COLOR = "var(--rpl-color-surface, #fff)";
|
|
159
|
+
export declare const FLOATING_PANEL_SURFACE_2_COLOR = "var(--rpl-color-surface-2, #fafafa)";
|
|
160
|
+
export declare const FLOATING_PANEL_BORDER_COLOR = "var(--rpl-color-border, #e5e7eb)";
|
|
161
|
+
export declare const FLOATING_PANEL_MUTED_FG_COLOR = "var(--rpl-color-muted-fg, #6b7280)";
|
|
162
|
+
export declare const FLOATING_PANEL_SHADOW = "var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))";
|
|
162
163
|
/**
|
|
163
164
|
* Drawer
|
|
164
165
|
*/
|
|
165
|
-
export declare const DRAWER_HEADER_PADDING_Y = "var(--rpl-space-drawer-header-padding-y)";
|
|
166
|
-
export declare const DRAWER_HEADER_PADDING_X = "var(--rpl-space-drawer-header-padding-x)";
|
|
167
|
-
export declare const DRAWER_HEADER_GAP = "var(--rpl-space-drawer-header-gap)";
|
|
168
|
-
export declare const DRAWER_CONTENT_PADDING = "var(--rpl-space-drawer-content-padding)";
|
|
169
|
-
export declare const DRAWER_CLOSE_BUTTON_FONT_SIZE = "var(--rpl-size-drawer-close-button-font)";
|
|
170
|
-
export declare const DRAWER_SURFACE_COLOR = "var(--rpl-color-surface)";
|
|
171
|
-
export declare const DRAWER_BORDER_COLOR = "var(--rpl-color-border)";
|
|
172
|
-
export declare const DRAWER_SHADOW = "var(--rpl-shadow-card)";
|
|
166
|
+
export declare const DRAWER_HEADER_PADDING_Y = "var(--rpl-space-drawer-header-padding-y, 10px)";
|
|
167
|
+
export declare const DRAWER_HEADER_PADDING_X = "var(--rpl-space-drawer-header-padding-x, 12px)";
|
|
168
|
+
export declare const DRAWER_HEADER_GAP = "var(--rpl-space-drawer-header-gap, 8px)";
|
|
169
|
+
export declare const DRAWER_CONTENT_PADDING = "var(--rpl-space-drawer-content-padding, 12px)";
|
|
170
|
+
export declare const DRAWER_CLOSE_BUTTON_FONT_SIZE = "var(--rpl-size-drawer-close-button-font, 18px)";
|
|
171
|
+
export declare const DRAWER_SURFACE_COLOR = "var(--rpl-color-surface, #fff)";
|
|
172
|
+
export declare const DRAWER_BORDER_COLOR = "var(--rpl-color-border, #e5e7eb)";
|
|
173
|
+
export declare const DRAWER_SHADOW = "var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))";
|
|
173
174
|
/**
|
|
174
175
|
* Split Handles
|
|
175
176
|
*/
|
|
176
|
-
export declare const SPLIT_HANDLE_THICKNESS = "var(--rpl-size-split-handle-thickness)";
|
|
177
|
+
export declare const SPLIT_HANDLE_THICKNESS = "var(--rpl-size-split-handle-thickness, 6px)";
|
|
177
178
|
/**
|
|
178
179
|
* HorizontalDivider
|
|
179
180
|
*/
|
|
180
|
-
export declare const HORIZONTAL_DIVIDER_WIDTH = "var(--rpl-size-horizontal-divider-width)";
|
|
181
|
-
export declare const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = "var(--rpl-space-horizontal-divider-hit-area-offset)";
|
|
181
|
+
export declare const HORIZONTAL_DIVIDER_WIDTH = "var(--rpl-size-horizontal-divider-width, 4px)";
|
|
182
|
+
export declare const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = "var(--rpl-space-horizontal-divider-hit-area-offset, 4px)";
|
package/dist/floating.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./FloatingPanelFrame-0MnRbFkV.cjs");exports.FloatingPanelContent=a.FloatingPanelContent;exports.FloatingPanelControls=a.FloatingPanelControls;exports.FloatingPanelFrame=a.FloatingPanelFrame;exports.FloatingPanelHeader=a.FloatingPanelHeader;exports.FloatingPanelMeta=a.FloatingPanelMeta;exports.FloatingPanelTitle=a.FloatingPanelTitle;
|
|
2
2
|
//# sourceMappingURL=floating.cjs.map
|
package/dist/floating.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"floating.cjs","sources":[
|
|
1
|
+
{"version":3,"file":"floating.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/floating.js
CHANGED
|
@@ -1,67 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import * as a from "react";
|
|
3
|
-
import { F as r, z as d, A as i, B as _, E as N, I as A, J as c, K as m, L as F, M as L, N as P, O } from "./styles-BnvLfp6e.js";
|
|
4
|
-
const y = {
|
|
5
|
-
display: "flex",
|
|
6
|
-
flexDirection: "column",
|
|
7
|
-
borderRadius: _,
|
|
8
|
-
border: `1px solid ${i}`,
|
|
9
|
-
background: d,
|
|
10
|
-
overflow: "hidden",
|
|
11
|
-
boxShadow: r
|
|
12
|
-
}, E = {
|
|
13
|
-
display: "flex",
|
|
14
|
-
alignItems: "center",
|
|
15
|
-
gap: m,
|
|
16
|
-
padding: `${A} ${c}`,
|
|
17
|
-
borderBottom: `1px solid ${i}`,
|
|
18
|
-
background: N
|
|
19
|
-
}, g = {
|
|
20
|
-
fontWeight: 600
|
|
21
|
-
}, u = {
|
|
22
|
-
marginLeft: "auto",
|
|
23
|
-
color: L,
|
|
24
|
-
fontSize: F
|
|
25
|
-
}, I = {
|
|
26
|
-
display: "flex",
|
|
27
|
-
alignItems: "center",
|
|
28
|
-
gap: P
|
|
29
|
-
}, T = {
|
|
30
|
-
padding: O,
|
|
31
|
-
overflow: "auto"
|
|
32
|
-
}, f = a.forwardRef(function({ style: t, ...n }, l) {
|
|
33
|
-
const s = a.useMemo(() => ({ ...y, ...t }), [t]);
|
|
34
|
-
return /* @__PURE__ */ o("div", { ref: l, style: s, ...n });
|
|
35
|
-
}), G = ({ style: e, ...t }) => {
|
|
36
|
-
const n = a.useMemo(() => ({ ...E, ...e }), [e]);
|
|
37
|
-
return /* @__PURE__ */ o("div", { style: n, ...t });
|
|
38
|
-
}, R = ({ style: e, ...t }) => {
|
|
39
|
-
const n = a.useMemo(() => ({ ...g, ...e }), [e]);
|
|
40
|
-
return /* @__PURE__ */ o("span", { style: n, ...t });
|
|
41
|
-
}, D = ({ style: e, ...t }) => {
|
|
42
|
-
const n = a.useMemo(() => ({ ...u, ...e }), [e]);
|
|
43
|
-
return /* @__PURE__ */ o("span", { style: n, ...t });
|
|
44
|
-
}, S = ({ style: e, ...t }) => {
|
|
45
|
-
const n = a.useMemo(() => ({ ...I, ...e }), [e]);
|
|
46
|
-
return /* @__PURE__ */ o("div", { style: n, ...t });
|
|
47
|
-
}, C = a.forwardRef(
|
|
48
|
-
function({ style: t, ...n }, l) {
|
|
49
|
-
const s = a.useMemo(() => ({ ...T, ...t }), [t]);
|
|
50
|
-
return /* @__PURE__ */ o("div", { ref: l, style: s, ...n });
|
|
51
|
-
}
|
|
52
|
-
);
|
|
53
|
-
f.displayName = "FloatingPanelFrame";
|
|
54
|
-
G.displayName = "FloatingPanelHeader";
|
|
55
|
-
R.displayName = "FloatingPanelTitle";
|
|
56
|
-
D.displayName = "FloatingPanelMeta";
|
|
57
|
-
S.displayName = "FloatingPanelControls";
|
|
58
|
-
C.displayName = "FloatingPanelContent";
|
|
1
|
+
import { e, d as l, F as t, a as o, c as F, b as i } from "./FloatingPanelFrame-BkjBp0S5.js";
|
|
59
2
|
export {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
3
|
+
e as FloatingPanelContent,
|
|
4
|
+
l as FloatingPanelControls,
|
|
5
|
+
t as FloatingPanelFrame,
|
|
6
|
+
o as FloatingPanelHeader,
|
|
7
|
+
F as FloatingPanelMeta,
|
|
8
|
+
i as FloatingPanelTitle
|
|
66
9
|
};
|
|
67
10
|
//# sourceMappingURL=floating.js.map
|
package/dist/floating.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"floating.js","sources":[
|
|
1
|
+
{"version":3,"file":"floating.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("./GridLayout-Dx3Qofl0.cjs"),f=require("react/jsx-runtime"),Tt=require("react"),C=require("./styles-BMEhL6I0.cjs");function Gt(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const l=Gt(Tt),St=t=>{const e=t==="drag"?C.COLOR_RESIZE_HANDLE_ACTIVE:t==="hover"?C.COLOR_RESIZE_HANDLE_HOVER:C.COLOR_RESIZE_HANDLE_IDLE;return{width:C.HORIZONTAL_DIVIDER_WIDTH,cursor:"col-resize",position:"relative",userSelect:"none",backgroundColor:e}},Et=({onResize:t,component:e,element:r})=>{const{ref:n,isDragging:o,onPointerDown:s}=S.useResizeDrag({axis:"x",onResize:t}),[a,i]=l.useState(!1),c={ref:n,style:St(o?"drag":a?"hover":"idle"),role:"separator","aria-orientation":"vertical","data-dragging":o?"true":void 0,onPointerDown:s,onPointerEnter:()=>i(!0),onPointerLeave:()=>i(!1)};return r?l.cloneElement(r,c):e?f.jsx(e,{...c}):f.jsx("div",{...c})},Rt=()=>{const{layerId:t}=S.useLayerInstance(),{getLayerHandleProps:e}=S.useGridLayoutContext();return l.useMemo(()=>e(t),[e,t])},it=l.createContext(null),Pt=()=>{const t=l.useContext(it);if(!t)throw new Error("useKeybindings must be used within KeybindingsProvider");return t},Ct=t=>{const e=[];t.metaKey&&e.push("Mod"),t.ctrlKey&&e.push("Ctrl"),t.altKey&&e.push("Alt"),t.shiftKey&&e.push("Shift");const r=t.key.length===1?t.key.toUpperCase():t.key;return e.push(r),e.join("-")},Dt=({children:t,configure:e})=>{const r=l.useRef({}),n=l.useCallback((a,i)=>{r.current={...r.current,[a]:i}},[]),o=l.useCallback(a=>{const i={...r.current};delete i[a],r.current=i},[]);l.useEffect(()=>{const a=i=>{const c=Ct(i),u=r.current[c];u&&u(i)};return window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[]);const s=l.useMemo(()=>({register:n,unregister:o}),[n,o]);return l.useEffect(()=>{e&&e(s)},[s,e]),f.jsx(it.Provider,{value:s,children:t})},jt=(t,e)=>{t.register("Mod-\\",r=>{r.preventDefault(),e.splitFocused("vertical")}),t.register("Mod-Shift-\\",r=>{r.preventDefault(),e.splitFocused("horizontal")});for(const r of[1,2,3,4,5,6,7,8,9])t.register(`Mod-${String(r)}`,n=>{n.preventDefault(),e.focusGroupIndex(r)});t.register("Alt-ArrowRight",r=>{r.preventDefault(),e.focusNextGroup()}),t.register("Alt-ArrowLeft",r=>{r.preventDefault(),e.focusPrevGroup()})},At=t=>t.type==="group",at=(t,e={x:0,y:0,w:100,h:100})=>{const r=new Map,n=(o,s)=>{if(At(o)){r.set(o.groupId,s);return}if(o.direction==="vertical"){const c=s.w*o.ratio,u=s.w-c;n(o.a,{x:s.x,y:s.y,w:c,h:s.h}),n(o.b,{x:s.x+c,y:s.y,w:u,h:s.h});return}const a=s.h*o.ratio,i=s.h-a;n(o.a,{x:s.x,y:s.y,w:s.w,h:a}),n(o.b,{x:s.x,y:s.y+a,w:s.w,h:i})};return n(t,e),r},_t=(t,e)=>{const r=at(t.tree),n={areas:[["root"]],rows:[{size:"1fr"}],columns:[{size:"1fr"}],gap:"0px",style:{position:"relative"}},o=Array.from(r.entries()).map(([s,a])=>{const i={position:"absolute",left:`${a.x}%`,top:`${a.y}%`,width:`${a.w}%`,height:`${a.h}%`,overflow:"hidden",display:"flex",flexDirection:"column"};return{id:s,positionMode:"absolute",style:i,component:e(s)}});return{config:n,layers:o}},kt=(t,e,r)=>{const n=at(t.tree),o=Array.from(new Set(Array.from(n.values()).flatMap(m=>[m.x,m.x+m.w]))).sort((m,x)=>m-x),s=Array.from(new Set(Array.from(n.values()).flatMap(m=>[m.y,m.y+m.h]))).sort((m,x)=>m-x),a=o.slice(1).map((m,x)=>`${m-o[x]}fr`),i=s.slice(1).map((m,x)=>`${m-s[x]}fr`),c=a.map(m=>({size:m,resizable:r})),u=i.map(m=>({size:m,resizable:r})),d=(m,x,b,w)=>{for(const[g,I]of n.entries())if(m>=I.x&&x<=I.x+I.w&&b>=I.y&&w<=I.y+I.h)return g;return"."},h=[];for(let m=0;m<s.length-1;m+=1){const x=[];for(let b=0;b<o.length-1;b+=1)x.push(d(o[b],o[b+1],s[m],s[m+1]));h.push(x)}const v={areas:h,rows:u,columns:c,gap:"0px"},y=Array.from(n.keys()).map(m=>({id:m,gridArea:m,component:e(m)}));return{config:v,layers:y}},ct=l.createContext(null),Ot=()=>{const t=l.useContext(ct);if(!t)throw new Error("usePanelRenderContext must be used within PanelRenderProvider");return t},Mt=({value:t,children:e})=>f.jsx(ct.Provider,{value:t,children:e}),ut=l.createContext(null),lt=()=>{const t=l.useContext(ut);if(!t)throw new Error("useDomRegistry must be used within DomRegistryProvider");return t},Nt=({children:t})=>{const e=l.useRef(new Map),r=l.useCallback(c=>{const u=e.current.get(c);if(u)return u;const d={group:null,tabbar:null,content:null};return e.current.set(c,d),d},[]),n=l.useCallback((c,u)=>{const d=r(c);if(d.group=u,u===null){const h=e.current.get(c);(h?h.tabbar===null&&h.content===null:!1)&&e.current.delete(c)}},[r]),o=l.useCallback((c,u)=>{const d=r(c);if(d.tabbar=u,u===null){const h=e.current.get(c);(h?h.group===null&&h.content===null:!1)&&e.current.delete(c)}},[r]),s=l.useCallback((c,u)=>{const d=r(c);if(d.content=u,u===null){const h=e.current.get(c);(h?h.group===null&&h.tabbar===null:!1)&&e.current.delete(c)}},[r]),a=l.useCallback(()=>e.current,[]),i=l.useMemo(()=>({setGroupEl:n,setTabbarEl:o,setContentEl:s,getAll:a}),[n,o,s,a]);return f.jsx(ut.Provider,{value:i,children:t})},Lt={display:"flex",flexDirection:"column",width:"100%",height:"100%"},Bt={flex:"1 1 auto",minWidth:0,minHeight:0,position:"relative",overflow:"hidden"};function Ht(t,e,r,n){return t?l.cloneElement(t,r,n):e?f.jsx(e,{...r,children:n}):f.jsx("div",{...r,children:n})}function $t(t,e,r,n){return t?l.cloneElement(t,r,n):e?f.jsx(e,{...r,children:n}):f.jsx("div",{...r,children:n})}const zt=({group:t,tabbar:e,content:r,onContentPointerDown:n,groupRef:o,contentRef:s,component:a,element:i,contentComponent:c,contentElement:u})=>{const d={ref:o,style:Lt,"data-group-id":t.id},v=Ht(u,c,{ref:s,style:Bt,"data-dnd-zone":"content",onPointerDown:n},r),y=f.jsxs(f.Fragment,{children:[e,v]});return $t(i,a,d,y)},dt=l.memo(zt,(t,e)=>t.group.id!==e.group.id||t.group.activeTabId!==e.group.activeTabId||t.group.tabs.length!==e.group.tabs.length?!1:t.group.tabs===e.group.tabs);dt.displayName="PanelGroupView";const V=(t,e,r)=>{const n=t.left,o=t.top,s=t.width,a=t.height,i=e-n,c=r-o,u=s/3,d=a/3;return i>u&&i<s-u&&c>d&&c<a-d?"center":i<c&&i<s-i&&c<a-c?"left":s-i<c&&s-i<i&&c<a-c?"right":c<i&&c<a-c&&i<s-i?"top":"bottom"};function _(t,e){if(!e){const n=(()=>({type:t}));return Object.defineProperty(n,"type",{value:t,writable:!1,enumerable:!0}),n}const r=((...n)=>{const o=e(...n);return typeof o>"u"?{type:t}:{type:t,payload:o}});return Object.defineProperty(r,"type",{value:t,writable:!1,enumerable:!0}),r}const Xt=(t,e)=>{const r={};return Object.keys(t).forEach(n=>{const o=t[n];r[n]=((...s)=>{const a=o(...s);return e(a),a})}),r},pt=(t,e)=>{const r={};return Object.keys(e).forEach(n=>{const o=e[n];if(!o)return;const s=t[n];if(!s)throw new Error(`Missing action creator for key "${String(n)}"`);r[s.type]=o}),r},ft={phase:{kind:"idle"},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:null},A={startContent:_("START_CONTENT",t=>t),startTab:_("START_TAB",t=>t),setSuggest:_("SET_SUGGEST",t=>t),setPointer:_("SET_POINTER",t=>t),setTabbarHover:_("SET_TABBAR_HOVER",t=>t),reset:_("RESET")},Ft=pt(A,{startContent:(t,e)=>({phase:{kind:"content",startX:e.payload.x,startY:e.payload.y,fromGroupId:e.payload.groupId,tabId:e.payload.tabId,cache:e.payload.cache},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:null}),startTab:(t,e)=>({phase:{kind:"tab",startX:e.payload.x,startY:e.payload.y,fromGroupId:e.payload.groupId,tabId:e.payload.tabId,cache:e.payload.cache},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:e.payload.element}),setSuggest:(t,e)=>({...t,suggest:e.payload}),setPointer:(t,e)=>({...t,pointer:e.payload}),setTabbarHover:(t,e)=>({...t,tabbarHover:e.payload}),reset:()=>ft}),Yt=(t,e)=>{const r=Ft[e.type];return r?r(t,e,void 0):t},bt=l.createContext(null),U=()=>{const t=l.useContext(bt);if(!t)throw new Error("usePanelInteractions must be used within InteractionsProvider");return t},Vt=({containerRef:t,dragThresholdPx:e,onCommitContentDrop:r,onCommitTabDrop:n,isContentZoneAllowed:o,children:s})=>{const[a,i]=l.useReducer(Yt,ft),c=lt(),u=l.useCallback(()=>{const b=Array.from(c.getAll().entries()),w=b.map(([p,T])=>({gid:p,el:T.content??T.group})).filter(p=>!!p.el).map(p=>({...p,rect:p.el.getBoundingClientRect()})),g=b.map(([p,T])=>({gid:p,el:T.tabbar})).filter(p=>!!p.el).map(p=>({...p,rect:p.el.getBoundingClientRect()})),I=b.map(([p,T])=>({gid:p,el:T.content??T.group})).filter(p=>!!p.el).map(p=>({...p,rect:p.el.getBoundingClientRect()}));return{groups:w,tabbars:g,contents:I}},[c]),d=S.useEffectEvent(b=>{if(!t.current)return;const g=b.clientX,I=b.clientY,p=a.phase;if(p.kind==="idle")return;const T=Math.abs(g-p.startX),R=Math.abs(I-p.startY);if(T<e&&R<e){a.phase.kind==="content"&&i(A.setSuggest(null)),i(A.setPointer(null)),i(A.setTabbarHover(null));return}if(i(A.setPointer({x:g,y:I})),p.kind==="content"){const E=p.cache.groups.find(({rect:G})=>g>=G.left&&g<=G.right&&I>=G.top&&I<=G.bottom);if(!E){i(A.setSuggest(null));return}const D=V(E.rect,g,I);if(o&&!o({targetGroupId:E.gid,zone:D})){i(A.setSuggest(null));return}i(A.setSuggest({rect:E.rect,zone:D}));return}if(p.kind==="tab"){const E=p.cache.tabbars.find(({rect:P})=>g>=P.left&&g<=P.right&&I>=P.top&&I<=P.bottom);if(E){const k=Array.from(E.el.querySelectorAll("[role='tab']")).map(H=>H.getBoundingClientRect()),j=k.map(H=>H.left+H.width/2),M=j.findIndex(H=>g<H),N=M===-1?j.length:M,yt=k.length===0?E.rect.left+8:N===0?k[0].left:N===k.length?k[k.length-1].right:(k[N-1].right+k[N].left)/2;i(A.setTabbarHover({groupId:E.gid,index:N,rect:E.rect,insertX:yt}))}else i(A.setTabbarHover(null));const D=p.cache.contents.find(({rect:P})=>g>=P.left&&g<=P.right&&I>=P.top&&I<=P.bottom);if(!D){i(A.setSuggest(null));return}const G=V(D.rect,g,I);if(o&&!o({targetGroupId:D.gid,zone:G})){i(A.setSuggest(null));return}i(A.setSuggest({rect:D.rect,zone:G}))}}),h=S.useEffectEvent(b=>{const w=t.current,g=a;if(i(A.reset()),!w)return;const I=b.clientX,p=b.clientY;if(g.phase.kind==="idle")return;const T=Math.abs(I-g.phase.startX),R=Math.abs(p-g.phase.startY);if(!(T<e&&R<e)){if(g.phase.kind==="content"){const E=g.phase.cache.groups.find(({rect:P})=>I>=P.left&&I<=P.right&&p>=P.top&&p<=P.bottom);if(!E)return;const D=E.gid??null;if(!D)return;const G=V(E.rect,I,p);if(o&&!o({targetGroupId:D,zone:G}))return;r({fromGroupId:g.phase.fromGroupId,tabId:g.phase.tabId,targetGroupId:D,zone:G});return}if(g.phase.kind==="tab"){const E=g.phase.cache.tabbars.find(({rect:G})=>I>=G.left&&I<=G.right&&p>=G.top&&p<=G.bottom);if(E){const G=E.gid;if(!G)return;const k=Array.from(E.el.querySelectorAll("[role='tab']")).map(N=>{const Z=N.getBoundingClientRect();return Z.left+Z.width/2}),j=k.findIndex(N=>I<N),M=j===-1?k.length:j;n({fromGroupId:g.phase.fromGroupId,tabId:g.phase.tabId,targetGroupId:G,targetIndex:M});return}const D=g.phase.cache.contents.find(({rect:G})=>I>=G.left&&I<=G.right&&p>=G.top&&p<=G.bottom);if(D){const G=D.gid??null;if(!G)return;const P=V(D.rect,I,p);if(o&&!o({targetGroupId:G,zone:P}))return;r({fromGroupId:g.phase.fromGroupId,tabId:g.phase.tabId,targetGroupId:G,zone:P})}}}}),v=S.useEffectEvent(()=>{i(A.reset())});l.useEffect(()=>{if(a.phase.kind!=="idle")return window.addEventListener("pointermove",d),window.addEventListener("pointerup",h,{once:!0}),window.addEventListener("pointercancel",v,{once:!0}),()=>{window.removeEventListener("pointermove",d),window.removeEventListener("pointerup",h),window.removeEventListener("pointercancel",v)}},[a.phase.kind]);const y=l.useCallback((b,w,g)=>{if(g.button!==0)return;g.currentTarget.setPointerCapture(g.pointerId);const I=u();i(A.startContent({x:g.clientX,y:g.clientY,groupId:b,tabId:w,cache:I}))},[u]),m=l.useCallback((b,w,g)=>{if(g.button!==0)return;const I=g.currentTarget;I&&I.setPointerCapture(g.pointerId);const p=u();i(A.startTab({x:g.clientX,y:g.clientY,groupId:w,tabId:b,cache:p,element:I}))},[u]),x=l.useMemo(()=>({suggest:a.suggest,isTabDragging:a.phase.kind==="tab",draggingTabId:a.phase.kind==="tab"?a.phase.tabId:null,dragPointer:a.pointer,tabbarHover:a.tabbarHover,draggingTabElement:a.draggingTabElement,onStartContentDrag:y,onStartTabDrag:m}),[a.suggest,a.pointer,a.tabbarHover,a.phase,a.draggingTabElement,y,m]);return f.jsx(bt.Provider,{value:x,children:s})},et={display:"inline-flex",alignItems:"center",userSelect:"none"},qt=({groupId:t,tab:e,active:r,dragging:n,onClickTab:o,onStartDrag:s,onCloseTab:a,tabComponent:i,tabElement:c,onDoubleClick:u})=>{const d=l.useEffectEvent(()=>{o(e.id)}),h=l.useEffectEvent(x=>{s&&x.button===0&&s(e.id,t,x)}),v=()=>{const x=!!a;return f.jsx(l.Activity,{mode:x?"visible":"hidden",children:f.jsx("button",{type:"button","aria-label":`Close tab ${e.title}`,onClick:b=>{a&&(b.stopPropagation(),a(t,e.id))},style:{marginLeft:6},tabIndex:x?void 0:-1,disabled:!x,"aria-hidden":x?void 0:!0,children:"×"})})},y={role:"tab","aria-selected":r,tabIndex:r?0:-1,style:et,onClick:d,onPointerDown:h,onDoubleClick:u,"data-tab-id":e.id,"data-active":r?"true":"false","data-dragging":n?"true":"false",children:f.jsxs(f.Fragment,{children:[f.jsx("span",{children:e.title}),v()]})},m={type:"button",role:"tab","aria-selected":r,tabIndex:r?0:-1,style:et,onClick:()=>{o(e.id)},onPointerDown:x=>{s&&x.button===0&&s(e.id,t,x)},onDoubleClick:u,children:f.jsx("span",{children:e.title})};return c?c(m):i?f.jsx(i,{...m}):f.jsx("div",{...y})},Kt={display:"flex",alignItems:"center"},Ut={flex:"1 1 auto",alignSelf:"stretch"},Wt=({group:t,onClickTab:e,onStartDrag:r,rootRef:n,component:o,element:s,tabComponent:a,tabElement:i,onAddTab:c,onCloseTab:u,doubleClickToAdd:d})=>{const{isTabDragging:h,draggingTabId:v}=U(),y=l.useRef(null),m=l.useCallback(p=>{if(y.current=p,!!n){if(typeof n=="function"){n(p);return}try{n.current=p}catch{}}},[n]),x=l.useEffectEvent(p=>{const T=y.current??p.currentTarget;if(!T)return;const R=Array.from(T.querySelectorAll('[role="tab"]'));if(R.length===0)return;const E=j=>{const M=Math.max(0,Math.min(j,R.length-1)),N=R[M];N&&N.focus()},D=document.activeElement,G=D?R.indexOf(D):R.findIndex(j=>j.getAttribute("data-tab-id")===t.activeTabId);if(p.key==="ArrowRight"){p.preventDefault();const j=G>=0?G+1:0;E(j>=R.length?0:j);return}if(p.key==="ArrowLeft"){p.preventDefault();const j=G>=0?G-1:R.length-1;E(j<0?R.length-1:j);return}if(p.key==="Home"){p.preventDefault(),E(0);return}if(p.key==="End"){p.preventDefault(),E(R.length-1);return}if(p.key==="Enter"||p.key===" "){p.preventDefault();const M=(G>=0?R[G]:null)?.getAttribute("data-tab-id")??null;M&&e(M);return}if(p.key==="Delete"||p.key==="Backspace"){if(u){p.preventDefault();const M=(G>=0?R[G]:null)?.getAttribute("data-tab-id")??null;M&&u(t.id,M)}return}const P=(p.ctrlKey?1:0)+(p.metaKey?1:0)>0,k=typeof p.key=="string"?p.key.toLowerCase():"";if(P&&k==="t"){c&&(p.preventDefault(),c(t.id));return}});l.useEffect(()=>{const p=y.current;if(!p)return;const T=p.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);if(T===document.activeElement)return;!p.contains(document.activeElement)&&T&&T.focus()},[t.activeTabId]);const b={style:Kt,role:"tablist","data-tabbar":"true","data-group-id":t.id,"data-dragging":h?"true":"false",onKeyDown:x},w=S.useElementComponentWrapper({element:s,component:o}),g=()=>c?f.jsx("button",{type:"button","aria-label":"Add tab",onClick:()=>{c(t.id)},children:"+"}):null,I=l.useCallback(()=>{d&&c&&c(t.id)},[d,c,t.id]);return f.jsxs(w,{...b,ref:m,onDoubleClick:I,children:[t.tabs.map((p,T)=>f.jsx(qt,{groupId:t.id,tab:p,active:t.activeTabId===p.id,dragging:v===p.id,onClickTab:e,onStartDrag:r,onCloseTab:u,tabComponent:a,tabElement:i,onDoubleClick:R=>R.stopPropagation()},`${t.id}:${p.id}:${T}`)),f.jsx("span",{style:Ut}),g()]})},Zt=({id:t,TabBarComponent:e,PanelGroupComponent:r})=>{const{getGroup:n,getGroupContent:o,onClickTab:s,onAddTab:a,onCloseTab:i,onStartContentDrag:c,onStartTabDrag:u,doubleClickToAdd:d}=Ot(),{setGroupEl:h,setTabbarEl:v,setContentEl:y}=lt(),m=l.useCallback(T=>{h(t,T)},[t,h]),x=l.useCallback(T=>{y(t,T)},[t,y]),b=l.useCallback(T=>{v(t,T)},[t,v]),w=n(t);if(!w)return null;const g=o(t),I=e??Wt,p=r??(T=>f.jsx(dt,{...T}));return f.jsx(p,{group:w,tabbar:f.jsx(I,{rootRef:b,group:w,onClickTab:T=>s(t,T),onAddTab:a,onCloseTab:i,onStartDrag:(T,R,E)=>u(T,R,E),doubleClickToAdd:d}),content:g,groupRef:m,contentRef:x,onContentPointerDown:T=>c(t,T)})},Jt=(t,e)=>{const r=new Array(16);for(let n=0;n<4;n++)for(let o=0;o<4;o++)r[n*4+o]=t[0+o]*e[n*4+0]+t[4+o]*e[n*4+1]+t[8+o]*e[n*4+2]+t[12+o]*e[n*4+3];return r},q=t=>{if(t.length!==16)throw new Error("Matrix must have exactly 16 values");const e=Object.freeze([...t]),r=n=>{const o=Jt(e,n);return q(o)};return Object.freeze({translate:(n=0,o=0,s=0)=>r([1,0,0,0,0,1,0,0,0,0,1,0,n,o,s,1]),translate3d:(n,o,s)=>r([1,0,0,0,0,1,0,0,0,0,1,0,n,o,s,1]),translateX:n=>r([1,0,0,0,0,1,0,0,0,0,1,0,n,0,0,1]),translateY:n=>r([1,0,0,0,0,1,0,0,0,0,1,0,0,n,0,1]),translateZ:n=>r([1,0,0,0,0,1,0,0,0,0,1,0,0,0,n,1]),scale:(n=1,o=1,s=1)=>r([n,0,0,0,0,o,0,0,0,0,s,0,0,0,0,1]),scale3d:(n,o,s)=>r([n,0,0,0,0,o,0,0,0,0,s,0,0,0,0,1]),scaleX:n=>r([n,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),scaleY:n=>r([1,0,0,0,0,n,0,0,0,0,1,0,0,0,0,1]),scaleZ:n=>r([1,0,0,0,0,1,0,0,0,0,n,0,0,0,0,1]),rotateX:n=>{const o=Math.cos(n),s=Math.sin(n);return r([1,0,0,0,0,o,s,0,0,-s,o,0,0,0,0,1])},rotateY:n=>{const o=Math.cos(n),s=Math.sin(n);return r([o,0,-s,0,0,1,0,0,s,0,o,0,0,0,0,1])},rotateZ:n=>{const o=Math.cos(n),s=Math.sin(n);return r([o,s,0,0,-s,o,0,0,0,0,1,0,0,0,0,1])},rotate:(n,o,s,a)=>{const i=Math.sqrt(o*o+s*s+a*a);if(i===0)return q(e);o/=i,s/=i,a/=i;const c=Math.cos(n),u=Math.sin(n),d=1-c;return r([d*o*o+c,d*o*s+u*a,d*o*a-u*s,0,d*o*s-u*a,d*s*s+c,d*s*a+u*o,0,d*o*a+u*s,d*s*a-u*o,d*a*a+c,0,0,0,0,1])},rotate3d:(n,o,s,a)=>{const i=Math.sqrt(n*n+o*o+s*s);if(i===0)return q(e);n/=i,o/=i,s/=i;const c=Math.cos(a),u=Math.sin(a),d=1-c;return r([d*n*n+c,d*n*o+u*s,d*n*s-u*o,0,d*n*o-u*s,d*o*o+c,d*o*s+u*n,0,d*n*s+u*o,d*o*s-u*n,d*s*s+c,0,0,0,0,1])},skew:(n=0,o=0)=>{const s=Math.tan(n),a=Math.tan(o);return r([1,a,0,0,s,1,0,0,0,0,1,0,0,0,0,1])},skewX:n=>{const o=Math.tan(n);return r([1,0,0,0,o,1,0,0,0,0,1,0,0,0,0,1])},skewY:n=>{const o=Math.tan(n);return r([1,o,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},perspective:n=>{if(n===0)throw new Error("Perspective distance cannot be zero");return r([1,0,0,0,0,1,0,0,0,0,1,-1/n,0,0,0,1])},toCSS:()=>`matrix3d(${e.join(", ")})`,toArray:()=>e,toString:()=>[`[${e[0]}, ${e[4]}, ${e[8]}, ${e[12]}]`,`[${e[1]}, ${e[5]}, ${e[9]}, ${e[13]}]`,`[${e[2]}, ${e[6]}, ${e[10]}, ${e[14]}]`,`[${e[3]}, ${e[7]}, ${e[11]}, ${e[15]}]`].join(`
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("./GridLayout-B0W3Tdan.cjs"),f=require("react/jsx-runtime"),Tt=require("react"),C=require("./FloatingPanelFrame-0MnRbFkV.cjs");function Gt(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const l=Gt(Tt),St=t=>{const e=t==="drag"?C.COLOR_RESIZE_HANDLE_ACTIVE:t==="hover"?C.COLOR_RESIZE_HANDLE_HOVER:C.COLOR_RESIZE_HANDLE_IDLE;return{width:C.HORIZONTAL_DIVIDER_WIDTH,cursor:"col-resize",position:"relative",userSelect:"none",backgroundColor:e}},Et=({onResize:t,component:e,element:r})=>{const{ref:n,isDragging:o,onPointerDown:s}=S.useResizeDrag({axis:"x",onResize:t}),[a,i]=l.useState(!1),c={ref:n,style:St(o?"drag":a?"hover":"idle"),role:"separator","aria-orientation":"vertical","data-dragging":o?"true":void 0,onPointerDown:s,onPointerEnter:()=>i(!0),onPointerLeave:()=>i(!1)};return r?l.cloneElement(r,c):e?f.jsx(e,{...c}):f.jsx("div",{...c})},Rt=()=>{const{layerId:t}=S.useLayerInstance(),{getLayerHandleProps:e}=S.useGridLayoutContext();return l.useMemo(()=>e(t),[e,t])},it=l.createContext(null),Pt=()=>{const t=l.useContext(it);if(!t)throw new Error("useKeybindings must be used within KeybindingsProvider");return t},Ct=t=>{const e=[];t.metaKey&&e.push("Mod"),t.ctrlKey&&e.push("Ctrl"),t.altKey&&e.push("Alt"),t.shiftKey&&e.push("Shift");const r=t.key.length===1?t.key.toUpperCase():t.key;return e.push(r),e.join("-")},Dt=({children:t,configure:e})=>{const r=l.useRef({}),n=l.useCallback((a,i)=>{r.current={...r.current,[a]:i}},[]),o=l.useCallback(a=>{const i={...r.current};delete i[a],r.current=i},[]);l.useEffect(()=>{const a=i=>{const c=Ct(i),u=r.current[c];u&&u(i)};return window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[]);const s=l.useMemo(()=>({register:n,unregister:o}),[n,o]);return l.useEffect(()=>{e&&e(s)},[s,e]),f.jsx(it.Provider,{value:s,children:t})},jt=(t,e)=>{t.register("Mod-\\",r=>{r.preventDefault(),e.splitFocused("vertical")}),t.register("Mod-Shift-\\",r=>{r.preventDefault(),e.splitFocused("horizontal")});for(const r of[1,2,3,4,5,6,7,8,9])t.register(`Mod-${String(r)}`,n=>{n.preventDefault(),e.focusGroupIndex(r)});t.register("Alt-ArrowRight",r=>{r.preventDefault(),e.focusNextGroup()}),t.register("Alt-ArrowLeft",r=>{r.preventDefault(),e.focusPrevGroup()})},At=t=>t.type==="group",at=(t,e={x:0,y:0,w:100,h:100})=>{const r=new Map,n=(o,s)=>{if(At(o)){r.set(o.groupId,s);return}if(o.direction==="vertical"){const c=s.w*o.ratio,u=s.w-c;n(o.a,{x:s.x,y:s.y,w:c,h:s.h}),n(o.b,{x:s.x+c,y:s.y,w:u,h:s.h});return}const a=s.h*o.ratio,i=s.h-a;n(o.a,{x:s.x,y:s.y,w:s.w,h:a}),n(o.b,{x:s.x,y:s.y+a,w:s.w,h:i})};return n(t,e),r},_t=(t,e)=>{const r=at(t.tree),n={areas:[["root"]],rows:[{size:"1fr"}],columns:[{size:"1fr"}],gap:"0px",style:{position:"relative"}},o=Array.from(r.entries()).map(([s,a])=>{const i={position:"absolute",left:`${a.x}%`,top:`${a.y}%`,width:`${a.w}%`,height:`${a.h}%`,overflow:"hidden",display:"flex",flexDirection:"column"};return{id:s,positionMode:"absolute",style:i,component:e(s)}});return{config:n,layers:o}},kt=(t,e,r)=>{const n=at(t.tree),o=Array.from(new Set(Array.from(n.values()).flatMap(m=>[m.x,m.x+m.w]))).sort((m,x)=>m-x),s=Array.from(new Set(Array.from(n.values()).flatMap(m=>[m.y,m.y+m.h]))).sort((m,x)=>m-x),a=o.slice(1).map((m,x)=>`${m-o[x]}fr`),i=s.slice(1).map((m,x)=>`${m-s[x]}fr`),c=a.map(m=>({size:m,resizable:r})),u=i.map(m=>({size:m,resizable:r})),d=(m,x,b,w)=>{for(const[g,I]of n.entries())if(m>=I.x&&x<=I.x+I.w&&b>=I.y&&w<=I.y+I.h)return g;return"."},h=[];for(let m=0;m<s.length-1;m+=1){const x=[];for(let b=0;b<o.length-1;b+=1)x.push(d(o[b],o[b+1],s[m],s[m+1]));h.push(x)}const v={areas:h,rows:u,columns:c,gap:"0px"},y=Array.from(n.keys()).map(m=>({id:m,gridArea:m,component:e(m)}));return{config:v,layers:y}},ct=l.createContext(null),Ot=()=>{const t=l.useContext(ct);if(!t)throw new Error("usePanelRenderContext must be used within PanelRenderProvider");return t},Mt=({value:t,children:e})=>f.jsx(ct.Provider,{value:t,children:e}),ut=l.createContext(null),lt=()=>{const t=l.useContext(ut);if(!t)throw new Error("useDomRegistry must be used within DomRegistryProvider");return t},Nt=({children:t})=>{const e=l.useRef(new Map),r=l.useCallback(c=>{const u=e.current.get(c);if(u)return u;const d={group:null,tabbar:null,content:null};return e.current.set(c,d),d},[]),n=l.useCallback((c,u)=>{const d=r(c);if(d.group=u,u===null){const h=e.current.get(c);(h?h.tabbar===null&&h.content===null:!1)&&e.current.delete(c)}},[r]),o=l.useCallback((c,u)=>{const d=r(c);if(d.tabbar=u,u===null){const h=e.current.get(c);(h?h.group===null&&h.content===null:!1)&&e.current.delete(c)}},[r]),s=l.useCallback((c,u)=>{const d=r(c);if(d.content=u,u===null){const h=e.current.get(c);(h?h.group===null&&h.tabbar===null:!1)&&e.current.delete(c)}},[r]),a=l.useCallback(()=>e.current,[]),i=l.useMemo(()=>({setGroupEl:n,setTabbarEl:o,setContentEl:s,getAll:a}),[n,o,s,a]);return f.jsx(ut.Provider,{value:i,children:t})},Lt={display:"flex",flexDirection:"column",width:"100%",height:"100%"},Bt={flex:"1 1 auto",minWidth:0,minHeight:0,position:"relative",overflow:"hidden"};function Ht(t,e,r,n){return t?l.cloneElement(t,r,n):e?f.jsx(e,{...r,children:n}):f.jsx("div",{...r,children:n})}function $t(t,e,r,n){return t?l.cloneElement(t,r,n):e?f.jsx(e,{...r,children:n}):f.jsx("div",{...r,children:n})}const zt=({group:t,tabbar:e,content:r,onContentPointerDown:n,groupRef:o,contentRef:s,component:a,element:i,contentComponent:c,contentElement:u})=>{const d={ref:o,style:Lt,"data-group-id":t.id},v=Ht(u,c,{ref:s,style:Bt,"data-dnd-zone":"content",onPointerDown:n},r),y=f.jsxs(f.Fragment,{children:[e,v]});return $t(i,a,d,y)},dt=l.memo(zt,(t,e)=>t.group.id!==e.group.id||t.group.activeTabId!==e.group.activeTabId||t.group.tabs.length!==e.group.tabs.length?!1:t.group.tabs===e.group.tabs);dt.displayName="PanelGroupView";const V=(t,e,r)=>{const n=t.left,o=t.top,s=t.width,a=t.height,i=e-n,c=r-o,u=s/3,d=a/3;return i>u&&i<s-u&&c>d&&c<a-d?"center":i<c&&i<s-i&&c<a-c?"left":s-i<c&&s-i<i&&c<a-c?"right":c<i&&c<a-c&&i<s-i?"top":"bottom"};function _(t,e){if(!e){const n=(()=>({type:t}));return Object.defineProperty(n,"type",{value:t,writable:!1,enumerable:!0}),n}const r=((...n)=>{const o=e(...n);return typeof o>"u"?{type:t}:{type:t,payload:o}});return Object.defineProperty(r,"type",{value:t,writable:!1,enumerable:!0}),r}const Xt=(t,e)=>{const r={};return Object.keys(t).forEach(n=>{const o=t[n];r[n]=((...s)=>{const a=o(...s);return e(a),a})}),r},pt=(t,e)=>{const r={};return Object.keys(e).forEach(n=>{const o=e[n];if(!o)return;const s=t[n];if(!s)throw new Error(`Missing action creator for key "${String(n)}"`);r[s.type]=o}),r},ft={phase:{kind:"idle"},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:null},A={startContent:_("START_CONTENT",t=>t),startTab:_("START_TAB",t=>t),setSuggest:_("SET_SUGGEST",t=>t),setPointer:_("SET_POINTER",t=>t),setTabbarHover:_("SET_TABBAR_HOVER",t=>t),reset:_("RESET")},Ft=pt(A,{startContent:(t,e)=>({phase:{kind:"content",startX:e.payload.x,startY:e.payload.y,fromGroupId:e.payload.groupId,tabId:e.payload.tabId,cache:e.payload.cache},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:null}),startTab:(t,e)=>({phase:{kind:"tab",startX:e.payload.x,startY:e.payload.y,fromGroupId:e.payload.groupId,tabId:e.payload.tabId,cache:e.payload.cache},suggest:null,pointer:null,tabbarHover:null,draggingTabElement:e.payload.element}),setSuggest:(t,e)=>({...t,suggest:e.payload}),setPointer:(t,e)=>({...t,pointer:e.payload}),setTabbarHover:(t,e)=>({...t,tabbarHover:e.payload}),reset:()=>ft}),Yt=(t,e)=>{const r=Ft[e.type];return r?r(t,e,void 0):t},bt=l.createContext(null),U=()=>{const t=l.useContext(bt);if(!t)throw new Error("usePanelInteractions must be used within InteractionsProvider");return t},Vt=({containerRef:t,dragThresholdPx:e,onCommitContentDrop:r,onCommitTabDrop:n,isContentZoneAllowed:o,children:s})=>{const[a,i]=l.useReducer(Yt,ft),c=lt(),u=l.useCallback(()=>{const b=Array.from(c.getAll().entries()),w=b.map(([p,T])=>({gid:p,el:T.content??T.group})).filter(p=>!!p.el).map(p=>({...p,rect:p.el.getBoundingClientRect()})),g=b.map(([p,T])=>({gid:p,el:T.tabbar})).filter(p=>!!p.el).map(p=>({...p,rect:p.el.getBoundingClientRect()})),I=b.map(([p,T])=>({gid:p,el:T.content??T.group})).filter(p=>!!p.el).map(p=>({...p,rect:p.el.getBoundingClientRect()}));return{groups:w,tabbars:g,contents:I}},[c]),d=S.useEffectEvent(b=>{if(!t.current)return;const g=b.clientX,I=b.clientY,p=a.phase;if(p.kind==="idle")return;const T=Math.abs(g-p.startX),R=Math.abs(I-p.startY);if(T<e&&R<e){a.phase.kind==="content"&&i(A.setSuggest(null)),i(A.setPointer(null)),i(A.setTabbarHover(null));return}if(i(A.setPointer({x:g,y:I})),p.kind==="content"){const E=p.cache.groups.find(({rect:G})=>g>=G.left&&g<=G.right&&I>=G.top&&I<=G.bottom);if(!E){i(A.setSuggest(null));return}const D=V(E.rect,g,I);if(o&&!o({targetGroupId:E.gid,zone:D})){i(A.setSuggest(null));return}i(A.setSuggest({rect:E.rect,zone:D}));return}if(p.kind==="tab"){const E=p.cache.tabbars.find(({rect:P})=>g>=P.left&&g<=P.right&&I>=P.top&&I<=P.bottom);if(E){const k=Array.from(E.el.querySelectorAll("[role='tab']")).map(H=>H.getBoundingClientRect()),j=k.map(H=>H.left+H.width/2),M=j.findIndex(H=>g<H),N=M===-1?j.length:M,yt=k.length===0?E.rect.left+8:N===0?k[0].left:N===k.length?k[k.length-1].right:(k[N-1].right+k[N].left)/2;i(A.setTabbarHover({groupId:E.gid,index:N,rect:E.rect,insertX:yt}))}else i(A.setTabbarHover(null));const D=p.cache.contents.find(({rect:P})=>g>=P.left&&g<=P.right&&I>=P.top&&I<=P.bottom);if(!D){i(A.setSuggest(null));return}const G=V(D.rect,g,I);if(o&&!o({targetGroupId:D.gid,zone:G})){i(A.setSuggest(null));return}i(A.setSuggest({rect:D.rect,zone:G}))}}),h=S.useEffectEvent(b=>{const w=t.current,g=a;if(i(A.reset()),!w)return;const I=b.clientX,p=b.clientY;if(g.phase.kind==="idle")return;const T=Math.abs(I-g.phase.startX),R=Math.abs(p-g.phase.startY);if(!(T<e&&R<e)){if(g.phase.kind==="content"){const E=g.phase.cache.groups.find(({rect:P})=>I>=P.left&&I<=P.right&&p>=P.top&&p<=P.bottom);if(!E)return;const D=E.gid??null;if(!D)return;const G=V(E.rect,I,p);if(o&&!o({targetGroupId:D,zone:G}))return;r({fromGroupId:g.phase.fromGroupId,tabId:g.phase.tabId,targetGroupId:D,zone:G});return}if(g.phase.kind==="tab"){const E=g.phase.cache.tabbars.find(({rect:G})=>I>=G.left&&I<=G.right&&p>=G.top&&p<=G.bottom);if(E){const G=E.gid;if(!G)return;const k=Array.from(E.el.querySelectorAll("[role='tab']")).map(N=>{const Z=N.getBoundingClientRect();return Z.left+Z.width/2}),j=k.findIndex(N=>I<N),M=j===-1?k.length:j;n({fromGroupId:g.phase.fromGroupId,tabId:g.phase.tabId,targetGroupId:G,targetIndex:M});return}const D=g.phase.cache.contents.find(({rect:G})=>I>=G.left&&I<=G.right&&p>=G.top&&p<=G.bottom);if(D){const G=D.gid??null;if(!G)return;const P=V(D.rect,I,p);if(o&&!o({targetGroupId:G,zone:P}))return;r({fromGroupId:g.phase.fromGroupId,tabId:g.phase.tabId,targetGroupId:G,zone:P})}}}}),v=S.useEffectEvent(()=>{i(A.reset())});l.useEffect(()=>{if(a.phase.kind!=="idle")return window.addEventListener("pointermove",d),window.addEventListener("pointerup",h,{once:!0}),window.addEventListener("pointercancel",v,{once:!0}),()=>{window.removeEventListener("pointermove",d),window.removeEventListener("pointerup",h),window.removeEventListener("pointercancel",v)}},[a.phase.kind]);const y=l.useCallback((b,w,g)=>{if(g.button!==0)return;g.currentTarget.setPointerCapture(g.pointerId);const I=u();i(A.startContent({x:g.clientX,y:g.clientY,groupId:b,tabId:w,cache:I}))},[u]),m=l.useCallback((b,w,g)=>{if(g.button!==0)return;const I=g.currentTarget;I&&I.setPointerCapture(g.pointerId);const p=u();i(A.startTab({x:g.clientX,y:g.clientY,groupId:w,tabId:b,cache:p,element:I}))},[u]),x=l.useMemo(()=>({suggest:a.suggest,isTabDragging:a.phase.kind==="tab",draggingTabId:a.phase.kind==="tab"?a.phase.tabId:null,dragPointer:a.pointer,tabbarHover:a.tabbarHover,draggingTabElement:a.draggingTabElement,onStartContentDrag:y,onStartTabDrag:m}),[a.suggest,a.pointer,a.tabbarHover,a.phase,a.draggingTabElement,y,m]);return f.jsx(bt.Provider,{value:x,children:s})},et={display:"inline-flex",alignItems:"center",userSelect:"none"},qt=({groupId:t,tab:e,active:r,dragging:n,onClickTab:o,onStartDrag:s,onCloseTab:a,tabComponent:i,tabElement:c,onDoubleClick:u})=>{const d=l.useEffectEvent(()=>{o(e.id)}),h=l.useEffectEvent(x=>{s&&x.button===0&&s(e.id,t,x)}),v=()=>{const x=!!a;return f.jsx(l.Activity,{mode:x?"visible":"hidden",children:f.jsx("button",{type:"button","aria-label":`Close tab ${e.title}`,onClick:b=>{a&&(b.stopPropagation(),a(t,e.id))},style:{marginLeft:6},tabIndex:x?void 0:-1,disabled:!x,"aria-hidden":x?void 0:!0,children:"×"})})},y={role:"tab","aria-selected":r,tabIndex:r?0:-1,style:et,onClick:d,onPointerDown:h,onDoubleClick:u,"data-tab-id":e.id,"data-active":r?"true":"false","data-dragging":n?"true":"false",children:f.jsxs(f.Fragment,{children:[f.jsx("span",{children:e.title}),v()]})},m={type:"button",role:"tab","aria-selected":r,tabIndex:r?0:-1,style:et,onClick:()=>{o(e.id)},onPointerDown:x=>{s&&x.button===0&&s(e.id,t,x)},onDoubleClick:u,children:f.jsx("span",{children:e.title})};return c?c(m):i?f.jsx(i,{...m}):f.jsx("div",{...y})},Kt={display:"flex",alignItems:"center"},Ut={flex:"1 1 auto",alignSelf:"stretch"},Wt=({group:t,onClickTab:e,onStartDrag:r,rootRef:n,component:o,element:s,tabComponent:a,tabElement:i,onAddTab:c,onCloseTab:u,doubleClickToAdd:d})=>{const{isTabDragging:h,draggingTabId:v}=U(),y=l.useRef(null),m=l.useCallback(p=>{if(y.current=p,!!n){if(typeof n=="function"){n(p);return}try{n.current=p}catch{}}},[n]),x=l.useEffectEvent(p=>{const T=y.current??p.currentTarget;if(!T)return;const R=Array.from(T.querySelectorAll('[role="tab"]'));if(R.length===0)return;const E=j=>{const M=Math.max(0,Math.min(j,R.length-1)),N=R[M];N&&N.focus()},D=document.activeElement,G=D?R.indexOf(D):R.findIndex(j=>j.getAttribute("data-tab-id")===t.activeTabId);if(p.key==="ArrowRight"){p.preventDefault();const j=G>=0?G+1:0;E(j>=R.length?0:j);return}if(p.key==="ArrowLeft"){p.preventDefault();const j=G>=0?G-1:R.length-1;E(j<0?R.length-1:j);return}if(p.key==="Home"){p.preventDefault(),E(0);return}if(p.key==="End"){p.preventDefault(),E(R.length-1);return}if(p.key==="Enter"||p.key===" "){p.preventDefault();const M=(G>=0?R[G]:null)?.getAttribute("data-tab-id")??null;M&&e(M);return}if(p.key==="Delete"||p.key==="Backspace"){if(u){p.preventDefault();const M=(G>=0?R[G]:null)?.getAttribute("data-tab-id")??null;M&&u(t.id,M)}return}const P=(p.ctrlKey?1:0)+(p.metaKey?1:0)>0,k=typeof p.key=="string"?p.key.toLowerCase():"";if(P&&k==="t"){c&&(p.preventDefault(),c(t.id));return}});l.useEffect(()=>{const p=y.current;if(!p)return;const T=p.querySelector(`[role="tab"][data-tab-id="${t.activeTabId}"]`);if(T===document.activeElement)return;!p.contains(document.activeElement)&&T&&T.focus()},[t.activeTabId]);const b={style:Kt,role:"tablist","data-tabbar":"true","data-group-id":t.id,"data-dragging":h?"true":"false",onKeyDown:x},w=S.useElementComponentWrapper({element:s,component:o}),g=()=>c?f.jsx("button",{type:"button","aria-label":"Add tab",onClick:()=>{c(t.id)},children:"+"}):null,I=l.useCallback(()=>{d&&c&&c(t.id)},[d,c,t.id]);return f.jsxs(w,{...b,ref:m,onDoubleClick:I,children:[t.tabs.map((p,T)=>f.jsx(qt,{groupId:t.id,tab:p,active:t.activeTabId===p.id,dragging:v===p.id,onClickTab:e,onStartDrag:r,onCloseTab:u,tabComponent:a,tabElement:i,onDoubleClick:R=>R.stopPropagation()},`${t.id}:${p.id}:${T}`)),f.jsx("span",{style:Ut}),g()]})},Zt=({id:t,TabBarComponent:e,PanelGroupComponent:r})=>{const{getGroup:n,getGroupContent:o,onClickTab:s,onAddTab:a,onCloseTab:i,onStartContentDrag:c,onStartTabDrag:u,doubleClickToAdd:d}=Ot(),{setGroupEl:h,setTabbarEl:v,setContentEl:y}=lt(),m=l.useCallback(T=>{h(t,T)},[t,h]),x=l.useCallback(T=>{y(t,T)},[t,y]),b=l.useCallback(T=>{v(t,T)},[t,v]),w=n(t);if(!w)return null;const g=o(t),I=e??Wt,p=r??(T=>f.jsx(dt,{...T}));return f.jsx(p,{group:w,tabbar:f.jsx(I,{rootRef:b,group:w,onClickTab:T=>s(t,T),onAddTab:a,onCloseTab:i,onStartDrag:(T,R,E)=>u(T,R,E),doubleClickToAdd:d}),content:g,groupRef:m,contentRef:x,onContentPointerDown:T=>c(t,T)})},Jt=(t,e)=>{const r=new Array(16);for(let n=0;n<4;n++)for(let o=0;o<4;o++)r[n*4+o]=t[0+o]*e[n*4+0]+t[4+o]*e[n*4+1]+t[8+o]*e[n*4+2]+t[12+o]*e[n*4+3];return r},q=t=>{if(t.length!==16)throw new Error("Matrix must have exactly 16 values");const e=Object.freeze([...t]),r=n=>{const o=Jt(e,n);return q(o)};return Object.freeze({translate:(n=0,o=0,s=0)=>r([1,0,0,0,0,1,0,0,0,0,1,0,n,o,s,1]),translate3d:(n,o,s)=>r([1,0,0,0,0,1,0,0,0,0,1,0,n,o,s,1]),translateX:n=>r([1,0,0,0,0,1,0,0,0,0,1,0,n,0,0,1]),translateY:n=>r([1,0,0,0,0,1,0,0,0,0,1,0,0,n,0,1]),translateZ:n=>r([1,0,0,0,0,1,0,0,0,0,1,0,0,0,n,1]),scale:(n=1,o=1,s=1)=>r([n,0,0,0,0,o,0,0,0,0,s,0,0,0,0,1]),scale3d:(n,o,s)=>r([n,0,0,0,0,o,0,0,0,0,s,0,0,0,0,1]),scaleX:n=>r([n,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),scaleY:n=>r([1,0,0,0,0,n,0,0,0,0,1,0,0,0,0,1]),scaleZ:n=>r([1,0,0,0,0,1,0,0,0,0,n,0,0,0,0,1]),rotateX:n=>{const o=Math.cos(n),s=Math.sin(n);return r([1,0,0,0,0,o,s,0,0,-s,o,0,0,0,0,1])},rotateY:n=>{const o=Math.cos(n),s=Math.sin(n);return r([o,0,-s,0,0,1,0,0,s,0,o,0,0,0,0,1])},rotateZ:n=>{const o=Math.cos(n),s=Math.sin(n);return r([o,s,0,0,-s,o,0,0,0,0,1,0,0,0,0,1])},rotate:(n,o,s,a)=>{const i=Math.sqrt(o*o+s*s+a*a);if(i===0)return q(e);o/=i,s/=i,a/=i;const c=Math.cos(n),u=Math.sin(n),d=1-c;return r([d*o*o+c,d*o*s+u*a,d*o*a-u*s,0,d*o*s-u*a,d*s*s+c,d*s*a+u*o,0,d*o*a+u*s,d*s*a-u*o,d*a*a+c,0,0,0,0,1])},rotate3d:(n,o,s,a)=>{const i=Math.sqrt(n*n+o*o+s*s);if(i===0)return q(e);n/=i,o/=i,s/=i;const c=Math.cos(a),u=Math.sin(a),d=1-c;return r([d*n*n+c,d*n*o+u*s,d*n*s-u*o,0,d*n*o-u*s,d*o*o+c,d*o*s+u*n,0,d*n*s+u*o,d*o*s-u*n,d*s*s+c,0,0,0,0,1])},skew:(n=0,o=0)=>{const s=Math.tan(n),a=Math.tan(o);return r([1,a,0,0,s,1,0,0,0,0,1,0,0,0,0,1])},skewX:n=>{const o=Math.tan(n);return r([1,0,0,0,o,1,0,0,0,0,1,0,0,0,0,1])},skewY:n=>{const o=Math.tan(n);return r([1,o,0,0,0,1,0,0,0,0,1,0,0,0,0,1])},perspective:n=>{if(n===0)throw new Error("Perspective distance cannot be zero");return r([1,0,0,0,0,1,0,0,0,0,1,-1/n,0,0,0,1])},toCSS:()=>`matrix3d(${e.join(", ")})`,toArray:()=>e,toString:()=>[`[${e[0]}, ${e[4]}, ${e[8]}, ${e[12]}]`,`[${e[1]}, ${e[5]}, ${e[9]}, ${e[13]}]`,`[${e[2]}, ${e[6]}, ${e[10]}, ${e[14]}]`,`[${e[3]}, ${e[7]}, ${e[11]}, ${e[15]}]`].join(`
|
|
2
2
|
`)})},Qt=()=>q([1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]),te={position:"fixed",inset:0,pointerEvents:"none",zIndex:C.DROP_SUGGEST_Z_INDEX},ee={position:"absolute",border:`${C.DROP_SUGGEST_BORDER_WIDTH} dashed ${C.DROP_SUGGEST_BORDER_COLOR}`,background:C.DROP_SUGGEST_BG_COLOR,borderRadius:C.DROP_SUGGEST_BORDER_RADIUS,transformOrigin:"top left"},L=(t,e)=>e<=0?0:S.clampNumber(t/e,0),re=(t,e,r)=>{const{width:n,height:o}=t,s=r/2,a=n>0?n:1,i=o>0?o:1,c={translateX:r,translateY:r,scaleX:L(S.clampNumber(n-r*2,0),a),scaleY:L(S.clampNumber(o-r*2,0),i)},u={translateX:r,translateY:r,scaleX:L(S.clampNumber(n/2-r*1.5,0),a),scaleY:L(S.clampNumber(o-r*2,0),i)},d={translateX:n/2+s,translateY:r,scaleX:L(S.clampNumber(n/2-r*1.5,0),a),scaleY:L(S.clampNumber(o-r*2,0),i)},h={translateX:r,translateY:r,scaleX:L(S.clampNumber(n-r*2,0),a),scaleY:L(S.clampNumber(o/2-r*1.5,0),i)},v={translateX:r,translateY:o/2+s,scaleX:L(S.clampNumber(n-r*2,0),a),scaleY:L(S.clampNumber(o/2-r*1.5,0),i)},y={center:c,left:u,right:d,top:h,bottom:v},{translateX:m,translateY:x,scaleX:b,scaleY:w}=y[e];return Qt().translate(m,x,0).scale(b,w,1).toCSS()},ne=(t,e)=>{const r=C.DROP_SUGGEST_PADDING_PX;return{...ee,left:t.left,top:t.top,width:t.width,height:t.height,transform:re(t,e,r)}},oe=({suggest:t})=>{if(!t)return null;const{rect:e,zone:r}=t,n=ne(e,r);return f.jsx("div",{style:te,children:f.jsx("div",{style:n})})},se=typeof window<"u"&&typeof document<"u",ie=t=>{const[e,r]=l.useState(null),[n,o]=l.useState(null);return S.useIsomorphicLayoutEffect(()=>{if(!se||!t){r(null),o(null);return}const s=t.getBoundingClientRect();r({width:s.width,height:s.height}),o(t.outerHTML)},[t]),{html:n,size:e}},ae={position:"fixed",inset:0,pointerEvents:"none",zIndex:C.TAB_DRAG_OVERLAY_Z_INDEX},ce={position:"absolute",width:C.TAB_DRAG_INSERT_GUIDE_WIDTH,borderRadius:C.TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS,background:C.TAB_DRAG_INSERT_GUIDE_COLOR,boxShadow:C.TAB_DRAG_INSERT_GUIDE_SHADOW},ue=()=>{const{isTabDragging:t,draggingTabId:e,dragPointer:r,tabbarHover:n,draggingTabElement:o}=U(),{html:s,size:a}=ie(o),i=r!==null&&e!==null,c=l.useMemo(()=>{if(!(!i||!r))return{position:"absolute",left:r.x,top:r.y,transform:`translate(${C.TAB_DRAG_PREVIEW_OFFSET_X}, ${C.TAB_DRAG_PREVIEW_OFFSET_Y})`,pointerEvents:"none"}},[i,r]),u=l.useMemo(()=>{if(!(!c||!o))return a?{...c,width:a.width,height:a.height}:c},[c,o,a]),d=l.useMemo(()=>{if(n)return{...ce,left:n.insertX,top:n.rect.top+4,height:Math.max(0,n.rect.height-8)}},[n]);return t?f.jsxs("div",{style:ae,children:[f.jsx(l.Activity,{mode:u?"visible":"hidden",children:f.jsx("div",{style:u,children:f.jsx("div",{style:{width:"100%",height:"100%",pointerEvents:"none"},dangerouslySetInnerHTML:{__html:s??""}})})}),f.jsx(l.Activity,{mode:d?"visible":"hidden",children:f.jsx("div",{style:d})})]}):null},O=t=>t.type==="group",X=(t,e=[])=>{if(O(t))return[...e,t.groupId];const r=X(t.a,e);return X(t.b,r)},W=(t,e)=>e.reduce((r,n)=>O(r)?r:r[n],t),F=(t,e,r)=>{if(e.length===0)return r;const[n,...o]=e;return O(t)?t:n==="a"?{...t,a:F(t.a,o,r)}:{...t,b:F(t.b,o,r)}},K=(t,e,r=[])=>{if(O(t))return t.groupId===e?{splitPath:null,side:null}:null;if(O(t.a)&&t.a.groupId===e)return{splitPath:r,side:"a"};if(O(t.b)&&t.b.groupId===e)return{splitPath:r,side:"b"};const n=K(t.a,e,[...r,"a"]);return n||K(t.b,e,[...r,"b"])},gt=(t,e,r,n)=>{const o=n(),s=K(t,e),a={type:"split",direction:r,ratio:.5,a:{type:"group",groupId:e},b:{type:"group",groupId:o}};if(!s||s.splitPath===null)return{tree:a,newGroupId:o};const i=s.splitPath,c=W(t,i);if(O(c))return{tree:a,newGroupId:o};const u=s.side==="a"?{...c,a}:{...c,b:a};return{tree:F(t,i,u),newGroupId:o}},le=(t,e)=>{const r=K(t,e);if(!r||r.splitPath===null)return{tree:t,survivorGroupId:e};const n=r.splitPath,o=W(t,n);if(O(o))return{tree:t,survivorGroupId:e};const s=r.side==="a"?o.b:o.a,a=F(t,n,s),i=O(s)?s.groupId:X(s)[0]??null;return{tree:a,survivorGroupId:i}},de=(t,e,r)=>{const n=W(t,e);if(O(n))return t;const o={...n,ratio:S.clampNumber(r,.05,.95)};return F(t,e,o)},J=t=>{if(Object.keys(t.groups).filter(o=>t.groups[o].tabIds.length===0).length===0)return t;const n=(o,s)=>{const a=o.groups[s];if(!a||a.tabs.length>0||Object.keys(o.groups).length<=1)return o;const{tree:c,survivorGroupId:u}=le(o.tree,s),{[s]:d,...h}=o.groups,v=X(c),y=o.focusedGroupId===s?u??v[0]??null:o.focusedGroupId;return{...o,tree:c,groups:h,groupOrder:v,focusedGroupId:y}};return t.groupOrder.reduce((o,s)=>n(o,s),t)},pe=t=>({id:t,tabIds:[],tabs:[],activeTabId:null}),rt=(t,e,r,n)=>{const o={...t.groups},s=o[e];if(!s)throw new Error(`Group ${e} does not exist.`);const a={...t.panels,[r.id]:r},i=[...s.tabIds,r.id],c=n?r.id:s.activeTabId??r.id,u=i.map(h=>a[h]),d={...s,tabIds:i,tabs:u,activeTabId:c};return o[e]=d,{...t,panels:a,groups:o}},fe=(t,e,r)=>{const n={...t.groups},o=n[e];if(!o)throw new Error(`Group ${e} does not exist.`);const s=o.tabIds.filter(c=>c!==r),a=s.map(c=>t.panels[c]),i=o.activeTabId===r?s[0]??null:o.activeTabId;return n[e]={...o,tabIds:s,tabs:a,activeTabId:i},{...t,groups:n}},nt=(t,e,r,n,o)=>{const s=t.groups[e],a=t.groups[r];if(!s||!a)throw new Error("moveTab: source or target group is missing.");const i={...t.groups},c=s.tabIds.filter(h=>h!==n),u=[...a.tabIds.filter(h=>h!==n),n],d=s.activeTabId===n?c[0]??null:s.activeTabId;return i[e]={...s,tabIds:c,tabs:c.map(h=>t.panels[h]),activeTabId:d},i[r]={...a,tabIds:u,tabs:u.map(h=>t.panels[h]),activeTabId:n},{...t,groups:i}},ht=(t,e,r)=>{const n=t.groups[e];if(!n)throw new Error(`setActiveTab: group ${e} not found.`);if(!n.tabIds.some(s=>s===r))throw new Error(`setActiveTab: tab ${r} not found in group ${e}.`);const o={...t.groups,[e]:{...n,activeTabId:r}};return{...t,groups:o,focusedGroupId:e}},ot=(t,e,r,n,o)=>{const s=t.groups[e];if(!s)throw new Error(`addTabToGroupAtIndex: group ${e} not found.`);const a={...t.panels,[r.id]:r},i=s.tabIds.slice(),c=Math.max(0,Math.min(n,i.length));i.splice(c,0,r.id);const u=i.map(v=>a[v]),d=o?r.id:s.activeTabId??r.id,h={...t.groups,[e]:{...s,tabIds:i,tabs:u,activeTabId:d}};return{...t,panels:a,groups:h}},B=(t,e)=>{if(!t.groups[e])throw new Error(`setFocusedGroup: group ${e} not found.`);return{...t,focusedGroupId:e}},be=(t,e)=>{const r=e-1,n=t.groupOrder[r];return n?B(t,n):t},ge=t=>{const e=t.groupOrder,r=t.focusedGroupId;if(!r){const s=e[0];return s?B(t,s):t}const n=e.indexOf(r),o=e[(n+1)%e.length];return B(t,o)},he=t=>{const e=t.groupOrder,r=t.focusedGroupId;if(!r){const s=e[e.length-1];return s?B(t,s):t}const n=e.indexOf(r),o=e[(n-1+e.length)%e.length];return B(t,o)},mt=(t,e,r,n)=>{const{tree:o,newGroupId:s}=gt(t.tree,e,r,n),a={...t.groups,[s]:pe(s)},i=X(o);return{...t,tree:o,groups:a,groupOrder:i,focusedGroupId:s}},me=t=>{const r={type:"group",groupId:"g_1"},n=Object.fromEntries(t.map(i=>[i.id,i])),s={g_1:{id:"g_1",tabIds:t.map(i=>i.id),tabs:t,activeTabId:t[0]?.id??null}};return{tree:r,panels:n,groups:s,groupOrder:["g_1"],focusedGroupId:"g_1"}},ve=l.createContext(null),Ie=({value:t,children:e})=>f.jsx(ve.Provider,{value:t,children:e}),vt=l.createContext(null),xe=()=>{const t=l.useContext(vt);if(!t)throw new Error("useTree must be used within TreeProvider");return t},we=({value:t,children:e})=>f.jsx(vt.Provider,{value:t,children:e}),ye=l.createContext(null),Te=({value:t,children:e})=>f.jsx(ye.Provider,{value:t,children:e}),$=t=>{const e=S.toFiniteNumberOr(t,Number.POSITIVE_INFINITY);return S.clampNumber(e,1)},Ge=t=>typeof t=="object"&&t!==null,Se=t=>Ge(t)?"rows"in t?!0:"cols"in t:!1,It=t=>{if(!t)return{rows:Number.POSITIVE_INFINITY,cols:Number.POSITIVE_INFINITY};if(typeof t=="number"){const r=$(t);return{rows:r,cols:r}}if(Se(t))return{rows:$(t.rows),cols:$(t.cols)};const e=t;return{rows:$(e.maxHorizontal),cols:$(e.maxVertical)}},Q=t=>{if(O(t))return{horizontal:1,vertical:1};const e=Q(t.a),r=Q(t.b);return t.direction==="horizontal"?{horizontal:e.horizontal+r.horizontal,vertical:Math.max(e.vertical,r.vertical)}:{horizontal:Math.max(e.horizontal,r.horizontal),vertical:e.vertical+r.vertical}},Ee=(t,e,r)=>{const{tree:n}=gt(t,e,r,()=>"__preview__");return n},tt=(t,e,r,n)=>{if(!Number.isFinite(n.rows)&&!Number.isFinite(n.cols))return!0;const o=Ee(t,e,r),s=Q(o);return!(s.horizontal>n.rows||s.vertical>n.cols)},xt={splitFocused:_("panelState/splitFocused",t=>({direction:t})),focusGroupIndex:_("panelState/focusGroupIndex",t=>({index1Based:t})),focusNextGroup:_("panelState/focusNextGroup"),focusPrevGroup:_("panelState/focusPrevGroup"),setActiveTab:_("panelState/setActiveTab",(t,e)=>({groupId:t,tabId:e})),addTab:_("panelState/addTab",t=>t),addNewTab:_("panelState/addNewTab",t=>t),removeTab:_("panelState/removeTab",(t,e)=>({groupId:t,tabId:e})),contentDrop:_("panelState/contentDrop",t=>t),tabDrop:_("panelState/tabDrop",t=>t),adjustSplitRatio:_("panelState/adjustSplitRatio",t=>t)},Re=(t,e,r)=>{const n=t.groups[e.fromGroupId],o=t.groups[e.targetGroupId];if(!n||!o||!n.tabs.find(h=>h.id===e.tabId))return t;if(e.zone==="center"&&e.fromGroupId===e.targetGroupId)return ht(t,e.fromGroupId,e.tabId);if(e.zone==="center"){const h=nt(t,e.fromGroupId,e.targetGroupId,e.tabId);return B(h,e.targetGroupId)}const a=e.zone==="left"||e.zone==="right"?"vertical":"horizontal";if(!tt(t.tree,e.targetGroupId,a,r.splitLimits))return t;const i=r.createGroupId(),c=mt(t,e.targetGroupId,a,()=>i),u=e.zone==="left"||e.zone==="top"?e.targetGroupId:i,d=nt(c,e.fromGroupId,u,e.tabId);return B(d,u)},Pe=(t,e)=>{const r=t.groups[e.fromGroupId],n=t.groups[e.targetGroupId];if(!r||!n||!t.panels[e.tabId])return t;if(e.fromGroupId===e.targetGroupId){const v=r.tabIds.filter(w=>w!==e.tabId),y=Math.max(0,Math.min(e.targetIndex,v.length)),m=v.slice(0,y).concat([e.tabId],v.slice(y)),x=m.map(w=>t.panels[w]).filter(Boolean),b={...t.groups,[e.fromGroupId]:{...r,tabIds:m,tabs:x}};return{...t,groups:b}}const s={...t.groups},a=r.tabIds.filter(v=>v!==e.tabId),i=a.map(v=>t.panels[v]);s[e.fromGroupId]={...r,tabIds:a,tabs:i,activeTabId:r.activeTabId===e.tabId?i[0]?.id??null:r.activeTabId};const c=n.tabIds.filter(v=>v!==e.tabId),u=Math.max(0,Math.min(e.targetIndex,c.length)),d=c.slice(0,u).concat([e.tabId],c.slice(u)),h=d.map(v=>t.panels[v]).filter(Boolean);return s[e.targetGroupId]={...n,tabIds:d,tabs:h,activeTabId:e.tabId},{...t,groups:s,focusedGroupId:e.targetGroupId}},Ce=pt(xt,{splitFocused:(t,e,r)=>{const n=t.focusedGroupId??t.groupOrder[0]??null;return!n||!tt(t.tree,n,e.payload.direction,r.splitLimits)?t:mt(t,n,e.payload.direction,r.createGroupId)},focusGroupIndex:(t,e)=>be(t,e.payload.index1Based),focusNextGroup:t=>ge(t),focusPrevGroup:t=>he(t),setActiveTab:(t,e)=>ht(t,e.payload.groupId,e.payload.tabId),addTab:(t,e)=>{const{groupId:r,tab:n,index:o,makeActive:s}=e.payload;return typeof o=="number"?ot(t,r,n,o,s??!0):rt(t,r,n,s??!0)},addNewTab:(t,e,r)=>{if(!r.createPanelId)throw new Error("addNewTab requires PanelSystemProvider.createPanelId");const o={id:r.createPanelId(),title:e.payload.title,render:()=>e.payload.title},{groupId:s,index:a,makeActive:i}=e.payload;return typeof a=="number"?ot(t,s,o,a,i??!0):rt(t,s,o,i??!0)},removeTab:(t,e)=>fe(t,e.payload.groupId,e.payload.tabId),contentDrop:(t,e,r)=>Re(t,e.payload,r),tabDrop:(t,e)=>Pe(t,e.payload),adjustSplitRatio:(t,e)=>{const r=W(t.tree,e.payload.path);if(O(r))return t;const n=de(t.tree,e.payload.path,r.ratio+e.payload.deltaRatio);return{...t,tree:n}}}),st=(t,e,r)=>{const n=Ce[e.type];if(!n)return t;const o=n(t,e,r);return J(o)},wt=l.createContext(null),Y=()=>{const t=l.useContext(wt);if(!t)throw new Error("usePanelSystem must be used within PanelSystemProvider");return t},De=({initialState:t,createGroupId:e,createPanelId:r,state:n,onStateChange:o,splitLimits:s,children:a})=>{const i=l.useMemo(()=>J(t),[t]),c=l.useMemo(()=>It(s),[s]),u=l.useRef({createGroupId:e,splitLimits:c,createPanelId:r});u.current.createGroupId=e,u.current.splitLimits=c,u.current.createPanelId=r;const[d,h]=l.useReducer((T,R)=>st(T,R,u.current),i),v=l.useMemo(()=>n?J(n):d,[n,d]),y=l.useRef(v);y.current=v;const m=n!==void 0,x=l.useCallback(T=>{if(m){const R=st(y.current,T,u.current);o?.(R);return}h(T)},[m,o,h]),b=l.useMemo(()=>Xt(xt,x),[x]),w=l.useMemo(()=>({setActiveTab:b.setActiveTab,tabDrop:b.tabDrop}),[b]),g=l.useMemo(()=>({adjustSplitRatio:b.adjustSplitRatio}),[b]),I=l.useMemo(()=>({focusGroupIndex:b.focusGroupIndex,focusNextGroup:b.focusNextGroup,focusPrevGroup:b.focusPrevGroup}),[b]),p=l.useMemo(()=>({state:v,dispatch:x,actions:b}),[v,x,b]);return f.jsx(wt.Provider,{value:p,children:f.jsx(Ie,{value:w,children:f.jsx(we,{value:g,children:f.jsx(Te,{value:I,children:a})})})})},je=()=>{const{actions:t}=Y();return l.useMemo(()=>({splitFocused:e=>{t.splitFocused(e)},focusGroupIndex:e=>{t.focusGroupIndex(e)},focusNextGroup:()=>{t.focusNextGroup()},focusPrevGroup:()=>{t.focusPrevGroup()},closeFocusedGroup:()=>{}}),[t])},Ae=()=>{const{actions:t}=Y(),e=l.useCallback(({fromGroupId:n,tabId:o,targetGroupId:s,zone:a})=>{t.contentDrop({fromGroupId:n,tabId:o,targetGroupId:s,zone:a})},[t]),r=l.useCallback(({fromGroupId:n,tabId:o,targetGroupId:s,targetIndex:a})=>{t.tabDrop({fromGroupId:n,tabId:o,targetGroupId:s,targetIndex:a})},[t]);return{onCommitContentDrop:e,onCommitTabDrop:r}},_e=()=>{const t=Pt(),e=je();return l.useEffect(()=>{jt(t,e)},[t,e]),null},ke=({children:t,emptyContentComponent:e,doubleClickToAdd:r})=>{const n=U(),{state:o,actions:s}=Y(),a=l.useCallback(()=>l.createElement("div",{style:{color:"#888",fontSize:12,padding:12}},"No tabs"),[]),i=e??a,c=l.useCallback(b=>{const w=o.groups[b];if(!w)return null;const g=w.tabIds.map(I=>o.panels[I]).filter(Boolean);return{...w,tabs:g}},[o.groups,o.panels]),u=l.useCallback(b=>{const w=o.groups[b];if(!w)return f.jsx(i,{});const g=w.activeTabId;if(!g)return f.jsx(i,{});const I=o.panels[g];return I?I.render():f.jsx(i,{})},[o.groups,o.panels,i]),d=l.useCallback((b,w)=>{s.setActiveTab(b,w)},[s]),h=l.useCallback(b=>{s.addNewTab({groupId:b,title:"New Tab",makeActive:!0})},[s]),v=l.useCallback((b,w)=>{s.removeTab(b,w)},[s]),y=l.useCallback((b,w,g)=>{s.setActiveTab(w,b),n.onStartTabDrag(b,w,g)},[s,n]),m=l.useCallback((b,w)=>{const g=o.groups[b];!g||!g.activeTabId||n.onStartContentDrag(b,g.activeTabId,w)},[o.groups,n]),x=l.useMemo(()=>({getGroup:c,getGroupContent:u,onClickTab:d,onAddTab:h,onCloseTab:v,onStartTabDrag:y,onStartContentDrag:m,doubleClickToAdd:r}),[c,u,d,h,v,y,m,r]);return f.jsx(Mt,{value:x,children:t})},z=(t,e,r,n)=>{if(O(t))return n;const o=t.direction,s=o==="vertical"?r.x+r.w*t.ratio:r.y+r.h*t.ratio;if(n.push({path:e,direction:o,parentRect:r,linePos:s}),o==="vertical"){const c=r.w*t.ratio,u=r.w-c;return z(t.a,[...e,"a"],{x:r.x,y:r.y,w:c,h:r.h},n),z(t.b,[...e,"b"],{x:r.x+c,y:r.y,w:u,h:r.h},n),n}const a=r.h*t.ratio,i=r.h-a;return z(t.a,[...e,"a"],{x:r.x,y:r.y,w:r.w,h:a},n),z(t.b,[...e,"b"],{x:r.x,y:r.y+a,w:r.w,h:i},n),n},Oe=({containerRef:t})=>{const{state:e}=Y(),{adjustSplitRatio:r}=xe(),n=l.useMemo(()=>z(e.tree,[],{x:0,y:0,w:100,h:100},[]),[e.tree]),[o,s]=l.useState(null);if(l.useLayoutEffect(()=>{const i=t.current;if(!i)return;const c=()=>{const y=i.getBoundingClientRect();s({left:y.left,top:y.top,width:y.width,height:y.height})};c();function u(){try{const y=window.ResizeObserver;return typeof y=="function"?y:null}catch{return null}}const d=u(),h=d?new d(()=>c()):null;h&&h.observe(i);const v=()=>c();return window.addEventListener("scroll",v,!0),()=>{window.removeEventListener("scroll",v,!0),h&&h.disconnect()}},[t,e.tree]),!o)return null;const a=(i,c)=>{const u={left:o.left+o.width*i.parentRect.x/100,top:o.top+o.height*i.parentRect.y/100,width:o.width*i.parentRect.w/100,height:o.height*i.parentRect.h/100},d=C.SPLIT_HANDLE_THICKNESS;if(i.direction==="vertical"){const m=u.left+u.width*(i.linePos-i.parentRect.x)/i.parentRect.w,x={position:"fixed",left:`calc(${Math.round(m)}px - ${d} / 2)`,top:Math.round(u.top),width:d,height:Math.round(u.height),cursor:"col-resize",pointerEvents:"auto"},b=w=>{const g=o.width*i.parentRect.w/100,I=g===0?0:w/g;r({path:i.path,deltaRatio:I})};return f.jsx("div",{style:x,children:f.jsx(S.ResizeHandle,{direction:"vertical",onResize:b})},`split-${c}`)}const h=u.top+u.height*(i.linePos-i.parentRect.y)/i.parentRect.h,v={position:"fixed",left:Math.round(u.left),top:`calc(${Math.round(h)}px - ${d} / 2)`,width:Math.round(u.width),height:d,cursor:"row-resize",pointerEvents:"auto"},y=m=>{const x=o.height*i.parentRect.h/100,b=x===0?0:m/x;r({path:i.path,deltaRatio:b})};return f.jsx("div",{style:v,children:f.jsx(S.ResizeHandle,{direction:"horizontal",onResize:y})},`split-${c}`)};return f.jsx("div",{style:{position:"fixed",inset:0,pointerEvents:"none"},children:n.map((i,c)=>a(i,c))})},Me={position:"relative",display:"flex",width:"100%",height:"100%"},Ne=({state:t,layoutMode:e,gridTracksInteractive:r,view:n,tabBarComponent:o,panelGroupComponent:s})=>{const a=c=>{if(n){const u=n;return f.jsx(u,{groupId:c})}return f.jsx(Zt,{id:c,TabBarComponent:o,PanelGroupComponent:s})};if(e==="grid"){const c=kt(t,a,!!r);return f.jsx(S.GridLayout,{config:c.config,layers:c.layers})}const i=_t(t,a);return f.jsx(S.GridLayout,{config:i.config,layers:i.layers})},Le=({containerRef:t,layoutMode:e,gridTracksInteractive:r,dragThresholdPx:n,view:o,style:s,className:a,tabBarComponent:i,panelGroupComponent:c,splitLimits:u,emptyContentComponent:d,doubleClickToAdd:h})=>{const{state:v}=Y(),{onCommitContentDrop:y,onCommitTabDrop:m}=Ae(),x=l.useMemo(()=>({...Me,...s}),[s]),b=l.useCallback(({targetGroupId:w,zone:g})=>{if(g==="center")return!0;const I=g==="left"||g==="right"?"vertical":"horizontal";return tt(v.tree,w,I,u)},[v.tree,u]);return f.jsx(Nt,{children:f.jsxs(Vt,{containerRef:t,dragThresholdPx:n,onCommitContentDrop:y,onCommitTabDrop:m,isContentZoneAllowed:b,children:[f.jsx(ke,{emptyContentComponent:d,doubleClickToAdd:h,children:f.jsx("div",{ref:t,className:a,style:x,children:f.jsx(Ne,{state:v,layoutMode:e,gridTracksInteractive:r,view:o,tabBarComponent:i,panelGroupComponent:c})})}),f.jsx(Oe,{containerRef:t}),f.jsx(Be,{})]})})},Be=()=>{const t=U();return f.jsxs(f.Fragment,{children:[f.jsx(oe,{suggest:t.suggest}),f.jsx(ue,{})]})},He=({initialState:t,createGroupId:e,createPanelId:r,layoutMode:n,gridTracksInteractive:o,dragThresholdPx:s,view:a,emptyContentComponent:i,state:c,onStateChange:u,className:d,style:h,tabBarComponent:v,panelGroupComponent:y,splitLimits:m,doubleClickToAdd:x})=>{if(!t)throw new Error("PanelSystem requires initialState.");if(!e)throw new Error("PanelSystem requires explicit createGroupId function.");if(!n)throw new Error("PanelSystem requires explicit layoutMode ('absolute' | 'grid').");if(n==="grid"&&o===void 0)throw new Error("PanelSystem(layoutMode='grid') requires explicit 'gridTracksInteractive' flag.");if(s===void 0)throw new Error("PanelSystem requires explicit 'dragThresholdPx' value.");const b=l.useRef(null),w=l.useMemo(()=>It(m),[m]);return f.jsx(De,{initialState:t,createGroupId:e,createPanelId:r,state:c,onStateChange:u,splitLimits:m,children:f.jsxs(Dt,{children:[f.jsx(_e,{}),f.jsx(Le,{containerRef:b,layoutMode:n,gridTracksInteractive:o,dragThresholdPx:s,view:a,style:h,className:d,tabBarComponent:v,panelGroupComponent:y,splitLimits:w,emptyContentComponent:i,doubleClickToAdd:x})]})})};exports.Drawer=S.Drawer;exports.DrawerLayers=S.DrawerLayers;exports.GridLayout=S.GridLayout;exports.ResizeHandle=S.ResizeHandle;exports.CSS_VAR_PREFIX=C.CSS_VAR_PREFIX;exports.HorizontalDivider=Et;exports.PanelSystem=He;exports.buildInitialState=me;exports.useLayerDragHandle=Rt;
|
|
3
3
|
//# sourceMappingURL=index.cjs.map
|