@reifydb/console 0.4.6 → 0.4.7

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.
package/dist/styles.css CHANGED
@@ -5,7 +5,8 @@
5
5
  /* Copyright (c) 2025 ReifyDB */
6
6
 
7
7
  /* CSS custom properties for @reifydb/console theming */
8
- :root {
8
+ :where(.rdb-console),
9
+ :where(.rdb-snippet) {
9
10
  --rdb-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
10
11
  --rdb-font-size-xs: 0.75rem;
11
12
  --rdb-font-size-sm: 0.875rem;
@@ -15,21 +16,28 @@
15
16
  --rdb-color-bg-secondary: #1F1F1F;
16
17
  --rdb-color-bg-elevated: #262626;
17
18
  --rdb-color-bg-tertiary: #151515;
18
- --rdb-color-primary: #1DE5D2;
19
- --rdb-color-primary-hover: #4DEADA;
20
- --rdb-color-text: #E5E5E5;
21
- --rdb-color-secondary: #A3A3A3;
22
- --rdb-color-muted: #525252;
19
+ --rdb-color-primary: #818CF8;
20
+ --rdb-color-primary-hover: #A5B4FC;
21
+ --rdb-color-text: #F0F0F0;
22
+ --rdb-color-secondary: #A0A0A0;
23
+ --rdb-color-muted: #666666;
23
24
  --rdb-color-border: rgba(255, 255, 255, 0.12);
24
- --rdb-color-error: #EF4444;
25
+ --rdb-color-error: #DC2626;
25
26
  --rdb-color-success: #22C55E;
26
27
 
27
28
  /* Value type colors */
28
- --rdb-color-value-string: #34D399;
29
- --rdb-color-value-number: #F472B6;
29
+ --rdb-color-value-string: #22d3ee;
30
+ --rdb-color-value-number: #22d3ee;
30
31
  --rdb-color-value-boolean: #818CF8;
31
- --rdb-color-value-date: #06B6D4;
32
- --rdb-color-value-uuid: #1DE5D2;
32
+ --rdb-color-value-date: #22d3ee;
33
+ --rdb-color-value-uuid: #818CF8;
34
+
35
+ /* Interactive states */
36
+ --rdb-color-hover-bg: rgba(255, 255, 255, 0.03);
37
+ --rdb-color-hover-bg-strong: rgba(255, 255, 255, 0.05);
38
+ --rdb-color-row-border: rgba(255, 255, 255, 0.05);
39
+ --rdb-color-overlay-bg: rgba(0, 0, 0, 0.8);
40
+ --rdb-color-hover-secondary-btn: rgba(255, 255, 255, 0.1);
33
41
 
34
42
  /* Spacing */
35
43
  --rdb-space-1: 0.25rem;
@@ -37,9 +45,12 @@
37
45
  --rdb-space-3: 0.75rem;
38
46
  --rdb-space-4: 1rem;
39
47
 
48
+ /* Border radius */
49
+ --rdb-radius: 6px;
50
+
40
51
  /* Borders */
41
- --rdb-border: 2px dashed var(--rdb-color-border);
42
- --rdb-border-thin: 1px solid var(--rdb-color-border);
52
+ --rdb-border: none;
53
+ --rdb-border-thin: none;
43
54
  }
44
55
 
45
56
  /* Light theme overrides */
@@ -48,8 +59,9 @@
48
59
  --rdb-color-bg-secondary: #F5F5F5;
49
60
  --rdb-color-bg-elevated: #F0F0F0;
50
61
  --rdb-color-bg-tertiary: #FAFAFA;
51
- --rdb-color-primary: #14AD9E;
52
- --rdb-color-primary-hover: #1DE5D2;
62
+ --rdb-color-primary: #6366F1;
63
+ --rdb-color-primary-hover: #818CF8;
64
+
53
65
  --rdb-color-text: #1A1A1A;
54
66
  --rdb-color-secondary: #525252;
55
67
  --rdb-color-muted: #9CA3AF;
@@ -61,14 +73,19 @@
61
73
  --rdb-color-value-number: #DB2777;
62
74
  --rdb-color-value-boolean: #6366F1;
63
75
  --rdb-color-value-date: #0891B2;
64
- --rdb-color-value-uuid: #14AD9E;
76
+ --rdb-color-value-uuid: #6366F1;
77
+
78
+ --rdb-color-hover-bg: rgba(0, 0, 0, 0.03);
79
+ --rdb-color-hover-bg-strong: rgba(0, 0, 0, 0.05);
80
+ --rdb-color-row-border: rgba(0, 0, 0, 0.05);
81
+ --rdb-color-overlay-bg: rgba(0, 0, 0, 0.4);
82
+ --rdb-color-hover-secondary-btn: rgba(0, 0, 0, 0.06);
65
83
  }
