@reifydb/console 0.3.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.
@@ -0,0 +1,908 @@
1
+ /* SPDX-License-Identifier: AGPL-3.0-or-later */
2
+ /* Copyright (c) 2025 ReifyDB */
3
+
4
+ /* SPDX-License-Identifier: AGPL-3.0-or-later */
5
+ /* Copyright (c) 2025 ReifyDB */
6
+
7
+ /* CSS custom properties for @reifydb/console theming */
8
+ :root {
9
+ --rdb-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
10
+ --rdb-font-size-xs: 0.75rem;
11
+ --rdb-font-size-sm: 0.875rem;
12
+
13
+ /* Dark theme (default) */
14
+ --rdb-color-bg: #1A1A1A;
15
+ --rdb-color-bg-secondary: #1F1F1F;
16
+ --rdb-color-bg-elevated: #262626;
17
+ --rdb-color-bg-tertiary: #151515;
18
+ --rdb-color-primary: #14B8A6;
19
+ --rdb-color-primary-hover: #2DD4BF;
20
+ --rdb-color-text: #E5E5E5;
21
+ --rdb-color-secondary: #A3A3A3;
22
+ --rdb-color-muted: #525252;
23
+ --rdb-color-border: rgba(255, 255, 255, 0.12);
24
+ --rdb-color-error: #EF4444;
25
+ --rdb-color-success: #22C55E;
26
+
27
+ /* Value type colors */
28
+ --rdb-color-value-string: #34D399;
29
+ --rdb-color-value-number: #F472B6;
30
+ --rdb-color-value-boolean: #818CF8;
31
+ --rdb-color-value-date: #06B6D4;
32
+ --rdb-color-value-uuid: #14B8A6;
33
+
34
+ /* Spacing */
35
+ --rdb-space-1: 0.25rem;
36
+ --rdb-space-2: 0.5rem;
37
+ --rdb-space-3: 0.75rem;
38
+ --rdb-space-4: 1rem;
39
+
40
+ /* Borders */
41
+ --rdb-border: 2px dashed var(--rdb-color-border);
42
+ --rdb-border-thin: 1px solid var(--rdb-color-border);
43
+ }
44
+
45
+ /* Light theme overrides */
46
+ .rdb-theme-light {
47
+ --rdb-color-bg: #FFFFFF;
48
+ --rdb-color-bg-secondary: #F5F5F5;
49
+ --rdb-color-bg-elevated: #F0F0F0;
50
+ --rdb-color-bg-tertiary: #FAFAFA;
51
+ --rdb-color-primary: #0D9488;
52
+ --rdb-color-primary-hover: #14B8A6;
53
+ --rdb-color-text: #1A1A1A;
54
+ --rdb-color-secondary: #525252;
55
+ --rdb-color-muted: #9CA3AF;
56
+ --rdb-color-border: rgba(0, 0, 0, 0.12);
57
+ --rdb-color-error: #DC2626;
58
+ --rdb-color-success: #16A34A;
59
+
60
+ --rdb-color-value-string: #059669;
61
+ --rdb-color-value-number: #DB2777;
62
+ --rdb-color-value-boolean: #6366F1;
63
+ --rdb-color-value-date: #0891B2;
64
+ --rdb-color-value-uuid: #0D9488;
65
+ }
66
+
67
+
68
+ /* === Snippet === */
69
+
70
+ .rdb-snippet {
71
+ border: var(--rdb-border);
72
+ background: var(--rdb-color-bg-tertiary);
73
+ overflow: hidden;
74
+ font-family: var(--rdb-font-mono);
75
+ }
76
+
77
+ .rdb-snippet--fullscreen {
78
+ display: flex;
79
+ flex-direction: column;
80
+ height: 100%;
81
+ }
82
+
83
+ .rdb-snippet__header {
84
+ display: flex;
85
+ justify-content: space-between;
86
+ align-items: center;
87
+ padding: var(--rdb-space-2) var(--rdb-space-4);
88
+ border-bottom: 1px dashed var(--rdb-color-border);
89
+ background: var(--rdb-color-bg-elevated);
90
+ flex-shrink: 0;
91
+ }
92
+
93
+ .rdb-snippet__title {
94
+ font-size: var(--rdb-font-size-xs);
95
+ color: var(--rdb-color-muted);
96
+ }
97
+
98
+ .rdb-snippet__title-marker {
99
+ color: var(--rdb-color-primary);
100
+ }
101
+
102
+ .rdb-snippet__actions {
103
+ display: flex;
104
+ align-items: center;
105
+ gap: var(--rdb-space-2);
106
+ }
107
+
108
+ .rdb-snippet__action-btn {
109
+ font-family: var(--rdb-font-mono);
110
+ font-size: var(--rdb-font-size-xs);
111
+ color: var(--rdb-color-muted);
112
+ background: none;
113
+ border: none;
114
+ cursor: pointer;
115
+ padding: 0;
116
+ transition: color 0.15s;
117
+ }
118
+
119
+ .rdb-snippet__action-btn:hover {
120
+ color: var(--rdb-color-primary);
121
+ }
122
+
123
+ .rdb-snippet__description {
124
+ padding: var(--rdb-space-2) var(--rdb-space-4);
125
+ background: var(--rdb-color-bg-secondary);
126
+ border-bottom: 1px dashed var(--rdb-color-border);
127
+ flex-shrink: 0;
128
+ }
129
+
130
+ .rdb-snippet__description-text {
131
+ font-size: var(--rdb-font-size-xs);
132
+ color: var(--rdb-color-muted);
133
+ margin: 0;
134
+ }
135
+
136
+ .rdb-snippet__description-marker {
137
+ color: var(--rdb-color-primary);
138
+ }
139
+
140
+ .rdb-snippet__editor {
141
+ /* height set dynamically via style prop */
142
+ }
143
+
144
+ .rdb-snippet__editor--fullscreen {
145
+ flex: 1;
146
+ min-height: 0;
147
+ }
148
+
149
+ .rdb-snippet__toolbar {
150
+ display: flex;
151
+ align-items: center;
152
+ justify-content: space-between;
153
+ padding: var(--rdb-space-2) var(--rdb-space-4);
154
+ border-top: 1px dashed var(--rdb-color-border);
155
+ background: var(--rdb-color-bg-elevated);
156
+ flex-shrink: 0;
157
+ }
158
+
159
+ .rdb-snippet__hint {
160
+ font-size: var(--rdb-font-size-xs);
161
+ color: var(--rdb-color-muted);
162
+ }
163
+
164
+ .rdb-snippet__run-btn {
165
+ font-family: var(--rdb-font-mono);
166
+ font-size: var(--rdb-font-size-xs);
167
+ padding: var(--rdb-space-1) var(--rdb-space-3);
168
+ border: 1px solid var(--rdb-color-primary);
169
+ color: var(--rdb-color-primary);
170
+ background: none;
171
+ cursor: pointer;
172
+ transition: all 0.15s;
173
+ }
174
+
175
+ .rdb-snippet__run-btn:hover:not(:disabled) {
176
+ background: var(--rdb-color-primary);
177
+ color: var(--rdb-color-bg);
178
+ }
179
+
180
+ .rdb-snippet__run-btn:disabled {
181
+ border-color: rgba(20, 184, 166, 0.5);
182
+ color: rgba(20, 184, 166, 0.7);
183
+ cursor: wait;
184
+ }
185
+
186
+ .rdb-snippet__run-btn--loading {
187
+ animation: rdb-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
188
+ }
189
+
190
+ @keyframes rdb-pulse {
191
+ 0%, 100% { opacity: 1; }
192
+ 50% { opacity: 0.5; }
193
+ }
194
+
195
+ /* === Snippet Results === */
196
+
197
+ .rdb-snippet__results {
198
+ border-top: 1px dashed var(--rdb-color-border);
199
+ flex-shrink: 0;
200
+ }
201
+
202
+ .rdb-snippet__results--fullscreen {
203
+ max-height: 40vh;
204
+ overflow-y: auto;
205
+ }
206
+
207
+ .rdb-snippet__results-header {
208
+ display: flex;
209
+ align-items: center;
210
+ justify-content: space-between;
211
+ padding: var(--rdb-space-2) var(--rdb-space-4);
212
+ background: var(--rdb-color-bg-elevated);
213
+ border-bottom: 1px dashed var(--rdb-color-border);
214
+ position: sticky;
215
+ top: 0;
216
+ font-size: var(--rdb-font-size-xs);
217
+ color: var(--rdb-color-muted);
218
+ }
219
+
220
+ .rdb-snippet__error {
221
+ padding: var(--rdb-space-4);
222
+ }
223
+
224
+ .rdb-snippet__error-text {
225
+ font-size: var(--rdb-font-size-xs);
226
+ color: var(--rdb-color-error);
227
+ white-space: pre-wrap;
228
+ margin: 0;
229
+ font-family: var(--rdb-font-mono);
230
+ }
231
+
232
+ .rdb-snippet__rows {
233
+ padding: var(--rdb-space-2) var(--rdb-space-4);
234
+ font-size: var(--rdb-font-size-sm);
235
+ overflow-x: auto;
236
+ }
237
+
238
+ .rdb-snippet__row {
239
+ /* spacing between rows */
240
+ }
241
+
242
+ .rdb-snippet__row + .rdb-snippet__row {
243
+ margin-top: var(--rdb-space-2);
244
+ }
245
+
246
+ .rdb-snippet__row-label {
247
+ font-size: var(--rdb-font-size-xs);
248
+ color: var(--rdb-color-muted);
249
+ }
250
+
251
+ .rdb-snippet__field {
252
+ display: flex;
253
+ gap: var(--rdb-space-1);
254
+ }
255
+
256
+ .rdb-snippet__field-key {
257
+ color: var(--rdb-color-secondary);
258
+ flex-shrink: 0;
259
+ }
260
+
261
+ .rdb-snippet__field-eq {
262
+ color: var(--rdb-color-muted);
263
+ }
264
+
265
+ .rdb-snippet__field-value {
266
+ word-break: break-all;
267
+ }
268
+
269
+ .rdb-snippet__field-value--italic {
270
+ font-style: italic;
271
+ }
272
+
273
+ .rdb-snippet__empty {
274
+ padding: var(--rdb-space-4);
275
+ font-size: var(--rdb-font-size-sm);
276
+ color: var(--rdb-color-muted);
277
+ }
278
+
279
+ /* === Fullscreen overlay === */
280
+
281
+ .rdb-snippet__overlay {
282
+ position: fixed;
283
+ inset: 0;
284
+ z-index: 60;
285
+ background: rgba(0, 0, 0, 0.8);
286
+ }
287
+
288
+ .rdb-snippet__overlay-inner {
289
+ position: fixed;
290
+ inset: 0;
291
+ background: var(--rdb-color-bg-secondary);
292
+ display: flex;
293
+ flex-direction: column;
294
+ overflow: hidden;
295
+ }
296
+
297
+ @media (min-width: 640px) {
298
+ .rdb-snippet__overlay-inner {
299
+ inset: 1rem;
300
+ border: var(--rdb-border);
301
+ }
302
+ }
303
+
304
+ /* === Console === */
305
+
306
+ .rdb-console {
307
+ display: flex;
308
+ height: 100%;
309
+ background: var(--rdb-color-bg);
310
+ color: var(--rdb-color-text);
311
+ font-family: var(--rdb-font-mono);
312
+ overflow: hidden;
313
+ }
314
+
315
+ .rdb-console__main {
316
+ display: flex;
317
+ flex-direction: column;
318
+ flex: 1;
319
+ min-width: 0;
320
+ }
321
+
322
+ /* === Split Pane === */
323
+
324
+ .rdb-split {
325
+ display: flex;
326
+ flex-direction: column;
327
+ flex: 1;
328
+ min-height: 0;
329
+ }
330
+
331
+ .rdb-split__top {
332
+ overflow: hidden;
333
+ display: flex;
334
+ flex-direction: column;
335
+ }
336
+
337
+ .rdb-split__handle {
338
+ height: 6px;
339
+ background: var(--rdb-color-bg-elevated);
340
+ border-top: 1px dashed var(--rdb-color-border);
341
+ border-bottom: 1px dashed var(--rdb-color-border);
342
+ cursor: row-resize;
343
+ flex-shrink: 0;
344
+ transition: background 0.15s;
345
+ }
346
+
347
+ .rdb-split__handle:hover {
348
+ background: var(--rdb-color-primary);
349
+ opacity: 0.5;
350
+ }
351
+
352
+ .rdb-split__bottom {
353
+ flex: 1;
354
+ overflow: hidden;
355
+ display: flex;
356
+ flex-direction: column;
357
+ min-height: 0;
358
+ }
359
+
360
+ /* === Tab Bar === */
361
+
362
+ .rdb-tabs {
363
+ display: flex;
364
+ border-bottom: 1px dashed var(--rdb-color-border);
365
+ background: var(--rdb-color-bg-elevated);
366
+ flex-shrink: 0;
367
+ }
368
+
369
+ .rdb-tabs__tab {
370
+ font-family: var(--rdb-font-mono);
371
+ font-size: var(--rdb-font-size-xs);
372
+ padding: var(--rdb-space-2) var(--rdb-space-4);
373
+ color: var(--rdb-color-muted);
374
+ background: none;
375
+ border: none;
376
+ border-bottom: 2px solid transparent;
377
+ cursor: pointer;
378
+ transition: all 0.15s;
379
+ text-transform: uppercase;
380
+ letter-spacing: 0.05em;
381
+ }
382
+
383
+ .rdb-tabs__tab:hover {
384
+ color: var(--rdb-color-text);
385
+ }
386
+
387
+ .rdb-tabs__tab--active {
388
+ color: var(--rdb-color-primary);
389
+ border-bottom-color: var(--rdb-color-primary);
390
+ }
391
+
392
+ /* === Results Table (full console) === */
393
+
394
+ .rdb-results {
395
+ flex: 1;
396
+ overflow: auto;
397
+ display: flex;
398
+ flex-direction: column;
399
+ }
400
+
401
+ .rdb-results__table {
402
+ width: 100%;
403
+ border-collapse: collapse;
404
+ font-size: var(--rdb-font-size-sm);
405
+ }
406
+
407
+ .rdb-results__table th {
408
+ text-align: left;
409
+ padding: var(--rdb-space-2) var(--rdb-space-3);
410
+ background: var(--rdb-color-bg-elevated);
411
+ border-bottom: 1px dashed var(--rdb-color-border);
412
+ color: var(--rdb-color-secondary);
413
+ font-weight: 600;
414
+ position: sticky;
415
+ top: 0;
416
+ white-space: nowrap;
417
+ }
418
+
419
+ .rdb-results__table td {
420
+ padding: var(--rdb-space-1) var(--rdb-space-3);
421
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
422
+ white-space: nowrap;
423
+ }
424
+
425
+ .rdb-results__table tr:hover td {
426
+ background: rgba(255, 255, 255, 0.03);
427
+ }
428
+
429
+ .rdb-results__error {
430
+ padding: var(--rdb-space-4);
431
+ color: var(--rdb-color-error);
432
+ font-size: var(--rdb-font-size-sm);
433
+ }
434
+
435
+ .rdb-results__error pre {
436
+ margin: 0;
437
+ white-space: pre-wrap;
438
+ font-family: var(--rdb-font-mono);
439
+ }
440
+
441
+ .rdb-results__empty {
442
+ padding: var(--rdb-space-4);
443
+ color: var(--rdb-color-muted);
444
+ font-size: var(--rdb-font-size-sm);
445
+ text-align: center;
446
+ }
447
+
448
+ /* === Status Bar === */
449
+
450
+ .rdb-status-bar {
451
+ display: flex;
452
+ align-items: center;
453
+ justify-content: space-between;
454
+ padding: var(--rdb-space-1) var(--rdb-space-3);
455
+ border-top: 1px dashed var(--rdb-color-border);
456
+ background: var(--rdb-color-bg-elevated);
457
+ font-size: var(--rdb-font-size-xs);
458
+ color: var(--rdb-color-muted);
459
+ flex-shrink: 0;
460
+ }
461
+
462
+ .rdb-status-bar__info {
463
+ display: flex;
464
+ gap: var(--rdb-space-3);
465
+ }
466
+
467
+ .rdb-status-bar__actions {
468
+ display: flex;
469
+ gap: var(--rdb-space-2);
470
+ }
471
+
472
+ .rdb-status-bar__btn {
473
+ font-family: var(--rdb-font-mono);
474
+ font-size: var(--rdb-font-size-xs);
475
+ color: var(--rdb-color-muted);
476
+ background: none;
477
+ border: none;
478
+ cursor: pointer;
479
+ padding: 0;
480
+ transition: color 0.15s;
481
+ }
482
+
483
+ .rdb-status-bar__btn:hover {
484
+ color: var(--rdb-color-primary);
485
+ }
486
+
487
+ /* === Schema Browser === */
488
+
489
+ .rdb-schema__node {
490
+ padding: 1px 0;
491
+ }
492
+
493
+ .rdb-schema__node-header {
494
+ display: flex;
495
+ align-items: center;
496
+ gap: var(--rdb-space-1);
497
+ font-size: var(--rdb-font-size-xs);
498
+ cursor: pointer;
499
+ padding: var(--rdb-space-1) var(--rdb-space-2);
500
+ border-radius: 0;
501
+ transition: background 0.1s;
502
+ }
503
+
504
+ .rdb-schema__node-header:hover {
505
+ background: rgba(255, 255, 255, 0.05);
506
+ }
507
+
508
+ .rdb-schema__node-toggle {
509
+ color: var(--rdb-color-muted);
510
+ width: 1em;
511
+ flex-shrink: 0;
512
+ }
513
+
514
+ .rdb-schema__node-label {
515
+ color: var(--rdb-color-text);
516
+ }
517
+
518
+ .rdb-schema__node-label--namespace {
519
+ color: var(--rdb-color-primary);
520
+ }
521
+
522
+ .rdb-schema__node-label--category {
523
+ color: var(--rdb-color-muted);
524
+ text-transform: uppercase;
525
+ font-size: 0.85em;
526
+ letter-spacing: 0.05em;
527
+ }
528
+
529
+ .rdb-schema__node-label--column {
530
+ color: var(--rdb-color-secondary);
531
+ }
532
+
533
+ .rdb-schema__node-type {
534
+ color: var(--rdb-color-muted);
535
+ display: inline-block;
536
+ min-width: 10ch;
537
+ margin-right: var(--rdb-space-3);
538
+ }
539
+
540
+ .rdb-schema__node-type--numeric { color: var(--rdb-color-value-number); }
541
+ .rdb-schema__node-type--string { color: var(--rdb-color-value-string); }
542
+ .rdb-schema__node-type--boolean { color: var(--rdb-color-value-boolean); }
543
+ .rdb-schema__node-type--temporal { color: var(--rdb-color-value-date); }
544
+ .rdb-schema__node-type--identity { color: var(--rdb-color-value-uuid); }
545
+
546
+ .rdb-schema__node-children {
547
+ padding-left: var(--rdb-space-2);
548
+ }
549
+
550
+ .rdb-schema__toolbar {
551
+ display: flex;
552
+ justify-content: flex-end;
553
+ padding: var(--rdb-space-1) var(--rdb-space-2);
554
+ border-bottom: 1px dashed var(--rdb-color-border);
555
+ }
556
+
557
+ .rdb-schema__reload-btn {
558
+ background: none;
559
+ border: 1px solid var(--rdb-color-border);
560
+ color: var(--rdb-color-muted);
561
+ font-family: var(--rdb-font-mono);
562
+ font-size: var(--rdb-font-size-xs);
563
+ padding: var(--rdb-space-1) var(--rdb-space-2);
564
+ cursor: pointer;
565
+ transition: color 0.15s, border-color 0.15s;
566
+ }
567
+
568
+ .rdb-schema__reload-btn:hover:not(:disabled) {
569
+ color: var(--rdb-color-primary);
570
+ border-color: var(--rdb-color-primary);
571
+ }
572
+
573
+ .rdb-schema__reload-btn:disabled {
574
+ opacity: 0.5;
575
+ cursor: default;
576
+ }
577
+
578
+ /* === History === */
579
+
580
+ .rdb-history {
581
+ flex: 1;
582
+ overflow-y: auto;
583
+ display: flex;
584
+ flex-direction: column;
585
+ }
586
+
587
+ .rdb-history__search {
588
+ padding: var(--rdb-space-2) var(--rdb-space-3);
589
+ border-bottom: 1px dashed var(--rdb-color-border);
590
+ flex-shrink: 0;
591
+ }
592
+
593
+ .rdb-history__search-input {
594
+ width: 100%;
595
+ font-family: var(--rdb-font-mono);
596
+ font-size: var(--rdb-font-size-xs);
597
+ padding: var(--rdb-space-1) var(--rdb-space-2);
598
+ background: var(--rdb-color-bg);
599
+ border: 1px solid var(--rdb-color-border);
600
+ color: var(--rdb-color-text);
601
+ outline: none;
602
+ }
603
+
604
+ .rdb-history__search-input:focus {
605
+ border-color: var(--rdb-color-primary);
606
+ }
607
+
608
+ .rdb-history__list {
609
+ flex: 1;
610
+ overflow-y: auto;
611
+ }
612
+
613
+ .rdb-history__entry {
614
+ display: flex;
615
+ flex-direction: column;
616
+ gap: var(--rdb-space-1);
617
+ padding: var(--rdb-space-2) var(--rdb-space-3);
618
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
619
+ cursor: pointer;
620
+ transition: background 0.1s;
621
+ }
622
+
623
+ .rdb-history__entry:hover {
624
+ background: rgba(255, 255, 255, 0.03);
625
+ }
626
+
627
+ .rdb-history__entry-meta {
628
+ display: flex;
629
+ align-items: center;
630
+ justify-content: space-between;
631
+ font-size: var(--rdb-font-size-xs);
632
+ color: var(--rdb-color-muted);
633
+ }
634
+
635
+ .rdb-history__entry-indicator {
636
+ width: 6px;
637
+ height: 6px;
638
+ border-radius: 50%;
639
+ flex-shrink: 0;
640
+ }
641
+
642
+ .rdb-history__entry-indicator--success {
643
+ background: var(--rdb-color-success);
644
+ }
645
+
646
+ .rdb-history__entry-indicator--error {
647
+ background: var(--rdb-color-error);
648
+ }
649
+
650
+ .rdb-history__entry-query {
651
+ font-size: var(--rdb-font-size-xs);
652
+ color: var(--rdb-color-secondary);
653
+ white-space: nowrap;
654
+ overflow: hidden;
655
+ text-overflow: ellipsis;
656
+ }
657
+
658
+ .rdb-history__empty {
659
+ padding: var(--rdb-space-4);
660
+ font-size: var(--rdb-font-size-xs);
661
+ color: var(--rdb-color-muted);
662
+ text-align: center;
663
+ }
664
+
665
+ /* === Editor Toolbar === */
666
+
667
+ .rdb-editor-toolbar {
668
+ display: flex;
669
+ align-items: center;
670
+ justify-content: space-between;
671
+ padding: var(--rdb-space-1) var(--rdb-space-3);
672
+ border-bottom: 1px dashed var(--rdb-color-border);
673
+ background: var(--rdb-color-bg-elevated);
674
+ flex-shrink: 0;
675
+ }
676
+
677
+ .rdb-editor-toolbar__left {
678
+ display: flex;
679
+ align-items: center;
680
+ gap: var(--rdb-space-3);
681
+ }
682
+
683
+ .rdb-editor-toolbar__actions {
684
+ display: flex;
685
+ gap: var(--rdb-space-2);
686
+ }
687
+
688
+ /* Connection button in toolbar */
689
+
690
+ .rdb-editor-toolbar__connection {
691
+ display: flex;
692
+ align-items: center;
693
+ gap: var(--rdb-space-1);
694
+ font-family: var(--rdb-font-mono);
695
+ font-size: var(--rdb-font-size-xs);
696
+ color: var(--rdb-color-muted);
697
+ background: none;
698
+ border: none;
699
+ cursor: pointer;
700
+ padding: 0;
701
+ transition: color 0.15s;
702
+ }
703
+
704
+ .rdb-editor-toolbar__connection:hover {
705
+ color: var(--rdb-color-text);
706
+ }
707
+
708
+ .rdb-editor-toolbar__connection-dot {
709
+ font-size: 0.6em;
710
+ }
711
+
712
+ .rdb-editor-toolbar__connection-dot--connected { color: var(--rdb-color-success); }
713
+ .rdb-editor-toolbar__connection-dot--connecting { color: var(--rdb-color-primary); }
714
+ .rdb-editor-toolbar__connection-dot--error { color: var(--rdb-color-error); }
715
+ .rdb-editor-toolbar__connection-dot--disconnected { color: var(--rdb-color-muted); }
716
+
717
+ .rdb-editor-toolbar__btn {
718
+ font-family: var(--rdb-font-mono);
719
+ font-size: var(--rdb-font-size-xs);
720
+ padding: var(--rdb-space-1) var(--rdb-space-3);
721
+ border: 1px solid var(--rdb-color-primary);
722
+ color: var(--rdb-color-primary);
723
+ background: none;
724
+ cursor: pointer;
725
+ transition: all 0.15s;
726
+ }
727
+
728
+ .rdb-editor-toolbar__btn:hover:not(:disabled) {
729
+ background: var(--rdb-color-primary);
730
+ color: var(--rdb-color-bg);
731
+ }
732
+
733
+ .rdb-editor-toolbar__btn:disabled {
734
+ opacity: 0.5;
735
+ cursor: not-allowed;
736
+ }
737
+
738
+ .rdb-editor-toolbar__btn--secondary {
739
+ border-color: var(--rdb-color-border);
740
+ color: var(--rdb-color-muted);
741
+ }
742
+
743
+ .rdb-editor-toolbar__btn--secondary:hover:not(:disabled) {
744
+ background: rgba(255, 255, 255, 0.1);
745
+ color: var(--rdb-color-text);
746
+ }
747
+
748
+ /* Light theme overrides for hardcoded rgba values */
749
+ .rdb-theme-light .rdb-results__table td {
750
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
751
+ }
752
+
753
+ .rdb-theme-light .rdb-results__table tr:hover td {
754
+ background: rgba(0, 0, 0, 0.03);
755
+ }
756
+
757
+ .rdb-theme-light .rdb-history__entry {
758
+ border-bottom: 1px solid rgba(0, 0, 0, 0.05);
759
+ }
760
+
761
+ .rdb-theme-light .rdb-history__entry:hover {
762
+ background: rgba(0, 0, 0, 0.03);
763
+ }
764
+
765
+ .rdb-theme-light .rdb-schema__node-header:hover {
766
+ background: rgba(0, 0, 0, 0.05);
767
+ }
768
+
769
+ .rdb-theme-light .rdb-snippet__overlay {
770
+ background: rgba(0, 0, 0, 0.4);
771
+ }
772
+
773
+ .rdb-theme-light .rdb-editor-toolbar__btn--secondary:hover:not(:disabled) {
774
+ background: rgba(0, 0, 0, 0.06);
775
+ }
776
+
777
+ .rdb-editor-toolbar__hint {
778
+ font-size: var(--rdb-font-size-xs);
779
+ color: var(--rdb-color-muted);
780
+ }
781
+
782
+ /* === Connection Panel === */
783
+
784
+ .rdb-connection-panel {
785
+ position: absolute;
786
+ top: 100%;
787
+ left: 0;
788
+ right: 0;
789
+ z-index: 10;
790
+ background: var(--rdb-color-bg-elevated);
791
+ border-bottom: 1px dashed var(--rdb-color-border);
792
+ padding: var(--rdb-space-3);
793
+ display: flex;
794
+ flex-direction: column;
795
+ gap: var(--rdb-space-2);
796
+ font-size: var(--rdb-font-size-xs);
797
+ }
798
+
799
+ .rdb-connection-panel__header {
800
+ color: var(--rdb-color-muted);
801
+ text-transform: uppercase;
802
+ letter-spacing: 0.05em;
803
+ }
804
+
805
+ .rdb-connection-panel__modes {
806
+ display: flex;
807
+ gap: var(--rdb-space-2);
808
+ }
809
+
810
+ .rdb-connection-panel__mode-btn {
811
+ font-family: var(--rdb-font-mono);
812
+ font-size: var(--rdb-font-size-xs);
813
+ padding: var(--rdb-space-1) var(--rdb-space-3);
814
+ border: 1px solid var(--rdb-color-border);
815
+ color: var(--rdb-color-muted);
816
+ background: none;
817
+ cursor: pointer;
818
+ transition: all 0.15s;
819
+ }
820
+
821
+ .rdb-connection-panel__mode-btn:hover {
822
+ color: var(--rdb-color-text);
823
+ border-color: var(--rdb-color-text);
824
+ }
825
+
826
+ .rdb-connection-panel__mode-btn--active {
827
+ color: var(--rdb-color-primary);
828
+ border-color: var(--rdb-color-primary);
829
+ }
830
+
831
+ .rdb-connection-panel__url-row {
832
+ display: flex;
833
+ align-items: center;
834
+ gap: var(--rdb-space-2);
835
+ }
836
+
837
+ .rdb-connection-panel__url-label {
838
+ color: var(--rdb-color-muted);
839
+ flex-shrink: 0;
840
+ }
841
+
842
+ .rdb-connection-panel__url-input {
843
+ flex: 1;
844
+ font-family: var(--rdb-font-mono);
845
+ font-size: var(--rdb-font-size-xs);
846
+ padding: var(--rdb-space-1) var(--rdb-space-2);
847
+ background: var(--rdb-color-bg);
848
+ border: 1px solid var(--rdb-color-border);
849
+ color: var(--rdb-color-text);
850
+ outline: none;
851
+ }
852
+
853
+ .rdb-connection-panel__url-input:focus {
854
+ border-color: var(--rdb-color-primary);
855
+ }
856
+
857
+ .rdb-connection-panel__url-input:disabled {
858
+ opacity: 0.5;
859
+ }
860
+
861
+ .rdb-connection-panel__actions {
862
+ display: flex;
863
+ justify-content: flex-end;
864
+ }
865
+
866
+ .rdb-connection-panel__action-btn {
867
+ font-family: var(--rdb-font-mono);
868
+ font-size: var(--rdb-font-size-xs);
869
+ padding: var(--rdb-space-1) var(--rdb-space-3);
870
+ border: 1px solid var(--rdb-color-primary);
871
+ color: var(--rdb-color-primary);
872
+ background: none;
873
+ cursor: pointer;
874
+ transition: all 0.15s;
875
+ }
876
+
877
+ .rdb-connection-panel__action-btn:hover:not(:disabled) {
878
+ background: var(--rdb-color-primary);
879
+ color: var(--rdb-color-bg);
880
+ }
881
+
882
+ .rdb-connection-panel__action-btn:disabled {
883
+ opacity: 0.5;
884
+ cursor: not-allowed;
885
+ }
886
+
887
+ .rdb-connection-panel__status {
888
+ display: flex;
889
+ align-items: center;
890
+ gap: var(--rdb-space-1);
891
+ color: var(--rdb-color-muted);
892
+ }
893
+
894
+ .rdb-connection-panel__status-dot {
895
+ font-size: 0.8em;
896
+ }
897
+
898
+ .rdb-connection-panel__status-dot--connected { color: var(--rdb-color-success); }
899
+ .rdb-connection-panel__status-dot--connecting { color: var(--rdb-color-primary); }
900
+ .rdb-connection-panel__status-dot--error { color: var(--rdb-color-error); }
901
+ .rdb-connection-panel__status-dot--disconnected { color: var(--rdb-color-muted); }
902
+
903
+ .rdb-connection-panel__error {
904
+ color: var(--rdb-color-error);
905
+ white-space: pre-wrap;
906
+ font-family: var(--rdb-font-mono);
907
+ }
908
+