atom.io 0.33.13 → 0.33.14

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 (37) 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.js +25 -23
  4. package/dist/internal/index.js.map +1 -1
  5. package/dist/introspection/index.d.ts +7 -7
  6. package/dist/introspection/index.d.ts.map +1 -1
  7. package/dist/introspection/index.js +26 -38
  8. package/dist/introspection/index.js.map +1 -1
  9. package/dist/json/index.js.map +1 -1
  10. package/dist/main/index.js +11 -11
  11. package/dist/main/index.js.map +1 -1
  12. package/dist/react/index.js.map +1 -1
  13. package/dist/react-devtools/index.css +110 -56
  14. package/dist/react-devtools/index.css.map +1 -1
  15. package/dist/react-devtools/index.js +38 -14
  16. package/dist/react-devtools/index.js.map +1 -1
  17. package/dist/realtime/index.js.map +1 -1
  18. package/dist/realtime-client/index.js.map +1 -1
  19. package/dist/realtime-react/index.js.map +1 -1
  20. package/dist/realtime-server/index.js.map +1 -1
  21. package/dist/realtime-testing/index.js.map +1 -1
  22. package/dist/transceivers/set-rtx/index.js.map +1 -1
  23. package/dist/use-o-BrXc7Qro.js.map +1 -1
  24. package/dist/web/index.js.map +1 -1
  25. package/package.json +6 -6
  26. package/src/internal/transaction/create-transaction.ts +9 -5
  27. package/src/introspection/attach-atom-index.ts +6 -15
  28. package/src/introspection/attach-introspection-states.ts +5 -5
  29. package/src/introspection/attach-selector-index.ts +78 -85
  30. package/src/introspection/attach-timeline-index.ts +5 -12
  31. package/src/introspection/attach-transaction-index.ts +18 -16
  32. package/src/introspection/auditor.ts +2 -3
  33. package/src/react-devtools/StateIndex.tsx +44 -20
  34. package/src/react-devtools/TimelineIndex.tsx +16 -12
  35. package/src/react-devtools/TransactionIndex.tsx +22 -18
  36. package/src/react-devtools/devtools.css +110 -56
  37. package/src/react-devtools/store.ts +1 -1
package/src/react-devtools/devtools.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/src/react-devtools/store.ts CHANGED
@@ -82,7 +82,7 @@ export function attachDevtoolsStates(
82
82
  > = createTransaction<
83
83
  (path: readonly (number | string)[], current?: boolean) => void
84
84
  >(store, {
85
- key: `openCloseMultiView`,
85
+ key: `🔍 Open Close All`,
86
86
  do: ({ get, set }, path, current) => {
87
87
  const currentView = get(devtoolsViewSelectionState)
88
88
  let states: