@contember/react-devbar 2.0.0-alpha.35 → 2.0.0-alpha.37

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 (23) hide show
  1. package/dist/development/src/ui/DevBar/DevBar.cjs +128 -174
  2. package/dist/development/src/ui/DevBar/DevBar.cjs.map +1 -1
  3. package/dist/development/src/ui/DevBar/DevBar.js +130 -176
  4. package/dist/development/src/ui/DevBar/DevBar.js.map +1 -1
  5. package/dist/development/src/ui/DevError/DevErrorList.cjs +3 -3
  6. package/dist/development/src/ui/DevError/DevErrorList.cjs.map +1 -1
  7. package/dist/development/src/ui/DevError/DevErrorList.js +3 -3
  8. package/dist/development/src/ui/DevError/DevErrorList.js.map +1 -1
  9. package/dist/production/src/ui/DevBar/DevBar.cjs +74 -112
  10. package/dist/production/src/ui/DevBar/DevBar.cjs.map +1 -1
  11. package/dist/production/src/ui/DevBar/DevBar.js +77 -115
  12. package/dist/production/src/ui/DevBar/DevBar.js.map +1 -1
  13. package/dist/production/src/ui/DevError/DevErrorList.cjs +3 -3
  14. package/dist/production/src/ui/DevError/DevErrorList.cjs.map +1 -1
  15. package/dist/production/src/ui/DevError/DevErrorList.js +3 -3
  16. package/dist/production/src/ui/DevError/DevErrorList.js.map +1 -1
  17. package/dist/types/tsconfig.tsbuildinfo +1 -1
  18. package/dist/types/ui/DevBar/DevBar.d.ts +5 -4
  19. package/dist/types/ui/DevBar/DevBar.d.ts.map +1 -1
  20. package/package.json +6 -3
  21. package/src/index.css +286 -231
  22. package/src/ui/DevBar/DevBar.tsx +72 -97
  23. package/src/ui/DevError/DevErrorList.tsx +3 -3
package/src/index.css CHANGED
@@ -1,393 +1,448 @@
1
1
  .cui-devBar {
2
- align-items: center;
3
- bottom: 0;
4
- display: flex;
5
- flex-direction: column;
6
- position: fixed;
7
- z-index: 1000;
8
- left: 0;
9
- right: 0;
10
- opacity: 1;
11
- padding: 1rem;
12
- transition-property: opacity, transform;
13
- transition-duration: 200ms;
14
- transition-timing-function: ease-in-out;
2
+ align-items: center;
3
+ bottom: 0;
4
+ display: flex;
5
+ flex-direction: column;
6
+ position: fixed;
7
+ z-index: 50;
8
+ left: 0;
9
+ right: 0;
10
+ opacity: 1;
11
+ padding: 1rem;
12
+ transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
15
13
  }
16
14
 
17
15
  .cui-devBar-content,
18
16
  .cui-devBar-panel-content {
19
- background: #eee;
20
- color: #002251;
17
+ background-color: hsl(0, 0%, 15%);
18
+ color: hsl(0, 0%, 90%);
21
19
  }
22
20
 
23
21
  .cui-devBar-content {
24
- align-self: center;
25
- align-items: center;
26
- border-radius: 1rem;
27
- box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
28
- display: flex;
29
- gap: 1rem;
30
- padding: 0.5rem;
31
- margin: 0 auto;
22
+ align-self: center;
23
+ align-items: center;
24
+ border-radius: 0.75rem;
25
+ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
26
+ display: flex;
27
+ gap: 0.75rem;
28
+ padding: 0.35rem;
29
+ margin: 0 auto;
30
+ border: 1px solid hsl(0 0 85);
32
31
  }
33
32
 
34
-
35
33
  .cui-devBar-close,
36
34
  .cui-devBar-trigger-label,
