@rozenite/vite-plugin 1.11.0 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/package.json +2 -1
  2. package/src/bundle-dts.ts +125 -0
  3. package/src/client-plugin.ts +392 -0
  4. package/src/dev-config-module.ts +29 -0
  5. package/src/dev-host/App.tsx +567 -0
  6. package/src/dev-host/components/DispatchForm.tsx +169 -0
  7. package/src/dev-host/components/FlowList.tsx +142 -0
  8. package/src/dev-host/components/MessageDetailsPane.tsx +109 -0
  9. package/src/dev-host/components/MessageLogPane.tsx +84 -0
  10. package/src/dev-host/components/MessagePayloadDetail.tsx +32 -0
  11. package/src/dev-host/components/PanelTabs.tsx +22 -0
  12. package/src/dev-host/components/ResizeHandle.tsx +33 -0
  13. package/src/dev-host/components/icons.tsx +79 -0
  14. package/src/dev-host/components/ui/Button.tsx +91 -0
  15. package/src/dev-host/components/ui/DropdownMenu.tsx +84 -0
  16. package/src/dev-host/components/ui/IconButton.tsx +41 -0
  17. package/src/dev-host/components/ui/Input.tsx +73 -0
  18. package/src/dev-host/components/ui/ScrollArea.tsx +20 -0
  19. package/src/dev-host/components/ui/Tabs.tsx +166 -0
  20. package/src/dev-host/components/ui/Textarea.tsx +79 -0
  21. package/src/dev-host/components/ui/ToggleGroup.tsx +120 -0
  22. package/src/dev-host/config.ts +107 -0
  23. package/src/dev-host/constants.ts +31 -0
  24. package/src/dev-host/flow-runtime.ts +297 -0
  25. package/src/dev-host/index.html +12 -0
  26. package/src/dev-host/main.tsx +31 -0
  27. package/src/dev-host/server.ts +55 -0
  28. package/src/dev-host/styles.css +969 -0
  29. package/src/dev-host/types.ts +61 -0
  30. package/src/dev-host/utils.ts +96 -0
  31. package/src/dev-host/vite.config.mts +20 -0
  32. package/src/index.ts +114 -0
  33. package/src/load-config.ts +117 -0
  34. package/src/package-json.ts +16 -0
  35. package/src/react-native-plugin.ts +49 -0
  36. package/src/require-plugin.ts +221 -0
  37. package/src/sdk-plugin.ts +44 -0
  38. package/src/server-plugin.ts +36 -0
  39. package/src/utils.ts +31 -0
  40. package/src/virtual-modules.d.ts +7 -0
