@mastra/playground-ui 20.0.1 → 20.0.2

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 (61) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/dist/index.cjs.js +1915 -104
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.css +174 -5
  5. package/dist/index.es.js +1900 -100
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/src/domains/logs/components/log-details.d.ts +12 -0
  8. package/dist/src/domains/logs/components/logs-date-range-selector.d.ts +12 -0
  9. package/dist/src/domains/logs/components/logs-list.d.ts +20 -0
  10. package/dist/src/domains/logs/components/logs-toolbar.d.ts +17 -0
  11. package/dist/src/domains/logs/components/no-logs-info.d.ts +1 -0
  12. package/dist/src/domains/logs/components/span-details.d.ts +6 -0
  13. package/dist/src/domains/logs/components/trace/format-hierarchical-spans.d.ts +3 -0
  14. package/dist/src/domains/logs/components/trace/format-logs-as-spans.d.ts +10 -0
  15. package/dist/src/domains/logs/components/trace/get-descendant-ids.d.ts +3 -0
  16. package/dist/src/domains/logs/components/trace/shared.d.ts +3 -0
  17. package/dist/src/domains/logs/components/trace/span-type-icon.d.ts +6 -0
  18. package/dist/src/domains/logs/components/trace/timeline-expand-col.d.ts +13 -0
  19. package/dist/src/domains/logs/components/trace/timeline-name-col.d.ts +15 -0
  20. package/dist/src/domains/logs/components/trace/timeline-structure-sign.d.ts +5 -0
  21. package/dist/src/domains/logs/components/trace/timeline-timing-col.d.ts +11 -0
  22. package/dist/src/domains/logs/components/trace/trace-timeline-span.d.ts +17 -0
  23. package/dist/src/domains/logs/components/trace/trace-timeline.d.ts +13 -0
  24. package/dist/src/domains/logs/components/trace/types.d.ts +17 -0
  25. package/dist/src/domains/logs/components/trace-details.d.ts +8 -0
  26. package/dist/src/domains/logs/hooks/use-logs-filters.d.ts +25 -0
  27. package/dist/src/domains/logs/hooks/use-trace-spans.d.ts +44 -0
  28. package/dist/src/domains/logs/index.d.ts +7 -0
  29. package/dist/src/domains/logs/types.d.ts +32 -0
  30. package/dist/src/ds/components/DataDetailsPanel/data-details-panel-close-button.d.ts +6 -0
  31. package/dist/src/ds/components/DataDetailsPanel/data-details-panel-code-section.d.ts +8 -0
  32. package/dist/src/ds/components/DataDetailsPanel/data-details-panel-content.d.ts +5 -0
  33. package/dist/src/ds/components/DataDetailsPanel/data-details-panel-header.d.ts +5 -0
  34. package/dist/src/ds/components/DataDetailsPanel/data-details-panel-heading.d.ts +5 -0
  35. package/dist/src/ds/components/DataDetailsPanel/data-details-panel-key-value-list.d.ts +26 -0
  36. package/dist/src/ds/components/DataDetailsPanel/data-details-panel-loading-data.d.ts +5 -0
  37. package/dist/src/ds/components/DataDetailsPanel/data-details-panel-no-data.d.ts +4 -0
  38. package/dist/src/ds/components/DataDetailsPanel/data-details-panel.d.ts +5 -0
  39. package/dist/src/ds/components/DataDetailsPanel/index.d.ts +32 -0
  40. package/dist/src/ds/components/DataFilter/index.d.ts +2 -0
  41. package/dist/src/ds/components/DataFilter/select-data-filter.d.ts +40 -0
  42. package/dist/src/ds/components/DataList/data-list-cells.d.ts +10 -0
  43. package/dist/src/ds/components/DataList/data-list-next-page-loading.d.ts +8 -0
  44. package/dist/src/ds/components/DataList/data-list-no-match.d.ts +5 -0
  45. package/dist/src/ds/components/DataList/data-list-root.d.ts +7 -0
  46. package/dist/src/ds/components/DataList/data-list-row-button.d.ts +7 -0
  47. package/dist/src/ds/components/DataList/data-list-row-link.d.ts +7 -0
  48. package/dist/src/ds/components/DataList/data-list-row.d.ts +6 -0
  49. package/dist/src/ds/components/DataList/data-list-skeleton.d.ts +5 -0
  50. package/dist/src/ds/components/DataList/data-list-top-cell.d.ts +20 -0
  51. package/dist/src/ds/components/DataList/data-list-top.d.ts +6 -0
  52. package/dist/src/ds/components/DataList/data-list.d.ts +24 -0
  53. package/dist/src/ds/components/DataList/index.d.ts +2 -0
  54. package/dist/src/ds/components/DataList/shared.d.ts +1 -0
  55. package/dist/src/ds/components/FormFieldBlocks/fields/search-field-block.d.ts +3 -1
  56. package/dist/src/ds/components/ListSearch/list-search.d.ts +3 -1
  57. package/dist/src/ds/components/LogsDataList/index.d.ts +2 -0
  58. package/dist/src/ds/components/LogsDataList/logs-data-list-cells.d.ts +26 -0
  59. package/dist/src/ds/components/LogsDataList/logs-data-list.d.ts +26 -0
  60. package/dist/src/index.d.ts +4 -0
  61. package/package.json +8 -8
