solforge 0.2.4 → 0.2.5

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 (42) hide show
  1. package/README.md +471 -79
  2. package/cli.cjs +106 -78
  3. package/package.json +1 -1
  4. package/scripts/install.sh +1 -1
  5. package/scripts/postinstall.cjs +66 -58
  6. package/server/methods/program/get-token-accounts-by-owner.ts +7 -2
  7. package/server/ws-server.ts +4 -1
  8. package/src/api-server-entry.ts +91 -91
  9. package/src/cli/commands/rpc-start.ts +4 -1
  10. package/src/cli/main.ts +7 -3
  11. package/src/cli/run-solforge.ts +20 -6
  12. package/src/commands/add-program.ts +324 -328
  13. package/src/commands/init.ts +106 -106
  14. package/src/commands/list.ts +125 -125
  15. package/src/commands/mint.ts +246 -246
  16. package/src/commands/start.ts +834 -831
  17. package/src/commands/status.ts +80 -80
  18. package/src/commands/stop.ts +381 -382
  19. package/src/config/manager.ts +149 -149
  20. package/src/gui/public/app.css +1556 -1
  21. package/src/gui/public/build/main.css +1569 -1
  22. package/src/gui/server.ts +20 -21
  23. package/src/gui/src/app.tsx +56 -37
  24. package/src/gui/src/components/airdrop-mint-form.tsx +17 -11
  25. package/src/gui/src/components/clone-program-modal.tsx +6 -6
  26. package/src/gui/src/components/clone-token-modal.tsx +7 -7
  27. package/src/gui/src/components/modal.tsx +13 -11
  28. package/src/gui/src/components/programs-panel.tsx +27 -15
  29. package/src/gui/src/components/status-panel.tsx +31 -17
  30. package/src/gui/src/components/tokens-panel.tsx +25 -19
  31. package/src/gui/src/index.css +491 -463
  32. package/src/index.ts +161 -146
  33. package/src/rpc/start.ts +1 -1
  34. package/src/services/api-server.ts +470 -473
  35. package/src/services/port-manager.ts +167 -167
  36. package/src/services/process-registry.ts +143 -143
  37. package/src/services/program-cloner.ts +312 -312
  38. package/src/services/token-cloner.ts +799 -797
  39. package/src/services/validator.ts +288 -288
  40. package/src/types/config.ts +71 -71
  41. package/src/utils/shell.ts +75 -75
  42. package/src/utils/token-loader.ts +77 -77
package/src/gui/src/index.css CHANGED
@@ -3,527 +3,555 @@
3
3
  @tailwind utilities;
4
4
 
5
5
  :root {
6
- color-scheme: dark;
7
-
8
- /* Professional Color Palette */
9
- --color-bg-base: #0a0a0f;
10
- --color-bg-surface: #12121a;
11
- --color-bg-elevated: #1a1a24;
12
- --color-bg-hover: #22222e;
13
- --color-bg-active: #2a2a38;
14
-
15
- /* Accent Colors - Purple/Violet gradient */
16
- --color-accent-primary: #8b5cf6;
17
- --color-accent-secondary: #a78bfa;
18
- --color-accent-tertiary: #c4b5fd;
19
- --color-accent-glow: rgba(139, 92, 246, 0.4);
20
-
21
- /* Status Colors */
22
- --color-success: #10b981;
23
- --color-warning: #f59e0b;
24
- --color-error: #ef4444;
25
- --color-info: #3b82f6;
26
-
27
- /* Text Colors */
28
- --color-text-primary: #f3f4f6;
29
- --color-text-secondary: #9ca3af;
30
- --color-text-tertiary: #6b7280;
31
- --color-text-muted: #4b5563;
32
-
33
- /* Borders */
34
- --color-border-subtle: rgba(255, 255, 255, 0.06);
35
- --color-border-default: rgba(255, 255, 255, 0.1);
36
- --color-border-strong: rgba(255, 255, 255, 0.15);
37
-
38
- /* Shadows */
39
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
40
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
41
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
42
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
43
- --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
44
- --shadow-glow: 0 0 50px rgba(139, 92, 246, 0.3);
45
-
46
- /* Animations */
47
- --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
48
- --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
49
- --transition-spring: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
6
+ color-scheme: dark;
7
+
8
+ /* Professional Color Palette */
9
+ --color-bg-base: #0a0a0f;
10
+ --color-bg-surface: #12121a;
11
+ --color-bg-elevated: #1a1a24;
12
+ --color-bg-hover: #22222e;
13
+ --color-bg-active: #2a2a38;
14
+
15
+ /* Accent Colors - Purple/Violet gradient */
16
+ --color-accent-primary: #8b5cf6;
17
+ --color-accent-secondary: #a78bfa;
18
+ --color-accent-tertiary: #c4b5fd;
19
+ --color-accent-glow: rgba(139, 92, 246, 0.4);
20
+
21
+ /* Status Colors */
22
+ --color-success: #10b981;
23
+ --color-warning: #f59e0b;
24
+ --color-error: #ef4444;
25
+ --color-info: #3b82f6;
26
+
27
+ /* Text Colors */
28
+ --color-text-primary: #f3f4f6;
29
+ --color-text-secondary: #9ca3af;
30
+ --color-text-tertiary: #6b7280;
31
+ --color-text-muted: #4b5563;
32
+
33
+ /* Borders */
34
+ --color-border-subtle: rgba(255, 255, 255, 0.06);
35
+ --color-border-default: rgba(255, 255, 255, 0.1);
36
+ --color-border-strong: rgba(255, 255, 255, 0.15);
37
+
38
+ /* Shadows */
39
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
40
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
41
+ --shadow-lg:
42
+ 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
43
+ --shadow-xl:
44
+ 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
45
+ --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
46
+ --shadow-glow: 0 0 50px rgba(139, 92, 246, 0.3);
47
+
48
+ /* Animations */
49
+ --transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
50
+ --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
51
+ --transition-spring: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
50
52
  }