37
35
  .cui-devBar-brand {
38
- align-items: center;
39
- height: 2rem;
40
- border-radius: 0.5rem;
41
- justify-content: center;
42
- max-height: 2rem;
43
- min-height: 2rem;
44
- white-space: nowrap;
36
+ align-items: center;
37
+ height: 2.5rem;
38
+ border-radius: 0.5rem;
39
+ justify-content: center;
40
+ max-height: 2.5rem;
41
+ min-height: 2.5rem;
42
+ white-space: nowrap;
45
43
  }
46
44
 
47
45
  .cui-devBar-close {
48
- background: transparent;
49
- cursor: pointer;
50
- display: flex;
51
- max-width: 2rem;
52
- width: 2rem;
53
- order: 999;
46
+ background: transparent;
47
+ cursor: pointer;
48
+ display: flex;
49
+ max-width: 2.5rem;
50
+ width: 2.5rem;
51
+ order: 999;
52
+ transition: background-color 200ms;
54
53
  }
55
54
 
55
+ .cui-devBar-close:hover {
56
+ background-color: hsl(0 0 96);
57
+ }
56
58
 
57
59
  .cui-devBar-brand {
58
- align-items: center;
59
- display: flex;
60
- gap: 1rem;
61
- text-align: right;
60
+ align-items: center;
61
+ display: flex;
62
+ gap: 0.75rem;
63
+ text-align: right;
62
64
  }
63
65
 
