lynx-console 0.1.0 → 0.2.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 (48) hide show
  1. package/dist/index.cjs +205 -953
  2. package/dist/index.css +1248 -461
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.d.cts +79 -1
  5. package/dist/index.d.cts.map +1 -1
  6. package/dist/index.d.mts +79 -1
  7. package/dist/index.d.mts.map +1 -1
  8. package/dist/index.mjs +205 -953
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +1 -4
  11. package/src/components/BottomSheet.css +91 -0
  12. package/src/components/BottomSheet.tsx +10 -10
  13. package/src/components/ConsolePanel.css +402 -0
  14. package/src/components/ConsolePanel.tsx +62 -28
  15. package/src/components/FadeList.tsx +31 -0
  16. package/{dist/assets/src/components/FloatingButton.css.ts.vanilla-BaG0OI6p.css → src/components/FloatingButton.css} +22 -16
  17. package/src/components/FloatingButton.tsx +22 -19
  18. package/src/components/LogPanel.tsx +61 -79
  19. package/src/components/NetworkDetailSection.tsx +13 -13
  20. package/src/components/NetworkPanel.css +280 -0
  21. package/src/components/NetworkPanel.tsx +32 -52
  22. package/src/components/PerformancePanel.css +249 -0
  23. package/src/components/PerformancePanel.tsx +42 -42
  24. package/src/components/Tabs.css +78 -0
  25. package/src/components/Tabs.tsx +13 -11
  26. package/src/globals.d.ts +0 -5
  27. package/src/hooks/useLongPressDrag.ts +3 -3
  28. package/src/index.tsx +9 -6
  29. package/src/styles/global.css +8 -0
  30. package/src/styles/vars/color.ts +26 -213
  31. package/src/styles/vars/dimension.ts +5 -74
  32. package/src/styles/vars/index.css +65 -457
  33. package/src/styles/vars/index.ts +5 -9
  34. package/src/styles/vars/radius.ts +1 -11
  35. package/src/types.ts +8 -0
  36. package/dist/assets/src/components/BottomSheet.css.ts.vanilla-CulwSDhG.css +0 -83
  37. package/dist/assets/src/components/ConsolePanel.css.ts.vanilla-DFvHPEyg.css +0 -340
  38. package/dist/assets/src/components/NetworkPanel.css.ts.vanilla-DFMduT0T.css +0 -247
  39. package/dist/assets/src/components/PerformancePanel.css.ts.vanilla-D35LuXlW.css +0 -216
  40. package/dist/assets/src/components/Tabs.css.ts.vanilla-DD7L2oXt.css +0 -50
  41. package/src/components/BottomSheet.css.ts +0 -93
  42. package/src/components/ConsolePanel.css.ts +0 -354
  43. package/src/components/FloatingButton.css.ts +0 -73
  44. package/src/components/NetworkPanel.css.ts +0 -280
  45. package/src/components/PerformancePanel.css.ts +0 -224
  46. package/src/components/Tabs.css.ts +0 -66
  47. package/src/styles/global.css.ts +0 -10
  48. package/src/styles/typography.ts +0 -25
