@orchestra-mcp/widgets 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.
package/dist/index.css ADDED
@@ -0,0 +1,656 @@
1
+ /* src/Widget/Widget.css */
2
+ .widget {
3
+ font-family:
4
+ system-ui,
5
+ -apple-system,
6
+ sans-serif;
7
+ border: 1px solid var(--color-border, #2a2a3e);
8
+ border-radius: 8px;
9
+ background-color: var(--color-bg, #1a1a2e);
10
+ color: var(--color-fg);
11
+ overflow: hidden;
12
+ display: flex;
13
+ flex-direction: column;
14
+ height: 100%;
15
+ min-height: 100%;
16
+ }
17
+ .widget--collapsed {
18
+ height: auto !important;
19
+ min-height: auto !important;
20
+ }
21
+ .widget--small .widget__header {
22
+ padding: 6px 10px;
23
+ }
24
+ .widget--small .widget__body {
25
+ padding: 8px 10px;
26
+ }
27
+ .widget--medium .widget__header {
28
+ padding: 8px 14px;
29
+ }
30
+ .widget--medium .widget__body {
31
+ padding: 12px 14px;
32
+ }
33
+ .widget--large .widget__header {
34
+ padding: 12px 18px;
35
+ }
36
+ .widget--large .widget__body {
37
+ padding: 16px 18px;
38
+ }
39
+ .widget__header {
40
+ display: flex;
41
+ align-items: center;
42
+ gap: 8px;
43
+ border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06));
44
+ }
45
+ .widget__header--collapsed {
46
+ border-bottom: none;
47
+ }
48
+ .widget__icon {
49
+ display: inline-flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ width: 30px;
53
+ height: 30px;
54
+ border-radius: 50%;
55
+ background: var(--widget-icon-bg, rgba(124, 58, 237, 0.15));
56
+ color: var(--color-accent);
57
+ flex-shrink: 0;
58
+ }
59
+ .widget__title-group {
60
+ display: flex;
61
+ flex-direction: column;
62
+ gap: 1px;
63
+ flex: 1;
64
+ min-width: 0;
65
+ }
66
+ .widget__title {
67
+ font-size: 14px;
68
+ font-weight: 600;
69
+ min-width: 0;
70
+ overflow: hidden;
71
+ text-overflow: ellipsis;
72
+ white-space: normal;
73
+ line-height: 1.3;
74
+ }
75
+ .widget__subtitle {
76
+ font-size: 11px;
77
+ color: var(--color-fg-muted, #888);
78
+ line-height: 1.3;
79
+ }
80
+ .widget__actions {
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 4px;
84
+ flex-shrink: 0;
85
+ }
86
+ .widget__action-btn {
87
+ display: inline-flex;
88
+ align-items: center;
89
+ justify-content: center;
90
+ background: none;
91
+ border: none;
92
+ cursor: pointer;
93
+ padding: 4px;
94
+ border-radius: 4px;
95
+ color: var(--color-fg-muted);
96
+ transition: all 0.15s ease;
97
+ }
98
+ .widget__action-btn:hover {
99
+ background-color: var(--color-bg-active);
100
+ color: var(--color-fg);
101
+ }
102
+ .widget__collapse-btn {
103
+ display: inline-flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ background: none;
107
+ border: none;
108
+ cursor: pointer;
109
+ padding: 4px;
110
+ border-radius: 4px;
111
+ color: var(--color-fg-muted);
112
+ transition: transform 0.2s ease;
113
+ }
114
+ .widget__collapse-btn:hover {
115
+ color: var(--color-fg);
116
+ }
117
+ .widget__collapse-btn--collapsed {
118
+ transform: rotate(-90deg);
119
+ }
120
+ .widget__body {
121
+ position: relative;
122
+ flex: 1;
123
+ overflow: auto;
124
+ }
125
+ .widget__body--hidden {
126
+ display: none;
127
+ }
128
+ .widget__loading {
129
+ position: absolute;
130
+ inset: 0;
131
+ background-color: var(--color-bg);
132
+ opacity: 0.7;
133
+ display: flex;
134
+ align-items: center;
135
+ justify-content: center;
136
+ }
137
+ .widget__shimmer {
138
+ width: 80%;
139
+ height: 16px;
140
+ border-radius: 4px;
141
+ background:
142
+ linear-gradient(
143
+ 90deg,
144
+ var(--color-bg-alt) 25%,
145
+ var(--color-bg-active) 50%,
146
+ var(--color-bg-alt) 75%);
147
+ background-size: 200% 100%;
148
+ animation: widget-shimmer 1.5s ease-in-out infinite;
149
+ }
150
+ @keyframes widget-shimmer {
151
+ 0% {
152
+ background-position: 200% 0;
153
+ }
154
+ 100% {
155
+ background-position: -200% 0;
156
+ }
157
+ }
158
+ .widget__error {
159
+ display: flex;
160
+ align-items: center;
161
+ gap: 8px;
162
+ padding: 8px 12px;
163
+ background-color: var(--color-error-bg, rgba(239, 68, 68, 0.1));
164
+ color: var(--color-error, #ef4444);
165
+ font-size: 13px;
166
+ border-radius: 4px;
167
+ }
168
+ .widget__error-text {
169
+ flex: 1;
170
+ }
171
+ .widget__retry-btn {
172
+ font-size: 12px;
173
+ font-weight: 500;
174
+ padding: 4px 8px;
175
+ border-radius: 4px;
176
+ border: 1px solid var(--color-error, #ef4444);
177
+ background: none;
178
+ color: var(--color-error, #ef4444);
179
+ cursor: pointer;
180
+ white-space: nowrap;
181
+ }
182
+ .widget__retry-btn:hover {
183
+ background-color: var(--color-error, #ef4444);
184
+ color: #fff;
185
+ }
186
+ [data-variant=compact] .widget {
187
+ border-radius: 6px;
188
+ }
189
+ [data-variant=compact] .widget__title {
190
+ font-size: 13px;
191
+ }
192
+ [data-variant=compact] .widget--small .widget__header {
193
+ padding: 4px 8px;
194
+ }
195
+ [data-variant=compact] .widget--small .widget__body {
196
+ padding: 6px 8px;
197
+ }
198
+ [data-variant=compact] .widget--medium .widget__header {
199
+ padding: 6px 10px;
200
+ }
201
+ [data-variant=compact] .widget--medium .widget__body {
202
+ padding: 8px 10px;
203
+ }
204
+ [data-variant=compact] .widget--large .widget__header {
205
+ padding: 8px 14px;
206
+ }
207
+ [data-variant=compact] .widget--large .widget__body {
208
+ padding: 12px 14px;
209
+ }
210
+ [data-variant=modern] .widget {
211
+ border-radius: 12px;
212
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
213
+ }
214
+ [data-variant=modern] .widget__title {
215
+ font-size: 15px;
216
+ font-weight: 700;
217
+ }
218
+ [data-variant=modern] .widget--small .widget__header {
219
+ padding: 8px 14px;
220
+ }
221
+ [data-variant=modern] .widget--small .widget__body {
222
+ padding: 10px 14px;
223
+ }
224
+ [data-variant=modern] .widget--medium .widget__header {
225
+ padding: 12px 18px;
226
+ }
227
+ [data-variant=modern] .widget--medium .widget__body {
228
+ padding: 16px 18px;
229
+ }
230
+ [data-variant=modern] .widget--large .widget__header {
231
+ padding: 16px 22px;
232
+ }
233
+ [data-variant=modern] .widget--large .widget__body {
234
+ padding: 20px 22px;
235
+ }
236
+
237
+ /* src/DataTable/DataTable.css */
238
+ .data-table-container {
239
+ width: 100%;
240
+ position: relative;
241
+ overflow-x: auto;
242
+ }
243
+ .data-table-container--card {
244
+ border: 1px solid var(--color-border);
245
+ border-radius: 8px;
246
+ overflow: hidden;
247
+ background: var(--color-bg-contrast);
248
+ }
249
+ .data-table-container--scrollable {
250
+ overflow-y: auto;
251
+ }
252
+ .data-table__header {
253
+ display: flex;
254
+ align-items: center;
255
+ justify-content: space-between;
256
+ padding: 8px 14px;
257
+ background: var(--color-bg-alt);
258
+ border-bottom: 1px solid var(--color-border);
259
+ min-height: 38px;
260
+ }
261
+ .data-table__header-left {
262
+ display: flex;
263
+ align-items: center;
264
+ gap: 12px;
265
+ }
266
+ .data-table__dots {
267
+ display: flex;
268
+ align-items: center;
269
+ gap: 6px;
270
+ }
271
+ .data-table__dot {
272
+ width: 12px;
273
+ height: 12px;
274
+ border-radius: 50%;
275
+ display: block;
276
+ }
277
+ .data-table__dot--red {
278
+ background: #ff5f57;
279
+ }
280
+ .data-table__dot--yellow {
281
+ background: #febc2e;
282
+ }
283
+ .data-table__dot--green {
284
+ background: #28c840;
285
+ }
286
+ .data-table__badge {
287
+ font-size: 12px;
288
+ font-weight: 500;
289
+ color: var(--color-fg-muted);
290
+ text-transform: uppercase;
291
+ letter-spacing: 0.5px;
292
+ user-select: none;
293
+ }
294
+ .data-table__actions {
295
+ display: flex;
296
+ align-items: center;
297
+ gap: 2px;
298
+ margin-left: auto;
299
+ opacity: 0;
300
+ transition: opacity 0.2s ease;
301
+ }
302
+ .data-table-container:hover .data-table__actions {
303
+ opacity: 1;
304
+ }
305
+ .data-table__btn {
306
+ display: flex;
307
+ align-items: center;
308
+ justify-content: center;
309
+ width: 28px;
310
+ height: 28px;
311
+ padding: 0;
312
+ border: none;
313
+ border-radius: 6px;
314
+ background: transparent;
315
+ color: var(--color-fg-dim);
316
+ cursor: pointer;
317
+ transition: all 0.15s ease;
318
+ }
319
+ .data-table__btn:hover {
320
+ background: var(--color-bg-active);
321
+ color: var(--color-fg);
322
+ }
323
+ .data-table__btn--copied {
324
+ color: var(--syntax-green, #c3e88d);
325
+ }
326
+ .data-table__btn svg {
327
+ width: 16px;
328
+ height: 16px;
329
+ flex-shrink: 0;
330
+ }
331
+ .data-table__body {
332
+ overflow-x: auto;
333
+ }
334
+ .data-table__toolbar {
335
+ display: flex;
336
+ justify-content: flex-end;
337
+ padding: 0 0 8px;
338
+ }
339
+ .data-table__export {
340
+ font-family:
341
+ system-ui,
342
+ -apple-system,
343
+ sans-serif;
344
+ font-size: 13px;
345
+ font-weight: 500;
346
+ padding: 6px 12px;
347
+ border: 1px solid var(--color-border);
348
+ border-radius: 6px;
349
+ background: transparent;
350
+ color: var(--color-fg);
351
+ cursor: pointer;
352
+ transition: background 0.15s ease;
353
+ }
354
+ .data-table__export:hover {
355
+ background: var(--color-bg-active);
356
+ }
357
+ .data-table {
358
+ width: 100%;
359
+ border-collapse: collapse;
360
+ }
361
+ .data-table-container:not(.data-table-container--card) .data-table {
362
+ border: 1px solid var(--color-border);
363
+ }
364
+ .data-table thead th {
365
+ position: sticky;
366
+ top: 0;
367
+ z-index: 1;
368
+ background: var(--color-bg-alt);
369
+ border-bottom: 2px solid var(--color-border);
370
+ padding: 10px 12px;
371
+ font-family:
372
+ system-ui,
373
+ -apple-system,
374
+ sans-serif;
375
+ font-size: 13px;
376
+ font-weight: 600;
377
+ color: var(--color-fg);
378
+ white-space: nowrap;
379
+ user-select: none;
380
+ }
381
+ .data-table__th--sortable {
382
+ cursor: pointer;
383
+ }
384
+ .data-table__th--sortable:hover {
385
+ background: var(--color-bg-active);
386
+ }
387
+ .data-table__th--left {
388
+ text-align: left;
389
+ }
390
+ .data-table__th--center {
391
+ text-align: center;
392
+ }
393
+ .data-table__th--right {
394
+ text-align: right;
395
+ }
396
+ .data-table__sort {
397
+ display: inline-block;
398
+ margin-left: 4px;
399
+ font-size: 10px;
400
+ color: var(--color-accent);
401
+ }
402
+ .data-table tbody td {
403
+ padding: 8px 12px;
404
+ font-family:
405
+ system-ui,
406
+ -apple-system,
407
+ sans-serif;
408
+ font-size: 13px;
409
+ color: var(--color-fg);
410
+ border-bottom: 1px solid var(--color-border);
411
+ }
412
+ .data-table__td--left {
413
+ text-align: left;
414
+ }
415
+ .data-table__td--center {
416
+ text-align: center;
417
+ }
418
+ .data-table__td--right {
419
+ text-align: right;
420
+ }
421
+ .data-table tbody tr:hover {
422
+ background: var(--color-bg-active);
423
+ }
424
+ .data-table tbody tr:last-child td {
425
+ border-bottom: none;
426
+ }
427
+ [data-variant=compact] .data-table-container--card {
428
+ border-radius: 6px;
429
+ }
430
+ [data-variant=compact] .data-table__header {
431
+ padding: 4px 8px;
432
+ min-height: 28px;
433
+ }
434
+ [data-variant=compact] .data-table__dots {
435
+ gap: 5px;
436
+ }
437
+ [data-variant=compact] .data-table__dot {
438
+ width: 10px;
439
+ height: 10px;
440
+ }
441
+ [data-variant=compact] .data-table__badge {
442
+ font-size: 11px;
443
+ }
444
+ [data-variant=compact] .data-table__btn {
445
+ width: 24px;
446
+ height: 24px;
447
+ }
448
+ [data-variant=compact] .data-table__btn svg {
449
+ width: 14px;
450
+ height: 14px;
451
+ }
452
+ [data-variant=compact] .data-table thead th {
453
+ padding: 6px 8px;
454
+ font-size: 12px;
455
+ }
456
+ [data-variant=compact] .data-table tbody td {
457
+ padding: 4px 8px;
458
+ font-size: 12px;
459
+ }
460
+ [data-variant=compact] .data-table__export {
461
+ font-size: 12px;
462
+ padding: 4px 8px;
463
+ border-radius: 4px;
464
+ }
465
+ [data-variant=modern] .data-table-container--card {
466
+ border-radius: 12px;
467
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
468
+ border: none;
469
+ }
470
+ [data-variant=modern] .data-table__header {
471
+ padding: 10px 16px;
472
+ min-height: 42px;
473
+ }
474
+ [data-variant=modern] .data-table__dot {
475
+ width: 13px;
476
+ height: 13px;
477
+ }
478
+ [data-variant=modern] .data-table__badge {
479
+ font-size: 13px;
480
+ font-weight: 600;
481
+ }
482
+ [data-variant=modern] .data-table__btn {
483
+ width: 32px;
484
+ height: 32px;
485
+ border-radius: 8px;
486
+ }
487
+ [data-variant=modern] .data-table__btn svg {
488
+ width: 18px;
489
+ height: 18px;
490
+ }
491
+ [data-variant=modern] .data-table {
492
+ border-radius: 0;
493
+ overflow: hidden;
494
+ border: none;
495
+ box-shadow: none;
496
+ }
497
+ [data-variant=modern] .data-table thead th {
498
+ padding: 14px 16px;
499
+ font-size: 14px;
500
+ border-bottom-width: 1px;
501
+ }
502
+ [data-variant=modern] .data-table tbody td {
503
+ padding: 12px 16px;
504
+ font-size: 14px;
505
+ }
506
+ [data-variant=modern] .data-table__export {
507
+ font-size: 14px;
508
+ padding: 8px 16px;
509
+ border-radius: 8px;
510
+ font-weight: 600;
511
+ }
512
+ .data-table tbody td .markdown-renderer__link,
513
+ .data-table tbody td a[data-md-link] {
514
+ color: var(--color-link, var(--color-primary, var(--primary, #6366f1)));
515
+ opacity: 0.75;
516
+ text-decoration: none;
517
+ transition: opacity 0.15s ease;
518
+ cursor: pointer;
519
+ }
520
+ .data-table tbody td .markdown-renderer__link:hover,
521
+ .data-table tbody td a[data-md-link]:hover {
522
+ opacity: 1;
523
+ text-decoration: underline;
524
+ }
525
+ .data-table--exporting .data-table__toolbar,
526
+ .data-table--exporting .data-table__actions {
527
+ display: none !important;
528
+ }
529
+ .data-table--exporting .data-table thead th {
530
+ border-right: 1px solid var(--color-border);
531
+ }
532
+ .data-table--exporting .data-table thead th:last-child {
533
+ border-right: none;
534
+ }
535
+ .data-table--exporting .data-table tbody td {
536
+ border-right: 1px solid var(--color-border);
537
+ }
538
+ .data-table--exporting .data-table tbody td:last-child {
539
+ border-right: none;
540
+ }
541
+
542
+ /* src/Charts/Charts.css */
543
+ .chart {
544
+ position: relative;
545
+ display: inline-flex;
546
+ flex-direction: column;
547
+ gap: 8px;
548
+ }
549
+ .chart__title {
550
+ font-size: 14px;
551
+ font-weight: 600;
552
+ color: var(--color-fg, #0f172a);
553
+ margin: 0;
554
+ }
555
+ .chart__svg {
556
+ display: block;
557
+ overflow: visible;
558
+ }
559
+ .chart__grid-line {
560
+ stroke: var(--color-border, #e2e8f0);
561
+ stroke-width: 1;
562
+ stroke-dasharray: 4 4;
563
+ }
564
+ .chart__axis-label {
565
+ font-size: 11px;
566
+ fill: var(--color-fg-muted, #94a3b8);
567
+ font-family: inherit;
568
+ }
569
+ .chart__line {
570
+ fill: none;
571
+ stroke-width: 2;
572
+ stroke-linecap: round;
573
+ stroke-linejoin: round;
574
+ }
575
+ .chart__dot {
576
+ transition: r 0.15s ease;
577
+ cursor: pointer;
578
+ }
579
+ .chart__dot:hover {
580
+ r: 6;
581
+ }
582
+ .chart__area {
583
+ opacity: 0.2;
584
+ }
585
+ .chart__bar {
586
+ transition: opacity 0.15s ease;
587
+ cursor: pointer;
588
+ }
589
+ .chart__bar:hover {
590
+ opacity: 0.8;
591
+ }
592
+ .chart__slice {
593
+ transition: opacity 0.15s ease;
594
+ cursor: pointer;
595
+ }
596
+ .chart__slice:hover {
597
+ opacity: 0.75;
598
+ }
599
+ .chart__donut-label {
600
+ font-size: 18px;
601
+ font-weight: 700;
602
+ fill: var(--color-fg, #0f172a);
603
+ text-anchor: middle;
604
+ dominant-baseline: central;
605
+ }
606
+ .chart__legend {
607
+ display: flex;
608
+ flex-wrap: wrap;
609
+ gap: 12px;
610
+ padding: 4px 0;
611
+ }
612
+ .chart__legend-item {
613
+ display: flex;
614
+ align-items: center;
615
+ gap: 6px;
616
+ font-size: 12px;
617
+ color: var(--color-fg-muted, #94a3b8);
618
+ }
619
+ .chart__legend-dot {
620
+ width: 8px;
621
+ height: 8px;
622
+ border-radius: 50%;
623
+ flex-shrink: 0;
624
+ }
625
+ .chart__tooltip {
626
+ position: absolute;
627
+ pointer-events: none;
628
+ background: var(--color-bg-contrast, #1e293b);
629
+ color: var(--color-fg-bright, #f8fafc);
630
+ border: 1px solid var(--color-border, #334155);
631
+ border-radius: 6px;
632
+ padding: 6px 10px;
633
+ font-size: 12px;
634
+ white-space: nowrap;
635
+ z-index: 10;
636
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
637
+ }
638
+ .chart__empty {
639
+ display: flex;
640
+ align-items: center;
641
+ justify-content: center;
642
+ color: var(--color-fg-muted, #94a3b8);
643
+ font-size: 13px;
644
+ border: 1px dashed var(--color-border, #e2e8f0);
645
+ border-radius: 8px;
646
+ }
647
+ [data-variant=compact] .chart__title {
648
+ font-size: 12px;
649
+ }
650
+ [data-variant=compact] .chart__axis-label {
651
+ font-size: 10px;
652
+ }
653
+ [data-variant=modern] .chart__title {
654
+ font-size: 16px;
655
+ font-weight: 700;
656
+ }