@mochabug/adapt-web 1.0.1-rc.12 → 1.0.1-rc.13

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.
Files changed (30) hide show
  1. package/README.md +104 -137
  2. package/dist/README.md +119 -152
  3. package/dist/esm/AdaptAutomationElement.js +1 -1
  4. package/dist/esm/cap-adapter.js +1 -1
  5. package/dist/esm/core.js +1 -1
  6. package/dist/esm/css-panel.js +198 -166
  7. package/dist/esm/index.js +1 -1
  8. package/dist/esm/theme.js +1 -0
  9. package/dist/styles.css +198 -166
  10. package/dist/types/AdaptAutomationElement.d.ts +4 -0
  11. package/dist/types/core.d.ts +2 -1
  12. package/dist/types/css-panel.d.ts +1 -1
  13. package/dist/types/index.d.ts +12 -1
  14. package/dist/types/theme.d.ts +42 -0
  15. package/dist/types/types.d.ts +25 -0
  16. package/dist/umd/adapt-web.cap.js +1 -1
  17. package/dist/umd/adapt-web.cap.js.br +0 -0
  18. package/dist/umd/adapt-web.cap.min.js +1 -1
  19. package/dist/umd/adapt-web.cap.min.js.br +0 -0
  20. package/dist/umd/adapt-web.core.js +314 -167
  21. package/dist/umd/adapt-web.core.js.br +0 -0
  22. package/dist/umd/adapt-web.core.min.js +201 -169
  23. package/dist/umd/adapt-web.core.min.js.br +0 -0
  24. package/dist/umd/adapt-web.js +313 -167
  25. package/dist/umd/adapt-web.js.br +0 -0
  26. package/dist/umd/adapt-web.min.js +204 -172
  27. package/dist/umd/adapt-web.min.js.br +0 -0
  28. package/dist/umd/styles.css +198 -166
  29. package/dist/umd/styles.css.br +0 -0
  30. package/package.json +1 -1
package/dist/esm/css-panel.js CHANGED
@@ -13,89 +13,116 @@ const PANEL_MANAGER_CSS=`/* ====================================================
13
13
  min-height: inherit;
14
14
  display: flex;
15
15
  flex-direction: column;
16
- background: var(--mb-adapt-bg);
17
- --mb-adapt-bg: transparent;
18
- --mb-adapt-font: system-ui, -apple-system, sans-serif;
19
- --mb-adapt-button-hover-bg: rgba(128, 128, 128, 0.2);
20
- --mb-adapt-separator-active: rgba(59, 130, 246, 0.5);
21
- --mb-adapt-floating-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15);
22
- --mb-adapt-floating-border: none;
23
- --mb-adapt-floating-backdrop: none;
24
- --mb-adapt-floating-radius: 8px;
25
- --mb-adapt-status-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
26
- --mb-adapt-drag-ghost-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
27
- --mb-adapt-border-radius: 8px;
16
+
17
+ /* Two-layer CSS variables: --_X reads user-set --mb-adapt-X first, falls back to light default */
18
+ --_bg: var(--mb-adapt-bg, transparent);
19
+ --_font: var(--mb-adapt-font, system-ui, -apple-system, sans-serif);
20
+ --_button-hover-bg: var(--mb-adapt-button-hover-bg, rgba(128, 128, 128, 0.2));
21
+ --_separator-active: var(--mb-adapt-separator-active, rgba(59, 130, 246, 0.5));
22
+ --_floating-shadow: var(--mb-adapt-floating-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 12px 24px -8px rgba(0, 0, 0, 0.15));
23
+ --_floating-border: var(--mb-adapt-floating-border, none);
24
+ --_floating-backdrop: var(--mb-adapt-floating-backdrop, none);
25
+ --_floating-radius: var(--mb-adapt-floating-radius, 8px);
26
+ --_status-card-bg: var(--mb-adapt-status-card-bg, #ffffff);
27
+ --_status-card-border: var(--mb-adapt-status-card-border, #e5e7eb);
28
+ --_status-card-shadow: var(--mb-adapt-status-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04));
29
+ --_status-icon-bg: var(--mb-adapt-status-icon-bg, #fef2f2);
30
+ --_status-icon-stopped-bg: var(--mb-adapt-status-icon-stopped-bg, var(--mb-adapt-status-icon-bg, #f3f4f6));
31
+ --_status-text: var(--mb-adapt-status-text, #374151);
32
+ --_drag-ghost-shadow: var(--mb-adapt-drag-ghost-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
33
+ --_border-radius: var(--mb-adapt-border-radius, 8px);
28
34
  --mb-adapt-responsive-breakpoint: 768;
29
35
  --mb-adapt-responsive-hysteresis: 40;
30
36
 
31
- /* Cap.js widget customization variables */
32
- --mb-adapt-cap-background: #ffffff;
33
- --mb-adapt-cap-border-color: #e2e8f0;
34
- --mb-adapt-cap-border-radius: 16px;
35
- --mb-adapt-cap-height: 72px;
36
- --mb-adapt-cap-width: 380px;
37
- --mb-adapt-cap-padding: 20px 28px;
38
- --mb-adapt-cap-gap: 20px;
39
- --mb-adapt-cap-color: #1e293b;
40
- --mb-adapt-cap-checkbox-size: 36px;
41
- --mb-adapt-cap-checkbox-border: 2px solid #cbd5e1;
42
- --mb-adapt-cap-checkbox-radius: 10px;
43
- --mb-adapt-cap-checkbox-background: #f8fafc;
44
- --mb-adapt-cap-spinner-color: #6366f1;
45
- --mb-adapt-cap-spinner-bg: #e2e8f0;
46
- --mb-adapt-cap-font: inherit;
47
- --mb-adapt-cap-spinner-thickness: 3px;
48
- --mb-adapt-cap-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
49
- --mb-adapt-cap-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
50
-
51
- /* Fork panel theming \u2014 customizable via CSS variables */
52
- --mb-adapt-fork-bg: #ffffff;
53
- --mb-adapt-fork-tab-bg: #f3f3f3;
54
- --mb-adapt-fork-tab-active-bg: #ffffff;
55
- --mb-adapt-fork-tab-color: rgb(51, 51, 51);
56
- --mb-adapt-fork-tab-inactive-color: rgba(51, 51, 51, 0.7);
57
- --mb-adapt-fork-separator: rgba(128, 128, 128, 0.35);
37
+ /* Cap.js widget variables */
38
+ --_cap-background: var(--mb-adapt-cap-background, #ffffff);
39
+ --_cap-border-color: var(--mb-adapt-cap-border-color, #e2e8f0);
40
+ --_cap-border-radius: var(--mb-adapt-cap-border-radius, 16px);
41
+ --_cap-height: var(--mb-adapt-cap-height, 72px);
42
+ --_cap-width: var(--mb-adapt-cap-width, 380px);
43
+ --_cap-padding: var(--mb-adapt-cap-padding, 20px 28px);
44
+ --_cap-gap: var(--mb-adapt-cap-gap, 20px);
45
+ --_cap-color: var(--mb-adapt-cap-color, #1e293b);
46
+ --_cap-checkbox-size: var(--mb-adapt-cap-checkbox-size, 36px);
47
+ --_cap-checkbox-border: var(--mb-adapt-cap-checkbox-border, 2px solid #cbd5e1);
48
+ --_cap-checkbox-radius: var(--mb-adapt-cap-checkbox-radius, 10px);
49
+ --_cap-checkbox-background: var(--mb-adapt-cap-checkbox-background, #f8fafc);
50
+ --_cap-spinner-color: var(--mb-adapt-cap-spinner-color, #6366f1);
51
+ --_cap-spinner-bg: var(--mb-adapt-cap-spinner-bg, #e2e8f0);
52
+ --_cap-font: var(--mb-adapt-cap-font, inherit);
53
+ --_cap-spinner-thickness: var(--mb-adapt-cap-spinner-thickness, 3px);
54
+ --_cap-shadow: var(--mb-adapt-cap-shadow, 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04));
55
+ --_cap-shadow-hover: var(--mb-adapt-cap-shadow-hover, 0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06));
56
+
57
+ /* Fork panel theming */
58
+ --_fork-bg: var(--mb-adapt-fork-bg, #ffffff);
59
+ --_fork-tab-bg: var(--mb-adapt-fork-tab-bg, #f3f3f3);
60
+ --_fork-tab-active-bg: var(--mb-adapt-fork-tab-active-bg, #ffffff);
61
+ --_fork-tab-color: var(--mb-adapt-fork-tab-color, rgb(51, 51, 51));
62
+ --_fork-tab-inactive-color: var(--mb-adapt-fork-tab-inactive-color, rgba(51, 51, 51, 0.7));
63
+ --_fork-separator: var(--mb-adapt-fork-separator, rgba(128, 128, 128, 0.35));
64
+
65
+ /* Tab shape */
66
+ --_tab-radius: var(--mb-adapt-tab-radius, 0);
67
+ --_tab-shadow: var(--mb-adapt-tab-shadow, none);
68
+ --_tab-active-shadow: var(--mb-adapt-tab-active-shadow, none);
69
+ --_tab-gap: var(--mb-adapt-tab-gap, 0px);
70
+ --_tab-padding: var(--mb-adapt-tab-padding, 0 14px);
71
+ --_tab-font-size: var(--mb-adapt-tab-font-size, 13px);
72
+ --_tab-min-width: var(--mb-adapt-tab-min-width, 100px);
73
+ --_tab-spacing: var(--mb-adapt-tab-spacing, 6px);
74
+ --_toolbar-height: var(--mb-adapt-toolbar-height, 40px);
75
+ --_toolbar-padding: var(--mb-adapt-toolbar-padding, 0);
76
+
77
+ /* Drop targets \u2014 light defaults */
78
+ --_drop-header-bg: var(--mb-adapt-drop-header-bg, rgba(99, 102, 241, 0.18));
79
+ --_drop-center-bg: var(--mb-adapt-drop-center-bg, rgba(99, 102, 241, 0.12));
80
+ --_drop-split-bg: var(--mb-adapt-drop-split-bg, rgba(99, 102, 241, 0.14));
81
+ --_drop-border: var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.55));
82
+
83
+ background: var(--_bg);
58
84
  }
59
85
 
60
86
  .mb-adapt--dark {
61
87
  /* Cap.js widget dark mode */
62
- --mb-adapt-cap-background: #1e293b;
63
- --mb-adapt-cap-border-color: #334155;
64
- --mb-adapt-cap-color: #f1f5f9;
65
- --mb-adapt-cap-checkbox-border: 2px solid #475569;
66
- --mb-adapt-cap-checkbox-background: #0f172a;
67
- --mb-adapt-cap-spinner-color: #818cf8;
68
- --mb-adapt-cap-spinner-bg: #334155;
69
- --mb-adapt-cap-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
70
- --mb-adapt-cap-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
88
+ --_cap-background: var(--mb-adapt-cap-background, #1e293b);
89
+ --_cap-border-color: var(--mb-adapt-cap-border-color, #334155);
90
+ --_cap-color: var(--mb-adapt-cap-color, #f1f5f9);
91
+ --_cap-checkbox-border: var(--mb-adapt-cap-checkbox-border, 2px solid #475569);
92
+ --_cap-checkbox-background: var(--mb-adapt-cap-checkbox-background, #0f172a);
93
+ --_cap-spinner-color: var(--mb-adapt-cap-spinner-color, #818cf8);
94
+ --_cap-spinner-bg: var(--mb-adapt-cap-spinner-bg, #334155);
95
+ --_cap-shadow: var(--mb-adapt-cap-shadow, 0 4px 20px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15));
96
+ --_cap-shadow-hover: var(--mb-adapt-cap-shadow-hover, 0 8px 30px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2));
71
97
 
72
98
  /* Status card dark mode */
73
- --mb-adapt-status-card-bg: #1e293b;
74
- --mb-adapt-status-card-border: #334155;
75
- --mb-adapt-status-icon-bg: #351c1c;
76
- --mb-adapt-status-text: #e2e8f0;
99
+ --_status-card-bg: var(--mb-adapt-status-card-bg, #1e293b);
100
+ --_status-card-border: var(--mb-adapt-status-card-border, #334155);
101
+ --_status-icon-bg: var(--mb-adapt-status-icon-bg, #351c1c);
102
+ --_status-icon-stopped-bg: var(--mb-adapt-status-icon-stopped-bg, var(--mb-adapt-status-icon-bg, #1e293b));
103
+ --_status-text: var(--mb-adapt-status-text, #e2e8f0);
77
104
 
78
105
  /* Panel dark mode overrides */
79
- --mb-adapt-button-hover-bg: rgba(128, 128, 128, 0.3);
80
- --mb-adapt-separator-active: rgba(99, 130, 246, 0.6);
81
- --mb-adapt-floating-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -8px rgba(0, 0, 0, 0.3);
82
- --mb-adapt-floating-border: 1px solid rgba(255, 255, 255, 0.06);
83
- --mb-adapt-status-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
84
- --mb-adapt-drag-ghost-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
106
+ --_button-hover-bg: var(--mb-adapt-button-hover-bg, rgba(128, 128, 128, 0.3));
107
+ --_separator-active: var(--mb-adapt-separator-active, rgba(99, 130, 246, 0.6));
108
+ --_floating-shadow: var(--mb-adapt-floating-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -8px rgba(0, 0, 0, 0.3));
109
+ --_floating-border: var(--mb-adapt-floating-border, 1px solid rgba(255, 255, 255, 0.06));
110
+ --_status-card-shadow: var(--mb-adapt-status-card-shadow, 0 4px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15));
111
+ --_drag-ghost-shadow: var(--mb-adapt-drag-ghost-shadow, 0 4px 12px rgba(0, 0, 0, 0.35));
85
112
 
86
113
  /* Fork panel dark mode */
87
- --mb-adapt-fork-bg: #1e1e1e;
88
- --mb-adapt-fork-tab-bg: #252526;
89
- --mb-adapt-fork-tab-active-bg: #1e1e1e;
90
- --mb-adapt-fork-tab-color: #ffffff;
91
- --mb-adapt-fork-tab-inactive-color: #969696;
92
- --mb-adapt-fork-separator: rgb(68, 68, 68);
114
+ --_fork-bg: var(--mb-adapt-fork-bg, #1e1e1e);
115
+ --_fork-tab-bg: var(--mb-adapt-fork-tab-bg, #252526);
116
+ --_fork-tab-active-bg: var(--mb-adapt-fork-tab-active-bg, #1e1e1e);
117
+ --_fork-tab-color: var(--mb-adapt-fork-tab-color, #ffffff);
118
+ --_fork-tab-inactive-color: var(--mb-adapt-fork-tab-inactive-color, #969696);
119
+ --_fork-separator: var(--mb-adapt-fork-separator, rgb(68, 68, 68));
93
120
 
94
121
  /* Drop target dark mode */
95
- --mb-adapt-drop-header-bg: rgba(129, 140, 248, 0.22);
96
- --mb-adapt-drop-center-bg: rgba(129, 140, 248, 0.15);
97
- --mb-adapt-drop-split-bg: rgba(129, 140, 248, 0.18);
98
- --mb-adapt-drop-border: rgba(129, 140, 248, 0.6);
122
+ --_drop-header-bg: var(--mb-adapt-drop-header-bg, rgba(129, 140, 248, 0.22));
123
+ --_drop-center-bg: var(--mb-adapt-drop-center-bg, rgba(129, 140, 248, 0.15));
124
+ --_drop-split-bg: var(--mb-adapt-drop-split-bg, rgba(129, 140, 248, 0.18));
125
+ --_drop-border: var(--mb-adapt-drop-border, rgba(129, 140, 248, 0.6));
99
126
  }
100
127
 
101
128
  /* \u2500\u2500 Layout (recursive split tree) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -135,7 +162,7 @@ const PANEL_MANAGER_CSS=`/* ====================================================
135
162
  /* Draggable separator between split panels */