51
53
 
52
54
  * {
53
- box-sizing: border-box;
54
- margin: 0;
55
- padding: 0;
55
+ box-sizing: border-box;
56
+ margin: 0;
57
+ padding: 0;
56
58
  }
57
59
 
58
60
  html {
59
- font-family: 'Inter', system-ui, -apple-system, sans-serif;
60
- font-feature-settings: 'cv11', 'ss01';
61
- font-variation-settings: 'opsz' 32;
62
- scroll-behavior: smooth;
61
+ font-family: "Inter", system-ui, -apple-system, sans-serif;
62
+ font-feature-settings: "cv11", "ss01";
63
+ font-variation-settings: "opsz" 32;
64
+ scroll-behavior: smooth;
63
65
  }
64
66
 
65
67
  body {
66
- @apply antialiased;
67
- background: var(--color-bg-base);
68
- color: var(--color-text-primary);
69
- min-height: 100vh;
70
- position: relative;
71
- overflow-x: hidden;
68
+ @apply antialiased;
69
+ background: var(--color-bg-base);
70
+ color: var(--color-text-primary);
71
+ min-height: 100vh;
72
+ position: relative;
73
+ overflow-x: hidden;
72
74
  }
73
75
 
74
76
  /* Background gradient effect */
75
77
  body::before {
76
- content: '';
77
- position: fixed;
78
- top: 0;
79
- left: 0;
80
- right: 0;
81
- bottom: 0;
82
- background: radial-gradient(
83
- ellipse at top left,
84
- rgba(139, 92, 246, 0.15) 0%,
85
- transparent 50%
86
- ),
87
- radial-gradient(
88
- ellipse at bottom right,
89
- rgba(167, 139, 250, 0.1) 0%,
90
- transparent 50%
91
- );
92
- pointer-events: none;
93
- z-index: 0;
78
+ content: "";
79
+ position: fixed;
80
+ top: 0;
81
+ left: 0;
82
+ right: 0;
83
+ bottom: 0;
84
+ background:
85
+ radial-gradient(
86
+ ellipse at top left,
87
+ rgba(139, 92, 246, 0.15) 0%,
88
+ transparent 50%
89
+ ),
90
+ radial-gradient(
91
+ ellipse at bottom right,
92
+ rgba(167, 139, 250, 0.1) 0%,
93
+ transparent 50%
94
+ );
95
+ pointer-events: none;
96
+ z-index: 0;
94
97
  }
95
98
 
96
99
  #root {
97
- position: relative;
98
- z-index: 1;
100
+ position: relative;
101
+ z-index: 1;
99
102
  }
100
103
 
101
104
  /* Custom Scrollbar */