@@ -1,216 +0,0 @@
1
- .PerformancePanel_container__19p8bog0 {
2
- display: flex;
3
- flex-direction: column;
4
- flex: 1;
5
- padding-top: 4px;
6
- }
7
- .PerformancePanel_header__19p8bog1 {
8
- display: flex;
9
- flex-direction: row;
10
- align-items: center;
11
- justify-content: space-between;
12
- margin-bottom: 8px;
13
- padding-bottom: 4px;
14
- border-bottom-width: 1px;
15
- border-bottom-color: var(--seed-color-stroke-neutral-subtle);
16
- border-bottom-style: solid;
17
- }
18
- .PerformancePanel_count__19p8bog2 {
19
- font-size: 0.8125rem;
20
- line-height: 1.125rem;
21
- font-weight: var(--seed-font-weight-regular);
22
- color: var(--seed-color-fg-neutral-subtle);
23
- }
24
- .PerformancePanel_clearButton__19p8bog3 {
25
- padding: 6px 12px;
26
- background-color: var(--seed-color-bg-neutral-weak);
27
- border-radius: 4px;
28
- }
29
- .PerformancePanel_clearButtonText__19p8bog4 {
30
- font-size: 0.8125rem;
31
- line-height: 1.125rem;
32
- font-weight: var(--seed-font-weight-medium);
33
- color: var(--seed-color-fg-neutral);
34
- }
35
- .PerformancePanel_list__19p8bog5 {
36
- flex: 1;
37
- }
38
- .PerformancePanel_placeholder__19p8bog6 {
39
- display: flex;
40
- align-items: center;
41
- justify-content: center;
42
- height: 100%;
43
- }
44
- .PerformancePanel_placeholderText__19p8bog7 {
45
- font-size: 0.875rem;
46
- line-height: 1.1875rem;
47
- font-weight: var(--seed-font-weight-regular);
48
- color: var(--seed-color-fg-disabled);
49
- }
50
- .PerformancePanel_item__19p8bog8 {
51
- padding: 8px;
52
- border-bottom-width: 1px;
53
- border-bottom-color: var(--seed-color-stroke-neutral-weak);
54
- border-bottom-style: solid;
55
- }
56
- .PerformancePanel_itemHeader__19p8bog9 {
57
- display: flex;
58
- flex-direction: row;
59
- align-items: center;
60
- margin-bottom: 4px;
61
- gap: 8px;
62
- }
63
- .PerformancePanel_entryType__19p8boga {
64
- font-size: 0.75rem;
65
- line-height: 1rem;
66
- font-weight: var(--seed-font-weight-bold);
67
- padding: 0 6px;
68
- border-radius: 2px;
69
- color: var(--seed-color-fg-neutral);
70
- background-color: var(--seed-color-bg-neutral-weak);
71
- }
72
- .PerformancePanel_entryType_type_init__19p8bogb {
73
- color: var(--seed-color-palette-blue-600);
74
- background-color: var(--seed-color-palette-blue-100);
75
- }
76
- .PerformancePanel_entryType_type_metric__19p8bogc {
77
- color: var(--seed-color-palette-green-600);
78
- background-color: var(--seed-color-palette-green-100);
79
- }
80
- .PerformancePanel_entryType_type_pipeline__19p8bogd {
81
- color: var(--seed-color-palette-purple-600);
82
- background-color: var(--seed-color-palette-purple-100);
83
- }
84
- .PerformancePanel_entryType_type_resource__19p8boge {
85
- color: var(--seed-color-palette-yellow-600);
86
- background-color: var(--seed-color-palette-yellow-100);
87
- }
88
- .PerformancePanel_entryName__19p8bogf {
89
- font-size: 0.75rem;
90
- line-height: 1rem;
91
- font-weight: var(--seed-font-weight-medium);
92
- color: var(--seed-color-fg-neutral);
93
- }
94
- .PerformancePanel_timestamp__19p8bogg {
95
- font-size: 0.75rem;
96
- line-height: 1rem;
97
- font-weight: var(--seed-font-weight-regular);
98
- color: var(--seed-color-fg-neutral-subtle);
99
- }
100
- .PerformancePanel_fcpMetricHeader__19p8bogh {
101
- display: flex;
102
- flex-direction: row;
103
- align-items: center;
104
- gap: 8px;
105
- }
106
- .PerformancePanel_fcpHighlight__19p8bogi {
107
- font-size: 0.8125rem;
108
- line-height: 1.125rem;
109
- font-weight: var(--seed-font-weight-bold);
110
- color: var(--seed-color-palette-blue-600);
111
- background-color: var(--seed-color-palette-blue-100);
112
- padding: 4px 8px;
113
- border-radius: 4px;
114
- margin-top: 4px;
115
- }
116
- .PerformancePanel_metrics__19p8bogj {
117
- margin-top: 8px;
118
- display: flex;
119
- flex-direction: column;
120
- gap: 4px;
121
- }
122
- .PerformancePanel_metric__19p8bogk {
123
- display: flex;
124
- flex-direction: row;
125
- align-items: center;
126
- gap: 8px;
127
- padding: 4px 8px;
128
- background-color: var(--seed-color-bg-neutral-weak);
129
- border-radius: 2px;
130
- }
131
- .PerformancePanel_metricName__19p8bogl {
132
- font-size: 0.8125rem;
133
- line-height: 1.125rem;
134
- font-weight: var(--seed-font-weight-medium);
135
- color: var(--seed-color-fg-neutral-subtle);
136
- min-width: 100px;
137
- flex-shrink: 0;
138
- }
139
- .PerformancePanel_metricValue__19p8bogm {
140
- font-size: 0.8125rem;
141
- line-height: 1.125rem;
142
- font-weight: var(--seed-font-weight-bold);
143
- color: var(--seed-color-palette-green-600);
144
- flex: 1;
145
- }
146
- .PerformancePanel_detailsContainer__19p8bogn {
147
- margin-top: 12px;
148
- display: flex;
149
- flex-direction: column;
150
- gap: 12px;
151
- }
152
- .PerformancePanel_fcpSection__19p8bogo {
153
- display: flex;
154
- flex-direction: column;
155
- gap: 8px;
156
- }
157
- .PerformancePanel_fcpSectionDescription__19p8bogp {
158
- font-size: 0.8125rem;
159
- line-height: 1.125rem;
160
- font-weight: var(--seed-font-weight-regular);
161
- color: var(--seed-color-fg-neutral-subtle);
162
- margin-bottom: 4px;
163
- }
164
- .PerformancePanel_fcpMetric__19p8bogq {
165
- background-color: var(--seed-color-bg-layer-default);
166
- border-radius: 4px;
167
- display: flex;
168
- flex-direction: column;
169
- gap: 4px;
170
- }
171
- .PerformancePanel_fcpMetricName__19p8bogr {
172
- font-size: 0.75rem;
173
- line-height: 1rem;
174
- font-weight: var(--seed-font-weight-bold);
175
- color: var(--seed-color-fg-neutral);
176
- }
177
- .PerformancePanel_fcpMetricValue__19p8bogs {
178
- font-size: 0.6875rem;
179
- line-height: 0.9375rem;
180
- font-weight: var(--seed-font-weight-bold);
181
- color: var(--seed-color-palette-blue-600);
182
- }
183
- .PerformancePanel_fcpMetricDescription__19p8bogt {
184
- font-size: 0.8125rem;
185
- line-height: 1.125rem;
186
- font-weight: var(--seed-font-weight-regular);
187
- color: var(--seed-color-fg-neutral-subtle);
188
- }
189
- .PerformancePanel_fcpMetricFormula__19p8bogu {
190
- font-size: 0.875rem;
191
- line-height: 1.1875rem;
192
- font-weight: var(--seed-font-weight-regular);
193
- color: var(--seed-color-fg-disabled);
194
- font-family: monospace;
195
- }
196
- .PerformancePanel_rawEntrySection__19p8bogv {
197
- padding: 12px;
198
- background-color: var(--seed-color-bg-neutral-weak);
199
- border-radius: 4px;
200
- }
201
- .PerformancePanel_detailTitle__19p8bogw {
202
- font-size: 0.8125rem;
203
- line-height: 1.125rem;
204
- font-weight: var(--seed-font-weight-bold);
205
- color: var(--seed-color-fg-neutral);
206
- margin-bottom: 8px;
207
- }
208
- .PerformancePanel_rawEntry__19p8bogx {
209
- font-size: 0.8125rem;
210
- line-height: 1.125rem;
211
- font-weight: var(--seed-font-weight-regular);
212
- color: var(--seed-color-fg-neutral-subtle);
213
- font-family: monospace;
214
- white-space: pre-wrap;
215
- word-break: break-all;
216
- }
@@ -1,50 +0,0 @@
1
- .Tabs_tabs__ud1j9z0 {
2
- flex: 1;
3
- display: flex;
4
- flex-direction: column;
5
- }
6
- .Tabs_tabHeader__ud1j9z1 {
7
- display: flex;
8
- box-shadow: inset 0 -1px 0 0 var(--seed-color-stroke-neutral-subtle);
9
- }
10
- .Tabs_tabTriggerButton__ud1j9z2 {
11
- flex: 1;
12
- color: var(--seed-color-fg-neutral-subtle);
13
- display: flex;
14
- justify-content: center;
15
- align-items: center;
16
- padding: 12px 0 10px 0;
17
- position: relative;
18
- }
19
- .Tabs_tabTriggerButtonText__ud1j9z3 {
20
- font-size: 1rem;
21
- line-height: 1.375rem;
22
- font-weight: var(--seed-font-weight-bold);
23
- color: var(--seed-color-fg-neutral-subtle);
24
- }
25
- .Tabs_tabTriggerButtonText_active_true__ud1j9z4 {
26
- color: var(--seed-color-fg-neutral);
27
- }
28
- .Tabs_tabTriggerIndicator__ud1j9z5 {
29
- position: absolute;
30
- bottom: 0;
31
- left: 0;
32
- padding: 0 16px;
33
- width: 100%;
34
- transition: 200ms;
35
- transition-timing-function: cubic-bezier(.35, 0, .35, 1);
36
- }
37
- .Tabs_tabTriggerIndicatorLine__ud1j9z6 {
38
- background-color: var(--seed-color-fg-neutral);
39
- width: 100%;
40
- height: 2px;
41
- }
42
- .Tabs_tabContents__ud1j9z7 {
43
- flex: 1;
44
- width: 100%;
45
- }
46
- .Tabs_tabContent__ud1j9z8 {
47
- width: 100%;
48
- display: flex;
49
- flex-direction: column;
50
- }
@@ -1,93 +0,0 @@
1
- import { style } from "@vanilla-extract/css";
2
- import { typography } from "../styles/typography";
3
- import { vars } from "../styles/vars";
4
-
5
- export const overlay = style({
6
- position: "fixed",
7
- top: 0,
8
- right: 0,
9
- bottom: 0,
10
- left: 0,
11
- display: "flex",
12
- justifyContent: "center",
13
- alignItems: "flex-end",
14
- zIndex: 9999,
15
- });
16
-
17
- export const backdrop = style({
18
- position: "fixed",
19
- top: 0,
20
- right: 0,
21
- bottom: 0,
22
- left: 0,
23
- zIndex: 9998,
24
- background: vars.$color.bg.overlay,
25
- transition: `opacity ${vars.$duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`,
26
- });
27
-
28
- export const content = style({
29
- position: "relative",
30
- display: "flex",
31
- flex: 1,
32
- flexDirection: "column",
33
- boxSizing: "border-box",
34
- wordBreak: "break-all",
35
- background: vars.$color.bg.layerFloating,
36
- borderTopLeftRadius: vars.$radius.r6,
37
- borderTopRightRadius: vars.$radius.r6,
38
- transition: `transform ${vars.$duration.d6} cubic-bezier(0.4, 0, 0.2, 1)`,
39
- height: "500px",
40
- overflow: "hidden",
41
- });
42
-
43
- export const handleContainer = style({
44
- position: "absolute",
45
- top: 0,
46
- left: 0,
47
- right: 0,
48
- height: "48px",
49
- display: "flex",
50
- justifyContent: "center",
51
- zIndex: 10,
52
- });
53
-
54
- export const handle = style({
55
- width: "36px",
56
- height: 4,
57
- backgroundColor: vars.$color.palette.gray400,
58
- borderRadius: "9999px",
59
- marginTop: "12px",
60
- });
61
-
62
- export const header = style({
63
- display: "flex",
64
- flexDirection: "column",
65
- gap: vars.$dimension.x2,
66
- paddingTop: vars.$dimension.x6,
67
- paddingBottom: vars.$dimension.x4,
68
- justifyContent: "flex-start",
69
- paddingLeft: vars.$dimension.spacingX.globalGutter,
70
- paddingRight: "50px",
71
- });
72
-
73
- export const title = style({
74
- ...typography("t7", "bold"),
75
- color: vars.$color.fg.neutral,
76
- });
77
-
78
- export const body = style({
79
- display: "flex",
80
- flexDirection: "column",
81
- flex: 1,
82
- padding: `0 ${vars.$dimension.x4}`,
83
- overflow: "hidden",
84
- });
85
-
86
- export const footer = style({
87
- display: "flex",
88
- flexDirection: "column",
89
- paddingLeft: vars.$dimension.spacingX.globalGutter,
90
- paddingRight: vars.$dimension.spacingX.globalGutter,
91
- paddingTop: vars.$dimension.x3,
92
- paddingBottom: vars.$dimension.x4,
93
- });
@@ -1,354 +0,0 @@
1
- import { style } from "@vanilla-extract/css";
2
- import { recipe } from "@vanilla-extract/recipes";
3
- import { typography } from "../styles/typography";
4
- import { vars } from "../styles/vars";
5
-
6
- export const container = style({
7
- display: "flex",
8
- flexDirection: "column",
9
- height: "100%",
10
- });
11
-
12
- export const placeholder = style({
13
- display: "flex",
14
- alignItems: "center",
15
- justifyContent: "center",
16
- height: "100%",
17
- });
18
-
19
- export const placeholderText = style({
20
- ...typography("t4", "regular"),
21
- color: vars.$color.fg.disabled,
22
- });
23
-
24
- export const logContainer = style({
25
- display: "flex",
26
- flexDirection: "column",
27
- flex: 1,
28
- paddingTop: 4,
29
- });
30
-
31
- export const logHeader = style({
32
- display: "flex",
33
- flexDirection: "row",
34
- alignItems: "center",
35
- justifyContent: "space-between",
36
- paddingBottom: 3,
37
- });
38
-
39
- export const fadeTop = style({
40
- height: 20,
41
- marginBottom: -20,
42
- zIndex: 1,
43
- background: `linear-gradient(to bottom, ${vars.$color.bg.layerDefault}, #ffffff00)`,
44
- });
45
-
46
- export const filterWrapper = style({
47
- position: "relative",
48
- });
49
-
50
- export const filterButton = style({
51
- display: "flex",
52
- flexDirection: "row",
53
- alignItems: "center",
54
- padding: "3px 6px",
55
- backgroundColor: vars.$color.bg.neutralWeak,
56
- borderRadius: 4,
57
- });
58
-
59
- export const filterButtonText = style({
60
- ...typography("t3", "medium"),
61
- color: vars.$color.fg.neutral,
62
- });
63
-
64
- export const filterDropdown = style({
65
- position: "absolute",
66
- top: "100%",
67
- left: 0,
68
- marginTop: 4,
69
- backgroundColor: vars.$color.bg.layerDefault,
70
- borderWidth: 1,
71
- borderColor: vars.$color.stroke.neutralSubtle,
72
- borderStyle: "solid",
73
- borderRadius: 8,
74
- padding: "4px 0",
75
- zIndex: 100,
76
- minWidth: 90,
77
- });
78
-
79
- export const filterOption = style({
80
- display: "flex",
81
- flexDirection: "row",
82
- alignItems: "center",
83
- gap: 4,
84
- padding: "8px 12px",
85
- });
86
-
87
- export const filterCheckbox = recipe({
88
- base: {
89
- ...typography("t3", "medium"),
90
- width: 16,
91
- },
92
- variants: {
93
- level: {
94
- log: { color: vars.$color.palette.green600 },
95
- info: { color: vars.$color.palette.blue600 },
96
- warn: { color: vars.$color.palette.yellow600 },
97
- error: { color: vars.$color.palette.red600 },
98
- },
99
- },
100
- });
101
-
102
- export const filterLabel = recipe({
103
- base: {
104
- ...typography("t3", "medium"),
105
- },
106
- variants: {
107
- level: {
108
- log: { color: vars.$color.palette.green600 },
109
- info: { color: vars.$color.palette.blue600 },
110
- warn: { color: vars.$color.palette.yellow600 },
111
- error: { color: vars.$color.palette.red600 },
112
- },
113
- },
114
- });
115
-
116
- export const searchWrapper = style({
117
- display: "flex",
118
- flexDirection: "row",
119
- alignItems: "center",
120
- flex: 1,
121
- marginLeft: 8,
122
- marginRight: 8,
123
- borderBottomWidth: 1,
124
- borderBottomColor: vars.$color.stroke.neutralSubtle,
125
- borderBottomStyle: "solid",
126
- gap: 8,
127
- });
128
-
129
- export const searchPrompt = style({
130
- ...typography("t6", "medium"),
131
- color: vars.$color.fg.placeholder,
132
- });
133
-
134
- export const searchInput = style({
135
- flex: 1,
136
- ...typography("t3", "regular"),
137
- color: vars.$color.fg.neutral,
138
- caretColor: vars.$color.palette.green600,
139
- });
140
-
141
- export const clearButton = style({
142
- padding: "3px 6px",
143
- backgroundColor: vars.$color.bg.neutralWeak,
144
- borderRadius: 4,
145
- });
146
-
147
- export const clearButtonText = style({
148
- ...typography("t3", "medium"),
149
- color: vars.$color.fg.neutral,
150
- });
151
-
152
- export const logList = style({
153
- flex: 1,
154
- paddingTop: 0,
155
- paddingBottom: 0,
156
- });
157
-
158
- export const logItem = recipe({
159
- base: {
160
- padding: "8px",
161
- borderBottomWidth: 1,
162
- borderBottomColor: vars.$color.stroke.neutralWeak,
163
- borderBottomStyle: "solid",
164
- },
165
- variants: {
166
- level: {
167
- log: {},
168
- info: {},
169
- warn: {
170
- backgroundColor: vars.$color.palette.yellow100,
171
- },
172
- error: {
173
- backgroundColor: vars.$color.palette.red100,
174
- },
175
- },
176
- },
177
- });
178
-
179
- export const logItemHeader = style({
180
- display: "flex",
181
- flexDirection: "row",
182
- alignItems: "center",
183
- marginBottom: 4,
184
- });
185
-
186
- export const logLevel = recipe({
187
- base: {
188
- ...typography("t2", "bold"),
189
- marginRight: 8,
190
- },
191
- variants: {
192
- level: {
193
- log: {
194
- color: vars.$color.palette.green600,
195
- },
196
- info: {
197
- color: vars.$color.palette.blue600,
198
- },
199
- warn: {
200
- color: vars.$color.palette.yellow600,
201
- },
202
- error: {
203
- color: vars.$color.palette.red600,
204
- },
205
- },
206
- },
207
- });
208
-
209
- export const logTime = style({
210
- ...typography("t2", "regular"),
211
- color: vars.$color.fg.neutralSubtle,
212
- });
213
-
214
- export const toggleIndicator = style({
215
- ...typography("t2", "regular"),
216
- color: vars.$color.fg.neutralSubtle,
217
- marginLeft: 4,
218
- alignSelf: "flex-start",
219
- });
220
-
221
- export const logMessage = style({
222
- ...typography("t3", "regular"),
223
- color: vars.$color.fg.neutral,
224
- wordBreak: "break-all",
225
- });
226
-
227
- export const logArgsContainer = style({
228
- display: "flex",
229
- flexDirection: "row",
230
- flexWrap: "wrap",
231
- gap: 8,
232
- });
233
-
234
- export const logArgItem = style({
235
- ...typography("t3", "regular"),
236
- });
237
-
238
- export const argNull = style({
239
- color: vars.$color.fg.neutralSubtle,
240
- });
241
-
242
- export const argUndefined = style({
243
- color: vars.$color.fg.neutralSubtle,
244
- });
245
-
246
- export const argString = recipe({
247
- base: {
248
- ...typography("t3", "regular"),
249
- },
250
- variants: {
251
- level: {
252
- log: { color: vars.$color.fg.neutral },
253
- info: { color: vars.$color.fg.neutral },
254
- warn: { color: vars.$color.palette.yellow900 },
255
- error: { color: vars.$color.palette.red900 },
256
- },
257
- },
258
- });
259
-
260
- export const argPrimitive = recipe({
261
- base: {
262
- ...typography("t3", "regular"),
263
- },
264
- variants: {
265
- level: {
266
- log: { color: vars.$color.palette.blue600 },
267
- info: { color: vars.$color.palette.blue600 },
268
- warn: { color: vars.$color.palette.yellow900 },
269
- error: { color: vars.$color.palette.red900 },
270
- },
271
- },
272
- });
273
-
274
- export const argObject = style({
275
- display: "flex",
276
- flexDirection: "column",
277
- });
278
-
279
- export const argObjectHeader = style({
280
- display: "flex",
281
- flexDirection: "row",
282
- alignItems: "center",
283
- gap: 4,
284
- });
285
-
286
- export const argObjectPreview = style({
287
- ...typography("t3", "medium"),
288
- color: vars.$color.fg.neutral,
289
- });
290
-
291
- export const argObjectContent = style({
292
- marginTop: 4,
293
- display: "flex",
294
- flexDirection: "column",
295
- gap: 4,
296
- });
297
-
298
- export const argObjectProperty = style({
299
- display: "flex",
300
- flexDirection: "row",
301
- alignItems: "flex-start",
302
- });
303
-
304
- export const argObjectKey = style({
305
- ...typography("t3", "medium"),
306
- color: vars.$color.palette.purple600,
307
- });
308
-
309
- export const argObjectJson = style({
310
- ...typography("t3", "regular"),
311
- color: vars.$color.fg.neutral,
312
- });
313
-
314
- export const fadeBottom = style({
315
- height: 20,
316
- marginTop: -20,
317
- zIndex: 1,
318
- background: `linear-gradient(to top, ${vars.$color.bg.layerDefault}, #ffffff00)`,
319
- });
320
-
321
- export const replInputRow = style({
322
- display: "flex",
323
- flexDirection: "row",
324
- alignItems: "center",
325
- gap: 8,
326
- paddingTop: 0,
327
- paddingBottom: 8,
328
- });
329
-
330
- export const replPrompt = style({
331
- ...typography("t10", "medium"),
332
- color: vars.$color.fg.placeholder,
333
- paddingBottom: 8,
334
- });
335
-
336
- export const replInput = style({
337
- flex: 1,
338
- ...typography("t5", "regular"),
339
- color: vars.$color.fg.neutral,
340
- caretColor: vars.$color.palette.green600,
341
- paddingBottom: 8,
342
- });
343
-
344
- export const replRunButton = style({
345
- padding: "4px 10px",
346
- backgroundColor: vars.$color.palette.green100,
347
- borderRadius: 4,
348
- marginBottom: 8,
349
- });
350
-
351
- export const replRunButtonText = style({
352
- ...typography("t3", "medium"),
353
- color: vars.$color.palette.green600,
354
- });