atom.io 0.33.13 → 0.33.15

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 (56) hide show
  1. package/dist/data/index.js.map +1 -1
  2. package/dist/eslint-plugin/index.js.map +1 -1
  3. package/dist/internal/index.d.ts +9 -7
  4. package/dist/internal/index.d.ts.map +1 -1
  5. package/dist/internal/index.js +98 -53
  6. package/dist/internal/index.js.map +1 -1
  7. package/dist/introspection/index.d.ts +7 -7
  8. package/dist/introspection/index.d.ts.map +1 -1
  9. package/dist/introspection/index.js +26 -38
  10. package/dist/introspection/index.js.map +1 -1
  11. package/dist/json/index.js.map +1 -1
  12. package/dist/main/index.d.ts +21 -1
  13. package/dist/main/index.d.ts.map +1 -1
  14. package/dist/main/index.js +24 -13
  15. package/dist/main/index.js.map +1 -1
  16. package/dist/react/index.js.map +1 -1
  17. package/dist/react-devtools/index.css +110 -56
  18. package/dist/react-devtools/index.css.map +1 -1
  19. package/dist/react-devtools/index.js +38 -14
  20. package/dist/react-devtools/index.js.map +1 -1
  21. package/dist/realtime/index.js.map +1 -1
  22. package/dist/realtime-client/index.js.map +1 -1
  23. package/dist/realtime-react/index.js.map +1 -1
  24. package/dist/realtime-server/index.js.map +1 -1
  25. package/dist/realtime-testing/index.js.map +1 -1
  26. package/dist/transceivers/set-rtx/index.js.map +1 -1
  27. package/dist/use-o-BrXc7Qro.js.map +1 -1
  28. package/dist/web/index.js.map +1 -1
  29. package/package.json +10 -10
  30. package/src/internal/atom/create-regular-atom.ts +0 -2
  31. package/src/internal/atom/index.ts +0 -1
  32. package/src/internal/mutable/create-mutable-atom.ts +0 -2
  33. package/src/internal/selector/trace-selector-atoms.ts +9 -7
  34. package/src/internal/set-state/index.ts +2 -0
  35. package/src/internal/set-state/reset-atom-or-selector.ts +32 -0
  36. package/src/internal/set-state/reset-in-store.ts +78 -0
  37. package/src/internal/set-state/set-atom.ts +0 -4
  38. package/src/internal/subscribe/subscribe-to-root-atoms.ts +2 -8
  39. package/src/internal/transaction/build-transaction.ts +11 -2
  40. package/src/internal/transaction/create-transaction.ts +9 -5
  41. package/src/introspection/attach-atom-index.ts +6 -15
  42. package/src/introspection/attach-introspection-states.ts +5 -5
  43. package/src/introspection/attach-selector-index.ts +78 -85
  44. package/src/introspection/attach-timeline-index.ts +5 -12
  45. package/src/introspection/attach-transaction-index.ts +18 -16
  46. package/src/introspection/auditor.ts +2 -3
  47. package/src/main/index.ts +1 -0
  48. package/src/main/reset-state.ts +35 -0
  49. package/src/main/silo.ts +6 -0
  50. package/src/main/transaction.ts +2 -0
  51. package/src/react-devtools/StateIndex.tsx +44 -20
  52. package/src/react-devtools/TimelineIndex.tsx +16 -12
  53. package/src/react-devtools/TransactionIndex.tsx +22 -18
  54. package/src/react-devtools/devtools.css +110 -56
  55. package/src/react-devtools/store.ts +1 -1
  56. package/src/internal/atom/is-default.ts +0 -18
package/dist/react-devtools/index.css CHANGED
@@ -86,42 +86,62 @@ main[data-css="atom_io_devtools"] {
86
86
  }
87
87
  }
88
88
  }