66
84
 
67
85
 
68
86
  /* === Snippet === */
69
87
 
70
88
  .rdb-snippet {
71
- border: var(--rdb-border);
72
89
  background: var(--rdb-color-bg-tertiary);
73
90
  overflow: hidden;
74
91
  font-family: var(--rdb-font-mono);
@@ -78,6 +95,7 @@
78
95
  display: flex;
79
96
  flex-direction: column;
80
97
  height: 100%;
98
+ overflow: hidden;
81
99
  }
82
100
 
83
101
  .rdb-snippet__header {
@@ -85,7 +103,6 @@
85
103
  justify-content: space-between;
86
104
  align-items: center;
87
105
  padding: var(--rdb-space-2) var(--rdb-space-4);
88
- border-bottom: 1px dashed var(--rdb-color-border);
89
106
  background: var(--rdb-color-bg-elevated);
90
107
  flex-shrink: 0;
91
108
  }
@@ -106,6 +123,9 @@
106
123
  }
107
124
 
108
125
  .rdb-snippet__action-btn {
126
+ display: inline-flex;
127
+ align-items: center;
128
+ gap: 0.25rem;
109
129
  font-family: var(--rdb-font-mono);
110
130
  font-size: var(--rdb-font-size-xs);
111
131
  color: var(--rdb-color-muted);
@@ -120,10 +140,15 @@
120
140
  color: var(--rdb-color-primary);
121
141
  }
122
142
 
143
+ .rdb-snippet__action-icon {
144
+ width: 14px;
145
+ height: 14px;
146
+ flex-shrink: 0;
147
+ }
148
+
123
149
  .rdb-snippet__description {
124
150
  padding: var(--rdb-space-2) var(--rdb-space-4);
125
151
  background: var(--rdb-color-bg-secondary);
126
- border-bottom: 1px dashed var(--rdb-color-border);
127
152
  flex-shrink: 0;
128
153
  }
129
154
 
@@ -137,10 +162,35 @@
137
162
  color: var(--rdb-color-primary);
138
163
  }
139
164
 
165
+ .rdb-snippet__editor-wrap {
166
+ position: relative;
167
+ }
168
+
140
169
  .rdb-snippet__editor {
141
170
  /* height set dynamically via style prop */
142
171
  }
143
172
 
173
+ .rdb-snippet__results-overlay {
174
+ position: absolute;
175
+ inset: 0;
176
+ display: flex;
177
+ flex-direction: column;
178
+ background: var(--rdb-color-bg-tertiary);
179
+ z-index: 5;
180
+ }
181
+
182
+ .rdb-snippet__results-header-right {
183
+ display: flex;
184
+ align-items: center;
185
+ gap: var(--rdb-space-2);
186
+ }
187
+
188
+ .rdb-snippet__results-body {
189
+ flex: 1;
190
+ overflow-y: auto;
191
+ min-height: 0;
192
+ }
193
+
144
194
  .rdb-snippet__editor--fullscreen {
145
195
  flex: 1;
146
196
  min-height: 0;
@@ -151,7 +201,6 @@
151
201
  align-items: center;
152
202
  justify-content: space-between;
153
203
  padding: var(--rdb-space-2) var(--rdb-space-4);
154
- border-top: 1px dashed var(--rdb-color-border);
155
204
  background: var(--rdb-color-bg-elevated);
156
205
  flex-shrink: 0;
157
206
  }