64
- .cui-devBar-brand svg {
65
- max-height: 2rem;
66
+ .cui-devBar-trigger-label {
67
+ align-items: center;
68
+ color: inherit;
69
+ cursor: pointer;
70
+ display: inline-flex;
71
+ font-weight: 500;
72
+ gap: 0.3rem;
73
+ padding: 0 0.75rem;
74
+ transition: background-color 200ms;
66
75
  }
67
76
 
68
-
69
- .cui-devBar-panels {
70
- display: flex;
71
- gap: 1rem;
77
+ .cui-devBar-trigger-label:hover {
78
+ background-color: hsl(0, 0%, 3%);
72
79
  }
73
80
 
74
- .cui-devBar-trigger {
75
- display: flex;
81
+ .cui-devBar-panel-content {
82
+ background: hsl(0 0 100);
83
+ border: 1px solid hsl(0 0 85);
84
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
85
+ border-radius: 0.75rem;
86
+ display: flex;
87
+ min-width: min(20rem, 100%);
88
+ max-width: 100%;
89
+ flex-direction: column;
90
+ flex-shrink: 1;
76
91
  }
77
92
 
78
- .cui-devBar-trigger-label {
79
- align-items: center;
80
- color: inherit;
81
- cursor: pointer;
82
- display: inline-flex;
83
- font-weight: normal;
84
- gap: 0.3rem;
85
- padding: 0 0.2rem;
93
+ .cui-devBar-panel-content h2 {
94
+ font-weight: 600;
95
+ margin-bottom: 0;
96
+ border-radius: 0.75rem 0.75rem 0 0;
97
+ background: #f8f8f8;
86
98
  }
87
99
 
88
- .cui-devBar-trigger-label:hover {
89
- background-color: #e0e0e0;
100
+ .cui-devBar-panel-body {
101
+ border-top: 1px solid hsl(0 0 85);
102
+ display: flex;
103
+ flex-direction: column;
104
+ gap: 1rem;
105
+ padding: 1.25rem;
106
+ color: hsl(0 0 10);
90
107
  }
91
108
 
92
-
93
109
  .cui-devBar-panel {
94
- justify-content: center;
95
- display: flex;
96
- flex-direction: row;
97
- gap: 1rem;
98
- left: 0;
99
- position: absolute;
100
- right: 0;
101
- bottom: 0;
102
- padding: 2rem;
103
- transform: translateY(-1rem);
110
+ padding: 0;
111
+ border: none;
112
+ border-radius: 0.75rem;
113
+ background: transparent;
104
114
  }
105
115
 
106
- .cui-devBar-trigger:not([data-expanded]) > .cui-devBar-panel {
107
- display: none;
116
+ .cui-devBar-panel::backdrop {
117
+ background: hsl(0 0 100 / 0.8);
108
118
  }
109
119
 
110
- .cui-devBar-panel-content {
111
- background: #fff;
112
- border: 1px solid #ccc;
113
- box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
114
- border-radius: 0.5rem;
115
- display: flex;
116
- min-width: min(20rem, 100%);
117
- max-width: 100%;
118
- flex-direction: column;
119
- flex-shrink: 1;
120
+ .cui-devBar-panel[open] {
121
+ animation: dialog-show 150ms cubic-bezier(0.16, 1, 0.3, 1);
120
122
  }
121
123
 
122
- .cui-devBar-panel-content h2 {
123
- font-weight: bold;
124
- margin-bottom: 0;
125
- padding: 0.4rem 1rem;
126
- border-radius: 0.5rem 0.5rem 0 0;
127
- background: #f8f8f8;
124
+ .cui-devBar-panel-header {
125
+ display: flex;
126
+ justify-content: space-between;
127
+ align-items: center;
128
+ padding: 0.75rem 1rem;
129
+ background: #f8f8f8;
130
+ border-radius: 0.75rem 0.75rem 0 0;
131
+ border-bottom: 1px solid hsl(0 0 85);
132
+ color: hsl(0 0 10);
128
133
  }
129
134
 
130
- @media screen and (min-width: 768px) {
131
- .cui-devBar-trigger {
132
- position: relative;
133
- }
135
+ .cui-devBar-close-button {
136
+ padding: 0.25rem 0.5rem;
137
+ background: transparent;
138
+ border: none;
139
+ border-radius: 0.375rem;
140
+ cursor: pointer;
141
+ font-size: 1.25rem;
142
+ line-height: 1;
143
+ color: hsl(0 0 10);
144
+ transition: background-color 200ms;
145
+ }
134
146
 
135
- .cui-devBar-panel-content {
136
- min-width: unset;
137
- max-width: unset;
138
- }
147
+ .cui-devBar-close-button:hover {
148
+ background-color: hsl(0 0 90);
149
+ }
139
150
 
140
- .cui-devBar-panel-body {
141
- min-width: 20rem;
142
- }
151
+ @keyframes dialog-show {
152
+ from {
153
+ opacity: 0;
154
+ transform: translateY(10px);
155
+ }
156
+ to {
157
+ opacity: 1;
158
+ transform: translateY(0);
159
+ }
143
160
  }
144
161
 
145
- .cui-devBar-panel-body {
146
- border-top: 1px solid #ccc;
147
- display: flex;
148
- flex-direction: column;
149
- gap: 1rem;
150
- padding: 1rem;
162
+ /* Media Queries */
163
+ @media screen and (min-width: 768px) {
164
+ .cui-devBar-trigger {
165
+ position: relative;
166
+ }
167
+
168
+ .cui-devBar-panel-content {
169
+ min-width: unset;
170
+ max-width: unset;
171
+ }
172
+
173
+ .cui-devBar-panel-body {
174
+ min-width: 20rem;
175
+ }
151
176
  }
152
177
 
178
+ /* Hidden States */
153
179
  .cui-devBar:not([data-expanded]) {
154
- transform: translateY(2rem);
155
- opacity: 0;
156
- max-width: 5rem;
157
- margin: auto;
180
+ transform: translateY(2rem);
181
+ opacity: 0;
182
+ max-width: 5rem;
183
+ margin: auto;
158
184
  }
159
185
 
160
-
161
186
  .cui-devBar:not([data-expanded]):hover,
162
187
  .cui-devBar:not([data-expanded]):focus-within {
163
- transform: unset;
164
- opacity: unset;
188
+ transform: unset;
189
+ opacity: 1;
165
190
  }
166
191
 
167
192
  [id^="dev-bar-panel"]:not([data-expanded]) > * {
168
- display: none;
193
+ display: none;
169
194
  }
170
195
 
171
196
  .cui-devBar-panel .cui-table-wrapper {
172
- overflow: auto;
197
+ overflow: auto;
173
198
  }
174
199
 
175
200
 
201
+ /* Error styles */
176
202
  .cui-devError {
177
- position: fixed;
178
- top: 0;
179
- right: 0;
180
- bottom: 0;
181
- left: 0;
182
- width: 100vw;
183
- height: 100vh;
184
- z-index: 99;
185
- display: flex;
186
- justify-content: center;
187
- align-items: flex-start;
188
- background: rgba(212, 212, 212, 0.66);
189
- font-family: Poppins, Roboto, sans-serif;
203
+ position: fixed;
204
+ inset: 0;
205
+ width: 100vw;
206
+ height: 100vh;
207
+ z-index: 50;
208
+ display: flex;
209
+ justify-content: center;
210
+ align-items: flex-start;
211
+ background: rgba(212, 212, 212, 0.66);
212
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
190
213
  }
191
214
 
192
215
  .cui-devError-in {
193
- z-index: 100;
194
- width: 100%;
195
- height: 100%;
196
- color: #333;
197
- background: #222;
198
- box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.5);
199
- display: flex;
200
- flex-direction: column;
201
- overflow: hidden;
216
+ z-index: 51;
217
+ width: 100%;
218
+ height: 100%;
219
+ color: #333333;
220
+ background: #222222;
221
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
222
+ display: flex;
223
+ flex-direction: column;
224
+ overflow: hidden;
202
225
  }
203
226
 
204
- .cui-devError-content {
205
- overflow: auto;
227
+ .cui-devError-header {
228
+ position: sticky;
229
+ top: 0;
230
+ background: #cd1818;
231
+ color: #ffffff;
232
+ padding: 0.5em 1em;
233
+ border-bottom: 1px solid #980a0a;
206
234
  }
207
235
 
208
-
209
- .cui-devError-header {
210
- background: #CD1818;
211
- color: #FFF;
212
- padding: 0.5em 1em;
236
+ .cui-devError-content {
237
+ overflow: auto;
213
238
  }
214
239
 
215
240
  .cui-devError-errorMessage,
216
241
  .cui-devError-errorName,
217
242
  .cui-devError-errorDetails {
218
- margin: 0;
219
- flex: 0 0 auto;
220
- font-weight: 300;
221
- white-space: pre-wrap;
222
- overflow-wrap: break-word;
223
- line-height: 130%;
243
+ margin: 0;
244
+ flex: 0 0 auto;
245
+ font-weight: 400;
246
+ white-space: pre-wrap;
247
+ overflow-wrap: break-word;
248
+ line-height: 1.5;
224
249
  }
225
250
 
226
251
  .cui-devError-errorMessage {
227
- font-family: monospace;
228
- margin-top: 0.5em;
229
- font-size: 1.7em;
252
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
253
+ margin-top: 0.75rem;
254
+ font-size: 1.25rem;
230
255
  }
231
256
 
232
257
  .cui-devError-errorDetails {
233
- font-family: monospace;
234
- margin-top: 0.5em;
235
- font-size: 1em;
236
- white-space: pre;
258
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
259
+ margin-top: 0.75rem;
260
+ font-size: 0.875rem;
261
+ white-space: pre;
237
262
  }
238
263
 
239
264
  .cui-devError-causeLink {
240
- color: #FFCC00;
241
- text-decoration: underline;
265
+ color: #ffcc00;
266
+ text-decoration: underline;
267
+ text-underline-offset: 4px;
242
268
  }
243
269
 
244
270
  .cui-devError-stack {
245
- flex: 1 1 auto;
271
+ flex: 1 1 auto;
246
272
  }
247
273
 
248
274
  .cui-devError-stack-dump {
249
- color: #fff;
250
- margin-top: 1em;
251
- padding: 1em;
252
- white-space: pre-wrap;
275
+ color: #ffffff;
276
+ margin-top: 1rem;
277
+ padding: 1rem;
278
+ white-space: pre-wrap;
279
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
280
+ font-size: 0.875rem;
253
281
  }
254
282
 
255
283
  .cui-devError-bar {
256
- padding: 0.2em 0.2em 0.2em 1em;
257
- background: #ac1616;
258
- color: #eee;
259
- display: flex;
284
+ padding: 0.5rem 0.5rem 0.5rem 1rem;
285
+ background: #ac1616;
286
+ color: #eeeeee;
287
+ display: flex;
288
+ align-items: center;
260
289
  }
261
290
 
262
291
  .cui-devError-causedBy {
263
- padding: 0.2em 0.2em 0.2em 1em;
264
- background: #FFCC00;
265
- color: #000;
266
- display: flex;
292
+ padding: 0.5rem 0.5rem 0.5rem 1rem;
293
+ background: #ffcc00;
294
+ color: #000000;
295
+ display: flex;
296
+ align-items: center;
267
297
  }
268
298
 
269
299
  .cui-devError-actions {
270
- margin-left: auto;
271
- display: flex;
300
+ margin-left: auto;
301
+ display: flex;
302
+ gap: 0.5rem;
272
303
  }
273
304
 
274
305
  .cui-devError-actions .cui-button {
275
- color: #fff;
276
- border-color: #cbcbcb;
306
+ color: #ffffff;
307
+ border-color: #cbcbcb;
308
+ padding: 0.5rem 1rem;
309
+ border-radius: 0.375rem;
310
+ font-weight: 500;
311
+ transition: all 200ms;
277
312
  }
278
313
 
279
314
  .cui-devError-actions .cui-button:hover {
280
- color: #fff;
315
+ color: #ffffff;
281
316
  }
282
317
 
283
318
  .cui-devError-close {
284
- margin-left: 1em;
319
+ margin-left: 1rem;
285
320
  }
286
321
 
287
322
  .cui-devError-close .cui-button {
288
- border-color: transparent;
323
+ border-color: transparent;
289
324
  }
290
325
 
291
326
  .cui-devError-switcher {
292
- display: flex;
293
- align-items: center;
294
- margin-left: 2em;
327
+ display: flex;
328
+ align-items: center;
329
+ margin-left: 2rem;
330
+ gap: 0.75rem;
295
331
  }
296
332
 
297
-
298
333
  .cui-devError-switcherButtons {
299
- display: flex;
300
- align-items: center;
301
- gap: 0.5em;
334
+ display: flex;
335
+ align-items: center;
336
+ gap: 0.5rem;
302
337
  }
303
338
 
304
339
  .cui-devError-closeButton,
305
340
  .cui-devError-switcherButton {
306
- border: 1px solid #cbcbcb;
307
- border-radius: 0.2em;
308
- padding: 0.2em 0.5em;
341
+ border: 1px solid #cbcbcb;
342
+ border-radius: 0.375rem;
343
+ padding: 0.375rem 0.75rem;
344
+ font-size: 0.875rem;
345
+ font-weight: 500;
346
+ transition: all 200ms;
347
+ background: transparent;
309
348
  }
310
349
 
311
- .cui-devError-errorCount {
312
- margin: 0;
313
- margin-right: 0.5em;
350
+ .cui-devError-closeButton:hover,
351
+ .cui-devError-switcherButton:hover {
352
+ border-color: #910f0f;
353
+ background: #910f0f;
314
354
  }
315
355
 
316
- .cui-devError-stackFrame {
317
- font-family: monospace;
356
+ .cui-devError-errorCount {
357
+ margin: 0;
358
+ margin-right: 0.75rem;
359
+ font-weight: 500;
318
360
  }
319
361
 
320
- .cui-devError-stackFrame:last-child {
321
- border-bottom: 1px solid #666;
362
+ /* Stack Frame Styles */
363
+ .cui-devError-stackFrame {
364
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
365
+ border-bottom: 1px solid #666666;
322
366
  }
323
367
 
324
368
  .cui-devError-stackFrameHeader {
325
- display: flex;
326
- padding: 0.5em 1em;
327
- background: #333;
328
- color: #fff;
329
- border-bottom: 1px solid #666;
330
- border-top: 1px solid #666;
369
+ display: flex;
370
+ padding: 0.75rem 1rem;
371
+ background: #333333;
372
+ color: #ffffff;
373
+ border-bottom: 1px solid #666666;
331
374
  }
332
375
 
333
376
  .cui-devError-stackFrameSource {
334
- margin-left: 0.2em;
377
+ margin-left: 0.5rem;
378
+ color: hsl(0, 0%, 88%);
335
379
  }
336
380
 
337
381
  .cui-devError-stackFrameCallee {
338
- margin-left: 1em;
339
- color: #a4ffa4;
382
+ margin-left: 1rem;
383
+ color: #a4ffa4
340
384
  }
341
385
 
342
386
  .cui-devError-stackFrameCode {
343
- background: #222;
344
- color: #D5D5D5;
387
+ background: #222222;
388
+ color: #d5d5d5;
345
389
  }
346
390
 
347
391
  .cui-devError-stackFrameLine {
348
- display: flex;
392
+ display: flex;
393
+ transition: all 200ms;
349
394
  }
350
395
 
351
396
  .cui-devError-stackFrameLine.is-active {
352
- color: #fff;
353
- background: #CD1818;
397
+ color: hsl(0, 0%, 100%);
398
+ background: hsl(0, 79%, 45%);
354
399
  }
355
400
 
356
401
  .cui-devError-stackFrameLine.is-active .cui-devError-stackFrameLineNumber {
357
- color: #fff;
402
+ color: hsl(0, 0%, 100%);
358
403
  }
359
404
 
360
405
  .cui-devError-stackFrameLineNumber {
361
- color: #888;
362
- flex: 0 0 50px;
363
- text-align: right;
364
- padding: 0.2em;
406
+ color: hsl(0, 0%, 53%);
407
+ flex: 0 0 50px;
408
+ text-align: right;
409
+ padding: 0.375rem;
410
+ user-select: none;
365
411
  }
366
412
 
367
413
  .cui-devError-stackFrameLineCode {
368
- padding: 0.2em 1em;
369
- white-space: pre-wrap;
370
- tab-size: 4;
414
+ padding: 0.375rem 1rem;
415
+ white-space: pre-wrap;
416
+ tab-size: 4;
371
417
  }
372
418
 
419
+ /* Error Badge Styles */
420
+ .cui-devErrorBadge {
421
+ position: fixed;
422
+ bottom: 1.25rem;
423
+ left: 1.25rem;
424
+ z-index: 50;
425
+ }
373
426
 
374
- :where(.cui-devErrorBadge) {
375
- position: fixed;
376
- bottom: 20px;
377
- left: 20px;
427
+ .cui-devErrorBadge-button {
428
+ display: inline-flex;
429
+ align-items: center;
430
+ background: hsl(0, 79%, 45%);
431
+ color: hsl(0, 0%, 100%);
432
+ font-weight: 600;
433
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
434
+ border-radius: 0.75rem;
435
+ padding: 0.75rem 1.5rem;
436
+ cursor: pointer;
437
+ transition: all 200ms;
378
438
  }
379
439
 
380
- :where(.cui-devErrorBadge-button) {
381
- display: block;
382
- background: #CD1818;
383
- color: #fff;
384
- font-weight: 600;
385
- box-shadow: 3px 3px 7px rgba(50, 50, 50, 0.5);
386
- border-radius: 10px;
387
- padding: 1em 2em;
388
- cursor: pointer;
440
+ .cui-devErrorBadge-button:hover {
441
+ background: hsl(0, 79%, 45%);
442
+ color: hsl(0, 0%, 100%);
443
+ transform: translateY(-1px);
389
444
  }
390
445
 
391
446
  .cui-devError-body {
392
- overflow: hidden;
447
+ overflow: hidden;
393
448
  }