package/dist/index.css CHANGED
@@ -934,6 +934,10 @@
934
934
  margin-block: var(--spacing-5);
935
935
  }
936
936
 
937
+ .my-8 {
938
+ margin-block: var(--spacing-8);
939
+ }
940
+
937
941
  .-mt-0\.5 {
938
942
  margin-top: calc(var(--spacing-0_5) * -1);
939
943
  }
@@ -982,6 +986,10 @@
982
986
  margin-top: var(--spacing-5);
983
987
  }
984
988
 
989
+ .mt-6 {
990
+ margin-top: var(--spacing-6);
991
+ }
992
+
985
993
  .mt-8 {
986
994
  margin-top: var(--spacing-8);
987
995
  }
@@ -1344,6 +1352,10 @@
1344
1352
  height: .6rem;
1345
1353
  }
1346
1354
 
1355
+ .h-\[0\.9rem\] {
1356
+ height: .9rem;
1357
+ }
1358
+
1347
1359
  .h-\[1\.1em\] {
1348
1360
  height: 1.1em;
1349
1361
  }
@@ -1352,6 +1364,10 @@
1352
1364
  height: 1.1rem;
1353
1365
  }
1354
1366
 
1367
+ .h-\[1\.8rem\] {
1368
+ height: 1.8rem;
1369
+ }
1370
+
1355
1371
  .h-\[1\.75rem\] {
1356
1372
  height: 1.75rem;
1357
1373
  }
@@ -1364,6 +1380,10 @@
1364
1380
  height: 1em;
1365
1381
  }
1366
1382
 
1383
+ .h-\[1rem\] {
1384
+ height: 1rem;
1385
+ }
1386
+
1367
1387
  .h-\[2\.8rem\] {
1368
1388
  height: 2.8rem;
1369
1389
  }
@@ -1533,6 +1553,10 @@
1533
1553
  max-height: var(--spacing-80);
1534
1554
  }
1535
1555
 
1556
+ .max-h-\[20rem\] {
1557
+ max-height: 20rem;
1558
+ }
1559
+
1536
1560
  .max-h-\[30vh\] {
1537
1561
  max-height: 30vh;
1538
1562
  }
@@ -1609,6 +1633,10 @@
1609
1633
  min-height: var(--spacing-5);
1610
1634
  }
1611
1635
 
1636
+ .min-h-8 {
1637
+ min-height: var(--spacing-8);
1638
+ }
1639
+
1612
1640
  .min-h-9 {
1613
1641
  min-height: var(--spacing-9);
1614
1642
  }
@@ -1825,10 +1853,18 @@
1825
1853
  width: .75rem;
1826
1854
  }
1827
1855
 
1856
+ .w-\[0\.5rem\] {
1857
+ width: .5rem;
1858
+ }
1859
+
1828
1860
  .w-\[0\.6rem\] {
1829
1861
  width: .6rem;
1830
1862
  }
1831
1863
 
1864
+ .w-\[0\.9rem\] {
1865
+ width: .9rem;
1866
+ }
1867
+
1832
1868
  .w-\[1\.1em\] {
1833
1869
  width: 1.1em;
1834
1870
  }
@@ -2210,6 +2246,14 @@
2210
2246
  min-width: 1.125rem;