@@ -164,22 +213,22 @@
164
213
  .rdb-snippet__run-btn {
165
214
  font-family: var(--rdb-font-mono);
166
215
  font-size: var(--rdb-font-size-xs);
216
+ font-weight: 600;
167
217
  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;
218
+ border: none;
219
+ border-radius: var(--rdb-radius);
220
+ color: var(--rdb-color-bg);
221
+ background: var(--rdb-color-primary);
171
222
  cursor: pointer;
172
223
  transition: all 0.15s;
173
224
  }
174
225
 
175
226
  .rdb-snippet__run-btn:hover:not(:disabled) {
176
- background: var(--rdb-color-primary);
177
- color: var(--rdb-color-bg);
227
+ background: var(--rdb-color-primary-hover);
178
228
  }
179
229
 
180
230
  .rdb-snippet__run-btn:disabled {
181
- border-color: rgba(20, 184, 166, 0.5);
182
- color: rgba(20, 184, 166, 0.7);
231
+ opacity: 0.3;
183
232
  cursor: wait;
184
233
  }
185
234
 
@@ -195,13 +244,20 @@
195
244
  /* === Snippet Results === */
196
245
 
197
246
  .rdb-snippet__results {
198
- border-top: 1px dashed var(--rdb-color-border);
199
247
  flex-shrink: 0;
200
248
  }
201
249
 
250
+ .rdb-snippet__fullscreen-bottom {
251
+ display: flex;
252
+ flex-direction: column;
253
+ height: 100%;
254
+ overflow: hidden;
255
+ }
256
+
202
257
  .rdb-snippet__results--fullscreen {
203
- max-height: 40vh;
258
+ flex: 1;
204
259
  overflow-y: auto;
260
+ min-height: 0;
205
261
  }
206
262
 
207
263
  .rdb-snippet__results-header {
@@ -210,7 +266,6 @@
210
266
  justify-content: space-between;
211
267
  padding: var(--rdb-space-2) var(--rdb-space-4);
212
268
  background: var(--rdb-color-bg-elevated);
213
- border-bottom: 1px dashed var(--rdb-color-border);
214
269
  position: sticky;
215
270
  top: 0;
216
271
  font-size: var(--rdb-font-size-xs);
@@ -282,7 +337,7 @@
282
337
  position: fixed;
283
338
  inset: 0;
284
339
  z-index: 60;
285
- background: rgba(0, 0, 0, 0.8);
340
+ background: var(--rdb-color-overlay-bg);
286
341
  }
287
342
 
