@data-navigator/inspector 1.0.3 → 1.1.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/package.json +4 -2
- package/src/console-menu.js +85 -0
- package/src/force-graph.js +4 -2
- package/src/inspector.js +56 -9
- package/src/menu-events.js +26 -0
- package/src/menu-sections.js +751 -0
- package/src/menu-state.js +89 -0
- package/src/svg-highlight.js +457 -0
- package/src/tree-graph.js +4 -1
- package/style.css +295 -0
package/style.css
ADDED
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
/* Inspector default styles */
|
|
2
|
+
|
|
3
|
+
.dn-inspector-wrapper {
|
|
4
|
+
position: relative;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.dn-inspector-hidden {
|
|
8
|
+
display: none;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.dn-inspector-tooltip {
|
|
12
|
+
position: absolute;
|
|
13
|
+
padding: 10px;
|
|
14
|
+
background-color: white;
|
|
15
|
+
border: 1px solid black;
|
|
16
|
+
width: 200px;
|
|
17
|
+
top: 0;
|
|
18
|
+
left: 0;
|
|
19
|
+
font-size: 0.85em;
|
|
20
|
+
pointer-events: none;
|
|
21
|
+
z-index: 10;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.dn-inspector-focus-indicator {
|
|
25
|
+
pointer-events: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.dn-inspector-node {
|
|
29
|
+
position: absolute;
|
|
30
|
+
padding: 0px;
|
|
31
|
+
margin: 0px;
|
|
32
|
+
overflow: visible;
|
|
33
|
+
pointer-events: none;
|
|
34
|
+
background: transparent;
|
|
35
|
+
border: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.dn-inspector-node:focus {
|
|
39
|
+
outline: 2px solid #1e3369;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Dynamic edges drawn on-demand for virtual/excluded edges */
|
|
43
|
+
.dn-inspector-dynamic-edge {
|
|
44
|
+
pointer-events: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* ==== Console Menu ====
|
|
48
|
+
*
|
|
49
|
+
* All selectors below use `.dn-inspector-menu` as a prefix for two reasons:
|
|
50
|
+
* 1. Scoping — these styles only affect the inspector menu
|
|
51
|
+
* 2. Specificity — overrides global UI framework styles (e.g. VitePress sets
|
|
52
|
+
* `summary { min-height: 44px }` and `button { min-width: 44px }`)
|
|
53
|
+
*/
|
|
54
|
+
|
|
55
|
+
.dn-inspector-menu {
|
|
56
|
+
min-width: 500px;
|
|
57
|
+
max-height: 450px;
|
|
58
|
+
overflow-y: auto;
|
|
59
|
+
border: 1px solid #ccc;
|
|
60
|
+
font-size: 12px;
|
|
61
|
+
font-family: monospace;
|
|
62
|
+
line-height: 1.3;
|
|
63
|
+
padding: 2px;
|
|
64
|
+
margin-top: 4px;
|
|
65
|
+
background: #fff;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Hidden utility */
|
|
69
|
+
.dn-inspector-menu .dn-menu-hidden {
|
|
70
|
+
display: none !important;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* ---- Caret summaries ---- */
|
|
74
|
+
|
|
75
|
+
.dn-inspector-menu summary {
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
user-select: none;
|
|
78
|
+
list-style: none;
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
min-height: 24px;
|
|
82
|
+
padding: 0 2px;
|
|
83
|
+
border: none;
|
|
84
|
+
border-radius: 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.dn-inspector-menu summary::-webkit-details-marker {
|
|
88
|
+
display: none;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.dn-inspector-menu summary:focus {
|
|
92
|
+
outline: 2px solid #1e3369;
|
|
93
|
+
outline-offset: 0;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Group checkbox inside summary */
|
|
97
|
+
.dn-inspector-menu .dn-menu-group-checkbox {
|
|
98
|
+
margin: 0 2px 0 0;
|
|
99
|
+
flex-shrink: 0;
|
|
100
|
+
width: 13px;
|
|
101
|
+
height: 13px;
|
|
102
|
+
min-width: 13px;
|
|
103
|
+
min-height: 13px;
|
|
104
|
+
padding: 0;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* Caret indicator */
|
|
108
|
+
.dn-inspector-menu summary::before {
|
|
109
|
+
content: '\25B8'; /* right-pointing triangle */
|
|
110
|
+
display: inline-flex;
|
|
111
|
+
align-items: center;
|
|
112
|
+
justify-content: center;
|
|
113
|
+
width: 24px;
|
|
114
|
+
min-width: 24px;
|
|
115
|
+
height: 24px;
|
|
116
|
+
font-size: 10px;
|
|
117
|
+
flex-shrink: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.dn-inspector-menu details[open] > summary::before {
|
|
121
|
+
content: '\25BE'; /* down-pointing triangle */
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Top-level section summaries */
|
|
125
|
+
.dn-inspector-menu .dn-menu-summary-top {
|
|
126
|
+
font-weight: bold;
|
|
127
|
+
font-size: 12px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Nested indentation: each details level indents its contents */
|
|
131
|
+
.dn-inspector-menu details details {
|
|
132
|
+
padding-left: 12px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.dn-inspector-menu details details details {
|
|
136
|
+
padding-left: 12px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* ---- Menu items (checkbox + label + log btn) ---- */
|
|
140
|
+
|
|
141
|
+
.dn-inspector-menu .dn-menu-item {
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
gap: 3px;
|
|
145
|
+
padding: 0 2px 0 6px;
|
|
146
|
+
min-height: 20px;
|
|
147
|
+
cursor: default;
|
|
148
|
+
margin-left: 32px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.dn-inspector-menu .dn-menu-item:hover {
|
|
152
|
+
background: #f0f0f0;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.dn-inspector-menu .dn-menu-item input[type="checkbox"] {
|
|
156
|
+
margin: 0;
|
|
157
|
+
flex-shrink: 0;
|
|
158
|
+
width: 13px;
|
|
159
|
+
height: 13px;
|
|
160
|
+
min-width: 13px;
|
|
161
|
+
min-height: 13px;
|
|
162
|
+
padding: 0;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.dn-inspector-menu .dn-menu-item-label {
|
|
166
|
+
flex: 1;
|
|
167
|
+
overflow: hidden;
|
|
168
|
+
text-overflow: ellipsis;
|
|
169
|
+
white-space: nowrap;
|
|
170
|
+
font-size: 11px;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.dn-inspector-menu .dn-menu-log-btn {
|
|
174
|
+
font-size: 10px;
|
|
175
|
+
font-family: monospace;
|
|
176
|
+
padding: 0 4px;
|
|
177
|
+
line-height: 16px;
|
|
178
|
+
min-width: auto;
|
|
179
|
+
min-height: auto;
|
|
180
|
+
cursor: pointer;
|
|
181
|
+
border: 1px solid #bbb;
|
|
182
|
+
background: #f5f5f5;
|
|
183
|
+
border-radius: 2px;
|
|
184
|
+
flex-shrink: 0;
|
|
185
|
+
color: #555;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.dn-inspector-menu .dn-menu-log-btn:hover {
|
|
189
|
+
background: #e0e0e0;
|
|
190
|
+
color: #222;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.dn-inspector-menu .dn-menu-log-btn:focus {
|
|
194
|
+
outline: 2px solid #1e3369;
|
|
195
|
+
outline-offset: 0;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* Console clear button */
|
|
199
|
+
.dn-inspector-menu .dn-menu-clear-btn {
|
|
200
|
+
margin-left: auto;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* ---- Informational items (no checkbox) ---- */
|
|
204
|
+
|
|
205
|
+
.dn-inspector-menu .dn-menu-info {
|
|
206
|
+
padding: 0 2px 0 30px;
|
|
207
|
+
font-size: 11px;
|
|
208
|
+
min-height: 18px;
|
|
209
|
+
display: flex;
|
|
210
|
+
align-items: center;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.dn-inspector-menu .dn-menu-empty {
|
|
214
|
+
color: #999;
|
|
215
|
+
font-style: italic;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
/* ---- Data / Props pre blocks ---- */
|
|
219
|
+
|
|
220
|
+
.dn-inspector-menu .dn-menu-pre {
|
|
221
|
+
max-height: 150px;
|
|
222
|
+
overflow: auto;
|
|
223
|
+
font-size: 10px;
|
|
224
|
+
margin: 2px 0 2px 30px;
|
|
225
|
+
padding: 3px;
|
|
226
|
+
background: #fafafa;
|
|
227
|
+
border: 1px solid #eee;
|
|
228
|
+
white-space: pre-wrap;
|
|
229
|
+
word-break: break-word;
|
|
230
|
+
line-height: 1.25;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* ---- Console section ---- */
|
|
234
|
+
|
|
235
|
+
.dn-inspector-menu .dn-menu-console-list {
|
|
236
|
+
max-height: 180px;
|
|
237
|
+
overflow-y: auto;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.dn-inspector-menu .dn-menu-console-list:empty::after {
|
|
241
|
+
content: "(empty)";
|
|
242
|
+
color: #999;
|
|
243
|
+
padding: 2px 30px;
|
|
244
|
+
display: block;
|
|
245
|
+
font-style: italic;
|
|
246
|
+
font-size: 11px;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.dn-inspector-menu .dn-menu-console-entry {
|
|
250
|
+
border-bottom: 1px solid #f0f0f0;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* ---- Inline expandable arrays ---- */
|
|
254
|
+
|
|
255
|
+
.dn-inspector-menu .dn-menu-inline-array {
|
|
256
|
+
font-size: 11px;
|
|
257
|
+
padding: 0 2px;
|
|
258
|
+
min-height: 18px;
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: baseline;
|
|
261
|
+
flex-wrap: wrap;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.dn-inspector-menu .dn-menu-array-toggle {
|
|
265
|
+
color: #666;
|
|
266
|
+
cursor: pointer;
|
|
267
|
+
flex-shrink: 0;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.dn-inspector-menu .dn-menu-array-collapsed {
|
|
271
|
+
color: #08c;
|
|
272
|
+
cursor: pointer;
|
|
273
|
+
text-decoration: underline;
|
|
274
|
+
text-decoration-style: dotted;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.dn-inspector-menu .dn-menu-array-collapsed:hover {
|
|
278
|
+
color: #005fa3;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.dn-inspector-menu .dn-menu-array-expanded {
|
|
282
|
+
color: #333;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.dn-inspector-menu .dn-menu-array-chip {
|
|
286
|
+
color: #08c;
|
|
287
|
+
cursor: default;
|
|
288
|
+
padding: 0 1px;
|
|
289
|
+
border-radius: 2px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.dn-inspector-menu .dn-menu-array-chip:hover {
|
|
293
|
+
background: #e8f4fd;
|
|
294
|
+
color: #005fa3;
|
|
295
|
+
}
|