@@ -0,0 +1,969 @@
1
+ :root {
2
+ color-scheme: dark;
3
+ font-family: "Switzer Variable", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
4
+ background: #000000;
5
+ color: #ffffff;
6
+ }
7
+
8
+ * {
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ html,
13
+ body,
14
+ #root {
15
+ height: 100%;
16
+ margin: 0;
17
+ }
18
+
19
+ body {
20
+ overflow: hidden;
21
+ background: #000000;
22
+ }
23
+
24
+ button,
25
+ input,
26
+ textarea,
27
+ select {
28
+ font: inherit;
29
+ }
30
+
31
+ .rz-shell {
32
+ display: flex;
33
+ height: 100dvh;
34
+ flex-direction: column;
35
+ overflow: hidden;
36
+ background: #000000;
37
+ }
38
+
39
+ .rz-topbar {
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: space-between;
43
+ gap: 16px;
44
+ min-height: 52px;
45
+ padding: 10px 14px;
46
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
47
+ overflow: hidden;
48
+ background: #0a0a0a;
49
+ }
50
+
51
+ .rz-topbar-brand {
52
+ display: inline-flex;
53
+ align-items: center;
54
+ flex: 0 0 auto;
55
+ }
56
+
57
+ .rz-topbar-brand svg {
58
+ display: block;
59
+ width: auto;
60
+ height: 20px;
61
+ }
62
+
63
+ .rz-topbar-panel-picker {
64
+ display: flex;
65
+ align-items: center;
66
+ min-width: 0;
67
+ justify-content: flex-end;
68
+ }
69
+
70
+ .rz-workspace {
71
+ flex: 1;
72
+ min-height: 0;
73
+ display: grid;
74
+ grid-template-rows: minmax(0, 1fr) 12px minmax(180px, var(--rz-devtools-height, 288px));
75
+ overflow: hidden;
76
+ }
77
+
78
+ .rz-card {
79
+ min-height: 0;
80
+ overflow: hidden;
81
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
82
+ }
83
+
84
+ .rz-card:first-child {
85
+ border-top: 0;
86
+ }
87
+
88
+ .rz-iframe {
89
+ display: block;
90
+ width: 100%;
91
+ height: 100%;
92
+ border: 0;
93
+ background: #ffffff;
94
+ }
95
+
96
+ .rz-iframe[data-resizing='true'] {
97
+ pointer-events: none;
98
+ }
99
+
100
+ .rz-devtools {
101
+ display: grid;
102
+ min-height: 0;
103
+ grid-template-columns: minmax(0, 1fr) var(--rz-command-splitter-width, 6px) minmax(260px, var(--rz-command-width, 320px));
104
+ }
105
+
106
+ .rz-devtools-mobile {
107
+ display: flex;
108
+ min-height: 0;
109
+ height: 100%;
110
+ width: 100%;
111
+ overflow: hidden;
112
+ }
113
+
114
+ .rz-log-workspace {
115
+ display: grid;
116
+ min-height: 0;
117
+ position: relative;
118
+ grid-template-columns: minmax(0, 1fr) var(--rz-details-splitter-width, 0px) var(--rz-details-width, 0px);
119
+ }
120
+
121
+ .rz-resize-handle {
122
+ position: relative;
123
+ cursor: row-resize;
124
+ background: #0a0a0a;
125
+ user-select: none;
126
+ touch-action: none;
127
+ }
128
+
129
+ .rz-resize-handle::before {
130
+ content: '';
131
+ position: absolute;
132
+ top: 50%;
133
+ left: 50%;
134
+ width: 72px;
135
+ height: 2px;
136
+ border-radius: 999px;
137
+ background: rgba(255, 255, 255, 0.2);
138
+ transform: translate(-50%, -50%);
139
+ }
140
+
141
+ .rz-resize-handle::after {
142
+ content: '';
143
+ position: absolute;
144
+ inset: 0;
145
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
146
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
147
+ }
148
+
149
+ .rz-resize-handle[data-dragging='true']::before,
150
+ .rz-resize-handle:hover::before {
151
+ background: #ffffff;
152
+ }
153
+
154
+ .rz-column-resize-handle {
155
+ position: relative;
156
+ width: 6px;
157
+ min-width: 6px;
158
+ cursor: col-resize;
159
+ background: #0a0a0a;
160
+ user-select: none;
161
+ touch-action: none;
162
+ }
163
+
164
+ .rz-column-resize-handle::before {
165
+ content: '';
166
+ position: absolute;
167
+ top: 50%;
168
+ left: 50%;
169
+ width: 2px;
170
+ height: 72px;
171
+ border-radius: 999px;
172
+ background: rgba(255, 255, 255, 0.2);
173
+ transform: translate(-50%, -50%);
174
+ }
175
+
176
+ .rz-column-resize-handle::after {
177
+ content: '';
178
+ position: absolute;
179
+ inset: 0;
180
+ border-left: 1px solid rgba(255, 255, 255, 0.08);
181
+ border-right: 1px solid rgba(255, 255, 255, 0.08);
182
+ }
183
+
184
+ .rz-column-resize-handle[data-dragging='true']::before,
185
+ .rz-column-resize-handle:hover::before {
186
+ background: #ffffff;
187
+ }
188
+
189
+ .rz-column-resize-handle[data-dragging='true']::after,
190
+ .rz-column-resize-handle:hover::after {
191
+ border-left-color: rgba(255, 255, 255, 0.08);
192
+ border-right-color: rgba(255, 255, 255, 0.08);
193
+ }
194
+
195
+ .rz-pane {
196
+ display: flex;
197
+ flex-direction: column;
198
+ min-height: 0;
199
+ overflow: hidden;
200
+ }
201
+
202
+ .rz-pane + .rz-pane {
203
+ border-left: 1px solid rgba(255, 255, 255, 0.08);
204
+ }
205
+
206
+ .rz-pane[data-hidden='true'],
207
+ .rz-column-resize-handle[data-hidden='true'] {
208
+ display: none;
209
+ }
210
+
211
+ .rz-devtools-mobile-tabs {
212
+ display: grid;
213
+ grid-template-rows: auto minmax(0, 1fr);
214
+ gap: 8px;
215
+ min-height: 0;
216
+ height: 100%;
217
+ width: 100%;
218
+ padding-top: 8px;
219
+ }
220
+
221
+ .rz-devtools-mobile-toggle {
222
+ display: flex;
223
+ align-items: flex-start;
224
+ padding: 0 8px;
225
+ }
226
+
227
+ .rz-devtools-mobile-panel {
228
+ display: flex;
229
+ min-height: 0;
230
+ width: 100%;
231
+ overflow: hidden;
232
+ }
233
+
234
+ .rz-devtools-mobile-panel > .rz-pane {
235
+ flex: 1;
236
+ width: 100%;
237
+ }
238
+
239
+ .rz-tabs-root {
240
+ width: 100%;
241
+ min-width: 0;
242
+ }
243
+
244
+ .rz-tabs-list {
245
+ display: inline-flex;
246
+ min-height: 26px;
247
+ max-width: 100%;
248
+ align-items: center;
249
+ gap: 2px;
250
+ overflow: auto hidden;
251
+ border: 1px solid rgba(255, 255, 255, 0.08);
252
+ border-radius: 4px;
253
+ background: rgba(255, 255, 255, 0.04);
254
+ padding: 2px;
255
+ scrollbar-width: none;
256
+ }
257
+
258
+ .rz-tabs-list::-webkit-scrollbar {
259
+ display: none;
260
+ }
261
+
262
+ .rz-tabs-trigger {
263
+ display: inline-flex;
264
+ align-items: center;
265
+ justify-content: center;
266
+ white-space: nowrap;
267
+ border: 0;
268
+ border-radius: 2px;
269
+ background: transparent;
270
+ min-height: 22px;
271
+ padding: 3px 9px;
272
+ color: rgba(255, 255, 255, 0.6);
273
+ font-size: 12px;
274
+ font-weight: 500;
275
+ line-height: 1.2;
276
+ letter-spacing: 0;
277
+ transition: background-color 120ms ease, color 120ms ease;
278
+ }
279
+
280
+ .rz-tabs-trigger:hover {
281
+ color: #ffffff;
282
+ }
283
+
284
+ .rz-tabs-trigger[data-state='active'] {
285
+ background: #ffffff;
286
+ color: #000000;
287
+ }
288
+
289
+ .rz-tabs-trigger:focus-visible,
290
+ .rz-input:focus-visible,
291
+ .rz-textarea:focus-visible,
292
+ .rz-sidebar-close:focus-visible {
293
+ outline: 2px solid rgba(130, 50, 255, 0.95);
294
+ outline-offset: -2px;
295
+ }
296
+
297
+ .rz-scroll-area {
298
+ position: relative;
299
+ height: 100%;
300
+ width: 100%;
301
+ overflow: hidden;
302
+ }
303
+
304
+ .rz-scroll-viewport {
305
+ height: 100%;
306
+ width: 100%;
307
+ overflow-y: auto;
308
+ overflow-x: hidden;
309
+ scrollbar-width: thin;
310
+ scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
311
+ }
312
+
313
+ .rz-scroll-viewport::-webkit-scrollbar {
314
+ width: 12px;
315
+ }
316
+
317
+ .rz-scroll-viewport::-webkit-scrollbar-track {
318
+ background: transparent;
319
+ }
320
+
321
+ .rz-scroll-viewport::-webkit-scrollbar-thumb {
322
+ border: 3px solid transparent;
323
+ border-radius: 999px;
324
+ background: rgba(255, 255, 255, 0.18);
325
+ background-clip: padding-box;
326
+ }
327
+
328
+ .rz-message-list {
329
+ min-width: 100%;
330
+ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
331
+ }
332
+
333
+ .rz-log-pane {
334
+ display: grid;
335
+ grid-template-rows: auto minmax(0, 1fr);
336
+ min-height: 0;
337
+ background: #050505;
338
+ }
339
+
340
+ .rz-message-list-header,
341
+ .rz-message-row {
342
+ display: grid;
343
+ grid-template-columns: 40px 168px minmax(120px, 180px) minmax(0, 1fr);
344
+ gap: 0;
345
+ align-items: center;
346
+ }
347
+
348
+ .rz-message-list-header {
349
+ position: sticky;
350
+ top: 0;
351
+ z-index: 1;
352
+ background: #0a0a0a;
353
+ color: rgba(255, 255, 255, 0.4);
354
+ font-size: 11px;
355
+ line-height: 16px;
356
+ letter-spacing: 0.06em;
357
+ text-transform: uppercase;
358
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
359
+ }
360
+
361
+ .rz-message-header-cell,
362
+ .rz-message-cell {
363
+ min-width: 0;
364
+ padding: 8px 12px;
365
+ }
366
+
367
+ .rz-message-header-cell:first-child,
368
+ .rz-message-cell:first-child {
369
+ text-align: center;
370
+ }
371
+
372
+ .rz-message-header-cell + .rz-message-header-cell,
373
+ .rz-message-cell + .rz-message-cell {
374
+ border-left: 1px solid rgba(255, 255, 255, 0.04);
375
+ }
376
+
377
+ .rz-message-row {
378
+ width: 100%;
379
+ border: 0;
380
+ background: transparent;
381
+ color: inherit;
382
+ text-align: left;
383
+ padding: 0;
384
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
385
+ cursor: pointer;
386
+ transition: background-color 120ms ease, box-shadow 120ms ease;
387
+ }
388
+
389
+ .rz-message-row:last-child {
390
+ border-bottom: 0;
391
+ }
392
+
393
+ .rz-message-row:hover {
394
+ background: rgba(255, 255, 255, 0.035);
395
+ }
396
+
397
+ .rz-message-row[data-selected='true'] {
398
+ background: rgba(59, 130, 246, 0.14);
399
+ box-shadow: inset 2px 0 0 #4da3ff;
400
+ }
401
+
402
+ .rz-message-direction {
403
+ display: flex;
404
+ align-items: center;
405
+ justify-content: center;
406
+ color: rgba(255, 255, 255, 0.7);
407
+ font-size: 12px;
408
+ line-height: 18px;
409
+ }
410
+
411
+ .rz-message-arrow {
412
+ display: inline-flex;
413
+ width: 16px;
414
+ justify-content: center;
415
+ font-size: 14px;
416
+ font-weight: 700;
417
+ }
418
+
419
+ .rz-message-dir-in .rz-message-arrow {
420
+ color: #22c55e;
421
+ }
422
+
423
+ .rz-message-dir-out .rz-message-arrow {
424
+ color: #f59e0b;
425
+ }
426
+
427
+ .rz-message-type {
428
+ overflow: hidden;
429
+ text-overflow: ellipsis;
430
+ white-space: nowrap;
431
+ color: rgba(255, 255, 255, 0.92);
432
+ font-size: 12px;
433
+ font-weight: 500;
434
+ line-height: 18px;
435
+ }
436
+
437
+ .rz-message-date {
438
+ overflow: hidden;
439
+ text-overflow: ellipsis;
440
+ white-space: nowrap;
441
+ color: rgba(255, 255, 255, 0.52);
442
+ font-size: 12px;
443
+ line-height: 18px;
444
+ }
445
+
446
+ .rz-message-preview {
447
+ margin: 0;
448
+ overflow: hidden;
449
+ text-overflow: ellipsis;
450
+ white-space: nowrap;
451
+ color: rgba(255, 255, 255, 0.52);
452
+ font-size: 12px;
453
+ line-height: 18px;
454
+ }
455
+
456
+ .rz-sidebar {
457
+ display: grid;
458
+ grid-template-rows: auto minmax(0, 1fr);
459
+ min-height: 0;
460
+ background: #050505;
461
+ flex-grow: 1;
462
+ }
463
+
464
+ .rz-message-detail {
465
+ display: flex;
466
+ flex-direction: column;
467
+ gap: 16px;
468
+ padding: 16px;
469
+ min-height: 100%;
470
+ }
471
+
472
+ .rz-sidebar-header {
473
+ display: flex;
474
+ align-items: center;
475
+ justify-content: space-between;
476
+ gap: 12px;
477
+ min-height: 53px;
478
+ padding: 12px 16px;
479
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
480
+ background: rgba(255, 255, 255, 0.02);
481
+ }
482
+
483
+ .rz-sidebar-scroll {
484
+ min-height: 0;
485
+ }
486
+
487
+ .rz-sidebar-scroll > .rz-scroll-viewport > * {
488
+ min-height: 100%;
489
+ }
490
+
491
+ .rz-sidebar-title {
492
+ color: rgba(255, 255, 255, 0.88);
493
+ font-size: 12px;
494
+ font-weight: 600;
495
+ line-height: 18px;
496
+ letter-spacing: 0.04em;
497
+ text-transform: uppercase;
498
+ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
499
+ }
500
+
501
+ .rz-header-actions {
502
+ display: flex;
503
+ align-items: center;
504
+ gap: 8px;
505
+ }
506
+
507
+ .rz-sidebar-close {
508
+ display: inline-flex;
509
+ align-items: center;
510
+ justify-content: center;
511
+ width: 28px;
512
+ height: 28px;
513
+ border: 0;
514
+ border-radius: 4px;
515
+ background: transparent;
516
+ color: rgba(255, 255, 255, 0.56);
517
+ cursor: pointer;
518
+ }
519
+
520
+ .rz-sidebar-close:hover {
521
+ background: rgba(255, 255, 255, 0.06);
522
+ color: #ffffff;
523
+ }
524
+
525
+ .rz-sidebar-close:disabled {
526
+ cursor: default;
527
+ opacity: 0.4;
528
+ }
529
+
530
+ .rz-sidebar-close:disabled:hover {
531
+ background: transparent;
532
+ color: rgba(255, 255, 255, 0.56);
533
+ }
534
+
535
+ .rz-sidebar-action-primary {
536
+ background: #ffffff;
537
+ color: #000000;
538
+ }
539
+
540
+ .rz-sidebar-action-primary:hover {
541
+ background: rgba(255, 255, 255, 0.88);
542
+ color: #000000;
543
+ }
544
+
545
+ .rz-sidebar-action-primary:disabled:hover {
546
+ background: #ffffff;
547
+ color: #000000;
548
+ }
549
+
550
+ .rz-detail-section {
551
+ display: grid;
552
+ align-content: start;
553
+ gap: 8px;
554
+ min-width: 0;
555
+ }
556
+
557
+ .rz-detail-section:last-child {
558
+ }
559
+
560
+ .rz-detail-value {
561
+ min-width: 0;
562
+ border: 1px solid rgba(255, 255, 255, 0.08);
563
+ border-radius: 4px;
564
+ background: rgba(255, 255, 255, 0.03);
565
+ padding: 10px 12px;
566
+ color: rgba(255, 255, 255, 0.9);
567
+ font-size: 13px;
568
+ line-height: 1.5;
569
+ letter-spacing: -0.02em;
570
+ }
571
+
572
+ .rz-detail-mono {
573
+ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
574
+ font-size: 12px;
575
+ line-height: 1.5;
576
+ }
577
+
578
+ .rz-detail-payload {
579
+ display: flex;
580
+ border: 1px solid rgba(255, 255, 255, 0.08);
581
+ border-radius: 4px;
582
+ background: rgba(255, 255, 255, 0.03);
583
+ padding: 12px;
584
+ }
585
+
586
+ .rz-detail-pre {
587
+ margin: 0;
588
+ white-space: pre-wrap;
589
+ word-break: break-word;
590
+ }
591
+
592
+ .rz-detail-json-tree {
593
+ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
594
+ font-size: 12px;
595
+ line-height: 1.5;
596
+ }
597
+
598
+ .rz-detail-json-tree ul,
599
+ .rz-detail-json-tree li,
600
+ .rz-detail-json-tree label,
601
+ .rz-detail-json-tree span {
602
+ font-size: inherit;
603
+ }
604
+
605
+ .rz-command-form {
606
+ display: flex;
607
+ flex-direction: column;
608
+ gap: 12px;
609
+ padding: 16px;
610
+ min-height: 100%;
611
+ }
612
+
613
+ .rz-action-tabs {
614
+ min-height: 100%;
615
+ }
616
+
617
+ .rz-action-tabs-header {
618
+ display: flex;
619
+ align-items: center;
620
+ justify-content: space-between;
621
+ gap: 12px;
622
+ }
623
+
624
+ .rz-action-tab-panel {
625
+ min-height: 0;
626
+ }
627
+
628
+ .rz-action-form {
629
+ display: flex;
630
+ flex-direction: column;
631
+ gap: 12px;
632
+ min-height: 100%;
633
+ }
634
+
635
+ .rz-field {
636
+ display: grid;
637
+ gap: 6px;
638
+ }
639
+
640
+ .rz-template-list {
641
+ display: flex;
642
+ flex-wrap: wrap;
643
+ gap: 8px;
644
+ }
645
+
646
+ .rz-preset-menu {
647
+ position: relative;
648
+ }
649
+
650
+ .rz-preset-icon-button {
651
+ display: flex;
652
+ align-items: center;
653
+ justify-content: center;
654
+ width: 28px;
655
+ height: 28px;
656
+ padding: 0;
657
+ border: 1px solid rgba(255, 255, 255, 0.08);
658
+ border-radius: 6px;
659
+ background: rgba(255, 255, 255, 0.04);
660
+ color: rgba(255, 255, 255, 0.88);
661
+ cursor: pointer;
662
+ flex-shrink: 0;
663
+ }
664
+
665
+ .rz-preset-icon-button:hover {
666
+ background: rgba(255, 255, 255, 0.08);
667
+ color: #ffffff;
668
+ }
669
+
670
+ .rz-baseui-preset-menu {
671
+ min-width: 220px;
672
+ max-width: min(320px, calc(100vw - 24px));
673
+ }
674
+
675
+ .rz-template-button {
676
+ border: 1px solid rgba(255, 255, 255, 0.08);
677
+ border-radius: 999px;
678
+ background: rgba(255, 255, 255, 0.04);
679
+ color: rgba(255, 255, 255, 0.86);
680
+ padding: 6px 10px;
681
+ font-size: 12px;
682
+ line-height: 1.4;
683
+ cursor: pointer;
684
+ }
685
+
686
+ .rz-template-button:hover {
687
+ background: rgba(255, 255, 255, 0.1);
688
+ color: #ffffff;
689
+ }
690
+
691
+ .rz-template-button:focus-visible {
692
+ outline: 2px solid rgba(130, 50, 255, 0.95);
693
+ outline-offset: 1px;
694
+ }
695
+
696
+ .rz-template-button:disabled {
697
+ cursor: default;
698
+ opacity: 0.4;
699
+ }
700
+
701
+ .rz-template-button[data-active='true'] {
702
+ background: rgba(130, 50, 255, 0.18);
703
+ border-color: rgba(130, 50, 255, 0.5);
704
+ color: #ffffff;
705
+ }
706
+
707
+ .rz-flow-panel {
708
+ display: grid;
709
+ gap: 16px;
710
+ }
711
+
712
+ .rz-flow-list {
713
+ display: grid;
714
+ gap: 8px;
715
+ }
716
+
717
+ .rz-flow-list-button {
718
+ display: flex;
719
+ align-items: center;
720
+ justify-content: space-between;
721
+ gap: 12px;
722
+ width: 100%;
723
+ border: 1px solid rgba(255, 255, 255, 0.08);
724
+ border-radius: 8px;
725
+ background: rgba(255, 255, 255, 0.03);
726
+ color: rgba(255, 255, 255, 0.88);
727
+ padding: 10px 12px;
728
+ text-align: left;
729
+ cursor: pointer;
730
+ }
731
+
732
+ .rz-flow-list-button:hover {
733
+ background: rgba(255, 255, 255, 0.06);
734
+ color: #ffffff;
735
+ }
736
+
737
+ .rz-flow-list-button:focus-visible {
738
+ outline: 2px solid rgba(130, 50, 255, 0.95);
739
+ outline-offset: 1px;
740
+ }
741
+
742
+ .rz-flow-list-button:disabled {
743
+ cursor: default;
744
+ opacity: 0.4;
745
+ }
746
+
747
+ .rz-flow-list-button[data-active='true'] {
748
+ background: rgba(130, 50, 255, 0.14);
749
+ border-color: rgba(130, 50, 255, 0.45);
750
+ }
751
+
752
+ .rz-flow-list-name {
753
+ display: inline-flex;
754
+ align-items: center;
755
+ gap: 6px;
756
+ font-size: 13px;
757
+ line-height: 1.4;
758
+ }
759
+
760
+ .rz-flow-list-badge,
761
+ .rz-flow-state-badge {
762
+ display: inline-flex;
763
+ align-items: center;
764
+ justify-content: center;
765
+ min-height: 18px;
766
+ padding: 0 6px;
767
+ border-radius: 999px;
768
+ background: rgba(130, 50, 255, 0.16);
769
+ color: #c9a9ff;
770
+ font-size: 10px;
771
+ line-height: 1;
772
+ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
773
+ text-transform: uppercase;
774
+ }
775
+
776
+ .rz-flow-list-action {
777
+ color: rgba(255, 255, 255, 0.56);
778
+ font-size: 11px;
779
+ line-height: 1.4;
780
+ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
781
+ text-transform: uppercase;
782
+ }
783
+
784
+ .rz-flow-empty-state {
785
+ border: 1px dashed rgba(255, 255, 255, 0.12);
786
+ border-radius: 8px;
787
+ padding: 12px;
788
+ color: rgba(255, 255, 255, 0.6);
789
+ font-size: 13px;
790
+ line-height: 1.5;
791
+ }
792
+
793
+ .rz-flow-runs {
794
+ display: grid;
795
+ gap: 12px;
796
+ }
797
+
798
+ .rz-flow-state {
799
+ display: grid;
800
+ gap: 8px;
801
+ padding: 12px;
802
+ border: 1px solid rgba(255, 255, 255, 0.08);
803
+ border-radius: 8px;
804
+ background: rgba(255, 255, 255, 0.03);
805
+ }
806
+
807
+ .rz-flow-state[data-status='running'] {
808
+ border-color: rgba(130, 50, 255, 0.45);
809
+ }
810
+
811
+ .rz-flow-state[data-status='failed'] {
812
+ border-color: rgba(255, 120, 120, 0.4);
813
+ }
814
+
815
+ .rz-flow-state-header {
816
+ display: flex;
817
+ align-items: center;
818
+ justify-content: space-between;
819
+ gap: 8px;
820
+ }
821
+
822
+ .rz-flow-state-title {
823
+ display: inline-flex;
824
+ align-items: center;
825
+ gap: 6px;
826
+ color: rgba(255, 255, 255, 0.9);
827
+ font-size: 13px;
828
+ line-height: 1.4;
829
+ }
830
+
831
+ .rz-flow-state-status {
832
+ color: rgba(255, 255, 255, 0.6);
833
+ font-size: 12px;
834
+ line-height: 1.4;
835
+ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
836
+ text-transform: uppercase;
837
+ }
838
+
839
+ .rz-flow-state-error,
840
+ .rz-flow-state-result {
841
+ margin: 0;
842
+ border-radius: 4px;
843
+ background: rgba(255, 255, 255, 0.04);
844
+ padding: 10px 12px;
845
+ color: rgba(255, 255, 255, 0.84);
846
+ font-size: 12px;
847
+ line-height: 1.5;
848
+ white-space: pre-wrap;
849
+ word-break: break-word;
850
+ }
851
+
852
+ .rz-flow-state-error {
853
+ color: #ffb4b4;
854
+ }
855
+
856
+ .rz-flow-stop-button {
857
+ flex-shrink: 0;
858
+ }
859
+
860
+ .rz-label {
861
+ color: rgba(255, 255, 255, 0.6);
862
+ font-size: 12px;
863
+ line-height: 20px;
864
+ letter-spacing: -0.04em;
865
+ font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
866
+ }
867
+
868
+ .rz-input,
869
+ .rz-textarea {
870
+ width: 100%;
871
+ border: 1px solid rgba(255, 255, 255, 0.08);
872
+ border-radius: 4px;
873
+ background: rgba(255, 255, 255, 0.04);
874
+ color: #ffffff;
875
+ padding: 10px 12px;
876
+ font-size: 14px;
877
+ line-height: 1.5;
878
+ letter-spacing: -0.02em;
879
+ }
880
+
881
+ .rz-textarea {
882
+ min-height: 112px;
883
+ resize: none;
884
+ }
885
+
886
+ .rz-button-row {
887
+ display: flex;
888
+ justify-content: flex-end;
889
+ gap: 8px;
890
+ margin-top: auto;
891
+ }
892
+
893
+ .rz-empty-state {
894
+ display: flex;
895
+ height: 100%;
896
+ align-items: center;
897
+ justify-content: center;
898
+ color: rgba(255, 255, 255, 0.7);
899
+ padding: 24px;
900
+ text-align: center;
901
+ font-size: 16px;
902
+ line-height: 1.5;
903
+ letter-spacing: -0.02em;
904
+ }
905
+
906
+ @media (max-width: 960px) {
907
+ .rz-topbar {
908
+ padding-left: 8px;
909
+ padding-right: 8px;
910
+ }
911
+
912
+ .rz-topbar-brand svg {
913
+ height: 18px;
914
+ }
915
+
916
+ .rz-topbar-panel-picker {
917
+ overflow: hidden;
918
+ }
919
+
920
+ .rz-workspace {
921
+ grid-template-rows: minmax(0, 1fr) 12px minmax(180px, var(--rz-devtools-height, 272px));
922
+ }
923
+
924
+ .rz-devtools-mobile-tabs {
925
+ padding-top: 8px;
926
+ }
927
+
928
+ .rz-column-resize-handle {
929
+ width: 100%;
930
+ min-width: 0;
931
+ min-height: 6px;
932
+ cursor: row-resize;
933
+ }
934
+
935
+ .rz-column-resize-handle::before {
936
+ width: 72px;
937
+ height: 2px;
938
+ }
939
+
940
+ .rz-column-resize-handle::after {
941
+ border-left: 0;
942
+ border-right: 0;
943
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
944
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
945
+ }
946
+
947
+ .rz-column-resize-handle[data-dragging='true']::after,
948
+ .rz-column-resize-handle:hover::after {
949
+ border-top-color: rgba(255, 255, 255, 0.08);
950
+ border-bottom-color: rgba(255, 255, 255, 0.08);
951
+ }
952
+
953
+ .rz-action-tabs-header {
954
+ flex-wrap: wrap;
955
+ align-items: flex-start;
956
+ }
957
+ }
958
+
959
+ @media (max-width: 640px) {
960
+ .rz-message-list-header,
961
+ .rz-message-row {
962
+ grid-template-columns: 36px 136px minmax(92px, 136px) minmax(0, 1fr);
963
+ }
964
+
965
+ .rz-message-header-cell,
966
+ .rz-message-cell {
967
+ padding: 8px 10px;
968
+ }
969
+ }