288
343
  .rdb-snippet__overlay-inner {
@@ -337,8 +392,6 @@
337
392
  .rdb-split__handle {
338
393
  height: 6px;
339
394
  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
395
  cursor: row-resize;
343
396
  flex-shrink: 0;
344
397
  transition: background 0.15s;
@@ -361,7 +414,6 @@
361
414
 
362
415
  .rdb-tabs {
363
416
  display: flex;
364
- border-bottom: 1px dashed var(--rdb-color-border);
365
417
  background: var(--rdb-color-bg-elevated);
366
418
  flex-shrink: 0;
367
419
  }
@@ -408,7 +460,6 @@
408
460
  text-align: left;
409
461
  padding: var(--rdb-space-2) var(--rdb-space-3);
410
462
  background: var(--rdb-color-bg-elevated);
411
- border-bottom: 1px dashed var(--rdb-color-border);
412
463
  color: var(--rdb-color-secondary);
413
464
  font-weight: 600;
414
465
  position: sticky;
@@ -418,12 +469,11 @@
418
469
 
419
470
  .rdb-results__table td {
420
471
  padding: var(--rdb-space-1) var(--rdb-space-3);
421
- border-bottom: 1px solid rgba(255, 255, 255, 0.05);
422
472
  white-space: nowrap;
423
473
  }
424
474
 
425
475
  .rdb-results__table tr:hover td {
426
- background: rgba(255, 255, 255, 0.03);
476
+ background: var(--rdb-color-hover-bg);
427
477
  }
428
478
 
429
479
  .rdb-results__error {
@@ -452,7 +502,6 @@
452
502
  align-items: center;
453
503
  justify-content: space-between;
454
504
  padding: var(--rdb-space-1) var(--rdb-space-3);
455
- border-top: 1px dashed var(--rdb-color-border);
456
505
  background: var(--rdb-color-bg-elevated);
457
506
  font-size: var(--rdb-font-size-xs);
458
507
  color: var(--rdb-color-muted);
@@ -497,12 +546,12 @@
497
546
  font-size: var(--rdb-font-size-xs);
498
547
  cursor: pointer;
499
548
  padding: var(--rdb-space-1) var(--rdb-space-2);
500
- border-radius: 0;
549
+ border-radius: var(--rdb-radius);
501
550
  transition: background 0.1s;
502
551
  }
503
552
 
504
553
  .rdb-schema__node-header:hover {
505
- background: rgba(255, 255, 255, 0.05);
554
+ background: var(--rdb-color-hover-bg-strong);
506
555
  }
507
556
 
508
557
  .rdb-schema__node-toggle {
@@ -551,12 +600,12 @@
551
600
  display: flex;
552
601
  justify-content: flex-end;
553
602
  padding: var(--rdb-space-1) var(--rdb-space-2);
554
- border-bottom: 1px dashed var(--rdb-color-border);
555
603
  }
556
604
 
557
605
  .rdb-schema__reload-btn {
558
606
  background: none;
559
607
  border: 1px solid var(--rdb-color-border);
608
+ border-radius: var(--rdb-radius);
560
609
  color: var(--rdb-color-muted);
561
610
  font-family: var(--rdb-font-mono);
562
611
  font-size: var(--rdb-font-size-xs);
@@ -586,7 +635,6 @@
586
635
 
587
636
  .rdb-history__search {
588
637
  padding: var(--rdb-space-2) var(--rdb-space-3);
589
- border-bottom: 1px dashed var(--rdb-color-border);
590
638
  flex-shrink: 0;
591
639
  }
592
640
 
@@ -597,6 +645,7 @@
597
645
  padding: var(--rdb-space-1) var(--rdb-space-2);
598
646
  background: var(--rdb-color-bg);
599
647
  border: 1px solid var(--rdb-color-border);
648
+ border-radius: var(--rdb-radius);
600
649
  color: var(--rdb-color-text);
601
650
  outline: none;
602
651
  }
@@ -615,13 +664,12 @@
615
664
  flex-direction: column;
616
665
  gap: var(--rdb-space-1);
617
666
  padding: var(--rdb-space-2) var(--rdb-space-3);
618
- border-bottom: 1px solid rgba(255, 255, 255, 0.05);
619
667
  cursor: pointer;
620
668
  transition: background 0.1s;
621
669
  }
622
670
 
623
671
  .rdb-history__entry:hover {
624
- background: rgba(255, 255, 255, 0.03);
672
+ background: var(--rdb-color-hover-bg);
625
673
  }
626
674
 
627
675
  .rdb-history__entry-meta {
@@ -669,7 +717,6 @@
669
717
  align-items: center;
670
718
  justify-content: space-between;
671
719
  padding: var(--rdb-space-1) var(--rdb-space-3);
672
- border-bottom: 1px dashed var(--rdb-color-border);
673
720
  background: var(--rdb-color-bg-elevated);
674
721
  flex-shrink: 0;
675
722
  }
@@ -717,61 +764,35 @@
717
764
  .rdb-editor-toolbar__btn {
718
765
  font-family: var(--rdb-font-mono);
719
766
  font-size: var(--rdb-font-size-xs);
767
+ font-weight: 600;
720
768
  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;
769
+ border: none;
770
+ border-radius: var(--rdb-radius);
771
+ color: var(--rdb-color-bg);
772
+ background: var(--rdb-color-primary);
724
773
  cursor: pointer;
725
774
  transition: all 0.15s;
726
775
  }
727
776
 
728
777
  .rdb-editor-toolbar__btn:hover:not(:disabled) {
729
- background: var(--rdb-color-primary);
730
- color: var(--rdb-color-bg);
778
+ background: var(--rdb-color-primary-hover);
731
779
  }
732
780
 
733
781
  .rdb-editor-toolbar__btn:disabled {
734
- opacity: 0.5;
782
+ opacity: 0.3;
735
783
  cursor: not-allowed;
736
784
  }
737
785
 
738
786
  .rdb-editor-toolbar__btn--secondary {
739
- border-color: var(--rdb-color-border);
740
- color: var(--rdb-color-muted);
787
+ background: transparent;
788
+ border: 1px solid var(--rdb-color-border);
789
+ color: var(--rdb-color-secondary);
790
+ font-weight: 400;
741
791
  }
742
792
 
743
793
  .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);