89
+
89
90
  > main {
90
91
  background: var(--bg-tint1);
91
- }
92
- > main::before {
93
- background-color: black;
94
- height: 10px;
95
- }
96
- > main {
97
92
  overflow-y: scroll;
98
93
  flex-grow: 1;
99
94
  display: flex;
100
95
  flex-flow: column;
101
96
  gap: 0;
102
97
  article.index {
103
- margin-bottom: 24px;
104
- border-bottom: var(--fg-border);
98
+ margin-bottom: 0px;
99
+ padding-bottom: 24px;
100
+ border-top: var(--fg-border);
101
+ min-height: calc(100% - 24px);
102
+ display: flex;
103
+ flex-shrink: 0;
104
+ flex-flow: column;
105
105
  .node .node {
106
- border-right: var(--fg-border);
106
+ border-right: none;
107
107
  padding-right: 0;
108
108
  background: #ffffff08;
109
109
  @media (prefers-color-scheme: light) {
110
110
  background: #00000004;
111
111
  }
112
112
  }
113
+ .index-empty-state {
114
+ width: 100%;
115
+ height: 100%;
116
+ font-style: italic;
117
+ display: flex;
118
+ justify-content: center;
119
+ align-items: center;
120
+ }
113
121
  .node > .node {
114
122
  margin: 0px 0px 0px 9px;
123
+ width: calc(100% - 9px);
115
124
  border-left: var(--fg-border-soft);
125
+ &:first-of-type {
126
+ border-top: var(--fg-border-soft);
127
+ }
128
+ &:last-of-type {
129
+ border-bottom: none;
130
+ }
116
131
  }
117
132
  .node {
118
- border-top: var(--fg-border);
133
+ position: relative;
134
+ border-bottom: var(--fg-border-soft);
119
135
  overflow: visible;
120
-
136
+ width: 100%;
137
+ display: flex;
138
+ flex-flow: column;
121
139
  &.transaction_update {
122
140
  padding: 0;
123
141
  }
142
+
124
143
  > header {
144
+ width: auto;
125
145
  display: flex;
126
146
  flex-flow: row;
127
147
  justify-content: space-between;
@@ -131,7 +151,11 @@ main[data-css="atom_io_devtools"] {
131
151
  height: 22px;
132
152
  background: var(--bg-tint2);
133
153
  border-bottom: none;
154
+ align-items: center;
155
+ overflow: hidden;
156
+
134
157
  > main {
158
+ height: 100%;
135
159
  display: flex;
136
160
  flex-flow: row;
137
161
  cursor: help;
@@ -147,51 +171,67 @@ main[data-css="atom_io_devtools"] {
147
171
  h2 {
148
172
  margin: 0;
149
173
  }
150
- .detail {
151
- margin-left: 5px;
152
- color: #777;
153
- @media (prefers-color-scheme: light) {
154
- color: #999;
155
- }
156
- }
157
- }
158
- > .json_editor {
159
- border-left: var(--fg-border-soft);
160
- padding: 3px 0px;
161
174
  }
162
- > .json_viewer {
163
- color: var(--fg-light);
164
- font-size: 14px;
165
- flex-shrink: 1;
166
- }
167
- > .json_editor,
168
- > .json_viewer {
169
- margin-left: 3px;
175
+
176
+ > footer {
177
+ height: 16px;
178
+ width: fit-content;
179
+ min-width: 0;
170
180
  display: flex;
171
- flex-shrink: 1;
172
- z-index: -1;
173
- overflow-x: scroll;
181
+ justify-content: flex-start;
174
182
  align-items: center;
175
- white-space: pre;
176
- background: var(--bg-tint2);
177
- &:focus-within {
178
- background-color: var(--bg-max);
179
- outline: 2px solid var(--fg-max);
180
- * {
181
- color: var(--fg-max);
182
- }
183
- }
184
- &.nu * {
185
- display: flex;
186
- height: 100%;
183
+ flex-shrink: 1;
184
+ > button {
185
+ border: none;
186
+ background: none;
187
+ border-left: var(--fg-border-soft);
187
188
  }
188
- > span {
189
- padding: 0px 5px;
190
- z-index: 0;
189
+ > .json_viewer {
190
+ color: var(--fg-light);
191
+ flex-shrink: 1;
192
+ overflow: scroll;
193
+ align-self: center;
194
+ align-items: flex-start;
191
195
  }
192
- input {
193
- outline: none;
196
+ > .json_editor,
197
+ > .json_viewer {
198
+ height: 16px;
194
199
  min-width: 10px;
200
+ padding-left: 4px;
201
+ padding-right: 2px;
202
+ display: flex;
203
+ flex-flow: row;
204
+ margin-right: 0px;
205
+ overflow-x: scroll;
206
+ align-items: center;
207
+ justify-content: flex-start;
208
+ white-space: pre;
209
+ border-left: var(--fg-border-soft);
210
+ &:focus-within {
211
+ background-color: var(--bg-max);
212
+ outline: 2px solid var(--fg-max);
213
+ * {
214
+ color: var(--fg-max);
215
+ }
216
+ }
217
+ main {
218
+ height: 100%;
219
+ }
220
+ > span {
221
+ padding: 0px 5px;
222
+ z-index: 0;
223
+ }
224
+ input {
225
+ outline: none;
226
+ }
227
+ }
228
+ }
229
+
230
+ .detail {
231
+ margin-left: 5px;
232
+ color: #777;
233
+ @media (prefers-color-scheme: light) {
234
+ color: #999;
195
235
  }
196
236
  }
197
237
  }
@@ -201,8 +241,8 @@ main[data-css="atom_io_devtools"] {
201
241
  main {
202
242
  display: flex;
203
243
  flex-flow: row wrap;
204
- gap: 5px;
205
- .transaction_update {
244
+ gap: 0;
245
+ article.transaction_update {
206
246
  width: 100%;
207
247
  display: flex;
208
248
  flex-flow: row;
@@ -210,10 +250,14 @@ main[data-css="atom_io_devtools"] {
210
250
  justify-content: flex-start;
211
251
  justify-items: flex-start;
212
252
  align-content: flex-start;
213
- border-left: var(--fg-border);
253
+ border-left: none;
254
+ border-bottom: none;
214
255
  border-top: var(--fg-border);
215
256
  header {
257
+ height: 100%;
216
258
  padding: 5px;
259
+ display: flex;
260
+ flex-flow: column;
217
261
  h4 {
218
262
  margin: 0;
219
263
  padding: 0;
@@ -224,6 +268,7 @@ main[data-css="atom_io_devtools"] {
224
268
  margin-left: 0;
225
269
  display: flex;
226
270
  flex-flow: column;
271
+ flex-grow: 1;
227
272
  gap: 0px;
228
273
  border-left: 1px solid #333;
229
274
  section ~ section {
@@ -231,16 +276,22 @@ main[data-css="atom_io_devtools"] {
231
276
  }
232
277
  section {
233
278
  padding: 5px;
279
+ border-bottom: none;
280
+ margin: 0;
234
281
  &.transaction_output {
235
282
  border-right: none;
236
283
  }
237
284
  &.transaction_impact {
238
285
  padding: 5px;
239
286
  }
240
- margin: 0;
287
+
241
288
  article {
289
+ padding: 3px 6px;
242
290
  border-left: var(--fg-border);
243
291
  border-right: var(--fg-border);
292
+ &:first-of-type {
293
+ border-top: var(--fg-border);
294
+ }
244
295
  .summary {
245
296
  white-space: nowrap;
246
297
  }
@@ -250,6 +301,7 @@ main[data-css="atom_io_devtools"] {
250
301
  }
251
302
  }
252
303
  }
304
+
253
305
  section.timeline_log {
254
306
  header {
255
307
  display: flex;
@@ -290,7 +342,9 @@ main[data-css="atom_io_devtools"] {
290
342
  }
291
343
  }
292
344
  }
345
+
293
346
  > footer {
347
+ z-index: 10000;
294
348
  display: flex;
295
349
  justify-content: flex-end;
296
350
  button {
@@ -307,7 +361,6 @@ main[data-css="atom_io_devtools"] {
307
361
  .json_editor {
308
362
  display: flex;
309
363
  flex-flow: column;
310
- align-items: flex-start;
311
364
  > header {
312
365
  width: 100%;
313
366
  display: flex;
@@ -323,9 +376,10 @@ main[data-css="atom_io_devtools"] {
323
376
  display: flex;
324
377
  flex-flow: row;
325
378
  align-items: center;
379
+ align-self: center;
326
380
  flex-shrink: 1;
327
381
  overflow-x: hidden;
328
- align-self: center;
382
+ padding-right: 2px;
329
383
  > .json_viewer {
330
384
  flex-shrink: 1;
331
385
  overflow-x: scroll;
package/dist/react-devtools/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.css","names":[],"sources":["../../src/react-devtools/devtools.css"],"sourcesContent":["main[data-css=\"atom_io_devtools\"] {\n\t--fg-color: #ccc;\n\t--fg-light: #aaa;\n\t--fg-soft: #888;\n\t--fg-faint: #777;\n\t--fg-hint: #4a4a4a;\n\t--fg-max: #fff;\n\t--bg-color: #111;\n\t--bg-accent: #00f;\n\t--bg-max: #000;\n\t--bg-tint1: #222;\n\t--bg-tint2: #333;\n\t--fg-border: 1px solid var(--fg-color);\n\t--fg-border-soft: 1px solid var(--fg-soft);\n\t--fg-border-hint: 1px solid var(--fg-hint);\n\t@media (prefers-color-scheme: light) {\n\t\t--fg-color: #444;\n\t\t--fg-light: #777;\n\t\t--fg-soft: #888;\n\t\t--fg-faint: #999;\n\t\t--fg-hint: #ccc;\n\t\t--fg-max: #000;\n\t\t--bg-color: #ddd;\n\t\t--bg-accent: #0ff;\n\t\t--bg-max: #fff;\n\t\t--bg-tint1: #e3e3e3;\n\t\t--bg-tint2: #f3f3f3;\n\t}\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\t& {\n\t\tpointer-events: all;\n\t\tbox-sizing: border-box;\n\t\tcolor: var(--fg-color);\n\t\tbackground-color: var(--bg-color);\n\t\tborder: 2px solid var(--fg-color);\n\t\tposition: fixed;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-flow: column;\n\t\tmax-height: 800px;\n\t\twidth: 100%;\n\t\tmax-width: 500px;\n\t\toverflow-y: scroll;\n\t}\n\t* {\n\t\tfont-size: 14px;\n\t\tfont-family: theia, monospace;\n\t\tline-height: 1em;\n\t\tcolor: var(--fg-color);\n\t}\n\t> header {\n\t\tpadding-bottom: 0;\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\th1 {\n\t\t\tmargin: 2px 4px;\n\t\t\tfont-size: 24px;\n\t\t\tfont-family: charter, serif;\n\t\t}\n\t\tnav {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-flow: row nowrap;\n\t\t\tmargin-top: 4px;\n\t\t\toverflow-x: scroll;\n\t\t\toverflow-y: visible;\n\t\t\theight: 24px;\n\t\t\tbutton {\n\t\t\t\theight: 24px;\n\t\t\t\tcursor: pointer;\n\t\t\t\tbackground: none;\n\t\t\t\tborder: none;\n\t\t\t\tpadding: 0px 5px;\n\t\t\t\tmargin-bottom: -2px;\n\t\t\t\tz-index: 1000;\n\t\t\t\t&:disabled {\n\t\t\t\t\tcursor: default;\n\t\t\t\t\tbackground-color: var(--fg-color);\n\t\t\t\t\tcolor: var(--bg-color);\n\t\t\t\t\tborder: var(--fg-border);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t> main {\n\t\tbackground: var(--bg-tint1);\n\t}\n\t> main::before {\n\t\tbackground-color: black;\n\t\theight: 10px;\n\t}\n\t> main {\n\t\toverflow-y: scroll;\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t\tflex-flow: column;\n\t\tgap: 0;\n\t\tarticle.index {\n\t\t\tmargin-bottom: 24px;\n\t\t\tborder-bottom: var(--fg-border);\n\t\t\t.node .node {\n\t\t\t\tborder-right: var(--fg-border);\n\t\t\t\tpadding-right: 0;\n\t\t\t\tbackground: #ffffff08;\n\t\t\t\t@media (prefers-color-scheme: light) {\n\t\t\t\t\tbackground: #00000004;\n\t\t\t\t}\n\t\t\t}\n\t\t\t.node > .node {\n\t\t\t\tmargin: 0px 0px 0px 9px;\n\t\t\t\tborder-left: var(--fg-border-soft);\n\t\t\t}\n\t\t\t.node {\n\t\t\t\tborder-top: var(--fg-border);\n\t\t\t\toverflow: visible;\n\n\t\t\t\t&.transaction_update {\n\t\t\t\t\tpadding: 0;\n\t\t\t\t}\n\t\t\t\t> header {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-flow: row;\n\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\tposition: sticky;\n\t\t\t\t\tz-index: 999;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\theight: 22px;\n\t\t\t\t\tbackground: var(--bg-tint2);\n\t\t\t\t\tborder-bottom: none;\n\t\t\t\t\t> main {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex-flow: row;\n\t\t\t\t\t\tcursor: help;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tflex-shrink: 0;\n\t\t\t\t\t\t* {\n\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\talign-content: center;\n\t\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t\t}\n\t\t\t\t\t\th2 {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t.detail {\n\t\t\t\t\t\t\tmargin-left: 5px;\n\t\t\t\t\t\t\tcolor: #777;\n\t\t\t\t\t\t\t@media (prefers-color-scheme: light) {\n\t\t\t\t\t\t\t\tcolor: #999;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t> .json_editor {\n\t\t\t\t\t\tborder-left: var(--fg-border-soft);\n\t\t\t\t\t\tpadding: 3px 0px;\n\t\t\t\t\t}\n\t\t\t\t\t> .json_viewer {\n\t\t\t\t\t\tcolor: var(--fg-light);\n\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t\tflex-shrink: 1;\n\t\t\t\t\t}\n\t\t\t\t\t> .json_editor,\n\t\t\t\t\t> .json_viewer {\n\t\t\t\t\t\tmargin-left: 3px;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex-shrink: 1;\n\t\t\t\t\t\tz-index: -1;\n\t\t\t\t\t\toverflow-x: scroll;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\twhite-space: pre;\n\t\t\t\t\t\tbackground: var(--bg-tint2);\n\t\t\t\t\t\t&:focus-within {\n\t\t\t\t\t\t\tbackground-color: var(--bg-max);\n\t\t\t\t\t\t\toutline: 2px solid var(--fg-max);\n\t\t\t\t\t\t\t* {\n\t\t\t\t\t\t\t\tcolor: var(--fg-max);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\t&.nu * {\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t> span {\n\t\t\t\t\t\t\tpadding: 0px 5px;\n\t\t\t\t\t\t\tz-index: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tinput {\n\t\t\t\t\t\t\toutline: none;\n\t\t\t\t\t\t\tmin-width: 10px;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tsection.transaction_log {\n\t\t\t\tmargin-top: 0;\n\t\t\t\tmain {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-flow: row wrap;\n\t\t\t\t\tgap: 5px;\n\t\t\t\t\t.transaction_update {\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex-flow: row;\n\t\t\t\t\t\talign-items: flex-start;\n\t\t\t\t\t\tjustify-content: flex-start;\n\t\t\t\t\t\tjustify-items: flex-start;\n\t\t\t\t\t\talign-content: flex-start;\n\t\t\t\t\t\tborder-left: var(--fg-border);\n\t\t\t\t\t\tborder-top: var(--fg-border);\n\t\t\t\t\t\theader {\n\t\t\t\t\t\t\tpadding: 5px;\n\t\t\t\t\t\t\th4 {\n\t\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\t\t\tfont-size: inherit;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmain {\n\t\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\tflex-flow: column;\n\t\t\t\t\t\t\tgap: 0px;\n\t\t\t\t\t\t\tborder-left: 1px solid #333;\n\t\t\t\t\t\t\tsection ~ section {\n\t\t\t\t\t\t\t\tborder-top: 1px solid #333;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsection {\n\t\t\t\t\t\t\t\tpadding: 5px;\n\t\t\t\t\t\t\t\t&.transaction_output {\n\t\t\t\t\t\t\t\t\tborder-right: none;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t&.transaction_impact {\n\t\t\t\t\t\t\t\t\tpadding: 5px;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t\tarticle {\n\t\t\t\t\t\t\t\t\tborder-left: var(--fg-border);\n\t\t\t\t\t\t\t\t\tborder-right: var(--fg-border);\n\t\t\t\t\t\t\t\t\t.summary {\n\t\t\t\t\t\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tsection.timeline_log {\n\t\t\t\theader {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t> main {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\tflex-grow: 1;\n\t\t\t\t\t\t.gap {\n\t\t\t\t\t\t\tflex-grow: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tnav {\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\tflex-flow: row nowrap;\n\t\t\t\t\t\t\tgap: 5px;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t.timeline_update {\n\t\t\t\t\tpadding: 5px;\n\t\t\t\t\tborder-left: var(--fg-border);\n\t\t\t\t\th4 {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tfont-size: inherit;\n\t\t\t\t\t}\n\t\t\t\t\tmain {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t.node.atom_update {\n\t\t\t\t\t\t\tborder-left: var(--fg-border);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t.you_are_here {\n\t\t\t\t\tbackground: var(--fg-color);\n\t\t\t\t\tcolor: var(--bg-color);\n\t\t\t\t\ttext-align: center;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t> footer {\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\tbutton {\n\t\t\tcursor: pointer;\n\t\t\tbackground: none;\n\t\t\tborder: none;\n\t\t\tpadding: none;\n\t\t\tposition: absolute;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\t}\n\n\t.json_editor {\n\t\tdisplay: flex;\n\t\tflex-flow: column;\n\t\talign-items: flex-start;\n\t\t> header {\n\t\t\twidth: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-flow: row;\n\t\t\talign-items: center;\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\tjustify-content: space-between;\n\t\t\t&:has(> main > button.carat) {\n\t\t\t\theight: 21px;\n\t\t\t}\n\t\t\t> main {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-flow: row;\n\t\t\t\talign-items: center;\n\t\t\t\tflex-shrink: 1;\n\t\t\t\toverflow-x: hidden;\n\t\t\t\talign-self: center;\n\t\t\t\t> .json_viewer {\n\t\t\t\t\tflex-shrink: 1;\n\t\t\t\t\toverflow-x: scroll;\n\t\t\t\t\theight: 21px;\n\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tmargin-left: 0px;\n\t\t\t\t\tcolor: var(--fg-soft);\n\t\t\t\t}\n\t\t\t\t> button {\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\t&.carat {\n\t\t\t\t\t\tline-height: 0.5em;\n\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t> .json_editor_array,\n\t\t> .json_editor_object {\n\t\t\twidth: 100%;\n\t\t\tflex-grow: 1;\n\t\t}\n\t\tinput {\n\t\t\tfont-family: theia, monospace;\n\t\t\tbackground: none;\n\t\t\t&:disabled {\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t}\n\t\tinput,\n\t\tselect {\n\t\t\t&:focus-within {\n\t\t\t\toutline: 2px solid var(--fg-max);\n\t\t\t\tbackground: var(--bg-max);\n\t\t\t\tcolor: var(--fg-max);\n\t\t\t}\n\t\t}\n\n\t\tbutton:disabled {\n\t\t\tcursor: default;\n\t\t\t> span.json_editor_icon {\n\t\t\t\tcolor: var(--fg-hint);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\tbackground: none;\n\t\t\t}\n\t\t}\n\t\tinput::selection {\n\t\t\tbackground: var(--bg-accent);\n\t\t}\n\n\t\tbutton {\n\t\t\tbackground: none;\n\t\t\tcolor: #777;\n\t\t\tborder: none;\n\t\t\tfont-family: theia, monospace;\n\t\t\tfont-size: 14px;\n\t\t\theight: 21px;\n\t\t\tmin-width: 21px;\n\t\t\tmargin: none;\n\t\t\tpadding: 4px;\n\t\t\tpadding-bottom: 6px;\n\t\t\tcursor: pointer;\n\t\t\t&:hover,\n\t\t\t&:focus-within {\n\t\t\t\tbackground-color: var(--fg-faint);\n\t\t\t\t&,\n\t\t\t\t> * {\n\t\t\t\t\tcolor: var(--bg-color);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:active {\n\t\t\t\tbackground: var(--fg-color);\n\t\t\t\t&,\n\t\t\t\t> * {\n\t\t\t\t\tcolor: var(--bg-color);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tselect {\n\t\t\tfont-family: theia, monospace;\n\t\t\tfont-size: 14px;\n\t\t\tbackground: none;\n\t\t\tborder: none;\n\t\t\tcolor: #777;\n\t\t\t@media (prefers-color-scheme: light) {\n\t\t\t\tcolor: #999;\n\t\t\t}\n\t\t}\n\t\t.json_editor_unofficial {\n\t\t\tbackground-color: #777;\n\t\t\tbutton {\n\t\t\t\tcolor: #333;\n\t\t\t}\n\t\t}\n\t\t.json_editor_missing {\n\t\t\tbackground-color: #f055;\n\t\t}\n\t\t.json_editor_key {\n\t\t\tpadding-right: 0px;\n\t\t\t&::after {\n\t\t\t\tcontent: \":\";\n\t\t\t\tcolor: var(--fg-soft);\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tcolor: var(--fg-color);\n\t\t\t}\n\t\t}\n\t\t.json_editor_object,\n\t\t.json_editor_array {\n\t\t\tborder-left: var(--fg-border-soft);\n\t\t\tmargin-left: 9px;\n\t\t\twidth: calc(100% - 9px);\n\t\t\t> footer {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-flow: row;\n\t\t\t\tjustify-content: flex-start;\n\t\t\t\tjustify-items: flex-start;\n\t\t\t\theight: 21px;\n\t\t\t\talign-items: baseline;\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\t.json_editor_properties,\n\t\t\t.json_editor_elements {\n\t\t\t\tborder-top: var(--fg-border-soft);\n\t\t\t\t.json_editor_property,\n\t\t\t\t.json_editor_element {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tborder-bottom: var(--fg-border-soft);\n\t\t\t\t\tmargin-bottom: 0;\n\t\t\t\t\tmin-height: 21px;\n\t\t\t\t\t> header {\n\t\t\t\t\t\t> main {\n\t\t\t\t\t\t\t> span {\n\t\t\t\t\t\t\t\tinput {\n\t\t\t\t\t\t\t\t\tmin-width: 10px;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t> * {\n\t\t\t\t\t\t\t\t\tborder: var(--fg-border-hint);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&.readonly {\n\t\t\t\t\t.json_editor_property,\n\t\t\t\t\t.json_editor_element {\n\t\t\t\t\t\t&:last-of-type {\n\t\t\t\t\t\t\tborder-bottom: none;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tspan > * {\n\t\t\t\t\t\t\tborder: 1px solid transparent;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.json_editor_icon {\n\t\tcolor: var(--fg-soft);\n\t}\n\n\tbutton.carat {\n\t\tborder: none;\n\t\tcursor: pointer;\n\t\tbackground: none;\n\t\t> .json_editor_icon {\n\t\t\tline-height: 4px;\n\t\t}\n\t\t&.open {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\t\t&:disabled {\n\t\t\t> .json_editor_icon {\n\t\t\t\tcursor: default;\n\t\t\t\tcolor: var(--fg-hint);\n\t\t\t}\n\t\t}\n\t}\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
1
+ {"version":3,"file":"index.css","names":[],"sources":["../../src/react-devtools/devtools.css"],"sourcesContent":["main[data-css=\"atom_io_devtools\"] {\n\t--fg-color: #ccc;\n\t--fg-light: #aaa;\n\t--fg-soft: #888;\n\t--fg-faint: #777;\n\t--fg-hint: #4a4a4a;\n\t--fg-max: #fff;\n\t--bg-color: #111;\n\t--bg-accent: #00f;\n\t--bg-max: #000;\n\t--bg-tint1: #222;\n\t--bg-tint2: #333;\n\t--fg-border: 1px solid var(--fg-color);\n\t--fg-border-soft: 1px solid var(--fg-soft);\n\t--fg-border-hint: 1px solid var(--fg-hint);\n\t@media (prefers-color-scheme: light) {\n\t\t--fg-color: #444;\n\t\t--fg-light: #777;\n\t\t--fg-soft: #888;\n\t\t--fg-faint: #999;\n\t\t--fg-hint: #ccc;\n\t\t--fg-max: #000;\n\t\t--bg-color: #ddd;\n\t\t--bg-accent: #0ff;\n\t\t--bg-max: #fff;\n\t\t--bg-tint1: #e3e3e3;\n\t\t--bg-tint2: #f3f3f3;\n\t}\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\t& {\n\t\tpointer-events: all;\n\t\tbox-sizing: border-box;\n\t\tcolor: var(--fg-color);\n\t\tbackground-color: var(--bg-color);\n\t\tborder: 2px solid var(--fg-color);\n\t\tposition: fixed;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-flow: column;\n\t\tmax-height: 800px;\n\t\twidth: 100%;\n\t\tmax-width: 500px;\n\t\toverflow-y: scroll;\n\t}\n\t* {\n\t\tfont-size: 14px;\n\t\tfont-family: theia, monospace;\n\t\tline-height: 1em;\n\t\tcolor: var(--fg-color);\n\t}\n\t> header {\n\t\tpadding-bottom: 0;\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\th1 {\n\t\t\tmargin: 2px 4px;\n\t\t\tfont-size: 24px;\n\t\t\tfont-family: charter, serif;\n\t\t}\n\t\tnav {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-flow: row nowrap;\n\t\t\tmargin-top: 4px;\n\t\t\toverflow-x: scroll;\n\t\t\toverflow-y: visible;\n\t\t\theight: 24px;\n\t\t\tbutton {\n\t\t\t\theight: 24px;\n\t\t\t\tcursor: pointer;\n\t\t\t\tbackground: none;\n\t\t\t\tborder: none;\n\t\t\t\tpadding: 0px 5px;\n\t\t\t\tmargin-bottom: -2px;\n\t\t\t\tz-index: 1000;\n\t\t\t\t&:disabled {\n\t\t\t\t\tcursor: default;\n\t\t\t\t\tbackground-color: var(--fg-color);\n\t\t\t\t\tcolor: var(--bg-color);\n\t\t\t\t\tborder: var(--fg-border);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t> main {\n\t\tbackground: var(--bg-tint1);\n\t\toverflow-y: scroll;\n\t\tflex-grow: 1;\n\t\tdisplay: flex;\n\t\tflex-flow: column;\n\t\tgap: 0;\n\t\tarticle.index {\n\t\t\tmargin-bottom: 0px;\n\t\t\tpadding-bottom: 24px;\n\t\t\tborder-top: var(--fg-border);\n\t\t\tmin-height: calc(100% - 24px);\n\t\t\tdisplay: flex;\n\t\t\tflex-shrink: 0;\n\t\t\tflex-flow: column;\n\t\t\t.node .node {\n\t\t\t\tborder-right: none;\n\t\t\t\tpadding-right: 0;\n\t\t\t\tbackground: #ffffff08;\n\t\t\t\t@media (prefers-color-scheme: light) {\n\t\t\t\t\tbackground: #00000004;\n\t\t\t\t}\n\t\t\t}\n\t\t\t.index-empty-state {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tfont-style: italic;\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t}\n\t\t\t.node > .node {\n\t\t\t\tmargin: 0px 0px 0px 9px;\n\t\t\t\twidth: calc(100% - 9px);\n\t\t\t\tborder-left: var(--fg-border-soft);\n\t\t\t\t&:first-of-type {\n\t\t\t\t\tborder-top: var(--fg-border-soft);\n\t\t\t\t}\n\t\t\t\t&:last-of-type {\n\t\t\t\t\tborder-bottom: none;\n\t\t\t\t}\n\t\t\t}\n\t\t\t.node {\n\t\t\t\tposition: relative;\n\t\t\t\tborder-bottom: var(--fg-border-soft);\n\t\t\t\toverflow: visible;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-flow: column;\n\t\t\t\t&.transaction_update {\n\t\t\t\t\tpadding: 0;\n\t\t\t\t}\n\n\t\t\t\t> header {\n\t\t\t\t\twidth: auto;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-flow: row;\n\t\t\t\t\tjustify-content: space-between;\n\t\t\t\t\tposition: sticky;\n\t\t\t\t\tz-index: 999;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\theight: 22px;\n\t\t\t\t\tbackground: var(--bg-tint2);\n\t\t\t\t\tborder-bottom: none;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\toverflow: hidden;\n\n\t\t\t\t\t> main {\n\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex-flow: row;\n\t\t\t\t\t\tcursor: help;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tflex-shrink: 0;\n\t\t\t\t\t\t* {\n\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\talign-content: center;\n\t\t\t\t\t\t\tjustify-content: center;\n\t\t\t\t\t\t}\n\t\t\t\t\t\th2 {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> footer {\n\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\twidth: fit-content;\n\t\t\t\t\t\tmin-width: 0;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tjustify-content: flex-start;\n\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\tflex-shrink: 1;\n\t\t\t\t\t\t> button {\n\t\t\t\t\t\t\tborder: none;\n\t\t\t\t\t\t\tbackground: none;\n\t\t\t\t\t\t\tborder-left: var(--fg-border-soft);\n\t\t\t\t\t\t}\n\t\t\t\t\t\t> .json_viewer {\n\t\t\t\t\t\t\tcolor: var(--fg-light);\n\t\t\t\t\t\t\tflex-shrink: 1;\n\t\t\t\t\t\t\toverflow: scroll;\n\t\t\t\t\t\t\talign-self: center;\n\t\t\t\t\t\t\talign-items: flex-start;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t> .json_editor,\n\t\t\t\t\t\t> .json_viewer {\n\t\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\t\tmin-width: 10px;\n\t\t\t\t\t\t\tpadding-left: 4px;\n\t\t\t\t\t\t\tpadding-right: 2px;\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\tflex-flow: row;\n\t\t\t\t\t\t\tmargin-right: 0px;\n\t\t\t\t\t\t\toverflow-x: scroll;\n\t\t\t\t\t\t\talign-items: center;\n\t\t\t\t\t\t\tjustify-content: flex-start;\n\t\t\t\t\t\t\twhite-space: pre;\n\t\t\t\t\t\t\tborder-left: var(--fg-border-soft);\n\t\t\t\t\t\t\t&:focus-within {\n\t\t\t\t\t\t\t\tbackground-color: var(--bg-max);\n\t\t\t\t\t\t\t\toutline: 2px solid var(--fg-max);\n\t\t\t\t\t\t\t\t* {\n\t\t\t\t\t\t\t\t\tcolor: var(--fg-max);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tmain {\n\t\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t> span {\n\t\t\t\t\t\t\t\tpadding: 0px 5px;\n\t\t\t\t\t\t\t\tz-index: 0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tinput {\n\t\t\t\t\t\t\t\toutline: none;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.detail {\n\t\t\t\t\t\tmargin-left: 5px;\n\t\t\t\t\t\tcolor: #777;\n\t\t\t\t\t\t@media (prefers-color-scheme: light) {\n\t\t\t\t\t\t\tcolor: #999;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tsection.transaction_log {\n\t\t\t\tmargin-top: 0;\n\t\t\t\tmain {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-flow: row wrap;\n\t\t\t\t\tgap: 0;\n\t\t\t\t\tarticle.transaction_update {\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex-flow: row;\n\t\t\t\t\t\talign-items: flex-start;\n\t\t\t\t\t\tjustify-content: flex-start;\n\t\t\t\t\t\tjustify-items: flex-start;\n\t\t\t\t\t\talign-content: flex-start;\n\t\t\t\t\t\tborder-left: none;\n\t\t\t\t\t\tborder-bottom: none;\n\t\t\t\t\t\tborder-top: var(--fg-border);\n\t\t\t\t\t\theader {\n\t\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\t\tpadding: 5px;\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\tflex-flow: column;\n\t\t\t\t\t\t\th4 {\n\t\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\t\t\tfont-size: inherit;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tmain {\n\t\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\tflex-flow: column;\n\t\t\t\t\t\t\tflex-grow: 1;\n\t\t\t\t\t\t\tgap: 0px;\n\t\t\t\t\t\t\tborder-left: 1px solid #333;\n\t\t\t\t\t\t\tsection ~ section {\n\t\t\t\t\t\t\t\tborder-top: 1px solid #333;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsection {\n\t\t\t\t\t\t\t\tpadding: 5px;\n\t\t\t\t\t\t\t\tborder-bottom: none;\n\t\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\t\t&.transaction_output {\n\t\t\t\t\t\t\t\t\tborder-right: none;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t&.transaction_impact {\n\t\t\t\t\t\t\t\t\tpadding: 5px;\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\tarticle {\n\t\t\t\t\t\t\t\t\tpadding: 3px 6px;\n\t\t\t\t\t\t\t\t\tborder-left: var(--fg-border);\n\t\t\t\t\t\t\t\t\tborder-right: var(--fg-border);\n\t\t\t\t\t\t\t\t\t&:first-of-type {\n\t\t\t\t\t\t\t\t\t\tborder-top: var(--fg-border);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t.summary {\n\t\t\t\t\t\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tsection.timeline_log {\n\t\t\t\theader {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t> main {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t\tflex-grow: 1;\n\t\t\t\t\t\t.gap {\n\t\t\t\t\t\t\tflex-grow: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tnav {\n\t\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\t\tflex-flow: row nowrap;\n\t\t\t\t\t\t\tgap: 5px;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t.timeline_update {\n\t\t\t\t\tpadding: 5px;\n\t\t\t\t\tborder-left: var(--fg-border);\n\t\t\t\t\th4 {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tfont-size: inherit;\n\t\t\t\t\t}\n\t\t\t\t\tmain {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t.node.atom_update {\n\t\t\t\t\t\t\tborder-left: var(--fg-border);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t.you_are_here {\n\t\t\t\t\tbackground: var(--fg-color);\n\t\t\t\t\tcolor: var(--bg-color);\n\t\t\t\t\ttext-align: center;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t> footer {\n\t\tz-index: 10000;\n\t\tdisplay: flex;\n\t\tjustify-content: flex-end;\n\t\tbutton {\n\t\t\tcursor: pointer;\n\t\t\tbackground: none;\n\t\t\tborder: none;\n\t\t\tpadding: none;\n\t\t\tposition: absolute;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\t}\n\n\t.json_editor {\n\t\tdisplay: flex;\n\t\tflex-flow: column;\n\t\t> header {\n\t\t\twidth: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-flow: row;\n\t\t\talign-items: center;\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\tjustify-content: space-between;\n\t\t\t&:has(> main > button.carat) {\n\t\t\t\theight: 21px;\n\t\t\t}\n\t\t\t> main {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-flow: row;\n\t\t\t\talign-items: center;\n\t\t\t\talign-self: center;\n\t\t\t\tflex-shrink: 1;\n\t\t\t\toverflow-x: hidden;\n\t\t\t\tpadding-right: 2px;\n\t\t\t\t> .json_viewer {\n\t\t\t\t\tflex-shrink: 1;\n\t\t\t\t\toverflow-x: scroll;\n\t\t\t\t\theight: 21px;\n\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tmargin-left: 0px;\n\t\t\t\t\tcolor: var(--fg-soft);\n\t\t\t\t}\n\t\t\t\t> button {\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\t&.carat {\n\t\t\t\t\t\tline-height: 0.5em;\n\t\t\t\t\t\tfont-size: 14px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t> .json_editor_array,\n\t\t> .json_editor_object {\n\t\t\twidth: 100%;\n\t\t\tflex-grow: 1;\n\t\t}\n\t\tinput {\n\t\t\tfont-family: theia, monospace;\n\t\t\tbackground: none;\n\t\t\t&:disabled {\n\t\t\t\tborder: none;\n\t\t\t}\n\t\t}\n\t\tinput,\n\t\tselect {\n\t\t\t&:focus-within {\n\t\t\t\toutline: 2px solid var(--fg-max);\n\t\t\t\tbackground: var(--bg-max);\n\t\t\t\tcolor: var(--fg-max);\n\t\t\t}\n\t\t}\n\n\t\tbutton:disabled {\n\t\t\tcursor: default;\n\t\t\t> span.json_editor_icon {\n\t\t\t\tcolor: var(--fg-hint);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\tbackground: none;\n\t\t\t}\n\t\t}\n\t\tinput::selection {\n\t\t\tbackground: var(--bg-accent);\n\t\t}\n\n\t\tbutton {\n\t\t\tbackground: none;\n\t\t\tcolor: #777;\n\t\t\tborder: none;\n\t\t\tfont-family: theia, monospace;\n\t\t\tfont-size: 14px;\n\t\t\theight: 21px;\n\t\t\tmin-width: 21px;\n\t\t\tmargin: none;\n\t\t\tpadding: 4px;\n\t\t\tpadding-bottom: 6px;\n\t\t\tcursor: pointer;\n\t\t\t&:hover,\n\t\t\t&:focus-within {\n\t\t\t\tbackground-color: var(--fg-faint);\n\t\t\t\t&,\n\t\t\t\t> * {\n\t\t\t\t\tcolor: var(--bg-color);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:active {\n\t\t\t\tbackground: var(--fg-color);\n\t\t\t\t&,\n\t\t\t\t> * {\n\t\t\t\t\tcolor: var(--bg-color);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tselect {\n\t\t\tfont-family: theia, monospace;\n\t\t\tfont-size: 14px;\n\t\t\tbackground: none;\n\t\t\tborder: none;\n\t\t\tcolor: #777;\n\t\t\t@media (prefers-color-scheme: light) {\n\t\t\t\tcolor: #999;\n\t\t\t}\n\t\t}\n\t\t.json_editor_unofficial {\n\t\t\tbackground-color: #777;\n\t\t\tbutton {\n\t\t\t\tcolor: #333;\n\t\t\t}\n\t\t}\n\t\t.json_editor_missing {\n\t\t\tbackground-color: #f055;\n\t\t}\n\t\t.json_editor_key {\n\t\t\tpadding-right: 0px;\n\t\t\t&::after {\n\t\t\t\tcontent: \":\";\n\t\t\t\tcolor: var(--fg-soft);\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tcolor: var(--fg-color);\n\t\t\t}\n\t\t}\n\t\t.json_editor_object,\n\t\t.json_editor_array {\n\t\t\tborder-left: var(--fg-border-soft);\n\t\t\tmargin-left: 9px;\n\t\t\twidth: calc(100% - 9px);\n\t\t\t> footer {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-flow: row;\n\t\t\t\tjustify-content: flex-start;\n\t\t\t\tjustify-items: flex-start;\n\t\t\t\theight: 21px;\n\t\t\t\talign-items: baseline;\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\t.json_editor_properties,\n\t\t\t.json_editor_elements {\n\t\t\t\tborder-top: var(--fg-border-soft);\n\t\t\t\t.json_editor_property,\n\t\t\t\t.json_editor_element {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tborder-bottom: var(--fg-border-soft);\n\t\t\t\t\tmargin-bottom: 0;\n\t\t\t\t\tmin-height: 21px;\n\t\t\t\t\t> header {\n\t\t\t\t\t\t> main {\n\t\t\t\t\t\t\t> span {\n\t\t\t\t\t\t\t\tinput {\n\t\t\t\t\t\t\t\t\tmin-width: 10px;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t> * {\n\t\t\t\t\t\t\t\t\tborder: var(--fg-border-hint);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&.readonly {\n\t\t\t\t\t.json_editor_property,\n\t\t\t\t\t.json_editor_element {\n\t\t\t\t\t\t&:last-of-type {\n\t\t\t\t\t\t\tborder-bottom: none;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tspan > * {\n\t\t\t\t\t\t\tborder: 1px solid transparent;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.json_editor_icon {\n\t\tcolor: var(--fg-soft);\n\t}\n\n\tbutton.carat {\n\t\tborder: none;\n\t\tcursor: pointer;\n\t\tbackground: none;\n\t\t> .json_editor_icon {\n\t\t\tline-height: 4px;\n\t\t}\n\t\t&.open {\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\t\t&:disabled {\n\t\t\t> .json_editor_icon {\n\t\t\t\tcursor: default;\n\t\t\t\tcolor: var(--fg-hint);\n\t\t\t}\n\t\t}\n\t}\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
package/dist/react-devtools/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useI, useO } from "../use-o-BrXc7Qro.js";
2
- import { IMPLICIT, actUponStore, arbitrary, become, createAtomFamily, createStandaloneAtom, createTransaction, findInStore, getFromStore } from "atom.io/internal";
2
+ import { IMPLICIT, actUponStore, arbitrary, become, createAtomFamily, createStandaloneAtom, createTransaction, disposeFromStore, findInStore, getFromStore } from "atom.io/internal";
3
3
  import { JSON_DEFAULTS, fromEntries, isJson, stringifyJson, toEntries } from "atom.io/json";
4
4
  import { redo, undo } from "atom.io";
5
5
  import { Component, Fragment, createContext, forwardRef, useContext, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
@@ -195,7 +195,7 @@ function attachDevtoolsStates(store) {
195
195
  effects: (key) => typeof window === `undefined` ? [] : [persistSync(window.localStorage, JSON, `view-is-open:${key.join()}`)]
196
196
  });
197
197
  const openCloseAllTX = createTransaction(store, {
198
- key: `openCloseMultiView`,
198
+ key: `🔍 Open Close All`,
199
199
  do: ({ get, set }, path, current) => {
200
200
  const currentView = get(devtoolsViewSelectionState);
201
201
  let states;
@@ -1037,7 +1037,7 @@ const StoreEditor = ({ token }) => {
1037
1037
 
1038
1038
  //#endregion
1039
1039
  //#region src/react-devtools/StateIndex.tsx
1040
- const StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
1040
+ const StateIndexLeafNode = ({ node, isOpenState, typeState, dispose }) => {
1041
1041
  const { openCloseAllTX, store } = useContext(DevtoolsContext);
1042
1042
  const setIsOpen = useI$1(isOpenState);
1043
1043
  const isOpen = useO$1(isOpenState);
@@ -1074,10 +1074,16 @@ const StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
1074
1074
  ]
1075
1075
  })
1076
1076
  ]
1077
- }), isPrimitive ? /* @__PURE__ */ jsx(StoreEditor, { token: node }) : /* @__PURE__ */ jsx("div", {
1077
+ }), /* @__PURE__ */ jsxs("footer", { children: [isPrimitive ? /* @__PURE__ */ jsx(StoreEditor, { token: node }) : /* @__PURE__ */ jsx("div", {
1078
1078
  className: "json_viewer",
1079
1079
  children: JSON.stringify(state)
1080
- })] }), isOpen && !isPrimitive ? /* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsx(StoreEditor, { token: node }) }) : null] });
1080
+ }), dispose ? /* @__PURE__ */ jsx(DEFAULT_JSON_EDITOR_COMPONENTS.Button, {
1081
+ onClick: () => {
1082
+ dispose?.();
1083
+ },
1084
+ testid: `${node.key}-dispose`,
1085
+ children: /* @__PURE__ */ jsx(DEFAULT_JSON_EDITOR_COMPONENTS.DeleteIcon, {})
1086
+ }) : null] })] }), isOpen && !isPrimitive ? /* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsx(StoreEditor, { token: node }) }) : null] });
1081
1087
  };
1082
1088
  const StateIndexTreeNode = ({ node, isOpenState }) => {
1083
1089
  const setIsOpen = useI$1(isOpenState);
@@ -1105,17 +1111,21 @@ const StateIndexTreeNode = ({ node, isOpenState }) => {
1105
1111
  ] }) }), isOpen ? [...node.familyMembers.entries()].map(([key, childNode]) => /* @__PURE__ */ jsx(StateIndexNode, {
1106
1112
  node: childNode,
1107
1113
  isOpenState: findInStore(store, viewIsOpenAtoms, [node.key, key]),
1108
- typeState: findInStore(store, typeSelectors, childNode.key)
1114
+ typeState: findInStore(store, typeSelectors, childNode.key),
1115
+ dispose: () => {
1116
+ disposeFromStore(store, childNode);
1117
+ }
1109
1118
  }, key)) : null] });
1110
1119
  };
1111
- const StateIndexNode = ({ node, isOpenState, typeState }) => {
1120
+ const StateIndexNode = ({ node, isOpenState, typeState, dispose }) => {
1112
1121
  return /* @__PURE__ */ jsx("section", {
1113
1122
  className: "node state",
1114
1123
  "data-testid": `state-${node.key}`,
1115
1124
  children: `type` in node ? /* @__PURE__ */ jsx(StateIndexLeafNode, {
1116
1125
  node,
1117
1126
  isOpenState,
1118
- typeState
1127
+ typeState,
1128
+ dispose
1119
1129
  }) : /* @__PURE__ */ jsx(StateIndexTreeNode, {
1120
1130
  node,
1121
1131
  isOpenState
@@ -1125,10 +1135,18 @@ const StateIndexNode = ({ node, isOpenState, typeState }) => {
1125
1135
  const StateIndex = ({ tokenIndex }) => {
1126
1136
  const tokenIds = useO$1(tokenIndex);
1127
1137
  const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
1138
+ const statesName = tokenIndex.key.includes(`Atom`) ? `atoms` : `selectors`;
1128
1139
  return /* @__PURE__ */ jsx("article", {
1129
1140
  className: "index state_index",
1130
1141
  "data-testid": "state-index",
1131
- children: [...tokenIds.entries()].map(([key, node]) => {
1142
+ children: tokenIds.size === 0 ? /* @__PURE__ */ jsxs("p", {
1143
+ className: "index-empty-state",
1144
+ children: [
1145
+ "(no ",
1146
+ statesName,
1147
+ ")"
1148
+ ]
1149
+ }) : [...tokenIds.entries()].map(([key, node]) => {
1132
1150
  return /* @__PURE__ */ jsx(StateIndexNode, {
1133
1151
  node,
1134
1152
  isOpenState: findInStore(store, viewIsOpenAtoms, [node.key]),
@@ -1339,7 +1357,10 @@ const TimelineIndex = () => {
1339
1357
  return /* @__PURE__ */ jsx("article", {
1340
1358
  className: "index timeline_index",
1341
1359
  "data-testid": "timeline-index",
1342
- children: tokenIds.filter((token) => !token.key.startsWith(`👁‍🗨`)).map((token) => {
1360
+ children: tokenIds.length === 0 ? /* @__PURE__ */ jsx("p", {
1361
+ className: "index-empty-state",
1362
+ children: "(no timelines)"
1363
+ }) : tokenIds.filter((token) => !token.key.startsWith(`👁‍🗨`)).map((token) => {
1343
1364
  return /* @__PURE__ */ jsx(TimelineLog, {
1344
1365
  token,
1345
1366
  isOpenState: findInStore(store, viewIsOpenAtoms, [token.key]),
@@ -1358,18 +1379,18 @@ const TransactionLog = ({ token, isOpenState, logState }) => {
1358
1379
  return /* @__PURE__ */ jsxs("section", {
1359
1380
  className: "node transaction_log",
1360
1381
  "data-testid": `transaction-${token.key}`,
1361
- children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx(button.OpenClose, {
1382
+ children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsxs("main", { children: [/* @__PURE__ */ jsx(button.OpenClose, {
1362
1383
  isOpen,
1363
1384
  testid: `open-close-transaction-${token.key}`,
1364
1385
  setIsOpen
1365
- }), /* @__PURE__ */ jsxs("main", { children: [/* @__PURE__ */ jsx("h2", { children: token.key }), /* @__PURE__ */ jsxs("span", {
1386
+ }), /* @__PURE__ */ jsx("h2", { children: token.key })] }), /* @__PURE__ */ jsxs("span", {
1366
1387
  className: "detail length",
1367
1388
  children: [
1368
1389
  "(",
1369
1390
  log.length,
1370
1391
  ")"
1371
1392
  ]
1372
- })] })] }), isOpen ? /* @__PURE__ */ jsx("main", { children: log.map((update, index) => /* @__PURE__ */ jsx(article.TransactionUpdate, {
1393
+ })] }), isOpen ? /* @__PURE__ */ jsx("main", { children: log.map((update, index) => /* @__PURE__ */ jsx(article.TransactionUpdate, {
1373
1394
  serialNumber: index,
1374
1395
  transactionUpdate: update
1375
1396
  }, update.key + index)) }) : null]
@@ -1381,7 +1402,10 @@ const TransactionIndex = () => {
1381
1402
  return /* @__PURE__ */ jsx("article", {
1382
1403
  className: "index transaction_index",
1383
1404
  "data-testid": "transaction-index",
1384
- children: tokenIds.filter((token) => !token.key.startsWith(`🔍`)).map((token) => {
1405
+ children: tokenIds.length === 0 ? /* @__PURE__ */ jsx("p", {
1406
+ className: "index-empty-state",
1407
+ children: "(no transactions)"
1408
+ }) : tokenIds.filter((token) => !token.key.startsWith(`🔍`)).map((token) => {
1385
1409
  return /* @__PURE__ */ jsx(TransactionLog, {
1386
1410
  token,
1387
1411
  isOpenState: findInStore(store, viewIsOpenAtoms, [token.key]),