2211
2247
  }
2212
2248
 
2249
+ .min-w-\[8rem\] {
2250
+ min-width: 8rem;
2251
+ }
2252
+
2253
+ .min-w-\[12rem\] {
2254
+ min-width: 12rem;
2255
+ }
2256
+
2213
2257
  .min-w-\[18px\] {
2214
2258
  min-width: 18px;
2215
2259
  }
@@ -2460,6 +2504,10 @@
2460
2504
  grid-template-columns: 1.5rem 1fr auto;
2461
2505
  }
2462
2506
 
2507
+ .grid-cols-\[1fr\] {
2508
+ grid-template-columns: 1fr;
2509
+ }
2510
+
2463
2511
  .grid-cols-\[1fr_1fr\] {
2464
2512
  grid-template-columns: 1fr 1fr;
2465
2513
  }
@@ -2528,10 +2576,26 @@
2528
2576
  grid-template-columns: auto 1fr auto;
2529
2577
  }
2530
2578
 
2579
+ .grid-cols-\[minmax\(0\,1fr\)_auto_auto\] {
2580
+ grid-template-columns: minmax(0, 1fr) auto auto;
2581
+ }
2582
+
2531
2583
  .grid-cols-subgrid {
2532
2584
  grid-template-columns: subgrid;
2533
2585
  }
2534
2586
 
2587
+ .grid-rows-\[1fr\] {
2588
+ grid-template-rows: 1fr;
2589
+ }
2590
+
2591
+ .grid-rows-\[1fr_1fr\] {
2592
+ grid-template-rows: 1fr 1fr;
2593
+ }
2594
+
2595
+ .grid-rows-\[1fr_1fr_1fr\] {
2596
+ grid-template-rows: 1fr 1fr 1fr;
2597
+ }
2598
+
2535
2599
  .grid-rows-\[1fr_auto\] {
2536
2600
  grid-template-rows: 1fr auto;
2537
2601
  }
@@ -2544,10 +2608,18 @@
2544
2608
  grid-template-rows: 4rem 20rem;
2545
2609
  }
2546
2610
 
2611
+ .grid-rows-\[auto\] {
2612
+ grid-template-rows: auto;
2613
+ }
2614
+
2547
2615
  .grid-rows-\[auto_1fr\] {
2548
2616
  grid-template-rows: auto 1fr;
2549
2617
  }
2550
2618
 
2619
+ .grid-rows-\[auto_1fr_1fr\] {
2620
+ grid-template-rows: auto 1fr 1fr;
2621
+ }
2622
+
2551
2623
  .grid-rows-\[auto_1fr_auto\] {
2552
2624
  grid-template-rows: auto 1fr auto;
2553
2625
  }
@@ -2838,6 +2910,10 @@
2838
2910
  row-gap: var(--spacing-1);
2839
2911
  }
2840
2912
 
2913
+ .gap-y-1\.5 {
2914
+ row-gap: var(--spacing-1_5);
2915
+ }
2916
+
2841
2917
  .gap-y-3 {
2842
2918
  row-gap: var(--spacing-3);
2843
2919
  }
@@ -2846,6 +2922,11 @@
2846
2922
  row-gap: var(--spacing-4);
2847
2923
  }
2848
2924
 
2925
+ .gap-y-px {
2926
+ row-gap: 1px;
2927
+ row-gap: var(--spacing-px);
2928
+ }
2929
+
2849
2930
  :where(.divide-y > :not(:last-child)) {
2850
2931
  --tw-divide-y-reverse: 0;
2851
2932
  border-bottom-style: var(--tw-border-style);
@@ -3462,6 +3543,16 @@
3462
3543
  border-color: #0000;
3463
3544
  }
3464
3545
 
3546
+ .border-white\/10 {
3547
+ border-color: #ffffff1a;
3548
+ }
3549
+
3550
+ @supports (color: color-mix(in lab, red, red)) {
3551
+ .border-white\/10 {
3552
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3553
+ }
3554
+ }
3555
+
3465
3556
  .border-yellow-200 {
3466
3557
  border-color: var(--color-yellow-200);
3467
3558
  }
@@ -3756,6 +3847,16 @@
3756
3847
  }
3757
3848
  }
3758
3849
 