136
163
  .mb-layout-separator {
137
164
  flex: 0 0 5px;
138
- background: var(--mb-adapt-fork-separator);
165
+ background: var(--_fork-separator);
139
166
  transition: background 0.15s;
140
167
  position: relative;
141
168
  z-index: 1;
@@ -147,7 +174,7 @@ const PANEL_MANAGER_CSS=`/* ====================================================
147
174
 
148
175
  .mb-layout-separator:hover,
149
176
  .mb-layout-separator--active {
150
- background: var(--mb-adapt-separator-active);
177
+ background: var(--_separator-active);
151
178
  }
152
179
 
153
180
  /* \u2500\u2500 Group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -155,16 +182,17 @@ const PANEL_MANAGER_CSS=`/* ====================================================
155
182
  display: flex;
156
183
  flex-direction: column;
157
184
  height: 100%;
158
- background: var(--mb-adapt-bg);
185
+ background: var(--_bg);
159
186
  }
160
187
 
161
188
  .mb-group-header {
162
189
  display: flex;
163
190
  align-items: stretch;
164
- height: 40px;
165
- min-height: 40px;
166
- background: var(--mb-adapt-fork-tab-bg);
167
- border-bottom: 1px solid var(--mb-adapt-fork-separator);
191
+ height: var(--_toolbar-height);
192
+ min-height: var(--_toolbar-height);
193
+ padding: var(--_toolbar-padding);
194
+ background: var(--_fork-tab-bg);
195
+ border-bottom: 1px solid var(--_fork-separator);
168
196
  user-select: none;
169
197
  }
170
198
 
@@ -175,7 +203,7 @@ const PANEL_MANAGER_CSS=`/* ====================================================
175
203
 
176
204
  .mb-group-tabs {
177
205
  display: flex;
178
- align-items: stretch;
206
+ align-items: center;
179
207
  overflow-x: auto;
180
208
  overflow-y: hidden;
181
209
  flex: 0 1 auto;
@@ -202,16 +230,16 @@ const PANEL_MANAGER_CSS=`/* ====================================================
202
230
  flex: 1;
203
231
  position: relative;
204
232
  overflow: hidden;
205
- background: var(--mb-adapt-fork-bg);
233
+ background: var(--_fork-bg);
206
234
  }
207
235
 
208
236
  /* Main group overrides */
209
237
  .mb-group[data-main-group="true"] {
210
- background: var(--mb-adapt-bg);
238
+ background: var(--_bg);
211
239
  }
212
240
 
213
241
  .mb-group[data-main-group="true"] .mb-group-content {
214
- background: var(--mb-adapt-bg);
242
+ background: var(--_bg);
215
243
  }
216
244
 
217
245
 
@@ -219,27 +247,31 @@ const PANEL_MANAGER_CSS=`/* ====================================================
219
247
  .mb-tab {
220
248
  display: flex;
221
249
  align-items: center;
222
- gap: 6px;
223
- padding: 0 14px;
224
- min-width: 100px;
225
- font-size: 13px;
226
- font-family: var(--mb-adapt-font);
250
+ gap: var(--_tab-spacing);
251
+ padding: var(--_tab-padding);
252
+ min-width: var(--_tab-min-width);
253
+ font-size: var(--_tab-font-size);
254
+ font-family: var(--_font);
227
255
  white-space: nowrap;
228
256
  cursor: pointer;
229
257
  touch-action: none;
230
- color: var(--mb-adapt-fork-tab-inactive-color);
231
- background: var(--mb-adapt-fork-tab-bg);
232
- border-right: 1px solid var(--mb-adapt-fork-separator);
233
- transition: background 0.1s;
258
+ color: var(--_fork-tab-inactive-color);
259
+ background: var(--_fork-tab-bg);
260
+ border-right: 1px solid var(--_fork-separator);
261
+ border-radius: var(--_tab-radius);
262
+ box-shadow: var(--_tab-shadow);
263
+ margin: var(--_tab-gap);
264
+ transition: background 0.15s, box-shadow 0.15s;
234
265
  }
235
266
 
236
267
  .mb-tab[data-active="true"] {
237
- color: var(--mb-adapt-fork-tab-color);
238
- background: var(--mb-adapt-fork-tab-active-bg);
268
+ color: var(--_fork-tab-color);
269
+ background: var(--_fork-tab-active-bg);
270
+ box-shadow: var(--_tab-active-shadow);
239
271
  }
240
272
 
241
273
  .mb-tab:hover {
242
- background: var(--mb-adapt-fork-tab-active-bg);
274
+ background: var(--_fork-tab-active-bg);
243
275
  }
244
276
 
245
277
  .mb-tab-label {
@@ -290,7 +322,7 @@ const PANEL_MANAGER_CSS=`/* ====================================================
290
322
 
291
323
  .mb-tab-close:hover {
292
324
  opacity: 1 !important;
293
- background: var(--mb-adapt-button-hover-bg);
325
+ background: var(--_button-hover-bg);
294
326
  }
295
327
 
296
328
  .mb-tab-close svg {
@@ -318,11 +350,11 @@ const PANEL_MANAGER_CSS=`/* ====================================================
318
350
  .mb-floating-overlay {
319
351
  position: fixed;
320
352
  z-index: 100000;
321
- box-shadow: var(--mb-adapt-floating-shadow);
322
- border: var(--mb-adapt-floating-border);
323
- backdrop-filter: var(--mb-adapt-floating-backdrop);
324
- -webkit-backdrop-filter: var(--mb-adapt-floating-backdrop);
325
- border-radius: var(--mb-adapt-floating-radius);
353
+ box-shadow: var(--_floating-shadow);
354
+ border: var(--_floating-border);
355
+ backdrop-filter: var(--_floating-backdrop);
356
+ -webkit-backdrop-filter: var(--_floating-backdrop);
357
+ border-radius: var(--_floating-radius);
326
358
  display: flex;
327
359
  flex-direction: column;
328
360
  /* No overflow:hidden here \u2014 resize handles use negative offsets (top:-3px etc.)
@@ -332,7 +364,7 @@ const PANEL_MANAGER_CSS=`/* ====================================================
332
364
 
333
365
  .mb-floating-overlay > .mb-group {
334
366
  flex: 1;
335
- border-radius: var(--mb-adapt-floating-radius);
367
+ border-radius: var(--_floating-radius);
336
368
  overflow: hidden;
337
369
  }
338
370
 
@@ -344,7 +376,7 @@ const PANEL_MANAGER_CSS=`/* ====================================================
344
376
  flex: 1;
345
377
  min-width: 0;
346
378
  min-height: 0;
347
- border-radius: var(--mb-adapt-floating-radius);
379
+ border-radius: var(--_floating-radius);
348
380
  overflow: hidden;
349
381
  }
350
382
 
@@ -389,7 +421,7 @@ const PANEL_MANAGER_CSS=`/* ====================================================
389
421
  border: 0;
390
422
  display: block;
391
423
  background: transparent;
392
- border-radius: var(--mb-adapt-border-radius);
424
+ border-radius: var(--_border-radius);
393
425
  pointer-events: auto;
394
426
  opacity: 0;
395
427
  transition: opacity 0.1s ease-out;
@@ -424,10 +456,10 @@ const PANEL_MANAGER_CSS=`/* ====================================================
424
456
  padding: 32px 40px;
425
457
  max-width: 380px;
426
458
  border-radius: 16px;
427
- background: var(--mb-adapt-status-card-bg, #ffffff);
428
- border: 1px solid var(--mb-adapt-status-card-border, #e5e7eb);
429
- box-shadow: var(--mb-adapt-status-card-shadow);
430
- font-family: var(--mb-adapt-font);
459
+ background: var(--_status-card-bg);
460
+ border: 1px solid var(--_status-card-border);
461
+ box-shadow: var(--_status-card-shadow);
462
+ font-family: var(--_font);
431
463
  text-align: center;
432
464
  }
433
465
 
@@ -438,7 +470,7 @@ const PANEL_MANAGER_CSS=`/* ====================================================
438
470
  display: flex;
439
471
  align-items: center;
440
472
  justify-content: center;
441
- background: var(--mb-adapt-status-icon-bg, #fef2f2);
473
+ background: var(--_status-icon-bg);
442
474
  }
443
475
 
444
476
  .mb-adapt__status-icon svg {
@@ -447,11 +479,11 @@ const PANEL_MANAGER_CSS=`/* ====================================================
447
479
  }
448
480
 
449
481
  .mb-adapt__status-icon--stopped {
450
- background: var(--mb-adapt-status-icon-bg, #f3f4f6);
482
+ background: var(--_status-icon-stopped-bg);
451
483
  }
452
484
 
453
485
  .mb-adapt__status-text {
454
- color: var(--mb-adapt-status-text, #374151);
486
+ color: var(--_status-text);
455
487
  font-size: 15px;
456
488
  line-height: 1.5;
457
489
  margin: 0;
@@ -459,19 +491,19 @@ const PANEL_MANAGER_CSS=`/* ====================================================
459
491
 
460
492
  .mb-adapt__status-restart {
461
493
  padding: 8px 20px;
462
- border: 1px solid var(--mb-adapt-status-card-border, #e5e7eb);
494
+ border: 1px solid var(--_status-card-border);
463
495
  border-radius: 8px;
464
496
  background: transparent;
465
- color: var(--mb-adapt-status-text, #374151);
497
+ color: var(--_status-text);
466
498
  font-size: 14px;
467
499
  font-weight: 500;
468
- font-family: var(--mb-adapt-font);
500
+ font-family: var(--_font);
469
501
  cursor: pointer;
470
502
  transition: background 0.15s, border-color 0.15s;
471
503
  }
472
504
 
473
505
  .mb-adapt__status-restart:hover {
474
- background: var(--mb-adapt-status-card-border, #e5e7eb);
506
+ background: var(--_status-card-border);
475
507
  }
476
508
 
477
509
  /* \u2500\u2500 Confirm-on-close dialog \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -501,18 +533,18 @@ const PANEL_MANAGER_CSS=`/* ====================================================
501
533
  padding: 24px 28px;
502
534
  max-width: 360px;
503
535
  width: 100%;
504
- border-radius: var(--mb-adapt-floating-radius);
505
- background: var(--mb-adapt-fork-tab-active-bg);
506
- border: 1px solid var(--mb-adapt-fork-separator);
507
- box-shadow: var(--mb-adapt-floating-shadow);
508
- font-family: var(--mb-adapt-font);
536
+ border-radius: var(--_floating-radius);
537
+ background: var(--_fork-tab-active-bg);
538
+ border: 1px solid var(--_fork-separator);
539
+ box-shadow: var(--_floating-shadow);
540
+ font-family: var(--_font);
509
541
  text-align: center;
510
542
  }
511
543
 
512
544
  .mb-adapt__confirm-text {
513
545
  font-size: 14px;
514
546
  line-height: 1.5;
515
- color: var(--mb-adapt-fork-tab-color);
547
+ color: var(--_fork-tab-color);
516
548
  margin: 0;
517
549
  }
518
550
 
@@ -526,7 +558,7 @@ const PANEL_MANAGER_CSS=`/* ====================================================
526
558
  padding: 8px 16px;
527
559
  border-radius: 6px;
528
560
  font-size: 13px;
529
- font-family: var(--mb-adapt-font);
561
+ font-family: var(--_font);
530
562
  cursor: pointer;
531
563
  font-weight: 500;
532
564
  transition: background 0.15s, border-color 0.15s;
@@ -534,17 +566,17 @@ const PANEL_MANAGER_CSS=`/* ====================================================
534
566
 
535
567
  .mb-adapt__confirm-btn--cancel {
536
568
  background: transparent;
537
- border: 1px solid var(--mb-adapt-fork-separator);
538
- color: var(--mb-adapt-fork-tab-color);
569
+ border: 1px solid var(--_fork-separator);
570
+ color: var(--_fork-tab-color);
539
571
  }
540
572
 
541
573
  .mb-adapt__confirm-btn--cancel:hover {
542
- background: var(--mb-adapt-button-hover-bg);
574
+ background: var(--_button-hover-bg);
543
575
  }
544
576
 
545
577
  .mb-adapt__confirm-btn--confirm {
546
- background: var(--mb-adapt-fork-tab-color);
547
- color: var(--mb-adapt-fork-tab-active-bg);
578
+ background: var(--_fork-tab-color);
579
+ color: var(--_fork-tab-active-bg);
548
580
  border: 1px solid transparent;
549
581
  }
550
582
 
@@ -569,23 +601,23 @@ const PANEL_MANAGER_CSS=`/* ====================================================
569
601
 
570
602
  /* Cap.js widget styling */
571
603
  .mb-adapt cap-widget {
572
- --cap-background: var(--mb-adapt-cap-background);
573
- --cap-border-color: var(--mb-adapt-cap-border-color);
574
- --cap-border-radius: var(--mb-adapt-cap-border-radius);
575
- --cap-widget-height: var(--mb-adapt-cap-height);
576
- --cap-widget-width: var(--mb-adapt-cap-width);
577
- --cap-widget-padding: var(--mb-adapt-cap-padding);
578
- --cap-gap: var(--mb-adapt-cap-gap);
579
- --cap-color: var(--mb-adapt-cap-color);
580
- --cap-checkbox-size: var(--mb-adapt-cap-checkbox-size);
581
- --cap-checkbox-border: var(--mb-adapt-cap-checkbox-border);
582
- --cap-checkbox-border-radius: var(--mb-adapt-cap-checkbox-radius);
583
- --cap-checkbox-background: var(--mb-adapt-cap-checkbox-background);
604
+ --cap-background: var(--_cap-background);
605
+ --cap-border-color: var(--_cap-border-color);
606
+ --cap-border-radius: var(--_cap-border-radius);
607
+ --cap-widget-height: var(--_cap-height);
608
+ --cap-widget-width: var(--_cap-width);
609
+ --cap-widget-padding: var(--_cap-padding);
610
+ --cap-gap: var(--_cap-gap);
611
+ --cap-color: var(--_cap-color);
612
+ --cap-checkbox-size: var(--_cap-checkbox-size);
613
+ --cap-checkbox-border: var(--_cap-checkbox-border);
614
+ --cap-checkbox-border-radius: var(--_cap-checkbox-radius);
615
+ --cap-checkbox-background: var(--_cap-checkbox-background);
584
616
  --cap-checkbox-margin: 0;
585
- --cap-font: var(--mb-adapt-cap-font);
586
- --cap-spinner-color: var(--mb-adapt-cap-spinner-color);
587
- --cap-spinner-background-color: var(--mb-adapt-cap-spinner-bg);
588
- --cap-spinner-thickness: var(--mb-adapt-cap-spinner-thickness);
617
+ --cap-font: var(--_cap-font);
618
+ --cap-spinner-color: var(--_cap-spinner-color);
619
+ --cap-spinner-background-color: var(--_cap-spinner-bg);
620
+ --cap-spinner-thickness: var(--_cap-spinner-thickness);
589
621
  }
590
622
 
591
623
  /* Hide Cap.js credits */
@@ -606,7 +638,7 @@ cap-widget::part(attribution) {
606
638
  padding: 0;
607
639
  border: none;
608
640
  background: transparent;
609
- color: var(--mb-adapt-fork-tab-color);
641
+ color: var(--_fork-tab-color);
610
642
  cursor: pointer;
611
643
  display: flex;
612
644
  align-items: center;
@@ -617,7 +649,7 @@ cap-widget::part(attribution) {
617
649
  }
618
650
  .mb-adapt-fork-actions button:hover {
619
651
  opacity: 1;
620
- background: var(--mb-adapt-button-hover-bg);
652
+ background: var(--_button-hover-bg);
621
653
  }
622
654
  .mb-adapt-fork-actions button svg {
623
655
  width: 14px;
@@ -630,12 +662,12 @@ cap-widget::part(attribution) {
630
662
  docked panels are minimized \u2014 the iframe gets the remaining height. */
631
663
  .mb-adapt-minimized-tabs {
632
664
  display: none;
633
- height: 40px;
665
+ height: var(--_toolbar-height);
634
666
  flex-shrink: 0;
635
667
  z-index: 100;
636
668
  align-items: stretch;
637
- background: var(--mb-adapt-fork-tab-bg);
638
- border-bottom: 1px solid var(--mb-adapt-fork-separator);
669
+ background: var(--_fork-tab-bg);
670
+ border-bottom: 1px solid var(--_fork-separator);
639
671
  user-select: none;
640
672
  }
641
673
  .mb-adapt-minimized-tab {
@@ -644,12 +676,12 @@ cap-widget::part(attribution) {
644
676
  gap: 8px;
645
677
  padding: 0 12px;
646
678
  flex: 1;
647
- background: var(--mb-adapt-fork-tab-bg);
648
- color: var(--mb-adapt-fork-tab-color);
649
- font-size: 13px;
650
- font-family: var(--mb-adapt-font);
679
+ background: var(--_fork-tab-bg);
680
+ color: var(--_fork-tab-color);
681
+ font-size: var(--_tab-font-size);
682
+ font-family: var(--_font);
651
683
  white-space: nowrap;
652
- border-right: 1px solid var(--mb-adapt-fork-separator);
684
+ border-right: 1px solid var(--_fork-separator);
653
685
  cursor: default;
654
686
  }
655
687
  .mb-adapt-minimized-tab-label {
@@ -682,7 +714,7 @@ cap-widget::part(attribution) {
682
714
  }
683
715
  .mb-adapt-minimized-tab-action:hover {
684
716
  opacity: 1;
685
- background: var(--mb-adapt-button-hover-bg);
717
+ background: var(--_button-hover-bg);
686
718
  }
687
719
  .mb-adapt-minimized-tab-action svg {
688
720
  width: 14px;
@@ -697,8 +729,8 @@ cap-widget::part(attribution) {
697
729
 
698
730
  /* Drop target highlight for minimized tab merge */
699
731
  .mb-adapt-minimized-tab--drop-target {
700
- background: var(--mb-adapt-drop-header-bg, rgba(99, 102, 241, 0.18)) !important;
701
- box-shadow: inset 0 0 0 2px var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.6));
732
+ background: var(--_drop-header-bg) !important;
733
+ box-shadow: inset 0 0 0 2px var(--_drop-border);
702
734
  }
703
735
 
704
736
  /* \u2500\u2500 Pointer-drag ghost element \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -707,14 +739,14 @@ cap-widget::part(attribution) {
707
739
  pointer-events: none;
708
740
  z-index: 999999;
709
741
  padding: 4px 10px;
710
- background: var(--mb-adapt-fork-tab-bg);
711
- color: var(--mb-adapt-fork-tab-color);
712
- border: 1px solid var(--mb-adapt-fork-separator);
713
- border-radius: 4px;
714
- font-size: 13px;
715
- font-family: var(--mb-adapt-font);
742
+ background: var(--_fork-tab-bg);
743
+ color: var(--_fork-tab-color);
744
+ border: 1px solid var(--_fork-separator);
745
+ border-radius: var(--_tab-radius, 4px);
746
+ font-size: var(--_tab-font-size);
747
+ font-family: var(--_font);
716
748
  white-space: nowrap;
717
- box-shadow: var(--mb-adapt-drag-ghost-shadow);
749
+ box-shadow: var(--_drag-ghost-shadow);
718
750
  opacity: 0.92;
719
751
  display: flex;
720
752
  align-items: center;
@@ -727,8 +759,8 @@ cap-widget::part(attribution) {
727
759
 
728
760
  /* \u2500\u2500 Drop target highlight on group header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
729
761
  .mb-group-header--drop-target {
730
- background: var(--mb-adapt-drop-header-bg, rgba(99, 102, 241, 0.18)) !important;
731
- box-shadow: inset 0 0 0 2px var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.6));
762
+ background: var(--_drop-header-bg) !important;
763
+ box-shadow: inset 0 0 0 2px var(--_drop-border);
732
764
  }
733
765
 
734
766
  /* \u2500\u2500 Drop overlay (content-area and dock-strip indicators) */
@@ -743,16 +775,16 @@ cap-widget::part(attribution) {
743
775
  }
744
776
 
745
777
  .mb-drop-overlay[data-zone="center"] {
746
- background: var(--mb-adapt-drop-center-bg, rgba(99, 102, 241, 0.12));
747
- border: 2px solid var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.55));
778
+ background: var(--_drop-center-bg);
779
+ border: 2px solid var(--_drop-border);
748
780
  }
749
781
 
750
782
  .mb-drop-overlay[data-zone="top"],
751
783
  .mb-drop-overlay[data-zone="bottom"],
752
784
  .mb-drop-overlay[data-zone="left"],
753
785
  .mb-drop-overlay[data-zone="right"] {
754
- background: var(--mb-adapt-drop-split-bg, rgba(99, 102, 241, 0.14));
755
- border: 2px solid var(--mb-adapt-drop-border, rgba(99, 102, 241, 0.55));
786
+ background: var(--_drop-split-bg);
787
+ border: 2px solid var(--_drop-border);
756
788
  }
757
789
 
758
790
  /* \u2500\u2500 Iframe pointer-event guard during drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -784,7 +816,7 @@ html.mb-dragging webview {
784
816
 
785
817
  .mb-tab-popout:hover {
786
818
  opacity: 1 !important;
787
- background: var(--mb-adapt-button-hover-bg);
819
+ background: var(--_button-hover-bg);
788
820
  }
789
821
 
790
822
  .mb-tab-popout svg {