102
105
  ::-webkit-scrollbar {
103
- width: 12px;
104
- height: 12px;
106
+ width: 12px;
107
+ height: 12px;
105
108
  }
106
109
 
107
110
  ::-webkit-scrollbar-track {
108
- background: var(--color-bg-surface);
109
- border-radius: 6px;
111
+ background: var(--color-bg-surface);
112
+ border-radius: 6px;
110
113
  }
111
114
 
112
115
  ::-webkit-scrollbar-thumb {
113
- background: linear-gradient(180deg, var(--color-accent-primary), var(--color-accent-secondary));
114
- border-radius: 6px;
115
- border: 2px solid var(--color-bg-surface);
116
+ background: linear-gradient(
117
+ 180deg,
118
+ var(--color-accent-primary),
119
+ var(--color-accent-secondary)
120
+ );
121
+ border-radius: 6px;
122
+ border: 2px solid var(--color-bg-surface);
116
123
  }
117
124
 
118
125
  ::-webkit-scrollbar-thumb:hover {
119
- background: linear-gradient(180deg, var(--color-accent-secondary), var(--color-accent-tertiary));
126
+ background: linear-gradient(
127
+ 180deg,
128
+ var(--color-accent-secondary),
129
+ var(--color-accent-tertiary)
130
+ );
120
131
  }
121
132
 
122
133
  /* Animations */
123
134
  @keyframes fadeIn {
124
- from {
125
- opacity: 0;
126
- transform: translateY(10px);
127
- }
128
- to {
129
- opacity: 1;
130
- transform: translateY(0);
131
- }
135
+ from {
136
+ opacity: 0;
137
+ transform: translateY(10px);
138
+ }
139
+ to {
140
+ opacity: 1;
141
+ transform: translateY(0);
142
+ }
132
143
  }
133
144
 
134
145
  @keyframes slideIn {
135
- from {
136
- opacity: 0;
137
- transform: translateX(-20px);
138
- }
139
- to {
140
- opacity: 1;
141
- transform: translateX(0);
142
- }
146
+ from {
147
+ opacity: 0;
148
+ transform: translateX(-20px);
149
+ }
150
+ to {
151
+ opacity: 1;
152
+ transform: translateX(0);
153
+ }
143
154
  }
144
155
 
145
156
  @keyframes pulse {
146
- 0%, 100% {
147
- opacity: 1;
148
- }
149
- 50% {
150
- opacity: 0.5;
151
- }
157
+ 0%,
158
+ 100% {
159
+ opacity: 1;
160
+ }
161
+ 50% {
162
+ opacity: 0.5;
163
+ }
152
164
  }
153
165
 
154
166
  @keyframes shimmer {
155
- 0% {
156
- background-position: -1000px 0;
157
- }
158
- 100% {
159
- background-position: 1000px 0;
160
- }
167
+ 0% {
168
+ background-position: -1000px 0;
169
+ }
170
+ 100% {
171
+ background-position: 1000px 0;
172
+ }
161
173
  }
162
174
 
163
175
  @keyframes glow {
164
- 0%, 100% {
165
- box-shadow: 0 0 20px rgba(139, 92, 246, 0.5),
166
- inset 0 0 20px rgba(139, 92, 246, 0.1);
167
- }
168
- 50% {
169
- box-shadow: 0 0 40px rgba(139, 92, 246, 0.8),
170
- inset 0 0 30px rgba(139, 92, 246, 0.2);
171
- }
176
+ 0%,
177
+ 100% {
178
+ box-shadow:
179
+ 0 0 20px rgba(139, 92, 246, 0.5),
180
+ inset 0 0 20px rgba(139, 92, 246, 0.1);
181
+ }
182
+ 50% {
183
+ box-shadow:
184
+ 0 0 40px rgba(139, 92, 246, 0.8),
185
+ inset 0 0 30px rgba(139, 92, 246, 0.2);
186
+ }
172
187
  }
173
188
 
174
189
  /* Component Classes */