3850
+ .bg-black\/20 {
3851
+ background-color: #0003;
3852
+ }
3853
+
3854
+ @supports (color: color-mix(in lab, red, red)) {
3855
+ .bg-black\/20 {
3856
+ background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
3857
+ }
3858
+ }
3859
+
3759
3860
  .bg-black\/50 {
3760
3861
  background-color: #00000080;
3761
3862
  }
@@ -4665,6 +4766,10 @@
4665
4766
  padding-top: 15vh;
4666
4767
  }
4667
4768
 
4769
+ .pr-0\.5 {
4770
+ padding-right: var(--spacing-0_5);
4771
+ }
4772
+
4668
4773
  .pr-1 {
4669
4774
  padding-right: var(--spacing-1);
4670
4775
  }
@@ -5918,6 +6023,11 @@
5918
6023
  height: var(--spacing-5);
5919
6024
  }
5920
6025
 
6026
+ .before\:h-\[0px\]:before {
6027
+ content: var(--tw-content);
6028
+ height: 0;
6029
+ }
6030
+
5921
6031
  .before\:w-0\.5:before {
5922
6032
  content: var(--tw-content);
5923
6033
  width: var(--spacing-0_5);
@@ -5962,7 +6072,7 @@
5962
6072
  border-bottom-right-radius: 3.40282e38px;
5963
6073
  }
5964
6074
 
5965
- .before\:border-b:before {
6075
+ .before\:border-b:before, .before\:border-b-\[1px\]:before {
5966
6076
  content: var(--tw-content);
5967
6077
  border-bottom-style: var(--tw-border-style);
5968
6078
  border-bottom-width: 1px;
@@ -5979,9 +6089,9 @@
5979
6089
  border-color: var(--color-neutral3);
5980
6090
  }
5981
6091
 
5982
- .before\:bg-accent1:before {
6092
+ .before\:bg-black:before {
5983
6093
  content: var(--tw-content);
5984
- background-color: var(--color-accent1);
6094
+ background-color: var(--color-black);
5985
6095
  }
5986
6096
 
5987
6097
  .before\:bg-border1:before {
@@ -6089,6 +6199,11 @@
6089
6199
  width: var(--spacing-0);
6090
6200
  }
6091
6201
 
6202
+ .after\:w-\[0px\]:after {
6203
+ content: var(--tw-content);
6204
+ width: 0;
6205
+ }
6206
+
6092
6207
  .after\:w-px:after {
6093
6208
  content: var(--tw-content);
6094
6209
  content: var(--tw-content);
@@ -6102,7 +6217,7 @@
6102
6217
  translate: var(--tw-translate-x) var(--tw-translate-y);
6103
6218
  }
6104
6219
 
6105
- .after\:border-l:after {
6220
+ .after\:border-l:after, .after\:border-l-\[1px\]:after {
6106
6221
  content: var(--tw-content);
6107
6222
  border-left-style: var(--tw-border-style);
6108
6223
  border-left-width: 1px;
@@ -6730,6 +6845,14 @@
6730
6845
  border-color: var(--color-accent1);
6731
6846
  }
6732
6847
 
6848
+ .focus-visible\:border-transparent:focus-visible {
6849
+ border-color: #0000;
6850
+ }
6851
+
6852
+ .focus-visible\:bg-surface4:focus-visible {
6853
+ background-color: var(--color-surface4);
6854
+ }
6855
+
6733
6856
  .focus-visible\:opacity-100:focus-visible {
6734
6857
  opacity: 1;
6735
6858
  }
@@ -6795,6 +6918,10 @@
6795
6918
  outline-style: solid;
6796
6919
  }
6797
6920
 
6921
+ .focus-visible\:ring-inset:focus-visible {
6922
+ --tw-ring-inset: inset;
6923
+ }
6924
+
6798
6925
  .active\:scale-95:active {
6799
6926
  --tw-scale-x: 95%;
6800
6927
  --tw-scale-y: 95%;
@@ -7601,6 +7728,10 @@
7601
7728
  color: var(--color-red-400);
7602
7729
  }
7603
7730
 
7731
+ .dark\:text-white:is(.dark *) {
7732
+ color: var(--color-white);
7733
+ }
7734
+
7604
7735
  .dark\:brightness-0:is(.dark *) {
7605
7736
  --tw-brightness: brightness(0%);
7606
7737
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
@@ -7611,6 +7742,11 @@
7611
7742
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
7612
7743
  }
7613
7744
 
7745
+ .dark\:before\:bg-white:is(.dark *):before {
7746
+ content: var(--tw-content);
7747
+ background-color: var(--color-white);
7748
+ }
7749
+
7614
7750
  @media (hover: hover) {
7615
7751
  .dark\:hover\:bg-white\/15:is(.dark *):hover {
7616
7752
  background-color: #ffffff26;
@@ -8354,6 +8490,15 @@
8354
8490
  color: var(--color-neutral3);
8355
8491
  }
8356
8492
 
8493
+ .\[\&\>b\]\:font-normal > b {
8494
+ --tw-font-weight: var(--font-weight-normal);
8495
+ font-weight: var(--font-weight-normal);
8496
+ }
8497
+
8498
+ .\[\&\>b\]\:text-neutral2 > b {
8499
+ color: var(--color-neutral2);
8500
+ }
8501
+
8357
8502
  .\[\&\>button\]\:flex > button {
8358
8503
  display: flex;
8359
8504
  }
@@ -8366,10 +8511,18 @@
8366
8511
  align-items: center;
8367
8512
  }
8368
8513
 
8514
+ .\[\&\>button\]\:justify-between > button {
8515
+ justify-content: space-between;
8516
+ }
8517
+
8369
8518
  .\[\&\>button\]\:gap-2 > button {
8370
8519
  gap: var(--spacing-2);
8371
8520
  }
8372
8521
 
8522
+ .\[\&\>button\]\:overflow-hidden > button {
8523
+ overflow: hidden;
8524
+ }
8525
+
8373
8526
  .\[\&\>button\]\:rounded-md > button {
8374
8527
  border-radius: var(--radius-md);
8375
8528
  }
@@ -8642,10 +8795,18 @@
8642
8795
  height: .9rem;
8643
8796
  }
8644
8797
 
8798
+ .\[\&\>svg\]\:h-\[0\.7rem\] > svg {
8799
+ height: .7rem;
8800
+ }
8801
+
8645
8802
  .\[\&\>svg\]\:h-\[0\.8rem\] > svg {
8646
8803
  height: .8rem;
8647
8804
  }
8648
8805
 
8806
+ .\[\&\>svg\]\:h-\[0\.85rem\] > svg {
8807
+ height: .85rem;
8808
+ }
8809
+
8649
8810
  .\[\&\>svg\]\:h-\[1\.1em\] > svg {
8650
8811
  height: 1.1em;
8651
8812
  }
@@ -8702,10 +8863,18 @@
8702
8863
  width: .9rem;
8703
8864
  }