794
+ border-color: var(--rdb-color-primary);
795
+ color: var(--rdb-color-primary);
775
796
  }
776
797
 
777
798
  .rdb-editor-toolbar__hint {
@@ -788,7 +809,6 @@
788
809
  right: 0;
789
810
  z-index: 10;
790
811
  background: var(--rdb-color-bg-elevated);
791
- border-bottom: 1px dashed var(--rdb-color-border);
792
812
  padding: var(--rdb-space-3);
793
813
  display: flex;
794
814
  flex-direction: column;
@@ -812,6 +832,7 @@
812
832
  font-size: var(--rdb-font-size-xs);
813
833
  padding: var(--rdb-space-1) var(--rdb-space-3);
814
834
  border: 1px solid var(--rdb-color-border);
835
+ border-radius: var(--rdb-radius);
815
836
  color: var(--rdb-color-muted);
816
837
  background: none;
817
838
  cursor: pointer;
@@ -846,6 +867,7 @@
846
867
  padding: var(--rdb-space-1) var(--rdb-space-2);
847
868
  background: var(--rdb-color-bg);
848
869
  border: 1px solid var(--rdb-color-border);
870
+ border-radius: var(--rdb-radius);
849
871
  color: var(--rdb-color-text);
850
872
  outline: none;
851
873
  }
@@ -868,6 +890,7 @@
868
890
  font-size: var(--rdb-font-size-xs);
869
891
  padding: var(--rdb-space-1) var(--rdb-space-3);
870
892
  border: 1px solid var(--rdb-color-primary);
893
+ border-radius: var(--rdb-radius);
871
894
  color: var(--rdb-color-primary);
872
895
  background: none;
873
896
  cursor: pointer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reifydb/console",
3
- "version": "0.4.6",
3
+ "version": "0.4.7",
4
4
  "description": "Database console and embeddable snippet component for ReifyDB",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -19,8 +19,8 @@
19
19
  "@monaco-editor/react": ">=4.0.0"
20
20
  },
21
21
  "dependencies": {
22
- "@reifydb/client": "0.4.6",
23
- "@reifydb/core": "0.4.6"
22
+ "@reifydb/client": "0.4.7",
23
+ "@reifydb/core": "0.4.7"
24
24
  },
25
25
  "devDependencies": {
26
26
  "@monaco-editor/react": "^4.7.0",