@weasel-js/devtools 0.0.0-stage → 1.11.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/LICENSE +21 -0
- package/README.md +49 -2
- package/dist/DevtoolsPanel.d.ts +20 -0
- package/dist/DevtoolsPanel.d.ts.map +1 -0
- package/dist/RootPicker.d.ts +10 -0
- package/dist/RootPicker.d.ts.map +1 -0
- package/dist/client.d.ts +50 -0
- package/dist/client.d.ts.map +1 -0
- package/dist/history.d.ts +13 -0
- package/dist/history.d.ts.map +1 -0
- package/dist/hooks.d.ts +22 -0
- package/dist/hooks.d.ts.map +1 -0
- package/dist/inPageTransport.d.ts +9 -0
- package/dist/inPageTransport.d.ts.map +1 -0
- package/dist/index.d.ts +19 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2006 -0
- package/dist/index.js.map +1 -0
- package/dist/style.css +632 -0
- package/dist/tabs.d.ts +17 -0
- package/dist/tabs.d.ts.map +1 -0
- package/dist/trace.d.ts +19 -0
- package/dist/trace.d.ts.map +1 -0
- package/dist/views/Bindings.d.ts +7 -0
- package/dist/views/Bindings.d.ts.map +1 -0
- package/dist/views/CoordTable.d.ts +24 -0
- package/dist/views/CoordTable.d.ts.map +1 -0
- package/dist/views/DecisionPath.d.ts +7 -0
- package/dist/views/DecisionPath.d.ts.map +1 -0
- package/dist/views/DispatchView.d.ts +11 -0
- package/dist/views/DispatchView.d.ts.map +1 -0
- package/dist/views/FrameView.d.ts +9 -0
- package/dist/views/FrameView.d.ts.map +1 -0
- package/dist/views/HistoryTable.d.ts +8 -0
- package/dist/views/HistoryTable.d.ts.map +1 -0
- package/dist/views/HistoryView.d.ts +9 -0
- package/dist/views/HistoryView.d.ts.map +1 -0
- package/dist/views/NodeDetail.d.ts +12 -0
- package/dist/views/NodeDetail.d.ts.map +1 -0
- package/dist/views/RegistryEntryDetail.d.ts +12 -0
- package/dist/views/RegistryEntryDetail.d.ts.map +1 -0
- package/dist/views/RegistryView.d.ts +10 -0
- package/dist/views/RegistryView.d.ts.map +1 -0
- package/dist/views/SceneView.d.ts +5 -0
- package/dist/views/SceneView.d.ts.map +1 -0
- package/dist/views/StateView.d.ts +5 -0
- package/dist/views/StateView.d.ts.map +1 -0
- package/dist/views/TraceTable.d.ts +17 -0
- package/dist/views/TraceTable.d.ts.map +1 -0
- package/dist/views/ValueView.d.ts +11 -0
- package/dist/views/ValueView.d.ts.map +1 -0
- package/dist/views/formatAge.d.ts +3 -0
- package/dist/views/formatAge.d.ts.map +1 -0
- package/dist/views/useSceneTree.d.ts +12 -0
- package/dist/views/useSceneTree.d.ts.map +1 -0
- package/package.json +53 -4
package/dist/style.css
ADDED
|
@@ -0,0 +1,632 @@
|
|
|
1
|
+
/* Fills whatever box it is given; each view scrolls inside its own panes. */
|
|
2
|
+
._panel_485101 {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
width: 100%;
|
|
6
|
+
height: 100%;
|
|
7
|
+
min-height: 0;
|
|
8
|
+
min-width: 0;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
color: var(--wzl-fg);
|
|
11
|
+
background: var(--wzl-panel-surface);
|
|
12
|
+
font-family: var(--wzl-font-ui);
|
|
13
|
+
font-size: var(--wzl-font-size-sm);
|
|
14
|
+
/* The views lay themselves out by the panel's own width: a sidebar gives it far less than a page. */
|
|
15
|
+
container-type: inline-size;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
._bar_485101 {
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: row;
|
|
21
|
+
justify-content: flex-start;
|
|
22
|
+
align-items: center;
|
|
23
|
+
gap: var(--wzl-space-4);
|
|
24
|
+
padding: var(--wzl-space-2) var(--wzl-space-4);
|
|
25
|
+
border-bottom: 1px solid var(--wzl-line-subtle);
|
|
26
|
+
flex-shrink: 0;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
._picker_485101 {
|
|
30
|
+
flex: 0 1 auto;
|
|
31
|
+
min-width: 0;
|
|
32
|
+
margin: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
._dimension_485101 {
|
|
36
|
+
color: var(--wzl-fg-muted);
|
|
37
|
+
font-size: var(--wzl-font-size-xs);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
._status_485101 {
|
|
41
|
+
flex: 0 1 auto;
|
|
42
|
+
min-width: 0;
|
|
43
|
+
margin-inline-start: auto;
|
|
44
|
+
color: var(--wzl-fg-muted);
|
|
45
|
+
white-space: nowrap;
|
|
46
|
+
overflow: hidden;
|
|
47
|
+
text-overflow: ellipsis;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
._tabs_485101 {
|
|
51
|
+
flex: 1 1 auto;
|
|
52
|
+
min-height: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
._tabList_485101 {
|
|
56
|
+
flex-shrink: 0;
|
|
57
|
+
/* In a narrow panel the tabs wrap onto a second row rather than run past its edge. */
|
|
58
|
+
flex-wrap: wrap;
|
|
59
|
+
padding-inline: var(--wzl-space-2);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
._tabPanel_485101 {
|
|
63
|
+
flex: 1 1 auto;
|
|
64
|
+
min-height: 0;
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
padding: 0;
|
|
68
|
+
overflow: hidden;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
._empty_485101 {
|
|
72
|
+
margin: 0;
|
|
73
|
+
padding: var(--wzl-space-6);
|
|
74
|
+
color: var(--wzl-fg-muted);
|
|
75
|
+
}
|
|
76
|
+
/* Numeric text: equal-width digits in the UI face. This is the one definition —
|
|
77
|
+
* compose it, mix it into Less, or put its class on the element; never restate
|
|
78
|
+
* the pair. `npm run check:numeric` holds every stylesheet to that. */._numeric_25fd0b {
|
|
79
|
+
font-family: var(--wzl-font-numeric);
|
|
80
|
+
font-variant-numeric: tabular-nums;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
._table_e7e309 {
|
|
84
|
+
font-family: var(--wzl-font-mono);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Age is live, variable-length text in the leading column: a fixed width keeps
|
|
88
|
+
ticking values from shifting the columns after it. */
|
|
89
|
+
._age_e7e309 {
|
|
90
|
+
width: 7ch;
|
|
91
|
+
min-width: 7ch;
|
|
92
|
+
text-align: end;
|
|
93
|
+
white-space: nowrap;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
._count_e7e309 {
|
|
97
|
+
text-align: end;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
._unhandled_e7e309 > td { background: color-mix(in srgb, var(--wzl-danger) 14%, transparent); }
|
|
101
|
+
tr._unhandled_e7e309:hover > td { background: color-mix(in srgb, var(--wzl-danger) 24%, transparent); }
|
|
102
|
+
|
|
103
|
+
/* Mode switches read as ambient state rather than dispatched input. */
|
|
104
|
+
tr._mode_e7e309 { color: var(--wzl-fg-muted); cursor: default; }
|
|
105
|
+
._mode_e7e309 > td { background: color-mix(in srgb, var(--wzl-accent) 8%, transparent); }
|
|
106
|
+
._modeDetail_e7e309 { font-style: italic; }
|
|
107
|
+
|
|
108
|
+
/* The live prediction is pinned above the log; it is not a past event. */
|
|
109
|
+
tr._live_e7e309 > td { font-style: italic; border-block-end: 1px solid var(--wzl-border); }
|
|
110
|
+
|
|
111
|
+
._detail_e7e309 {
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-direction: column;
|
|
114
|
+
gap: var(--wzl-space-4);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
._heading_e7e309 {
|
|
118
|
+
margin: var(--wzl-space-6) 0 var(--wzl-space-3);
|
|
119
|
+
font-size: var(--wzl-font-size-sm);
|
|
120
|
+
font-weight: var(--wzl-font-weight-bold);
|
|
121
|
+
}
|
|
122
|
+
/* Numeric text: equal-width digits in the UI face. This is the one definition —
|
|
123
|
+
* compose it, mix it into Less, or put its class on the element; never restate
|
|
124
|
+
* the pair. `npm run check:numeric` holds every stylesheet to that. */._numeric_25fd0b {
|
|
125
|
+
font-family: var(--wzl-font-numeric);
|
|
126
|
+
font-variant-numeric: tabular-nums;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
._dispatch_fdab1f {
|
|
130
|
+
display: flex;
|
|
131
|
+
flex-direction: column;
|
|
132
|
+
flex: 1 1 auto;
|
|
133
|
+
min-height: 0;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
._toolbar_fdab1f {
|
|
137
|
+
display: flex;
|
|
138
|
+
flex-wrap: wrap;
|
|
139
|
+
align-items: center;
|
|
140
|
+
gap: var(--wzl-space-4);
|
|
141
|
+
padding: var(--wzl-space-2) var(--wzl-space-4);
|
|
142
|
+
border-bottom: 1px solid var(--wzl-line-subtle);
|
|
143
|
+
flex-shrink: 0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* Last in the row and pushed to its end, so its changing width displaces nothing. */
|
|
147
|
+
._count_fdab1f {
|
|
148
|
+
margin-inline-start: auto;
|
|
149
|
+
color: var(--wzl-fg-muted);
|
|
150
|
+
white-space: nowrap;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
._body_fdab1f {
|
|
154
|
+
flex: 1 1 auto;
|
|
155
|
+
min-height: 0;
|
|
156
|
+
overflow: auto;
|
|
157
|
+
padding: var(--wzl-space-4);
|
|
158
|
+
}
|
|
159
|
+
/* Numeric text: equal-width digits in the UI face. This is the one definition —
|
|
160
|
+
* compose it, mix it into Less, or put its class on the element; never restate
|
|
161
|
+
* the pair. `npm run check:numeric` holds every stylesheet to that. */._numeric_25fd0b {
|
|
162
|
+
font-family: var(--wzl-font-numeric);
|
|
163
|
+
font-variant-numeric: tabular-nums;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
._value_3839e5 {
|
|
167
|
+
font-family: var(--wzl-font-mono);
|
|
168
|
+
font-size: var(--wzl-font-size-sm);
|
|
169
|
+
line-height: 1.5;
|
|
170
|
+
min-width: 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
._row_3839e5 {
|
|
174
|
+
display: flex;
|
|
175
|
+
align-items: center;
|
|
176
|
+
gap: var(--wzl-space-2);
|
|
177
|
+
min-height: 1.5em;
|
|
178
|
+
white-space: nowrap;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
._children_3839e5 {
|
|
182
|
+
padding-inline-start: var(--wzl-space-8);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
._key_3839e5 {
|
|
186
|
+
color: var(--wzl-fg-muted);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
._key_3839e5::after {
|
|
190
|
+
content: ':';
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
._muted_3839e5 {
|
|
194
|
+
color: var(--wzl-fg-muted);
|
|
195
|
+
font-style: italic;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
._keyword_3839e5 {
|
|
199
|
+
color: var(--wzl-accent-fg);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
._number_3839e5 {
|
|
203
|
+
color: var(--wzl-accent-fg);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
._string_3839e5 {
|
|
207
|
+
color: var(--wzl-success);
|
|
208
|
+
overflow: hidden;
|
|
209
|
+
text-overflow: ellipsis;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
._fn_3839e5 {
|
|
213
|
+
color: var(--wzl-warning);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
._tag_3839e5 {
|
|
217
|
+
color: var(--wzl-fg);
|
|
218
|
+
}
|
|
219
|
+
/* Numeric text: equal-width digits in the UI face. This is the one definition —
|
|
220
|
+
* compose it, mix it into Less, or put its class on the element; never restate
|
|
221
|
+
* the pair. `npm run check:numeric` holds every stylesheet to that. */._numeric_25fd0b {
|
|
222
|
+
font-family: var(--wzl-font-numeric);
|
|
223
|
+
font-variant-numeric: tabular-nums;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
._frame_ae00c9 {
|
|
227
|
+
flex: 1 1 auto;
|
|
228
|
+
min-height: 0;
|
|
229
|
+
overflow: auto;
|
|
230
|
+
padding: var(--wzl-space-4);
|
|
231
|
+
display: flex;
|
|
232
|
+
flex-direction: column;
|
|
233
|
+
gap: var(--wzl-space-6);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
._figure_ae00c9 {
|
|
237
|
+
text-align: end;
|
|
238
|
+
white-space: pre;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
._layers_ae00c9 {
|
|
242
|
+
font-family: var(--wzl-font-mono);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
._note_ae00c9 {
|
|
246
|
+
margin: 0;
|
|
247
|
+
color: var(--wzl-fg-muted);
|
|
248
|
+
}
|
|
249
|
+
/* Numeric text: equal-width digits in the UI face. This is the one definition —
|
|
250
|
+
* compose it, mix it into Less, or put its class on the element; never restate
|
|
251
|
+
* the pair. `npm run check:numeric` holds every stylesheet to that. */._numeric_25fd0b {
|
|
252
|
+
font-family: var(--wzl-font-numeric);
|
|
253
|
+
font-variant-numeric: tabular-nums;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
._history_739ab5 {
|
|
257
|
+
display: flex;
|
|
258
|
+
flex-direction: column;
|
|
259
|
+
flex: 1 1 auto;
|
|
260
|
+
min-height: 0;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
._toolbar_739ab5 {
|
|
264
|
+
display: flex;
|
|
265
|
+
flex-wrap: wrap;
|
|
266
|
+
align-items: center;
|
|
267
|
+
gap: var(--wzl-space-4);
|
|
268
|
+
padding: var(--wzl-space-2) var(--wzl-space-4);
|
|
269
|
+
border-bottom: 1px solid var(--wzl-line-subtle);
|
|
270
|
+
flex-shrink: 0;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/* Last in the row and pushed to its end, so its changing width displaces nothing. */
|
|
274
|
+
._position_739ab5 {
|
|
275
|
+
margin-inline-start: auto;
|
|
276
|
+
color: var(--wzl-fg-muted);
|
|
277
|
+
white-space: nowrap;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
._body_739ab5 {
|
|
281
|
+
flex: 1 1 auto;
|
|
282
|
+
min-height: 0;
|
|
283
|
+
overflow: auto;
|
|
284
|
+
padding: var(--wzl-space-4);
|
|
285
|
+
display: flex;
|
|
286
|
+
flex-direction: column;
|
|
287
|
+
gap: var(--wzl-space-6);
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
._heading_739ab5 {
|
|
291
|
+
margin: 0 0 var(--wzl-space-3);
|
|
292
|
+
font-size: var(--wzl-font-size-sm);
|
|
293
|
+
font-weight: var(--wzl-font-weight-bold);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
._stack_739ab5 {
|
|
297
|
+
margin: 0;
|
|
298
|
+
padding-inline-start: var(--wzl-space-8);
|
|
299
|
+
font-family: var(--wzl-font-mono);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
._applied_739ab5 {
|
|
303
|
+
color: var(--wzl-fg);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
._redoable_739ab5 {
|
|
307
|
+
color: var(--wzl-fg-muted);
|
|
308
|
+
font-style: italic;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
._table_739ab5 {
|
|
312
|
+
font-family: var(--wzl-font-mono);
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
/* Age is live, variable-length text in the leading column: a fixed width keeps
|
|
316
|
+
ticking values from shifting the columns after it. */
|
|
317
|
+
._age_739ab5 {
|
|
318
|
+
width: 7ch;
|
|
319
|
+
min-width: 7ch;
|
|
320
|
+
text-align: end;
|
|
321
|
+
white-space: nowrap;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
._figure_739ab5 {
|
|
325
|
+
text-align: end;
|
|
326
|
+
white-space: nowrap;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
._entries_739ab5 {
|
|
330
|
+
display: flex;
|
|
331
|
+
flex-direction: column;
|
|
332
|
+
gap: var(--wzl-space-4);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
._entry_739ab5 {
|
|
336
|
+
display: flex;
|
|
337
|
+
flex-direction: column;
|
|
338
|
+
gap: var(--wzl-space-2);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
._entryTitle_739ab5 {
|
|
342
|
+
margin: 0;
|
|
343
|
+
display: flex;
|
|
344
|
+
gap: var(--wzl-space-4);
|
|
345
|
+
font-size: var(--wzl-font-size-sm);
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
._ops_739ab5 {
|
|
349
|
+
margin: 0;
|
|
350
|
+
padding: 0;
|
|
351
|
+
list-style: none;
|
|
352
|
+
display: flex;
|
|
353
|
+
flex-direction: column;
|
|
354
|
+
gap: var(--wzl-space-2);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
._op_739ab5 {
|
|
358
|
+
display: grid;
|
|
359
|
+
grid-template-columns: auto auto minmax(0, 1fr);
|
|
360
|
+
gap: var(--wzl-space-4);
|
|
361
|
+
align-items: start;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
._targets_739ab5 {
|
|
365
|
+
color: var(--wzl-fg-muted);
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
._note_739ab5 {
|
|
369
|
+
margin: 0;
|
|
370
|
+
color: var(--wzl-fg-muted);
|
|
371
|
+
}
|
|
372
|
+
/* Numeric text: equal-width digits in the UI face. This is the one definition —
|
|
373
|
+
* compose it, mix it into Less, or put its class on the element; never restate
|
|
374
|
+
* the pair. `npm run check:numeric` holds every stylesheet to that. */._numeric_25fd0b {
|
|
375
|
+
font-family: var(--wzl-font-numeric);
|
|
376
|
+
font-variant-numeric: tabular-nums;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
._split_9c8486 {
|
|
380
|
+
display: grid;
|
|
381
|
+
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
|
|
382
|
+
flex: 1 1 auto;
|
|
383
|
+
min-height: 0;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
._listPane_9c8486,
|
|
387
|
+
._detailPane_9c8486 {
|
|
388
|
+
min-height: 0;
|
|
389
|
+
min-width: 0;
|
|
390
|
+
overflow: auto;
|
|
391
|
+
padding: var(--wzl-space-4);
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
._listPane_9c8486 {
|
|
395
|
+
--wzl-tree-selected: color-mix(in srgb, var(--wzl-accent) 28%, transparent);
|
|
396
|
+
display: flex;
|
|
397
|
+
flex-direction: column;
|
|
398
|
+
gap: var(--wzl-space-4);
|
|
399
|
+
border-inline-end: 1px solid var(--wzl-line-subtle);
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
._count_9c8486 {
|
|
403
|
+
color: var(--wzl-fg-muted);
|
|
404
|
+
font-weight: normal;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
._facts_9c8486 {
|
|
408
|
+
color: var(--wzl-fg-muted);
|
|
409
|
+
font-size: var(--wzl-font-size-xs);
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
._detail_9c8486,
|
|
413
|
+
._section_9c8486 {
|
|
414
|
+
display: flex;
|
|
415
|
+
flex-direction: column;
|
|
416
|
+
gap: var(--wzl-space-4);
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
._title_9c8486,
|
|
420
|
+
._heading_9c8486 {
|
|
421
|
+
margin: 0;
|
|
422
|
+
display: flex;
|
|
423
|
+
align-items: baseline;
|
|
424
|
+
gap: var(--wzl-space-3);
|
|
425
|
+
font-size: var(--wzl-font-size-sm);
|
|
426
|
+
font-weight: var(--wzl-font-weight-bold);
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
._heading_9c8486 {
|
|
430
|
+
margin-block-start: var(--wzl-space-4);
|
|
431
|
+
}
|
|
432
|
+
|
|
433
|
+
._codes_9c8486 {
|
|
434
|
+
display: flex;
|
|
435
|
+
flex-wrap: wrap;
|
|
436
|
+
gap: var(--wzl-space-2);
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
._bindings_9c8486 {
|
|
440
|
+
margin: 0;
|
|
441
|
+
padding: 0;
|
|
442
|
+
list-style: none;
|
|
443
|
+
display: flex;
|
|
444
|
+
flex-direction: column;
|
|
445
|
+
gap: var(--wzl-space-3);
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
._binding_9c8486 {
|
|
449
|
+
display: flex;
|
|
450
|
+
flex-wrap: wrap;
|
|
451
|
+
align-items: center;
|
|
452
|
+
gap: var(--wzl-space-3);
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
._routes_9c8486 {
|
|
456
|
+
display: inline-flex;
|
|
457
|
+
flex-wrap: wrap;
|
|
458
|
+
gap: var(--wzl-space-2);
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
._arrow_9c8486 {
|
|
462
|
+
color: var(--wzl-fg-muted);
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
._kinds_9c8486 {
|
|
466
|
+
margin: var(--wzl-space-6) 0 0;
|
|
467
|
+
color: var(--wzl-fg-muted);
|
|
468
|
+
font-size: var(--wzl-font-size-xs);
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
._note_9c8486 {
|
|
472
|
+
margin: 0;
|
|
473
|
+
color: var(--wzl-fg-muted);
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
/* Narrow: the list above the detail, each scrolling on its own. */
|
|
477
|
+
@container (width < 480px) {
|
|
478
|
+
._split_9c8486 {
|
|
479
|
+
grid-template-columns: minmax(0, 1fr);
|
|
480
|
+
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
._listPane_9c8486 {
|
|
484
|
+
border-inline-end: none;
|
|
485
|
+
border-block-end: 1px solid var(--wzl-line-subtle);
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
/* Numeric text: equal-width digits in the UI face. This is the one definition —
|
|
489
|
+
* compose it, mix it into Less, or put its class on the element; never restate
|
|
490
|
+
* the pair. `npm run check:numeric` holds every stylesheet to that. */._numeric_25fd0b {
|
|
491
|
+
font-family: var(--wzl-font-numeric);
|
|
492
|
+
font-variant-numeric: tabular-nums;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
._split_9a17db {
|
|
496
|
+
display: grid;
|
|
497
|
+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
498
|
+
flex: 1 1 auto;
|
|
499
|
+
min-height: 0;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
._treePane_9a17db,
|
|
503
|
+
._detailPane_9a17db {
|
|
504
|
+
min-height: 0;
|
|
505
|
+
min-width: 0;
|
|
506
|
+
overflow: auto;
|
|
507
|
+
padding: var(--wzl-space-4);
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
._treePane_9a17db {
|
|
511
|
+
border-inline-end: 1px solid var(--wzl-line-subtle);
|
|
512
|
+
--wzl-tree-selected: color-mix(in srgb, var(--wzl-accent) 28%, transparent);
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
._facts_9a17db {
|
|
516
|
+
display: inline-flex;
|
|
517
|
+
gap: var(--wzl-space-3);
|
|
518
|
+
color: var(--wzl-fg-muted);
|
|
519
|
+
font-size: var(--wzl-font-size-xs);
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
._kind_9a17db,
|
|
523
|
+
._layer_9a17db {
|
|
524
|
+
white-space: nowrap;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
._count_9a17db {
|
|
528
|
+
min-width: 3ch;
|
|
529
|
+
text-align: end;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
._flag_9a17db {
|
|
533
|
+
color: var(--wzl-warning);
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
._detail_9a17db {
|
|
537
|
+
display: flex;
|
|
538
|
+
flex-direction: column;
|
|
539
|
+
gap: var(--wzl-space-4);
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
._detailHead_9a17db {
|
|
543
|
+
display: flex;
|
|
544
|
+
align-items: center;
|
|
545
|
+
justify-content: space-between;
|
|
546
|
+
gap: var(--wzl-space-4);
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
._heading_9a17db {
|
|
550
|
+
margin: var(--wzl-space-4) 0 0;
|
|
551
|
+
font-size: var(--wzl-font-size-sm);
|
|
552
|
+
font-weight: var(--wzl-font-weight-bold);
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
._note_9a17db {
|
|
556
|
+
margin: 0;
|
|
557
|
+
color: var(--wzl-fg-muted);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
/* Narrow: the list above the detail, each scrolling on its own. */
|
|
561
|
+
@container (width < 480px) {
|
|
562
|
+
._split_9a17db {
|
|
563
|
+
grid-template-columns: minmax(0, 1fr);
|
|
564
|
+
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
._treePane_9a17db {
|
|
568
|
+
border-inline-end: none;
|
|
569
|
+
border-block-end: 1px solid var(--wzl-line-subtle);
|
|
570
|
+
}
|
|
571
|
+
}
|
|
572
|
+
/* Numeric text: equal-width digits in the UI face. This is the one definition —
|
|
573
|
+
* compose it, mix it into Less, or put its class on the element; never restate
|
|
574
|
+
* the pair. `npm run check:numeric` holds every stylesheet to that. */._numeric_25fd0b {
|
|
575
|
+
font-family: var(--wzl-font-numeric);
|
|
576
|
+
font-variant-numeric: tabular-nums;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
._state_5edec5 {
|
|
580
|
+
flex: 1 1 auto;
|
|
581
|
+
min-height: 0;
|
|
582
|
+
overflow: auto;
|
|
583
|
+
padding: var(--wzl-space-4);
|
|
584
|
+
display: flex;
|
|
585
|
+
flex-direction: column;
|
|
586
|
+
gap: var(--wzl-space-6);
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
._section_5edec5 {
|
|
590
|
+
display: flex;
|
|
591
|
+
flex-direction: column;
|
|
592
|
+
gap: var(--wzl-space-3);
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
._heading_5edec5 {
|
|
596
|
+
margin: 0;
|
|
597
|
+
display: flex;
|
|
598
|
+
align-items: baseline;
|
|
599
|
+
gap: var(--wzl-space-3);
|
|
600
|
+
font-size: var(--wzl-font-size-sm);
|
|
601
|
+
font-weight: var(--wzl-font-weight-bold);
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
._count_5edec5 {
|
|
605
|
+
color: var(--wzl-fg-muted);
|
|
606
|
+
font-weight: normal;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
._ids_5edec5 {
|
|
610
|
+
display: flex;
|
|
611
|
+
flex-wrap: wrap;
|
|
612
|
+
gap: var(--wzl-space-2);
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
._flags_5edec5 {
|
|
616
|
+
display: grid;
|
|
617
|
+
grid-template-columns: repeat(auto-fill, minmax(12ch, 1fr));
|
|
618
|
+
gap: var(--wzl-space-3) var(--wzl-space-6);
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
._probe_5edec5 {
|
|
622
|
+
display: grid;
|
|
623
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
624
|
+
gap: var(--wzl-space-4);
|
|
625
|
+
align-items: start;
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
._note_5edec5 {
|
|
629
|
+
margin: 0;
|
|
630
|
+
color: var(--wzl-fg-muted);
|
|
631
|
+
}
|
|
632
|
+
/*$vite$:1*/
|
package/dist/tabs.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/** The panel's tabs, in order. A new area of the protocol is a new entry here and a view of its own. */
|
|
2
|
+
import type { ComponentType } from 'react';
|
|
3
|
+
import type { DevtoolsClient } from './client';
|
|
4
|
+
/** What every tab's view is handed: the connection, and the root the picker has chosen. */
|
|
5
|
+
export interface DevtoolsViewProps {
|
|
6
|
+
client: DevtoolsClient;
|
|
7
|
+
rootId: string;
|
|
8
|
+
}
|
|
9
|
+
/** A tab of the panel, as `DevtoolsPanel`'s `tabs` and `defaultTab` name it. */
|
|
10
|
+
export type DevtoolsTabId = 'scene' | 'state' | 'registry' | 'dispatch' | 'history' | 'frame';
|
|
11
|
+
export interface DevtoolsTab {
|
|
12
|
+
id: DevtoolsTabId;
|
|
13
|
+
label: string;
|
|
14
|
+
View: ComponentType<DevtoolsViewProps>;
|
|
15
|
+
}
|
|
16
|
+
export declare const DEVTOOLS_TABS: readonly DevtoolsTab[];
|
|
17
|
+
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../src/tabs.ts"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAQ/C,2FAA2F;AAC3F,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,cAAc,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,gFAAgF;AAChF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9F,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,aAAa,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,aAAa,EAAE,SAAS,WAAW,EAO/C,CAAC"}
|
package/dist/trace.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/** A root's dispatch trace read a slice at a time, each read picking up where the last left off. */
|
|
2
|
+
import type { SerializedValue } from '@weasel-js/core/devtools-protocol';
|
|
3
|
+
import type { DevtoolsClient } from './client';
|
|
4
|
+
/** What one read hands back. `coords` is present only while coord records are asked for. */
|
|
5
|
+
export interface TraceRead {
|
|
6
|
+
entries: SerializedValue[];
|
|
7
|
+
live: SerializedValue;
|
|
8
|
+
coords?: SerializedValue[];
|
|
9
|
+
}
|
|
10
|
+
/** A cursor over one root's dispatch trace, and over its coord records once asked. */
|
|
11
|
+
export interface TraceFollower {
|
|
12
|
+
/** The trace and, when on, the coord records recorded since the last read. Reads run one after another. */
|
|
13
|
+
read(): Promise<TraceRead>;
|
|
14
|
+
/** Ask for coord records from the next read on. Turned on, it starts from the oldest the canvas still holds. */
|
|
15
|
+
setCoords(on: boolean): void;
|
|
16
|
+
}
|
|
17
|
+
/** Follow `rootId`'s dispatch trace through `client`, from the oldest record the canvas still holds. */
|
|
18
|
+
export declare function followTrace(client: DevtoolsClient, rootId: string): TraceFollower;
|
|
19
|
+
//# sourceMappingURL=trace.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"trace.d.ts","sourceRoot":"","sources":["../src/trace.ts"],"names":[],"mappings":"AAAA,oGAAoG;AACpG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,4FAA4F;AAC5F,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED,sFAAsF;AACtF,MAAM,WAAW,aAAa;IAC5B,2GAA2G;IAC3G,IAAI,IAAI,OAAO,CAAC,SAAS,CAAC,CAAC;IAC3B,gHAAgH;IAChH,SAAS,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9B;AAED,wGAAwG;AACxG,wBAAgB,WAAW,CAAC,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,GAAG,aAAa,CA6BjF"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/** An entry's gesture bindings: each route drawn in the route grammar, beside the action it reaches. */
|
|
2
|
+
import type { ReactElement } from 'react';
|
|
3
|
+
import type { DevtoolsBinding } from '@weasel-js/core/devtools-protocol';
|
|
4
|
+
export declare function Bindings({ bindings }: {
|
|
5
|
+
bindings: readonly DevtoolsBinding[];
|
|
6
|
+
}): ReactElement;
|
|
7
|
+
//# sourceMappingURL=Bindings.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Bindings.d.ts","sourceRoot":"","sources":["../../src/views/Bindings.tsx"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AASzE,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAA;CAAE,GAAG,YAAY,CAsB7F"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/** `clientToWorld` conversions, newest first: where the pointer was, the camera it was read under, and the world point it became. */
|
|
2
|
+
import type { ReactElement } from 'react';
|
|
3
|
+
/** One coord record, as the canvas writes it. */
|
|
4
|
+
export interface CoordEntry {
|
|
5
|
+
ts: number;
|
|
6
|
+
clientX: number;
|
|
7
|
+
clientY: number;
|
|
8
|
+
view: {
|
|
9
|
+
x: number;
|
|
10
|
+
y: number;
|
|
11
|
+
scaleX: number;
|
|
12
|
+
scaleY: number;
|
|
13
|
+
} | null;
|
|
14
|
+
world: {
|
|
15
|
+
x: number;
|
|
16
|
+
y: number;
|
|
17
|
+
};
|
|
18
|
+
fallback: boolean;
|
|
19
|
+
}
|
|
20
|
+
export declare function CoordTable({ entries, now }: {
|
|
21
|
+
entries: readonly CoordEntry[];
|
|
22
|
+
now: number;
|
|
23
|
+
}): ReactElement;
|
|
24
|
+
//# sourceMappingURL=CoordTable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CoordTable.d.ts","sourceRoot":"","sources":["../../src/views/CoordTable.tsx"],"names":[],"mappings":"AAAA,qIAAqI;AACrI,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,iDAAiD;AACjD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACtE,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAOD,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE;IAAE,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAoB1G"}
|