8704
8865
 
8866
+ .\[\&\>svg\]\:w-\[0\.7rem\] > svg {
8867
+ width: .7rem;
8868
+ }
8869
+
8705
8870
  .\[\&\>svg\]\:w-\[0\.8rem\] > svg {
8706
8871
  width: .8rem;
8707
8872
  }
8708
8873
 
8874
+ .\[\&\>svg\]\:w-\[0\.85rem\] > svg {
8875
+ width: .85rem;
8876
+ }
8877
+
8709
8878
  .\[\&\>svg\]\:w-\[1\.1em\] > svg {
8710
8879
  width: 1.1em;
8711
8880
  }
@@ -8854,7 +9023,7 @@
8854
9023
  rotate: 90deg;
8855
9024
  }
8856
9025
 
8857
- .entity-list-row:focus-within + .\[\.entity-list-row\:focus-within\+\&\]\:border-t-transparent, .entity-list-row:hover + .\[\.entity-list-row\:hover\+\&\]\:border-t-transparent {
9026
+ .data-list-row:focus-visible + .\[\.data-list-row\:focus-visible\+\&\]\:border-t-transparent, .data-list-row:hover + .\[\.data-list-row\:hover\+\&\]\:border-t-transparent, .entity-list-row:focus-within + .\[\.entity-list-row\:focus-within\+\&\]\:border-t-transparent, .entity-list-row:hover + .\[\.entity-list-row\:hover\+\&\]\:border-t-transparent {
8858
9027
  border-top-color: #0000;
8859
9028
  }
8860
9029