175
190
  @layer components {
176
- /* Glass Morphism Panel */
177
- .glass-panel {
178
- @apply rounded-2xl border;
179
- background: linear-gradient(
180
- 135deg,
181
- rgba(255, 255, 255, 0.03) 0%,
182
- rgba(255, 255, 255, 0.01) 100%
183
- );
184
- border-color: var(--color-border-default);
185
- backdrop-filter: blur(20px);
186
- box-shadow: var(--shadow-xl), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
187
- transition: var(--transition-base);
188
- }
189
-
190
- .glass-panel:hover {
191
- border-color: var(--color-border-strong);
192
- box-shadow: var(--shadow-2xl), var(--shadow-glow), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
193
- }
194
-
195
- /* Card Styles */
196
- .card {
197
- @apply rounded-xl p-6;
198
- background: var(--color-bg-surface);
199
- border: 1px solid var(--color-border-subtle);
200
- transition: var(--transition-smooth);
201
- animation: fadeIn 0.5s ease-out;
202
- }
203
-
204
- .card:hover {
205
- background: var(--color-bg-elevated);
206
- border-color: var(--color-border-default);
207
- transform: translateY(-2px);
208
- box-shadow: var(--shadow-lg);
209
- }
210
-
211
- .card-interactive {
212
- @apply card cursor-pointer;
213
- }
214
-
215
- .card-interactive:active {
216
- transform: scale(0.98);
217
- }
218
-
219
- /* Modern Buttons */
220
- .btn {
221
- @apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 font-medium;
222
- transition: var(--transition-base);
223
- position: relative;
224
- overflow: hidden;
225
- text-transform: none;
226
- letter-spacing: 0.01em;
227
- }
228
-
229
- .btn-primary {
230
- @apply btn;
231
- background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
232
- color: white;
233
- box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
234
- }
235
-
236
- .btn-primary:hover {
237
- box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5);
238
- transform: translateY(-2px);
239
- }
240
-
241
- .btn-primary:active {
242
- transform: translateY(0);
243
- }
244
-
245
- .btn-secondary {
246
- @apply btn;
247
- background: var(--color-bg-elevated);
248
- color: var(--color-text-primary);
249
- border: 1px solid var(--color-border-default);
250
- }
251
-
252
- .btn-secondary:hover {
253
- background: var(--color-bg-hover);
254
- border-color: var(--color-accent-primary);
255
- box-shadow: inset 0 0 0 1px var(--color-accent-primary);
256
- }
257
-
258
- .btn-ghost {
259
- @apply btn;
260
- background: transparent;
261
- color: var(--color-text-secondary);
262
- }
263
-
264
- .btn-ghost:hover {
265
- background: var(--color-bg-elevated);
266
- color: var(--color-text-primary);
267
- }
268
-
269
- .btn-icon {
270
- @apply inline-flex items-center justify-center;
271
- width: 40px;
272
- height: 40px;
273
- border-radius: 12px;
274
- background: var(--color-bg-elevated);
275
- border: 1px solid var(--color-border-subtle);
276
- color: var(--color-text-secondary);
277
- transition: var(--transition-base);
278
- }
279
-
280
- .btn-icon:hover {
281
- background: var(--color-bg-hover);
282
- color: var(--color-accent-primary);
283
- border-color: var(--color-accent-primary);
284
- transform: scale(1.05);
285
- }
286
-
287
- /* Modern Input Fields */
288
- .input {
289
- @apply w-full rounded-xl px-4 py-3 text-sm;
290
- background: var(--color-bg-surface);
291
- border: 1px solid var(--color-border-subtle);
292
- color: var(--color-text-primary);
293
- transition: var(--transition-base);
294
- font-family: 'Inter', sans-serif;
295
- }
296
-
297
- .input:hover {
298
- background: var(--color-bg-elevated);
299
- border-color: var(--color-border-default);
300
- }
301
-
302
- .input:focus {
303
- outline: none;
304
- border-color: var(--color-accent-primary);
305
- box-shadow: 0 0 0 3px var(--color-accent-glow);
306
- background: var(--color-bg-elevated);
307
- }
308
-
309
- .input::placeholder {
310
- color: var(--color-text-muted);
311
- }
312
-
313
- /* Select */
314
- .select {
315
- @apply input cursor-pointer;
316
- padding-right: 40px;
317
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
318
- background-repeat: no-repeat;
319
- background-position: right 12px center;
320
- background-size: 20px;
321
- }
322
-
323
- /* Checkbox */
324
- .checkbox {
325
- @apply h-5 w-5 rounded-md;
326
- background: var(--color-bg-surface);
327
- border: 1px solid var(--color-border-default);
328
- cursor: pointer;
329
- transition: var(--transition-base);
330
- }
331
-
332
- .checkbox:checked {
333
- background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
334
- border-color: var(--color-accent-primary);
335
- }
336
-
337
- .checkbox:focus {
338
- outline: none;
339
- box-shadow: 0 0 0 3px var(--color-accent-glow);
340
- }
341
-
342
- /* Tables */
343
- .table-modern {
344
- @apply w-full;
345
- border-collapse: separate;
346
- border-spacing: 0;
347
- }
348
-
349
- .table-modern thead {
350
- background: var(--color-bg-surface);
351
- }
352
-
353
- .table-modern th {
354
- @apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider;
355
- color: var(--color-text-tertiary);
356
- border-bottom: 1px solid var(--color-border-subtle);
357
- }
358
-
359
- .table-modern td {
360
- @apply px-4 py-3 text-sm;
361
- color: var(--color-text-primary);
362
- border-bottom: 1px solid var(--color-border-subtle);
363
- }
364
-
365
- .table-modern tbody tr {
366
- transition: var(--transition-base);
367
- }
368
-
369
- .table-modern tbody tr:hover {
370
- background: var(--color-bg-elevated);
371
- }
372
-
373
- /* Badges */
374
- .badge {
375
- @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium;
376
- background: var(--color-bg-elevated);
377
- color: var(--color-text-secondary);
378
- border: 1px solid var(--color-border-subtle);
379
- }
380
-
381
- .badge-success {
382
- background: rgba(16, 185, 129, 0.1);
383
- color: #10b981;
384
- border-color: rgba(16, 185, 129, 0.2);
385
- }
386
-
387
- .badge-warning {
388
- background: rgba(245, 158, 11, 0.1);
389
- color: #f59e0b;
390
- border-color: rgba(245, 158, 11, 0.2);
391
- }
392
-
393
- .badge-error {
394
- background: rgba(239, 68, 68, 0.1);
395
- color: #ef4444;
396
- border-color: rgba(239, 68, 68, 0.2);
397
- }
398
-
399
- .badge-info {
400
- background: rgba(59, 130, 246, 0.1);
401
- color: #3b82f6;
402
- border-color: rgba(59, 130, 246, 0.2);
403
- }
404
-
405
- /* Loading States */
406
- .skeleton {
407
- @apply rounded-lg;
408
- background: linear-gradient(
409
- 90deg,
410
- var(--color-bg-surface) 25%,
411
- var(--color-bg-elevated) 50%,
412
- var(--color-bg-surface) 75%
413
- );
414
- background-size: 1000px 100%;
415
- animation: shimmer 2s infinite;
416
- }
417
-
418
- .spinner {
419
- border: 3px solid var(--color-border-subtle);
420
- border-top-color: var(--color-accent-primary);
421
- border-radius: 50%;
422
- width: 20px;
423
- height: 20px;
424
- animation: spin 1s linear infinite;
425
- }
426
-
427
- @keyframes spin {
428
- to {
429
- transform: rotate(360deg);
430
- }
431
- }
432
-
433
- /* Tooltips */
434
- .tooltip {
435
- @apply absolute z-50 rounded-lg px-3 py-2 text-xs font-medium;
436
- background: var(--color-bg-elevated);
437
- color: var(--color-text-primary);
438
- border: 1px solid var(--color-border-default);
439
- box-shadow: var(--shadow-xl);
440
- pointer-events: none;
441
- opacity: 0;
442
- transition: opacity 0.2s;
443
- }
444
-
445
- .tooltip.show {
446
- opacity: 1;
447
- }
448
-
449
- /* Dividers */
450
- .divider {
451
- @apply my-6;
452
- height: 1px;
453
- background: linear-gradient(
454
- 90deg,
455
- transparent,
456
- var(--color-border-default) 50%,
457
- transparent
458
- );
459
- }
460
-
461
- /* Status Indicators */
462
- .status-dot {
463
- @apply inline-block h-2 w-2 rounded-full;
464
- animation: pulse 2s infinite;
465
- }
466
-
467
- .status-dot.online {
468
- background: var(--color-success);
469
- box-shadow: 0 0 8px var(--color-success);
470
- }
471
-
472
- .status-dot.offline {
473
- background: var(--color-text-muted);
474
- }
475
-
476
- .status-dot.error {
477
- background: var(--color-error);
478
- box-shadow: 0 0 8px var(--color-error);
479
- }
480
-
481
- /* Code blocks */
482
- .code-block {
483
- @apply rounded-xl p-4;
484
- background: var(--color-bg-base);
485
- border: 1px solid var(--color-border-subtle);
486
- font-family: 'JetBrains Mono', monospace;
487
- font-size: 0.875rem;
488
- line-height: 1.5;
489
- overflow-x: auto;
490
- }
491
-
492
- .code-inline {
493
- @apply rounded px-1.5 py-0.5;
494
- background: var(--color-bg-elevated);
495
- border: 1px solid var(--color-border-subtle);
496
- font-family: 'JetBrains Mono', monospace;
497
- font-size: 0.875em;
498
- }
499
-
500
- /* Responsive utilities */
501
- @media (max-width: 640px) {
502
- .hide-mobile {
503
- display: none;
504
- }
505
- }
506
-
507
- @media (min-width: 641px) {
508
- .show-mobile {
509
- display: none;
510
- }
511
- }
191
+ /* Glass Morphism Panel */
192
+ .glass-panel {
193
+ @apply rounded-2xl border;
194
+ background: linear-gradient(
195
+ 135deg,
196
+ rgba(255, 255, 255, 0.03) 0%,
197
+ rgba(255, 255, 255, 0.01) 100%
198
+ );
199
+ border-color: var(--color-border-default);
200
+ backdrop-filter: blur(20px);
201
+ box-shadow:
202
+ var(--shadow-xl),
203
+ inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
204
+ transition: var(--transition-base);
205
+ }
206
+
207
+ .glass-panel:hover {
208
+ border-color: var(--color-border-strong);
209
+ box-shadow:
210
+ var(--shadow-2xl),
211
+ var(--shadow-glow),
212
+ inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
213
+ }
214
+
215
+ /* Card Styles */
216
+ .card {
217
+ @apply rounded-xl p-6;
218
+ background: var(--color-bg-surface);
219
+ border: 1px solid var(--color-border-subtle);
220
+ transition: var(--transition-smooth);
221
+ animation: fadeIn 0.5s ease-out;
222
+ }
223
+
224
+ .card:hover {
225
+ background: var(--color-bg-elevated);
226
+ border-color: var(--color-border-default);
227
+ transform: translateY(-2px);
228
+ box-shadow: var(--shadow-lg);
229
+ }
230
+
231
+ .card-interactive {
232
+ @apply card cursor-pointer;
233
+ }
234
+
235
+ .card-interactive:active {
236
+ transform: scale(0.98);
237
+ }
238
+
239
+ /* Modern Buttons */
240
+ .btn {
241
+ @apply inline-flex items-center justify-center gap-2 rounded-xl px-5 py-2.5 font-medium;
242
+ transition: var(--transition-base);
243
+ position: relative;
244
+ overflow: hidden;
245
+ text-transform: none;
246
+ letter-spacing: 0.01em;
247
+ }
248
+
249
+ .btn-primary {
250
+ @apply btn;
251
+ background: linear-gradient(
252
+ 135deg,
253
+ var(--color-accent-primary),
254
+ var(--color-accent-secondary)
255
+ );
256
+ color: white;
257
+ box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
258
+ }
259
+
260
+ .btn-primary:hover {
261
+ box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5);
262
+ transform: translateY(-2px);
263
+ }
264
+
265
+ .btn-primary:active {
266
+ transform: translateY(0);
267
+ }
268
+
269
+ .btn-secondary {
270
+ @apply btn;
271
+ background: var(--color-bg-elevated);
272
+ color: var(--color-text-primary);
273
+ border: 1px solid var(--color-border-default);
274
+ }
275
+
276
+ .btn-secondary:hover {
277
+ background: var(--color-bg-hover);
278
+ border-color: var(--color-accent-primary);
279
+ box-shadow: inset 0 0 0 1px var(--color-accent-primary);
280
+ }
281
+
282
+ .btn-ghost {
283
+ @apply btn;
284
+ background: transparent;
285
+ color: var(--color-text-secondary);
286
+ }
287
+
288
+ .btn-ghost:hover {
289
+ background: var(--color-bg-elevated);
290
+ color: var(--color-text-primary);
291
+ }
292
+
293
+ .btn-icon {
294
+ @apply inline-flex items-center justify-center;
295
+ width: 40px;
296
+ height: 40px;
297
+ border-radius: 12px;
298
+ background: var(--color-bg-elevated);
299
+ border: 1px solid var(--color-border-subtle);
300
+ color: var(--color-text-secondary);
301
+ transition: var(--transition-base);
302
+ }
303
+
304
+ .btn-icon:hover {
305
+ background: var(--color-bg-hover);
306
+ color: var(--color-accent-primary);
307
+ border-color: var(--color-accent-primary);
308
+ transform: scale(1.05);
309
+ }
310
+
311
+ /* Modern Input Fields */
312
+ .input {
313
+ @apply w-full rounded-xl px-4 py-3 text-sm;
314
+ background: var(--color-bg-surface);
315
+ border: 1px solid var(--color-border-subtle);
316
+ color: var(--color-text-primary);
317
+ transition: var(--transition-base);
318
+ font-family: "Inter", sans-serif;
319
+ }
320
+
321
+ .input:hover {
322
+ background: var(--color-bg-elevated);
323
+ border-color: var(--color-border-default);
324
+ }
325
+
326
+ .input:focus {
327
+ outline: none;
328
+ border-color: var(--color-accent-primary);
329
+ box-shadow: 0 0 0 3px var(--color-accent-glow);
330
+ background: var(--color-bg-elevated);
331
+ }
332
+
333
+ .input::placeholder {
334
+ color: var(--color-text-muted);
335
+ }
336
+
337
+ /* Select */
338
+ .select {
339
+ @apply input cursor-pointer;
340
+ padding-right: 40px;
341
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
342
+ background-repeat: no-repeat;
343
+ background-position: right 12px center;
344
+ background-size: 20px;
345
+ }
346
+
347
+ /* Checkbox */
348
+ .checkbox {
349
+ @apply h-5 w-5 rounded-md;
350
+ background: var(--color-bg-surface);
351
+ border: 1px solid var(--color-border-default);
352
+ cursor: pointer;
353
+ transition: var(--transition-base);
354
+ }
355
+
356
+ .checkbox:checked {
357
+ background: linear-gradient(
358
+ 135deg,
359
+ var(--color-accent-primary),
360
+ var(--color-accent-secondary)
361
+ );
362
+ border-color: var(--color-accent-primary);
363
+ }
364
+
365
+ .checkbox:focus {
366
+ outline: none;
367
+ box-shadow: 0 0 0 3px var(--color-accent-glow);
368
+ }
369
+
370
+ /* Tables */
371
+ .table-modern {
372
+ @apply w-full;
373
+ border-collapse: separate;
374
+ border-spacing: 0;
375
+ }
376
+
377
+ .table-modern thead {
378
+ background: var(--color-bg-surface);
379
+ }
380
+
381
+ .table-modern th {
382
+ @apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider;
383
+ color: var(--color-text-tertiary);
384
+ border-bottom: 1px solid var(--color-border-subtle);
385
+ }
386
+
387
+ .table-modern td {
388
+ @apply px-4 py-3 text-sm;
389
+ color: var(--color-text-primary);
390
+ border-bottom: 1px solid var(--color-border-subtle);
391
+ }
392
+
393
+ .table-modern tbody tr {
394
+ transition: var(--transition-base);
395
+ }
396
+
397
+ .table-modern tbody tr:hover {
398
+ background: var(--color-bg-elevated);
399
+ }
400
+
401
+ /* Badges */
402
+ .badge {
403
+ @apply inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium;
404
+ background: var(--color-bg-elevated);
405
+ color: var(--color-text-secondary);
406
+ border: 1px solid var(--color-border-subtle);
407
+ }
408
+
409
+ .badge-success {
410
+ background: rgba(16, 185, 129, 0.1);
411
+ color: #10b981;
412
+ border-color: rgba(16, 185, 129, 0.2);
413
+ }
414
+
415
+ .badge-warning {
416
+ background: rgba(245, 158, 11, 0.1);
417
+ color: #f59e0b;
418
+ border-color: rgba(245, 158, 11, 0.2);
419
+ }
420
+
421
+ .badge-error {
422
+ background: rgba(239, 68, 68, 0.1);
423
+ color: #ef4444;
424
+ border-color: rgba(239, 68, 68, 0.2);
425
+ }
426
+
427
+ .badge-info {
428
+ background: rgba(59, 130, 246, 0.1);
429
+ color: #3b82f6;
430
+ border-color: rgba(59, 130, 246, 0.2);
431
+ }
432
+
433
+ /* Loading States */
434
+ .skeleton {
435
+ @apply rounded-lg;
436
+ background: linear-gradient(
437
+ 90deg,
438
+ var(--color-bg-surface) 25%,
439
+ var(--color-bg-elevated) 50%,
440
+ var(--color-bg-surface) 75%
441
+ );
442
+ background-size: 1000px 100%;
443
+ animation: shimmer 2s infinite;
444
+ }
445
+
446
+ .spinner {
447
+ border: 3px solid var(--color-border-subtle);
448
+ border-top-color: var(--color-accent-primary);
449
+ border-radius: 50%;
450
+ width: 20px;
451
+ height: 20px;
452
+ animation: spin 1s linear infinite;
453
+ }
454
+
455
+ @keyframes spin {
456
+ to {
457
+ transform: rotate(360deg);
458
+ }
459
+ }
460
+
461
+ /* Tooltips */
462
+ .tooltip {
463
+ @apply absolute z-50 rounded-lg px-3 py-2 text-xs font-medium;
464
+ background: var(--color-bg-elevated);
465
+ color: var(--color-text-primary);
466
+ border: 1px solid var(--color-border-default);
467
+ box-shadow: var(--shadow-xl);
468
+ pointer-events: none;
469
+ opacity: 0;
470
+ transition: opacity 0.2s;
471
+ }
472
+
473
+ .tooltip.show {
474
+ opacity: 1;
475
+ }
476
+
477
+ /* Dividers */
478
+ .divider {
479
+ @apply my-6;
480
+ height: 1px;
481
+ background: linear-gradient(
482
+ 90deg,
483
+ transparent,
484
+ var(--color-border-default) 50%,
485
+ transparent
486
+ );
487
+ }
488
+
489
+ /* Status Indicators */
490
+ .status-dot {
491
+ @apply inline-block h-2 w-2 rounded-full;
492
+ animation: pulse 2s infinite;
493
+ }
494
+
495
+ .status-dot.online {
496
+ background: var(--color-success);
497
+ box-shadow: 0 0 8px var(--color-success);
498
+ }
499
+
500
+ .status-dot.offline {
501
+ background: var(--color-text-muted);
502
+ }
503
+
504
+ .status-dot.error {
505
+ background: var(--color-error);
506
+ box-shadow: 0 0 8px var(--color-error);
507
+ }
508
+
509
+ /* Code blocks */
510
+ .code-block {
511
+ @apply rounded-xl p-4;
512
+ background: var(--color-bg-base);
513
+ border: 1px solid var(--color-border-subtle);
514
+ font-family: "JetBrains Mono", monospace;
515
+ font-size: 0.875rem;
516
+ line-height: 1.5;
517
+ overflow-x: auto;
518
+ }
519
+
520
+ .code-inline {
521
+ @apply rounded px-1.5 py-0.5;
522
+ background: var(--color-bg-elevated);
523
+ border: 1px solid var(--color-border-subtle);
524
+ font-family: "JetBrains Mono", monospace;
525
+ font-size: 0.875em;
526
+ }
527
+
528
+ /* Responsive utilities */
529
+ @media (max-width: 640px) {
530
+ .hide-mobile {
531
+ display: none;
532
+ }
533
+ }
534
+
535
+ @media (min-width: 641px) {
536
+ .show-mobile {
537
+ display: none;
538
+ }
539
+ }
512
540
  }
513
541
 
514
542
  /* Tailwind overrides for consistency */
515
543
  .text-mono {
516
- font-family: 'JetBrains Mono', monospace;
544
+ font-family: "JetBrains Mono", monospace;
517
545
  }
518
546
 
519
547
  /* Focus visible styles */
520
548
  *:focus-visible {
521
- outline: 2px solid var(--color-accent-primary);
522
- outline-offset: 2px;
549
+ outline: 2px solid var(--color-accent-primary);
550
+ outline-offset: 2px;
523
551
  }
524
552
 
525
553
  /* Selection styles */
526
554
  ::selection {
527
- background: var(--color-accent-primary);
528
- color: white;
529
- }
555
+ background: var(--color-accent-primary);
556
+ color: white;
557
+ }