@preact/signals-devtools-ui 0.3.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/devtools-ui.js +1 -1
- package/dist/devtools-ui.js.map +1 -1
- package/dist/devtools-ui.min.js +1 -1
- package/dist/devtools-ui.min.js.map +1 -1
- package/dist/devtools-ui.mjs +1 -1
- package/dist/devtools-ui.mjs.map +1 -1
- package/dist/devtools-ui.module.js +1 -1
- package/dist/devtools-ui.module.js.map +1 -1
- package/dist/styles.css +445 -113
- package/package.json +3 -3
- package/src/components/Graph.tsx +13 -14
- package/src/components/Header.tsx +21 -1
- package/src/components/UpdateItem.tsx +5 -2
- package/src/context.ts +75 -3
- package/src/styles.css +445 -113
- package/src/types.ts +1 -1
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,244 @@
|
|
|
1
1
|
/* DevTools Panel Styles */
|
|
2
2
|
|
|
3
|
+
/* ===== Theme Variables ===== */
|
|
4
|
+
.signals-devtools {
|
|
5
|
+
/* Backgrounds */
|
|
6
|
+
--bg-primary: #f5f5f5;
|
|
7
|
+
--bg-secondary: #fff;
|
|
8
|
+
--bg-tertiary: #f8f9fa;
|
|
9
|
+
--bg-hover: #f0f0f0;
|
|
10
|
+
--bg-active-tab: #f5f0ff;
|
|
11
|
+
--bg-active-tab-border: #d0c0e8;
|
|
12
|
+
|
|
13
|
+
/* Borders */
|
|
14
|
+
--border-primary: #e0e0e0;
|
|
15
|
+
--border-secondary: #ccc;
|
|
16
|
+
|
|
17
|
+
/* Text */
|
|
18
|
+
--text-primary: #333;
|
|
19
|
+
--text-secondary: #555;
|
|
20
|
+
--text-muted: #666;
|
|
21
|
+
--text-faint: #999;
|
|
22
|
+
--text-time: #757575;
|
|
23
|
+
--text-connection: #444;
|
|
24
|
+
|
|
25
|
+
/* Brand colors */
|
|
26
|
+
--brand-purple: #5e35b1;
|
|
27
|
+
--brand-purple-hover: #673ab7;
|
|
28
|
+
--brand-blue: #2196f3;
|
|
29
|
+
--brand-blue-hover: #1976d2;
|
|
30
|
+
--brand-blue-deep: #1565c0;
|
|
31
|
+
|
|
32
|
+
/* Shadows */
|
|
33
|
+
--shadow-color: rgba(0, 0, 0, 0.15);
|
|
34
|
+
--shadow-light: rgba(0, 0, 0, 0.08);
|
|
35
|
+
--shadow-medium: rgba(0, 0, 0, 0.12);
|
|
36
|
+
|
|
37
|
+
/* Graph */
|
|
38
|
+
--graph-bg: #f8fafc;
|
|
39
|
+
--graph-grid: #e5e7eb;
|
|
40
|
+
--graph-link: #94a3b8;
|
|
41
|
+
--graph-link-highlight: #673ab7;
|
|
42
|
+
--graph-controls-bg: rgba(255, 255, 255, 0.95);
|
|
43
|
+
--graph-controls-border: #e2e8f0;
|
|
44
|
+
--graph-controls-text: #334155;
|
|
45
|
+
--graph-controls-active: #eeeeee;
|
|
46
|
+
--graph-zoom-text: #64748b;
|
|
47
|
+
--graph-zoom-bg: rgba(255, 255, 255, 0.9);
|
|
48
|
+
--graph-node-stroke: #fff;
|
|
49
|
+
--graph-export-bg: white;
|
|
50
|
+
|
|
51
|
+
/* Tooltip */
|
|
52
|
+
--tooltip-bg: #1e293b;
|
|
53
|
+
--tooltip-text: white;
|
|
54
|
+
--tooltip-id: #94a3b8;
|
|
55
|
+
|
|
56
|
+
/* Toast */
|
|
57
|
+
--toast-bg: #323232;
|
|
58
|
+
|
|
59
|
+
/* Value change */
|
|
60
|
+
--value-prev: #d32f2f;
|
|
61
|
+
--value-new: #388e3c;
|
|
62
|
+
--value-arrow: #666;
|
|
63
|
+
|
|
64
|
+
/* Component update */
|
|
65
|
+
--component-update-bg: #f8fff8;
|
|
66
|
+
--component-badge-bg: #e8f5e9;
|
|
67
|
+
--component-badge-text: #2e7d32;
|
|
68
|
+
|
|
69
|
+
/* Effect badge */
|
|
70
|
+
--effect-badge-bg: #fff3e0;
|
|
71
|
+
--effect-badge-text: #e65100;
|
|
72
|
+
|
|
73
|
+
/* Scrollbar */
|
|
74
|
+
--scrollbar-track: #f5f5f5;
|
|
75
|
+
--scrollbar-thumb: #ccc;
|
|
76
|
+
--scrollbar-thumb-hover: #999;
|
|
77
|
+
|
|
78
|
+
/* Settings */
|
|
79
|
+
--settings-border: #d0d0d0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.signals-devtools[data-theme="dark"] {
|
|
83
|
+
/* Backgrounds */
|
|
84
|
+
--bg-primary: #1a1a2e;
|
|
85
|
+
--bg-secondary: #16213e;
|
|
86
|
+
--bg-tertiary: #1e2a45;
|
|
87
|
+
--bg-hover: #2a3a5c;
|
|
88
|
+
--bg-active-tab: #2d1b69;
|
|
89
|
+
--bg-active-tab-border: #4a3580;
|
|
90
|
+
|
|
91
|
+
/* Borders */
|
|
92
|
+
--border-primary: #2a3a5c;
|
|
93
|
+
--border-secondary: #3a4a6c;
|
|
94
|
+
|
|
95
|
+
/* Text */
|
|
96
|
+
--text-primary: #e0e0e0;
|
|
97
|
+
--text-secondary: #b0b0b0;
|
|
98
|
+
--text-muted: #888;
|
|
99
|
+
--text-faint: #666;
|
|
100
|
+
--text-time: #888;
|
|
101
|
+
--text-connection: #b0b0b0;
|
|
102
|
+
|
|
103
|
+
/* Brand colors */
|
|
104
|
+
--brand-purple: #b39ddb;
|
|
105
|
+
--brand-purple-hover: #9575cd;
|
|
106
|
+
--brand-blue: #64b5f6;
|
|
107
|
+
--brand-blue-hover: #42a5f5;
|
|
108
|
+
--brand-blue-deep: #64b5f6;
|
|
109
|
+
|
|
110
|
+
/* Shadows */
|
|
111
|
+
--shadow-color: rgba(0, 0, 0, 0.4);
|
|
112
|
+
--shadow-light: rgba(0, 0, 0, 0.3);
|
|
113
|
+
--shadow-medium: rgba(0, 0, 0, 0.35);
|
|
114
|
+
|
|
115
|
+
/* Graph */
|
|
116
|
+
--graph-bg: #1a1a2e;
|
|
117
|
+
--graph-grid: #2a3a5c;
|
|
118
|
+
--graph-link: #5a6a8c;
|
|
119
|
+
--graph-link-highlight: #9575cd;
|
|
120
|
+
--graph-controls-bg: rgba(22, 33, 62, 0.95);
|
|
121
|
+
--graph-controls-border: #2a3a5c;
|
|
122
|
+
--graph-controls-text: #b0b0b0;
|
|
123
|
+
--graph-controls-active: #2a3a5c;
|
|
124
|
+
--graph-zoom-text: #888;
|
|
125
|
+
--graph-zoom-bg: rgba(22, 33, 62, 0.9);
|
|
126
|
+
--graph-node-stroke: #16213e;
|
|
127
|
+
--graph-export-bg: #16213e;
|
|
128
|
+
|
|
129
|
+
/* Tooltip */
|
|
130
|
+
--tooltip-bg: #0f1629;
|
|
131
|
+
--tooltip-text: #e0e0e0;
|
|
132
|
+
--tooltip-id: #5a6a8c;
|
|
133
|
+
|
|
134
|
+
/* Toast */
|
|
135
|
+
--toast-bg: #0f1629;
|
|
136
|
+
|
|
137
|
+
/* Value change */
|
|
138
|
+
--value-prev: #ef5350;
|
|
139
|
+
--value-new: #66bb6a;
|
|
140
|
+
--value-arrow: #888;
|
|
141
|
+
|
|
142
|
+
/* Component update */
|
|
143
|
+
--component-update-bg: #1a2e1a;
|
|
144
|
+
--component-badge-bg: #1a3a1a;
|
|
145
|
+
--component-badge-text: #66bb6a;
|
|
146
|
+
|
|
147
|
+
/* Effect badge */
|
|
148
|
+
--effect-badge-bg: #2e1a00;
|
|
149
|
+
--effect-badge-text: #ffb74d;
|
|
150
|
+
|
|
151
|
+
/* Scrollbar */
|
|
152
|
+
--scrollbar-track: #1a1a2e;
|
|
153
|
+
--scrollbar-thumb: #3a4a6c;
|
|
154
|
+
--scrollbar-thumb-hover: #5a6a8c;
|
|
155
|
+
|
|
156
|
+
/* Settings */
|
|
157
|
+
--settings-border: #2a3a5c;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
@media (prefers-color-scheme: dark) {
|
|
161
|
+
.signals-devtools:not([data-theme="light"]) {
|
|
162
|
+
/* Backgrounds */
|
|
163
|
+
--bg-primary: #1a1a2e;
|
|
164
|
+
--bg-secondary: #16213e;
|
|
165
|
+
--bg-tertiary: #1e2a45;
|
|
166
|
+
--bg-hover: #2a3a5c;
|
|
167
|
+
--bg-active-tab: #2d1b69;
|
|
168
|
+
--bg-active-tab-border: #4a3580;
|
|
169
|
+
|
|
170
|
+
/* Borders */
|
|
171
|
+
--border-primary: #2a3a5c;
|
|
172
|
+
--border-secondary: #3a4a6c;
|
|
173
|
+
|
|
174
|
+
/* Text */
|
|
175
|
+
--text-primary: #e0e0e0;
|
|
176
|
+
--text-secondary: #b0b0b0;
|
|
177
|
+
--text-muted: #888;
|
|
178
|
+
--text-faint: #666;
|
|
179
|
+
--text-time: #888;
|
|
180
|
+
--text-connection: #b0b0b0;
|
|
181
|
+
|
|
182
|
+
/* Brand colors */
|
|
183
|
+
--brand-purple: #b39ddb;
|
|
184
|
+
--brand-purple-hover: #9575cd;
|
|
185
|
+
--brand-blue: #64b5f6;
|
|
186
|
+
--brand-blue-hover: #42a5f5;
|
|
187
|
+
--brand-blue-deep: #64b5f6;
|
|
188
|
+
|
|
189
|
+
/* Shadows */
|
|
190
|
+
--shadow-color: rgba(0, 0, 0, 0.4);
|
|
191
|
+
--shadow-light: rgba(0, 0, 0, 0.3);
|
|
192
|
+
--shadow-medium: rgba(0, 0, 0, 0.35);
|
|
193
|
+
|
|
194
|
+
/* Graph */
|
|
195
|
+
--graph-bg: #1a1a2e;
|
|
196
|
+
--graph-grid: #2a3a5c;
|
|
197
|
+
--graph-link: #5a6a8c;
|
|
198
|
+
--graph-link-highlight: #9575cd;
|
|
199
|
+
--graph-controls-bg: rgba(22, 33, 62, 0.95);
|
|
200
|
+
--graph-controls-border: #2a3a5c;
|
|
201
|
+
--graph-controls-text: #b0b0b0;
|
|
202
|
+
--graph-controls-active: #2a3a5c;
|
|
203
|
+
--graph-zoom-text: #888;
|
|
204
|
+
--graph-zoom-bg: rgba(22, 33, 62, 0.9);
|
|
205
|
+
--graph-node-stroke: #16213e;
|
|
206
|
+
--graph-export-bg: #16213e;
|
|
207
|
+
|
|
208
|
+
/* Tooltip */
|
|
209
|
+
--tooltip-bg: #0f1629;
|
|
210
|
+
--tooltip-text: #e0e0e0;
|
|
211
|
+
--tooltip-id: #5a6a8c;
|
|
212
|
+
|
|
213
|
+
/* Toast */
|
|
214
|
+
--toast-bg: #0f1629;
|
|
215
|
+
|
|
216
|
+
/* Value change */
|
|
217
|
+
--value-prev: #ef5350;
|
|
218
|
+
--value-new: #66bb6a;
|
|
219
|
+
--value-arrow: #888;
|
|
220
|
+
|
|
221
|
+
/* Component update */
|
|
222
|
+
--component-update-bg: #1a2e1a;
|
|
223
|
+
--component-badge-bg: #1a3a1a;
|
|
224
|
+
--component-badge-text: #66bb6a;
|
|
225
|
+
|
|
226
|
+
/* Effect badge */
|
|
227
|
+
--effect-badge-bg: #2e1a00;
|
|
228
|
+
--effect-badge-text: #ffb74d;
|
|
229
|
+
|
|
230
|
+
/* Scrollbar */
|
|
231
|
+
--scrollbar-track: #1a1a2e;
|
|
232
|
+
--scrollbar-thumb: #3a4a6c;
|
|
233
|
+
--scrollbar-thumb-hover: #5a6a8c;
|
|
234
|
+
|
|
235
|
+
/* Settings */
|
|
236
|
+
--settings-border: #2a3a5c;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
/* ===== Base Styles ===== */
|
|
241
|
+
|
|
3
242
|
* {
|
|
4
243
|
box-sizing: border-box;
|
|
5
244
|
margin: 0;
|
|
@@ -7,24 +246,21 @@
|
|
|
7
246
|
}
|
|
8
247
|
|
|
9
248
|
body {
|
|
10
|
-
font-family:
|
|
249
|
+
font-family:
|
|
250
|
+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
11
251
|
font-size: 13px;
|
|
12
252
|
line-height: 1.4;
|
|
13
|
-
color: #333;
|
|
14
|
-
background: #f5f5f5;
|
|
15
253
|
overflow: hidden;
|
|
16
254
|
}
|
|
17
255
|
|
|
18
256
|
#app {
|
|
19
257
|
height: 100vh;
|
|
20
|
-
display: flex;
|
|
21
|
-
flex-direction: column;
|
|
22
258
|
}
|
|
23
259
|
|
|
24
260
|
/* Header */
|
|
25
261
|
.header {
|
|
26
|
-
background:
|
|
27
|
-
border-bottom: 1px solid
|
|
262
|
+
background: var(--bg-secondary);
|
|
263
|
+
border-bottom: 1px solid var(--border-primary);
|
|
28
264
|
padding: 8px 12px;
|
|
29
265
|
display: flex;
|
|
30
266
|
justify-content: space-between;
|
|
@@ -41,7 +277,7 @@ body {
|
|
|
41
277
|
.header-title h1 {
|
|
42
278
|
font-size: 16px;
|
|
43
279
|
font-weight: 700;
|
|
44
|
-
color:
|
|
280
|
+
color: var(--brand-purple);
|
|
45
281
|
}
|
|
46
282
|
|
|
47
283
|
.connection-status {
|
|
@@ -50,14 +286,14 @@ body {
|
|
|
50
286
|
gap: 6px;
|
|
51
287
|
font-size: 12px;
|
|
52
288
|
font-weight: 500;
|
|
53
|
-
color:
|
|
289
|
+
color: var(--text-connection);
|
|
54
290
|
}
|
|
55
291
|
|
|
56
292
|
.divider {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
293
|
+
width: 100%;
|
|
294
|
+
height: 2px;
|
|
295
|
+
background: var(--border-primary);
|
|
296
|
+
margin: 8px 0;
|
|
61
297
|
}
|
|
62
298
|
|
|
63
299
|
.status-indicator {
|
|
@@ -86,8 +322,13 @@ body {
|
|
|
86
322
|
}
|
|
87
323
|
|
|
88
324
|
@keyframes pulse {
|
|
89
|
-
0%,
|
|
90
|
-
|
|
325
|
+
0%,
|
|
326
|
+
100% {
|
|
327
|
+
opacity: 1;
|
|
328
|
+
}
|
|
329
|
+
50% {
|
|
330
|
+
opacity: 0.5;
|
|
331
|
+
}
|
|
91
332
|
}
|
|
92
333
|
|
|
93
334
|
.header-controls {
|
|
@@ -97,9 +338,9 @@ body {
|
|
|
97
338
|
|
|
98
339
|
/* Buttons */
|
|
99
340
|
.btn {
|
|
100
|
-
border: 1px solid
|
|
101
|
-
background:
|
|
102
|
-
color:
|
|
341
|
+
border: 1px solid var(--border-secondary);
|
|
342
|
+
background: var(--bg-secondary);
|
|
343
|
+
color: var(--text-primary);
|
|
103
344
|
padding: 4px 12px;
|
|
104
345
|
border-radius: 4px;
|
|
105
346
|
font-size: 12px;
|
|
@@ -108,21 +349,21 @@ body {
|
|
|
108
349
|
}
|
|
109
350
|
|
|
110
351
|
.btn:hover {
|
|
111
|
-
background:
|
|
352
|
+
background: var(--bg-hover);
|
|
112
353
|
}
|
|
113
354
|
|
|
114
355
|
.btn.btn-primary {
|
|
115
|
-
background:
|
|
116
|
-
border-color:
|
|
356
|
+
background: var(--brand-blue);
|
|
357
|
+
border-color: var(--brand-blue);
|
|
117
358
|
color: white;
|
|
118
359
|
}
|
|
119
360
|
|
|
120
361
|
.btn.btn-primary:hover {
|
|
121
|
-
background:
|
|
362
|
+
background: var(--brand-blue-hover);
|
|
122
363
|
}
|
|
123
364
|
|
|
124
365
|
.btn.btn-secondary {
|
|
125
|
-
background:
|
|
366
|
+
background: var(--bg-primary);
|
|
126
367
|
}
|
|
127
368
|
|
|
128
369
|
.btn:disabled {
|
|
@@ -131,27 +372,47 @@ body {
|
|
|
131
372
|
}
|
|
132
373
|
|
|
133
374
|
.btn.active {
|
|
134
|
-
background:
|
|
135
|
-
border-color:
|
|
375
|
+
background: var(--brand-purple-hover);
|
|
376
|
+
border-color: var(--brand-purple-hover);
|
|
136
377
|
color: white;
|
|
137
378
|
}
|
|
138
379
|
|
|
139
380
|
.btn.active:hover {
|
|
140
|
-
background:
|
|
141
|
-
border-color:
|
|
381
|
+
background: var(--brand-purple);
|
|
382
|
+
border-color: var(--brand-purple);
|
|
142
383
|
}
|
|
143
384
|
|
|
144
|
-
/*
|
|
385
|
+
/* Theme Toggle */
|
|
386
|
+
.theme-toggle {
|
|
387
|
+
border: 1px solid var(--border-secondary);
|
|
388
|
+
background: var(--bg-secondary);
|
|
389
|
+
color: var(--text-primary);
|
|
390
|
+
padding: 4px 10px;
|
|
391
|
+
border-radius: 4px;
|
|
392
|
+
font-size: 12px;
|
|
393
|
+
cursor: pointer;
|
|
394
|
+
transition: all 0.2s;
|
|
395
|
+
display: flex;
|
|
396
|
+
align-items: center;
|
|
397
|
+
gap: 4px;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.theme-toggle:hover {
|
|
401
|
+
background: var(--bg-hover);
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
/* Settings Panel — popover top-layer resets color, so re-declare */
|
|
145
405
|
.settings-panel {
|
|
146
406
|
position: absolute;
|
|
147
407
|
top: 49px;
|
|
148
408
|
right: 12px;
|
|
149
409
|
left: auto;
|
|
150
410
|
width: 320px;
|
|
151
|
-
background:
|
|
152
|
-
|
|
411
|
+
background: var(--bg-secondary);
|
|
412
|
+
color: var(--text-primary);
|
|
413
|
+
border: 1px solid var(--settings-border);
|
|
153
414
|
border-radius: 8px;
|
|
154
|
-
box-shadow: 0 4px 16px
|
|
415
|
+
box-shadow: 0 4px 16px var(--shadow-color);
|
|
155
416
|
z-index: 1000;
|
|
156
417
|
overflow-y: auto;
|
|
157
418
|
}
|
|
@@ -180,13 +441,21 @@ body {
|
|
|
180
441
|
margin-right: 8px;
|
|
181
442
|
}
|
|
182
443
|
|
|
444
|
+
.setting-description {
|
|
445
|
+
color: var(--text-muted);
|
|
446
|
+
font-size: 11px;
|
|
447
|
+
margin-top: 4px;
|
|
448
|
+
}
|
|
449
|
+
|
|
183
450
|
.setting-group input[type="number"],
|
|
184
451
|
.setting-group textarea {
|
|
185
452
|
width: 100%;
|
|
186
453
|
padding: 6px 8px;
|
|
187
|
-
border: 1px solid
|
|
454
|
+
border: 1px solid var(--border-secondary);
|
|
188
455
|
border-radius: 4px;
|
|
189
456
|
font-size: 12px;
|
|
457
|
+
background: var(--bg-secondary);
|
|
458
|
+
color: var(--text-primary);
|
|
190
459
|
}
|
|
191
460
|
|
|
192
461
|
.setting-group textarea {
|
|
@@ -204,8 +473,8 @@ body {
|
|
|
204
473
|
|
|
205
474
|
/* Tabs */
|
|
206
475
|
.tabs {
|
|
207
|
-
background:
|
|
208
|
-
border-bottom: 1px solid
|
|
476
|
+
background: var(--bg-secondary);
|
|
477
|
+
border-bottom: 1px solid var(--border-primary);
|
|
209
478
|
display: flex;
|
|
210
479
|
flex-shrink: 0;
|
|
211
480
|
padding: 0 8px;
|
|
@@ -219,22 +488,22 @@ body {
|
|
|
219
488
|
cursor: pointer;
|
|
220
489
|
font-size: 13px;
|
|
221
490
|
font-weight: 500;
|
|
222
|
-
color:
|
|
491
|
+
color: var(--text-secondary);
|
|
223
492
|
transition: all 0.2s;
|
|
224
493
|
margin-top: 4px;
|
|
225
494
|
border-radius: 6px 6px 0 0;
|
|
226
495
|
}
|
|
227
496
|
|
|
228
497
|
.tab:hover {
|
|
229
|
-
color:
|
|
230
|
-
background:
|
|
498
|
+
color: var(--text-primary);
|
|
499
|
+
background: var(--bg-hover);
|
|
231
500
|
}
|
|
232
501
|
|
|
233
502
|
.tab.active {
|
|
234
|
-
color:
|
|
235
|
-
background:
|
|
236
|
-
border-color:
|
|
237
|
-
border-bottom: 2px solid
|
|
503
|
+
color: var(--brand-purple-hover);
|
|
504
|
+
background: var(--bg-active-tab);
|
|
505
|
+
border-color: var(--bg-active-tab-border);
|
|
506
|
+
border-bottom: 2px solid var(--bg-secondary);
|
|
238
507
|
margin-bottom: -1px;
|
|
239
508
|
font-weight: 600;
|
|
240
509
|
}
|
|
@@ -246,11 +515,14 @@ body {
|
|
|
246
515
|
position: relative;
|
|
247
516
|
display: flex;
|
|
248
517
|
flex-direction: column;
|
|
518
|
+
background: var(--bg-primary);
|
|
249
519
|
}
|
|
250
520
|
|
|
251
521
|
.tab-content {
|
|
252
522
|
flex: 1;
|
|
253
523
|
overflow: hidden;
|
|
524
|
+
display: flex;
|
|
525
|
+
flex-direction: column;
|
|
254
526
|
}
|
|
255
527
|
|
|
256
528
|
/* Empty State */
|
|
@@ -265,11 +537,11 @@ body {
|
|
|
265
537
|
.empty-state-content h2 {
|
|
266
538
|
font-size: 18px;
|
|
267
539
|
margin-bottom: 8px;
|
|
268
|
-
color:
|
|
540
|
+
color: var(--text-muted);
|
|
269
541
|
}
|
|
270
542
|
|
|
271
543
|
.empty-state-content p {
|
|
272
|
-
color:
|
|
544
|
+
color: var(--text-faint);
|
|
273
545
|
margin-bottom: 16px;
|
|
274
546
|
}
|
|
275
547
|
|
|
@@ -281,8 +553,8 @@ body {
|
|
|
281
553
|
}
|
|
282
554
|
|
|
283
555
|
.updates-header {
|
|
284
|
-
background:
|
|
285
|
-
border-bottom: 1px solid
|
|
556
|
+
background: var(--bg-secondary);
|
|
557
|
+
border-bottom: 1px solid var(--border-primary);
|
|
286
558
|
padding: 8px 12px;
|
|
287
559
|
flex-shrink: 0;
|
|
288
560
|
}
|
|
@@ -291,19 +563,20 @@ body {
|
|
|
291
563
|
display: flex;
|
|
292
564
|
gap: 16px;
|
|
293
565
|
font-size: 12px;
|
|
294
|
-
color:
|
|
566
|
+
color: var(--text-muted);
|
|
295
567
|
}
|
|
296
568
|
|
|
297
569
|
.updates-list {
|
|
298
570
|
flex: 1;
|
|
299
571
|
overflow-y: auto;
|
|
300
572
|
padding: 8px;
|
|
573
|
+
min-height: 200px;
|
|
301
574
|
}
|
|
302
575
|
|
|
303
576
|
/* Update Items */
|
|
304
577
|
.update-item {
|
|
305
|
-
background:
|
|
306
|
-
border: 1px solid
|
|
578
|
+
background: var(--bg-secondary);
|
|
579
|
+
border: 1px solid var(--border-primary);
|
|
307
580
|
border-radius: 4px;
|
|
308
581
|
margin-bottom: 8px;
|
|
309
582
|
padding: 8px;
|
|
@@ -314,24 +587,48 @@ body {
|
|
|
314
587
|
border-left: 4px solid #ff9800;
|
|
315
588
|
}
|
|
316
589
|
|
|
590
|
+
.update-item.component {
|
|
591
|
+
border-left: 4px solid #4caf50;
|
|
592
|
+
background-color: var(--component-update-bg);
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.update-type-badge {
|
|
596
|
+
font-size: 10px;
|
|
597
|
+
padding: 2px 6px;
|
|
598
|
+
border-radius: 3px;
|
|
599
|
+
background: var(--border-primary);
|
|
600
|
+
color: var(--text-muted);
|
|
601
|
+
margin-left: 8px;
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
.update-item.component .update-type-badge {
|
|
605
|
+
background: var(--component-badge-bg);
|
|
606
|
+
color: var(--component-badge-text);
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
.update-item.effect .update-type-badge {
|
|
610
|
+
background: var(--effect-badge-bg);
|
|
611
|
+
color: var(--effect-badge-text);
|
|
612
|
+
}
|
|
613
|
+
|
|
317
614
|
.component-name-header {
|
|
318
|
-
|
|
615
|
+
margin-right: 8px;
|
|
319
616
|
}
|
|
320
617
|
|
|
321
618
|
.component-list {
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
background:
|
|
619
|
+
list-style: none;
|
|
620
|
+
display: flex;
|
|
621
|
+
padding: 0;
|
|
622
|
+
margin: 0;
|
|
623
|
+
font-family: monospace;
|
|
624
|
+
background: var(--bg-tertiary);
|
|
328
625
|
padding: 4px 6px;
|
|
329
626
|
border-radius: 3px;
|
|
330
627
|
}
|
|
331
628
|
|
|
332
629
|
.update-item.rerender {
|
|
333
630
|
border-left: 4px solid #9c27b0;
|
|
334
|
-
background-color:
|
|
631
|
+
background-color: var(--bg-primary);
|
|
335
632
|
}
|
|
336
633
|
|
|
337
634
|
.update-item.value {
|
|
@@ -347,41 +644,46 @@ body {
|
|
|
347
644
|
|
|
348
645
|
.signals-devtools {
|
|
349
646
|
position: relative;
|
|
647
|
+
color: var(--text-primary);
|
|
648
|
+
background: var(--bg-primary);
|
|
649
|
+
min-height: 100%;
|
|
650
|
+
display: flex;
|
|
651
|
+
flex-direction: column;
|
|
350
652
|
}
|
|
351
653
|
|
|
352
654
|
.update-count {
|
|
353
655
|
display: inline-block;
|
|
354
656
|
padding: 0 6px;
|
|
355
|
-
background:
|
|
657
|
+
background: var(--border-primary);
|
|
356
658
|
border-radius: 12px;
|
|
357
659
|
margin: 0 2px;
|
|
358
660
|
}
|
|
359
661
|
|
|
360
662
|
.signal-name {
|
|
361
663
|
font-weight: 600;
|
|
362
|
-
color:
|
|
664
|
+
color: var(--brand-purple);
|
|
363
665
|
}
|
|
364
666
|
|
|
365
667
|
.component-name {
|
|
366
668
|
font-weight: 500;
|
|
367
|
-
color:
|
|
669
|
+
color: var(--brand-blue-deep);
|
|
368
670
|
font-style: italic;
|
|
369
671
|
}
|
|
370
672
|
|
|
371
673
|
.update-time {
|
|
372
|
-
color:
|
|
674
|
+
color: var(--text-time);
|
|
373
675
|
font-size: 11px;
|
|
374
676
|
}
|
|
375
677
|
|
|
376
678
|
.update-depth {
|
|
377
|
-
color:
|
|
679
|
+
color: var(--text-secondary);
|
|
378
680
|
font-size: 11px;
|
|
379
681
|
}
|
|
380
682
|
|
|
381
683
|
.value-change {
|
|
382
684
|
margin: 4px 0;
|
|
383
685
|
font-family: monospace;
|
|
384
|
-
background:
|
|
686
|
+
background: var(--bg-tertiary);
|
|
385
687
|
padding: 4px 6px;
|
|
386
688
|
border-radius: 3px;
|
|
387
689
|
}
|
|
@@ -397,16 +699,16 @@ body {
|
|
|
397
699
|
}
|
|
398
700
|
|
|
399
701
|
.value-prev {
|
|
400
|
-
color:
|
|
702
|
+
color: var(--value-prev);
|
|
401
703
|
}
|
|
402
704
|
|
|
403
705
|
.value-new {
|
|
404
|
-
color:
|
|
706
|
+
color: var(--value-new);
|
|
405
707
|
}
|
|
406
708
|
|
|
407
709
|
.value-arrow {
|
|
408
710
|
margin: 0 8px;
|
|
409
|
-
color:
|
|
711
|
+
color: var(--value-arrow);
|
|
410
712
|
}
|
|
411
713
|
|
|
412
714
|
/* Scrollbar styling */
|
|
@@ -415,16 +717,16 @@ body {
|
|
|
415
717
|
}
|
|
416
718
|
|
|
417
719
|
.updates-list::-webkit-scrollbar-track {
|
|
418
|
-
background:
|
|
720
|
+
background: var(--scrollbar-track);
|
|
419
721
|
}
|
|
420
722
|
|
|
421
723
|
.updates-list::-webkit-scrollbar-thumb {
|
|
422
|
-
background:
|
|
724
|
+
background: var(--scrollbar-thumb);
|
|
423
725
|
border-radius: 4px;
|
|
424
726
|
}
|
|
425
727
|
|
|
426
728
|
.updates-list::-webkit-scrollbar-thumb:hover {
|
|
427
|
-
background:
|
|
729
|
+
background: var(--scrollbar-thumb-hover);
|
|
428
730
|
}
|
|
429
731
|
|
|
430
732
|
/* Graph Visualization */
|
|
@@ -438,9 +740,9 @@ body {
|
|
|
438
740
|
flex: 1;
|
|
439
741
|
position: relative;
|
|
440
742
|
background:
|
|
441
|
-
linear-gradient(90deg,
|
|
442
|
-
linear-gradient(180deg,
|
|
443
|
-
|
|
743
|
+
linear-gradient(90deg, var(--graph-grid) 1px, transparent 1px),
|
|
744
|
+
linear-gradient(180deg, var(--graph-grid) 1px, transparent 1px),
|
|
745
|
+
var(--graph-bg);
|
|
444
746
|
background-size: 40px 40px;
|
|
445
747
|
overflow: hidden;
|
|
446
748
|
user-select: none;
|
|
@@ -463,30 +765,30 @@ body {
|
|
|
463
765
|
|
|
464
766
|
.graph-reset-button,
|
|
465
767
|
.graph-export-button {
|
|
466
|
-
background:
|
|
768
|
+
background: var(--graph-controls-bg);
|
|
467
769
|
backdrop-filter: blur(4px);
|
|
468
|
-
border: 1px solid
|
|
770
|
+
border: 1px solid var(--graph-controls-border);
|
|
469
771
|
border-radius: 6px;
|
|
470
|
-
color:
|
|
772
|
+
color: var(--graph-controls-text);
|
|
471
773
|
padding: 8px 14px;
|
|
472
774
|
font-size: 12px;
|
|
473
775
|
font-weight: 500;
|
|
474
776
|
cursor: pointer;
|
|
475
|
-
box-shadow: 0 2px 6px
|
|
777
|
+
box-shadow: 0 2px 6px var(--shadow-light);
|
|
476
778
|
transition: all 0.15s ease;
|
|
477
779
|
}
|
|
478
780
|
|
|
479
781
|
.graph-reset-button:hover,
|
|
480
782
|
.graph-export-button:hover {
|
|
481
|
-
background:
|
|
482
|
-
border-color:
|
|
483
|
-
box-shadow: 0 4px 8px
|
|
783
|
+
background: var(--bg-secondary);
|
|
784
|
+
border-color: var(--border-secondary);
|
|
785
|
+
box-shadow: 0 4px 8px var(--shadow-medium);
|
|
484
786
|
transform: translateY(-1px);
|
|
485
787
|
}
|
|
486
788
|
|
|
487
789
|
.graph-reset-button:active,
|
|
488
790
|
.graph-export-button:active {
|
|
489
|
-
background:
|
|
791
|
+
background: var(--graph-controls-active);
|
|
490
792
|
transform: translateY(1px);
|
|
491
793
|
}
|
|
492
794
|
|
|
@@ -499,10 +801,10 @@ body {
|
|
|
499
801
|
top: 100%;
|
|
500
802
|
left: 0;
|
|
501
803
|
margin-top: 4px;
|
|
502
|
-
background:
|
|
503
|
-
border: 1px solid
|
|
804
|
+
background: var(--graph-export-bg);
|
|
805
|
+
border: 1px solid var(--border-primary);
|
|
504
806
|
border-radius: 4px;
|
|
505
|
-
box-shadow: 0 4px 8px
|
|
807
|
+
box-shadow: 0 4px 8px var(--shadow-color);
|
|
506
808
|
overflow: hidden;
|
|
507
809
|
min-width: 180px;
|
|
508
810
|
}
|
|
@@ -510,7 +812,7 @@ body {
|
|
|
510
812
|
.graph-export-menu-item {
|
|
511
813
|
display: block;
|
|
512
814
|
width: 100%;
|
|
513
|
-
background:
|
|
815
|
+
background: var(--graph-export-bg);
|
|
514
816
|
border: none;
|
|
515
817
|
padding: 10px 12px;
|
|
516
818
|
font-size: 12px;
|
|
@@ -518,48 +820,52 @@ body {
|
|
|
518
820
|
cursor: pointer;
|
|
519
821
|
transition: background 0.2s;
|
|
520
822
|
white-space: nowrap;
|
|
823
|
+
color: var(--text-primary);
|
|
521
824
|
}
|
|
522
825
|
|
|
523
826
|
.graph-export-menu-item:hover {
|
|
524
|
-
background:
|
|
827
|
+
background: var(--bg-primary);
|
|
525
828
|
}
|
|
526
829
|
|
|
527
830
|
.graph-export-menu-item:active {
|
|
528
|
-
background:
|
|
831
|
+
background: var(--graph-controls-active);
|
|
529
832
|
}
|
|
530
833
|
|
|
531
834
|
.graph-export-menu-item:not(:last-child) {
|
|
532
|
-
border-bottom: 1px solid
|
|
835
|
+
border-bottom: 1px solid var(--border-primary);
|
|
533
836
|
}
|
|
534
837
|
|
|
535
838
|
.graph-zoom-indicator {
|
|
536
|
-
background:
|
|
839
|
+
background: var(--graph-zoom-bg);
|
|
537
840
|
backdrop-filter: blur(4px);
|
|
538
|
-
border: 1px solid
|
|
841
|
+
border: 1px solid var(--border-primary);
|
|
539
842
|
border-radius: 4px;
|
|
540
|
-
color:
|
|
843
|
+
color: var(--graph-zoom-text);
|
|
541
844
|
padding: 6px 10px;
|
|
542
845
|
font-size: 11px;
|
|
543
846
|
font-weight: 600;
|
|
544
847
|
font-family: monospace;
|
|
545
|
-
box-shadow: 0 2px 4px
|
|
848
|
+
box-shadow: 0 2px 4px var(--shadow-light);
|
|
546
849
|
min-width: 48px;
|
|
547
850
|
text-align: center;
|
|
548
851
|
}
|
|
549
852
|
|
|
550
853
|
.graph-node {
|
|
551
854
|
cursor: pointer;
|
|
552
|
-
transition:
|
|
553
|
-
|
|
855
|
+
transition:
|
|
856
|
+
transform 0.15s ease,
|
|
857
|
+
filter 0.15s ease;
|
|
858
|
+
stroke: var(--graph-node-stroke);
|
|
554
859
|
stroke-width: 2.5;
|
|
555
|
-
filter: drop-shadow(0 3px 6px
|
|
860
|
+
filter: drop-shadow(0 3px 6px var(--shadow-color));
|
|
556
861
|
}
|
|
557
862
|
|
|
558
863
|
.graph-node-group.hovered .graph-node {
|
|
559
|
-
filter: brightness(1.15) drop-shadow(0 4px 12px rgba(0,0,0,0.25));
|
|
864
|
+
filter: brightness(1.15) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
|
|
560
865
|
stroke-width: 3;
|
|
561
866
|
}
|
|
562
867
|
|
|
868
|
+
/* Identity colors — same in both themes */
|
|
563
869
|
.graph-node.signal {
|
|
564
870
|
fill: #2196f3;
|
|
565
871
|
}
|
|
@@ -577,14 +883,16 @@ body {
|
|
|
577
883
|
}
|
|
578
884
|
|
|
579
885
|
.graph-link {
|
|
580
|
-
stroke:
|
|
886
|
+
stroke: var(--graph-link);
|
|
581
887
|
stroke-width: 2;
|
|
582
888
|
fill: none;
|
|
583
|
-
transition:
|
|
889
|
+
transition:
|
|
890
|
+
stroke 0.2s,
|
|
891
|
+
stroke-width 0.2s;
|
|
584
892
|
}
|
|
585
893
|
|
|
586
894
|
.graph-link.highlighted {
|
|
587
|
-
stroke:
|
|
895
|
+
stroke: var(--graph-link-highlight);
|
|
588
896
|
stroke-width: 3;
|
|
589
897
|
}
|
|
590
898
|
|
|
@@ -595,19 +903,19 @@ body {
|
|
|
595
903
|
font-size: 12px;
|
|
596
904
|
font-weight: 600;
|
|
597
905
|
pointer-events: none;
|
|
598
|
-
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
|
906
|
+
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
599
907
|
letter-spacing: 0.2px;
|
|
600
908
|
}
|
|
601
909
|
|
|
602
910
|
/* Tooltip */
|
|
603
911
|
.graph-tooltip {
|
|
604
912
|
position: absolute;
|
|
605
|
-
background:
|
|
606
|
-
color:
|
|
913
|
+
background: var(--tooltip-bg);
|
|
914
|
+
color: var(--tooltip-text);
|
|
607
915
|
padding: 10px 14px;
|
|
608
916
|
border-radius: 8px;
|
|
609
917
|
font-size: 12px;
|
|
610
|
-
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
|
|
918
|
+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
|
611
919
|
z-index: 1000;
|
|
612
920
|
pointer-events: none;
|
|
613
921
|
transform: translateY(-50%);
|
|
@@ -638,6 +946,7 @@ body {
|
|
|
638
946
|
font-weight: 600;
|
|
639
947
|
text-transform: uppercase;
|
|
640
948
|
letter-spacing: 0.5px;
|
|
949
|
+
color: white;
|
|
641
950
|
}
|
|
642
951
|
|
|
643
952
|
.tooltip-type.signal {
|
|
@@ -664,7 +973,7 @@ body {
|
|
|
664
973
|
}
|
|
665
974
|
|
|
666
975
|
.tooltip-id {
|
|
667
|
-
color:
|
|
976
|
+
color: var(--tooltip-id);
|
|
668
977
|
font-size: 11px;
|
|
669
978
|
font-family: monospace;
|
|
670
979
|
}
|
|
@@ -673,13 +982,13 @@ body {
|
|
|
673
982
|
position: absolute;
|
|
674
983
|
top: 16px;
|
|
675
984
|
right: 16px;
|
|
676
|
-
background:
|
|
985
|
+
background: var(--graph-controls-bg);
|
|
677
986
|
backdrop-filter: blur(8px);
|
|
678
|
-
border: 1px solid
|
|
987
|
+
border: 1px solid var(--graph-controls-border);
|
|
679
988
|
border-radius: 8px;
|
|
680
989
|
padding: 14px 16px;
|
|
681
990
|
font-size: 12px;
|
|
682
|
-
box-shadow: 0 4px 12px
|
|
991
|
+
box-shadow: 0 4px 12px var(--shadow-light);
|
|
683
992
|
}
|
|
684
993
|
|
|
685
994
|
.legend-item {
|
|
@@ -697,7 +1006,24 @@ body {
|
|
|
697
1006
|
width: 14px;
|
|
698
1007
|
height: 14px;
|
|
699
1008
|
border-radius: 50%;
|
|
700
|
-
box-shadow: 0 2px 4px
|
|
1009
|
+
box-shadow: 0 2px 4px var(--shadow-color);
|
|
1010
|
+
}
|
|
1011
|
+
|
|
1012
|
+
/* Legend identity colors */
|
|
1013
|
+
.legend-color.signal {
|
|
1014
|
+
background-color: #2196f3;
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
.legend-color.computed {
|
|
1018
|
+
background-color: #ff9800;
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
.legend-color.effect {
|
|
1022
|
+
background-color: #4caf50;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
.legend-color.component {
|
|
1026
|
+
background-color: #9c27b0;
|
|
701
1027
|
}
|
|
702
1028
|
|
|
703
1029
|
.component-boundary {
|
|
@@ -715,25 +1041,26 @@ body {
|
|
|
715
1041
|
}
|
|
716
1042
|
|
|
717
1043
|
.graph-empty {
|
|
1044
|
+
padding: 32px 0;
|
|
718
1045
|
display: flex;
|
|
719
1046
|
align-items: center;
|
|
720
1047
|
justify-content: center;
|
|
721
1048
|
height: 100%;
|
|
722
1049
|
text-align: center;
|
|
723
|
-
color:
|
|
1050
|
+
color: var(--text-muted);
|
|
724
1051
|
}
|
|
725
1052
|
|
|
726
1053
|
.graph-toast {
|
|
727
1054
|
position: absolute;
|
|
728
1055
|
top: 16px;
|
|
729
1056
|
right: 16px;
|
|
730
|
-
background:
|
|
1057
|
+
background: var(--toast-bg);
|
|
731
1058
|
color: white;
|
|
732
1059
|
padding: 12px 16px;
|
|
733
1060
|
border-radius: 4px;
|
|
734
1061
|
font-size: 13px;
|
|
735
1062
|
font-weight: 500;
|
|
736
|
-
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
|
1063
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
737
1064
|
z-index: 1000;
|
|
738
1065
|
animation: slideInFade 0.3s ease-out;
|
|
739
1066
|
}
|
|
@@ -763,7 +1090,7 @@ body {
|
|
|
763
1090
|
.collapse-button {
|
|
764
1091
|
background: none;
|
|
765
1092
|
border: none;
|
|
766
|
-
color:
|
|
1093
|
+
color: var(--text-muted);
|
|
767
1094
|
cursor: pointer;
|
|
768
1095
|
font-size: 12px;
|
|
769
1096
|
width: 16px;
|
|
@@ -778,8 +1105,8 @@ body {
|
|
|
778
1105
|
}
|
|
779
1106
|
|
|
780
1107
|
.collapse-button:hover {
|
|
781
|
-
color:
|
|
782
|
-
background:
|
|
1108
|
+
color: var(--text-primary);
|
|
1109
|
+
background: var(--bg-hover);
|
|
783
1110
|
border-radius: 2px;
|
|
784
1111
|
}
|
|
785
1112
|
|
|
@@ -797,7 +1124,7 @@ body {
|
|
|
797
1124
|
|
|
798
1125
|
.tree-children {
|
|
799
1126
|
margin-left: 20px;
|
|
800
|
-
border-left: 1px solid
|
|
1127
|
+
border-left: 1px solid var(--border-primary);
|
|
801
1128
|
padding-left: 4px;
|
|
802
1129
|
margin-top: 4px;
|
|
803
1130
|
}
|
|
@@ -811,6 +1138,11 @@ body {
|
|
|
811
1138
|
margin-bottom: 0;
|
|
812
1139
|
}
|
|
813
1140
|
|
|
1141
|
+
/* Graph arrowhead color */
|
|
1142
|
+
.graph-arrowhead {
|
|
1143
|
+
fill: var(--graph-link);
|
|
1144
|
+
}
|
|
1145
|
+
|
|
814
1146
|
/* Responsive adjustments */
|
|
815
1147
|
@media (max-width: 600px) {
|
|
816
1148
|
.header {
|