@octohirono/stitch-design-system 0.2.0 → 0.3.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 (46) hide show
  1. package/dist/components/ChatFile/ChatFile.d.ts +34 -0
  2. package/dist/components/ChatFile/ChatFile.js +71 -0
  3. package/dist/components/ChatFile/chat-file.module.js +12 -0
  4. package/dist/components/ChatFile/index.d.ts +2 -0
  5. package/dist/components/ChatImage/ChatImage.d.ts +31 -0
  6. package/dist/components/ChatImage/ChatImage.js +88 -0
  7. package/dist/components/ChatImage/chat-image.module.js +12 -0
  8. package/dist/components/ChatImage/index.d.ts +2 -0
  9. package/dist/components/ChatInput/ChatInput.d.ts +77 -0
  10. package/dist/components/ChatInput/ChatInput.js +88 -0
  11. package/dist/components/ChatInput/chat-input.module.js +11 -0
  12. package/dist/components/ChatInput/index.d.ts +2 -0
  13. package/dist/components/ChatList/ChatList.d.ts +58 -0
  14. package/dist/components/ChatList/ChatList.js +49 -0
  15. package/dist/components/ChatList/chat-list.module.js +7 -0
  16. package/dist/components/ChatList/index.d.ts +2 -0
  17. package/dist/components/ChatMessage/ChatMessage.d.ts +52 -0
  18. package/dist/components/ChatMessage/ChatMessage.js +71 -0
  19. package/dist/components/ChatMessage/chat-message.module.js +21 -0
  20. package/dist/components/ChatMessage/index.d.ts +2 -0
  21. package/dist/components/ChatMessageActions/ChatMessageActions.d.ts +40 -0
  22. package/dist/components/ChatMessageActions/ChatMessageActions.js +34 -0
  23. package/dist/components/ChatMessageActions/chat-message-actions.module.js +7 -0
  24. package/dist/components/ChatMessageActions/index.d.ts +2 -0
  25. package/dist/components/ChatVoice/ChatVoice.d.ts +39 -0
  26. package/dist/components/ChatVoice/ChatVoice.js +44 -0
  27. package/dist/components/ChatVoice/chat-voice.module.js +12 -0
  28. package/dist/components/ChatVoice/index.d.ts +2 -0
  29. package/dist/components/ContextMenu/ContextMenu.js +41 -34
  30. package/dist/components/ContextMenu/context-menu.module.js +10 -9
  31. package/dist/components/DropdownMenu/DropdownMenu.js +45 -38
  32. package/dist/components/DropdownMenu/dropdown-menu.module.js +10 -9
  33. package/dist/components/Icon/Icon.d.ts +20 -0
  34. package/dist/components/Icon/Icon.js +35 -2
  35. package/dist/components/Image/Image.js +1 -1
  36. package/dist/components/Image/image.module.js +14 -14
  37. package/dist/components/Select/Select.js +87 -83
  38. package/dist/components/Select/select.module.js +10 -9
  39. package/dist/components/TypingIndicator/TypingIndicator.d.ts +24 -0
  40. package/dist/components/TypingIndicator/TypingIndicator.js +29 -0
  41. package/dist/components/TypingIndicator/index.d.ts +2 -0
  42. package/dist/components/TypingIndicator/typing-indicator.module.js +8 -0
  43. package/dist/index.d.ts +16 -0
  44. package/dist/index.js +36 -28
  45. package/dist/style.css +873 -411
  46. package/package.json +1 -1
package/dist/style.css CHANGED
@@ -363,7 +363,7 @@
363
363
  flex-shrink: 0;
364
364
  color: currentColor;
365
365
  }
366
- ._image_15m2u_1 {
366
+ ._image_94mwe_1 {
367
367
  --img-matte: var(--stitch-bg-elevated);
368
368
  position: relative;
369
369
  display: inline-flex;
@@ -381,17 +381,17 @@
381
381
  vertical-align: middle;
382
382
  transition: transform var(--stitch-motion-duration-base) var(--stitch-motion-ease);
383
383
  }
384
- ._img_15m2u_19 {
384
+ ._img_94mwe_19 {
385
385
  display: block;
386
386
  width: 100%;
387
387
  height: 100%;
388
388
  opacity: 0;
389
389
  transition: opacity var(--stitch-motion-duration-base) var(--stitch-motion-ease);
390
390
  }
391
- ._loaded_15m2u_26 ._img_15m2u_19 {
391
+ ._loaded_94mwe_26 ._img_94mwe_19 {
392
392
  opacity: 1;
393
393
  }
394
- ._error_15m2u_29 {
394
+ ._error_94mwe_29 {
395
395
  flex-direction: column;
396
396
  gap: var(--stitch-spacing-sm);
397
397
  color: var(--stitch-text-disabled);
@@ -400,51 +400,51 @@
400
400
  font-weight: var(--stitch-font-weight-medium);
401
401
  line-height: var(--stitch-line-height-base);
402
402
  }
403
- ._image-accent_15m2u_38 {
403
+ ._image-accent_94mwe_38 {
404
404
  --img-matte: var(--stitch-bg-accent);
405
405
  }
406
- ._image-danger_15m2u_41 {
406
+ ._image-danger_94mwe_41 {
407
407
  --img-matte: var(--stitch-danger-bg);
408
408
  }
409
- ._image-success_15m2u_44 {
409
+ ._image-success_94mwe_44 {
410
410
  --img-matte: var(--stitch-success-bg);
411
411
  }
412
- ._image-warning_15m2u_47 {
412
+ ._image-warning_94mwe_47 {
413
413
  --img-matte: var(--stitch-warning-bg);
414
414
  }
415
- ._image-info_15m2u_50 {
415
+ ._image-info_94mwe_50 {
416
416
  --img-matte: var(--stitch-info-bg);
417
417
  }
418
- ._image-cat-1_15m2u_53 {
418
+ ._image-cat-1_94mwe_53 {
419
419
  --img-matte: color-mix(in srgb, var(--stitch-cat-1), var(--stitch-bg-canvas) 88%);
420
420
  }
421
- ._image-cat-2_15m2u_56 {
421
+ ._image-cat-2_94mwe_56 {
422
422
  --img-matte: color-mix(in srgb, var(--stitch-cat-2), var(--stitch-bg-canvas) 88%);
423
423
  }
424
- ._image-cat-3_15m2u_59 {
424
+ ._image-cat-3_94mwe_59 {
425
425
  --img-matte: color-mix(in srgb, var(--stitch-cat-3), var(--stitch-bg-canvas) 88%);
426
426
  }
427
- ._image-cat-4_15m2u_62 {
427
+ ._image-cat-4_94mwe_62 {
428
428
  --img-matte: color-mix(in srgb, var(--stitch-cat-4), var(--stitch-bg-canvas) 88%);
429
429
  }
430
- ._image-cat-5_15m2u_65 {
430
+ ._image-cat-5_94mwe_65 {
431
431
  --img-matte: color-mix(in srgb, var(--stitch-cat-5), var(--stitch-bg-canvas) 88%);
432
432
  }
433
- ._image-cat-6_15m2u_68 {
433
+ ._image-cat-6_94mwe_68 {
434
434
  --img-matte: color-mix(in srgb, var(--stitch-cat-6), var(--stitch-bg-canvas) 88%);
435
435
  }
436
- ._preview_15m2u_71 {
436
+ ._preview_94mwe_71 {
437
437
  font: inherit;
438
438
  color: inherit;
439
439
  -webkit-appearance: none;
440
440
  appearance: none;
441
441
  cursor: zoom-in;
442
442
  }
443
- ._preview_15m2u_71:focus-visible {
443
+ ._preview_94mwe_71:focus-visible {
444
444
  outline: 2px solid var(--stitch-focus-ring);
445
445
  outline-offset: 2px;
446
446
  }
447
- ._mask_15m2u_82 {
447
+ ._mask_94mwe_82 {
448
448
  position: fixed;
449
449
  inset: 0;
450
450
  z-index: 1000;
@@ -452,49 +452,47 @@
452
452
  align-items: center;
453
453
  justify-content: center;
454
454
  background: var(--stitch-mask-bg);
455
- animation: _stitch-image-fade-in_15m2u_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
455
+ animation: _stitch-image-fade-in_94mwe_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
456
456
  }
457
- ._dialog_15m2u_92 {
457
+ ._dialog_94mwe_92 {
458
458
  position: relative;
459
459
  display: inline-flex;
460
460
  line-height: 0;
461
461
  }
462
- ._previewImg_15m2u_97 {
462
+ ._previewImg_94mwe_97 {
463
463
  max-width: min(88vw, 1100px);
464
464
  max-height: 86vh;
465
465
  border-radius: var(--stitch-radius-image);
466
466
  box-shadow: var(--stitch-shadow-lg);
467
467
  object-fit: contain;
468
- animation: _stitch-image-zoom-in_15m2u_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
468
+ animation: _stitch-image-zoom-in_94mwe_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
469
469
  }
470
- ._closeBtn_15m2u_105 {
470
+ ._closeBtn_94mwe_105 {
471
471
  position: absolute;
472
- top: var(--stitch-spacing-md);
473
- right: var(--stitch-spacing-md);
472
+ top: var(--stitch-spacing-sm);
473
+ right: var(--stitch-spacing-sm);
474
474
  z-index: 1;
475
- width: 40px;
476
- height: 40px;
475
+ width: 28px;
476
+ height: 28px;
477
477
  display: flex;
478
478
  align-items: center;
479
479
  justify-content: center;
480
480
  padding: 0;
481
- color: var(--stitch-text-primary);
482
- background: var(--stitch-bg-elevated);
483
- border: var(--stitch-border-width) solid var(--stitch-border);
484
- border-radius: var(--stitch-radius-button);
485
- box-shadow: var(--stitch-shadow-sm);
481
+ color: var(--stitch-text-on-dark);
482
+ background: var(--stitch-mask-bg);
483
+ border: none;
484
+ border-radius: 50%;
486
485
  cursor: pointer;
487
- transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease), transform var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
486
+ transition: transform var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
488
487
  }
489
- ._closeBtn_15m2u_105:hover {
490
- background: var(--stitch-bg-card);
491
- transform: scale(1.06);
488
+ ._closeBtn_94mwe_105:hover {
489
+ transform: scale(1.1);
492
490
  }
493
- ._closeBtn_15m2u_105:focus-visible {
491
+ ._closeBtn_94mwe_105:focus-visible {
494
492
  outline: 2px solid var(--stitch-focus-ring);
495
493
  outline-offset: 2px;
496
494
  }
497
- @keyframes _stitch-image-fade-in_15m2u_1 {
495
+ @keyframes _stitch-image-fade-in_94mwe_1 {
498
496
  from {
499
497
  opacity: 0;
500
498
  }
@@ -502,7 +500,7 @@
502
500
  opacity: 1;
503
501
  }
504
502
  }
505
- @keyframes _stitch-image-zoom-in_15m2u_1 {
503
+ @keyframes _stitch-image-zoom-in_94mwe_1 {
506
504
  from {
507
505
  opacity: 0;
508
506
  transform: scale(0.92);
@@ -1498,14 +1496,69 @@
1498
1496
  line-height: var(--stitch-line-height-base);
1499
1497
  user-select: none;
1500
1498
  }
1501
- ._wrapper_13o0n_1 {
1499
+ ._root_1mbik_1 {
1500
+ overflow: hidden;
1501
+ position: relative;
1502
+ }
1503
+ ._viewport_1mbik_5 {
1504
+ width: 100%;
1505
+ height: 100%;
1506
+ border-radius: inherit;
1507
+ }
1508
+ ._scrollbar_1mbik_10 {
1509
+ display: flex;
1510
+ user-select: none;
1511
+ touch-action: none;
1512
+ padding: var(--sa-track-pad);
1513
+ background: transparent;
1514
+ transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
1515
+ }
1516
+ ._scrollbar_1mbik_10:hover {
1517
+ background: var(--stitch-bg-section);
1518
+ }
1519
+ ._scrollbar_1mbik_10[data-orientation='vertical'] {
1520
+ width: var(--sa-size);
1521
+ }
1522
+ ._scrollbar_1mbik_10[data-orientation='horizontal'] {
1523
+ flex-direction: column;
1524
+ height: var(--sa-size);
1525
+ }
1526
+ ._thumb_1mbik_28 {
1527
+ flex: 1;
1528
+ position: relative;
1529
+ background: var(--stitch-text-muted);
1530
+ border-radius: var(--stitch-radius-button);
1531
+ transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
1532
+ }
1533
+ ._thumb_1mbik_28:hover {
1534
+ background: var(--stitch-text-secondary);
1535
+ }
1536
+ ._thumb_1mbik_28::before {
1537
+ content: '';
1538
+ position: absolute;
1539
+ top: 50%;
1540
+ left: 50%;
1541
+ width: 100%;
1542
+ height: 100%;
1543
+ min-width: 44px;
1544
+ min-height: 44px;
1545
+ transform: translate(-50%, -50%);
1546
+ }
1547
+ ._corner_1mbik_49 {
1548
+ background: transparent;
1549
+ }
1550
+ ._root_1mbik_1 {
1551
+ --sa-size: 10px;
1552
+ --sa-track-pad: 2px;
1553
+ }
1554
+ ._wrapper_i7k60_1 {
1502
1555
  position: relative;
1503
1556
  display: inline-block;
1504
1557
  min-width: 160px;
1505
1558
  font-family: var(--stitch-font-body);
1506
1559
  user-select: none;
1507
1560
  }
1508
- ._trigger_13o0n_8 {
1561
+ ._trigger_i7k60_8 {
1509
1562
  display: flex;
1510
1563
  align-items: center;
1511
1564
  justify-content: space-between;
@@ -1519,73 +1572,77 @@
1519
1572
  cursor: pointer;
1520
1573
  transition: border-color var(--stitch-motion-duration-base) var(--stitch-motion-ease), box-shadow var(--stitch-motion-duration-base) var(--stitch-motion-ease);
1521
1574
  }
1522
- ._trigger_13o0n_8:hover {
1575
+ ._trigger_i7k60_8:hover {
1523
1576
  border-color: var(--stitch-border-strong);
1524
1577
  }
1525
- ._trigger_13o0n_8:focus-visible {
1578
+ ._trigger_i7k60_8:focus-visible {
1526
1579
  outline: none;
1527
1580
  border-color: var(--stitch-accent);
1528
1581
  box-shadow: 0 0 0 2px var(--stitch-focus-ring);
1529
1582
  }
1530
- ._trigger_13o0n_8._open_13o0n_30 {
1583
+ ._trigger_i7k60_8._open_i7k60_30 {
1531
1584
  border-color: var(--stitch-accent);
1532
1585
  }
1533
- ._small_13o0n_33 {
1586
+ ._small_i7k60_33 {
1534
1587
  height: var(--stitch-height-sm);
1535
1588
  padding: 0 var(--stitch-spacing-md);
1536
1589
  font-size: var(--stitch-font-size-sm);
1537
1590
  }
1538
- ._middle_13o0n_38 {
1591
+ ._middle_i7k60_38 {
1539
1592
  height: var(--stitch-height-base);
1540
1593
  padding: 0 var(--stitch-spacing-lg);
1541
1594
  font-size: var(--stitch-font-size-base);
1542
1595
  }
1543
- ._large_13o0n_43 {
1596
+ ._large_i7k60_43 {
1544
1597
  height: var(--stitch-height-lg);
1545
1598
  padding: 0 var(--stitch-spacing-xl);
1546
1599
  font-size: var(--stitch-font-size-lg);
1547
1600
  }
1548
- ._value_13o0n_48 {
1601
+ ._value_i7k60_48 {
1549
1602
  color: var(--stitch-text-primary);
1550
1603
  font-weight: var(--stitch-font-weight-medium);
1551
1604
  overflow: hidden;
1552
1605
  text-overflow: ellipsis;
1553
1606
  white-space: nowrap;
1554
1607
  }
1555
- ._placeholder_13o0n_55 {
1608
+ ._placeholder_i7k60_55 {
1556
1609
  color: var(--stitch-text-muted);
1557
1610
  font-weight: var(--stitch-font-weight-normal);
1558
1611
  overflow: hidden;
1559
1612
  text-overflow: ellipsis;
1560
1613
  white-space: nowrap;
1561
1614
  }
1562
- ._arrow_13o0n_62 {
1615
+ ._arrow_i7k60_62 {
1563
1616
  flex-shrink: 0;
1564
1617
  color: var(--stitch-text-secondary);
1565
1618
  transition: transform var(--stitch-motion-duration-base) var(--stitch-motion-ease);
1566
1619
  }
1567
- ._arrowOpen_13o0n_67 {
1620
+ ._arrowOpen_i7k60_67 {
1568
1621
  transform: rotate(180deg);
1569
1622
  color: var(--stitch-accent);
1570
1623
  }
1571
- ._dropdown_13o0n_71 {
1624
+ ._dropdown_i7k60_71 {
1572
1625
  position: absolute;
1573
1626
  left: 0;
1574
1627
  top: calc(100% + var(--stitch-spacing-xs));
1575
1628
  z-index: 100;
1576
1629
  min-width: 100%;
1577
1630
  box-sizing: border-box;
1578
- max-height: 280px;
1579
- overflow-y: auto;
1580
- padding: var(--stitch-spacing-xs);
1581
1631
  background: var(--stitch-bg-elevated);
1582
1632
  border: var(--stitch-border-width) solid var(--stitch-border);
1583
1633
  border-radius: var(--stitch-radius-card);
1584
1634
  box-shadow: var(--stitch-shadow-base);
1585
1635
  opacity: 0;
1586
- animation: _dropdownFadeIn_13o0n_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease) forwards;
1636
+ animation: _dropdownFadeIn_i7k60_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease) forwards;
1637
+ overflow: hidden;
1638
+ }
1639
+ ._dropdownScroll_i7k60_86 {
1640
+ padding: var(--stitch-spacing-xs);
1641
+ }
1642
+ ._dropdownScroll_i7k60_86 [data-radix-scroll-area-viewport] {
1643
+ max-height: 280px;
1587
1644
  }
1588
- @keyframes _dropdownFadeIn_13o0n_1 {
1645
+ @keyframes _dropdownFadeIn_i7k60_1 {
1589
1646
  from {
1590
1647
  opacity: 0;
1591
1648
  transform: translateY(-4px);
@@ -1595,7 +1652,7 @@
1595
1652
  transform: translateY(0);
1596
1653
  }
1597
1654
  }
1598
- ._option_13o0n_98 {
1655
+ ._option_i7k60_102 {
1599
1656
  display: flex;
1600
1657
  align-items: center;
1601
1658
  justify-content: space-between;
@@ -1608,38 +1665,38 @@
1608
1665
  white-space: nowrap;
1609
1666
  transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
1610
1667
  }
1611
- ._optionLabel_13o0n_111 {
1668
+ ._optionLabel_i7k60_115 {
1612
1669
  overflow: hidden;
1613
1670
  text-overflow: ellipsis;
1614
1671
  }
1615
- ._optionActive_13o0n_115 {
1672
+ ._optionActive_i7k60_119 {
1616
1673
  background: var(--stitch-bg-section);
1617
1674
  }
1618
- ._optionSelected_13o0n_118 {
1675
+ ._optionSelected_i7k60_122 {
1619
1676
  color: var(--stitch-accent);
1620
1677
  font-weight: var(--stitch-font-weight-medium);
1621
1678
  }
1622
- ._checkMark_13o0n_122 {
1679
+ ._checkMark_i7k60_126 {
1623
1680
  flex-shrink: 0;
1624
1681
  color: var(--stitch-accent);
1625
1682
  }
1626
- ._optionDisabled_13o0n_126 {
1683
+ ._optionDisabled_i7k60_130 {
1627
1684
  color: var(--stitch-text-disabled);
1628
1685
  cursor: not-allowed;
1629
1686
  }
1630
- ._optionDisabled_13o0n_126._optionActive_13o0n_115 {
1687
+ ._optionDisabled_i7k60_130._optionActive_i7k60_119 {
1631
1688
  background: transparent;
1632
1689
  }
1633
- ._disabled_13o0n_133 ._trigger_13o0n_8 {
1690
+ ._disabled_i7k60_137 ._trigger_i7k60_8 {
1634
1691
  background: var(--stitch-bg-disabled);
1635
1692
  color: var(--stitch-text-disabled);
1636
1693
  cursor: not-allowed;
1637
1694
  opacity: 0.6;
1638
1695
  }
1639
- ._disabled_13o0n_133 ._trigger_13o0n_8:hover {
1696
+ ._disabled_i7k60_137 ._trigger_i7k60_8:hover {
1640
1697
  border-color: var(--stitch-border);
1641
1698
  }
1642
- ._disabled_13o0n_133 ._value_13o0n_48 {
1699
+ ._disabled_i7k60_137 ._value_i7k60_48 {
1643
1700
  color: var(--stitch-text-disabled);
1644
1701
  }
1645
1702
  ._root_de6fy_1 {
@@ -2388,155 +2445,332 @@
2388
2445
  ._tok-jsx_zsyzk_49 {
2389
2446
  color: var(--stitch-cat-3);
2390
2447
  }
2391
- ._frame_o1yrk_1 {
2392
- width: 100%;
2393
- }
2394
- ._tooltip_6t8so_1 {
2395
- padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
2448
+ ._message_di477_1 {
2449
+ box-sizing: border-box;
2450
+ display: flex;
2451
+ gap: var(--stitch-spacing-sm);
2452
+ margin-bottom: var(--stitch-spacing-md);
2396
2453
  font-family: var(--stitch-font-body);
2397
- font-size: var(--stitch-font-size-sm);
2454
+ font-size: var(--stitch-font-size-base);
2398
2455
  line-height: var(--stitch-line-height-base);
2399
- pointer-events: none;
2400
2456
  }
2401
- ._label_6t8so_8 {
2402
- margin-bottom: var(--stitch-spacing-xs);
2403
- color: var(--stitch-text-secondary);
2457
+ ._variant-received_di477_10 {
2458
+ flex-direction: row;
2459
+ justify-content: flex-start;
2404
2460
  }
2405
- ._row_6t8so_12 {
2406
- display: flex;
2461
+ ._variant-sent_di477_14 {
2462
+ flex-direction: row-reverse;
2463
+ justify-content: flex-start;
2464
+ }
2465
+ ._variant-system_di477_18 {
2466
+ flex-direction: column;
2407
2467
  align-items: center;
2408
- gap: var(--stitch-spacing-sm);
2409
- color: var(--stitch-text-primary);
2468
+ gap: var(--stitch-spacing-xs);
2469
+ text-align: center;
2410
2470
  }
2411
- ._swatch_6t8so_18 {
2412
- width: 10px;
2413
- height: 10px;
2414
- border-radius: 2px;
2471
+ ._avatar-slot_di477_24 {
2415
2472
  flex: none;
2473
+ width: 40px;
2474
+ display: flex;
2475
+ align-items: flex-end;
2416
2476
  }
2417
- ._name_6t8so_24 {
2418
- color: var(--stitch-text-secondary);
2419
- }
2420
- ._value_6t8so_27 {
2421
- margin-left: auto;
2422
- color: var(--stitch-text-primary);
2477
+ ._body_di477_30 {
2478
+ display: flex;
2479
+ flex-direction: column;
2480
+ max-width: 72%;
2481
+ min-width: 0;
2423
2482
  }
2424
- ._chart_bhyb6_1 {
2425
- font-family: var(--stitch-font-body);
2426
- font-size: var(--stitch-font-size-sm);
2483
+ ._variant-sent_di477_14 ._body_di477_30 {
2484
+ align-items: flex-end;
2427
2485
  }
2428
- ._endLabel_bhyb6_5 {
2429
- fill: var(--stitch-text-primary);
2430
- font-size: var(--stitch-font-size-sm);
2486
+ ._bubble_di477_39 {
2487
+ padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
2488
+ border-radius: var(--stitch-radius-card);
2489
+ word-break: break-word;
2490
+ white-space: pre-wrap;
2431
2491
  }
2432
- ._chart_1sb8f_1 {
2433
- font-family: var(--stitch-font-body);
2434
- font-size: var(--stitch-font-size-sm);
2492
+ ._variant-received_di477_10 ._bubble_di477_39 {
2493
+ background: var(--stitch-bg-card);
2494
+ color: var(--stitch-text-primary);
2435
2495
  }
2436
- ._chart_yzp1s_1 {
2437
- font-family: var(--stitch-font-body);
2438
- font-size: var(--stitch-font-size-sm);
2496
+ ._variant-sent_di477_14 ._bubble_di477_39 {
2497
+ background: color-mix(in srgb, var(--stitch-cat-1), var(--stitch-bg-canvas) 88%);
2498
+ color: color-mix(in srgb, var(--stitch-cat-1), var(--stitch-text-primary) 68%);
2439
2499
  }
2440
- ._center_yzp1s_5 {
2441
- fill: var(--stitch-text-primary);
2442
- font-size: var(--stitch-font-size-lg);
2500
+ ._bubble_di477_39 a {
2501
+ color: var(--stitch-accent);
2502
+ text-decoration: none;
2443
2503
  font-weight: var(--stitch-font-weight-medium);
2504
+ transition: color var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
2444
2505
  }
2445
- ._stat_1wp9y_1 {
2446
- display: flex;
2447
- flex-direction: column;
2448
- gap: var(--stitch-spacing-xs);
2449
- font-family: var(--stitch-font-body);
2450
- color: var(--stitch-text-primary);
2506
+ ._bubble_di477_39 a:hover {
2507
+ color: var(--stitch-accent-hover);
2508
+ text-decoration: underline;
2451
2509
  }
2452
- ._stat-title_1wp9y_8 {
2510
+ ._emoji_di477_63 {
2511
+ font-size: calc(var(--stitch-font-size-display) * 0.75);
2512
+ line-height: 1.1;
2513
+ }
2514
+ ._system_di477_67 {
2515
+ display: inline-block;
2516
+ padding: var(--stitch-spacing-xs) var(--stitch-spacing-md);
2517
+ border-radius: var(--stitch-radius-card);
2518
+ background: var(--stitch-bg-section);
2519
+ color: var(--stitch-text-muted);
2453
2520
  font-size: var(--stitch-font-size-sm);
2454
- color: var(--stitch-text-secondary);
2455
2521
  }
2456
- ._stat-value-row_1wp9y_12 {
2457
- display: flex;
2458
- align-items: baseline;
2459
- gap: var(--stitch-spacing-sm);
2522
+ ._meta_di477_75,
2523
+ ._meta-below_di477_76 {
2524
+ font-size: calc(var(--stitch-font-size-sm) * 0.8);
2525
+ line-height: 1;
2526
+ color: var(--stitch-text-muted);
2460
2527
  }
2461
- ._stat-value_1wp9y_12 {
2528
+ ._meta_di477_75 {
2462
2529
  display: inline-flex;
2463
- align-items: baseline;
2530
+ align-items: center;
2531
+ vertical-align: text-bottom;
2464
2532
  gap: var(--stitch-spacing-xs);
2465
- font-size: var(--stitch-font-size-display);
2466
- font-weight: var(--stitch-font-weight-medium);
2467
- line-height: var(--stitch-line-height-base);
2468
- }
2469
- ._stat-prefix_1wp9y_25,
2470
- ._stat-suffix_1wp9y_26 {
2471
- font-size: var(--stitch-font-size-lg);
2472
- color: var(--stitch-text-secondary);
2533
+ margin-left: var(--stitch-spacing-sm);
2473
2534
  }
2474
- ._stat-trend_1wp9y_30 {
2475
- display: inline-flex;
2535
+ ._meta-below_di477_76 {
2536
+ display: flex;
2476
2537
  align-items: center;
2477
2538
  gap: var(--stitch-spacing-xs);
2478
- font-size: var(--stitch-font-size-sm);
2479
- font-weight: var(--stitch-font-weight-medium);
2480
- }
2481
- ._stat-trend-positive_1wp9y_37 {
2482
- color: var(--stitch-success);
2483
- }
2484
- ._stat-trend-negative_1wp9y_40 {
2485
- color: var(--stitch-danger);
2539
+ margin-top: var(--stitch-spacing-xs);
2486
2540
  }
2487
- ._stat-caption_1wp9y_43 {
2488
- font-size: var(--stitch-font-size-sm);
2489
- color: var(--stitch-text-secondary);
2541
+ ._time_di477_94 {
2542
+ color: var(--stitch-text-muted);
2490
2543
  }
2491
- ._stat-status_1wp9y_47 {
2544
+ ._ticks_di477_97 {
2492
2545
  display: inline-flex;
2493
2546
  align-items: center;
2494
- gap: var(--stitch-spacing-xs);
2495
- font-size: var(--stitch-font-size-sm);
2496
- color: var(--stitch-text-secondary);
2497
- }
2498
- ._stat-dot-neutral_1wp9y_54 {
2499
2547
  color: var(--stitch-text-muted);
2500
2548
  }
2501
- ._stat-dot-success_1wp9y_57 {
2502
- color: var(--stitch-success);
2549
+ ._ticks_di477_97 ._tick_di477_97 + ._tick_di477_97 {
2550
+ margin-left: -0.55em;
2503
2551
  }
2504
- ._stat-dot-danger_1wp9y_60 {
2505
- color: var(--stitch-danger);
2552
+ ._ticks-read_di477_105 {
2553
+ color: var(--stitch-info);
2506
2554
  }
2507
- ._stat-dot-warning_1wp9y_63 {
2508
- color: var(--stitch-warning);
2555
+ ._is-grouped_di477_108 {
2556
+ margin-bottom: var(--stitch-spacing-xs);
2509
2557
  }
2510
- ._stat-dot-info_1wp9y_66 {
2511
- color: var(--stitch-info);
2558
+ ._content_6jxoc_1 {
2559
+ box-sizing: border-box;
2560
+ min-width: 180px;
2561
+ background: var(--stitch-bg-elevated);
2562
+ border: var(--stitch-border-width) solid var(--stitch-border);
2563
+ border-radius: var(--stitch-radius-card);
2564
+ box-shadow: var(--stitch-shadow-base);
2565
+ color: var(--stitch-text-primary);
2566
+ font-family: var(--stitch-font-body);
2567
+ font-size: var(--stitch-font-size-sm);
2568
+ line-height: var(--stitch-line-height-base);
2569
+ z-index: 100;
2570
+ overflow: hidden;
2512
2571
  }
2513
- ._group_1wp9y_69 {
2514
- display: flex;
2515
- flex-wrap: wrap;
2516
- align-items: stretch;
2572
+ ._content_6jxoc_1[data-state='open'] {
2573
+ animation: _stitch-dropdown-in_6jxoc_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
2517
2574
  }
2518
- ._group-item_1wp9y_74 {
2519
- display: flex;
2520
- padding: 0 var(--stitch-spacing-xl);
2575
+ ._content_6jxoc_1[data-state='closed'] {
2576
+ animation: _stitch-dropdown-out_6jxoc_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
2521
2577
  }
2522
- ._group-item_1wp9y_74 + ._group-item_1wp9y_74 {
2523
- border-left: var(--stitch-border-width) solid var(--stitch-border);
2578
+ ._scroll_6jxoc_21 {
2579
+ padding: var(--stitch-spacing-xs);
2524
2580
  }
2525
- ._overlay_jixc4_1 {
2526
- position: absolute;
2527
- inset: 0;
2581
+ ._scroll_6jxoc_21 [data-radix-scroll-area-viewport] {
2582
+ max-height: 280px;
2583
+ }
2584
+ ._item_6jxoc_27 {
2528
2585
  display: flex;
2529
- flex-direction: column;
2530
2586
  align-items: center;
2531
- justify-content: center;
2532
- gap: var(--stitch-spacing-md);
2533
- background: var(--stitch-mask-bg);
2534
- color: var(--stitch-text-on-dark);
2535
- opacity: 1;
2536
- transition: opacity var(--stitch-motion-duration-base) var(--stitch-motion-ease);
2587
+ gap: var(--stitch-spacing-sm);
2588
+ padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
2589
+ border-radius: var(--stitch-radius-input);
2590
+ color: var(--stitch-text-primary);
2591
+ cursor: pointer;
2592
+ user-select: none;
2593
+ outline: none;
2594
+ transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
2537
2595
  }
2538
- ._closing_jixc4_14 {
2539
- opacity: 0;
2596
+ ._item_6jxoc_27[data-highlighted] {
2597
+ background: var(--stitch-bg-section);
2598
+ }
2599
+ ._item_6jxoc_27[data-disabled] {
2600
+ color: var(--stitch-text-disabled);
2601
+ cursor: not-allowed;
2602
+ pointer-events: none;
2603
+ }
2604
+ ._danger_6jxoc_47 {
2605
+ color: var(--stitch-danger);
2606
+ }
2607
+ ._danger_6jxoc_47[data-highlighted] {
2608
+ background: var(--stitch-danger-bg);
2609
+ color: var(--stitch-danger);
2610
+ }
2611
+ ._itemIcon_6jxoc_54 {
2612
+ flex-shrink: 0;
2613
+ color: currentColor;
2614
+ }
2615
+ ._itemLabel_6jxoc_58 {
2616
+ flex: 1;
2617
+ }
2618
+ ._subArrow_6jxoc_61 {
2619
+ flex-shrink: 0;
2620
+ margin-left: auto;
2621
+ color: var(--stitch-text-muted);
2622
+ }
2623
+ @keyframes _stitch-dropdown-in_6jxoc_1 {
2624
+ from {
2625
+ opacity: 0;
2626
+ transform: scale(0.96);
2627
+ }
2628
+ to {
2629
+ opacity: 1;
2630
+ transform: scale(1);
2631
+ }
2632
+ }
2633
+ @keyframes _stitch-dropdown-out_6jxoc_1 {
2634
+ from {
2635
+ opacity: 1;
2636
+ }
2637
+ to {
2638
+ opacity: 0;
2639
+ }
2640
+ }
2641
+ ._content_1dpag_1 {
2642
+ box-sizing: border-box;
2643
+ min-width: 180px;
2644
+ background: var(--stitch-bg-elevated);
2645
+ border: var(--stitch-border-width) solid var(--stitch-border);
2646
+ border-radius: var(--stitch-radius-card);
2647
+ box-shadow: var(--stitch-shadow-base);
2648
+ color: var(--stitch-text-primary);
2649
+ font-family: var(--stitch-font-body);
2650
+ font-size: var(--stitch-font-size-sm);
2651
+ line-height: var(--stitch-line-height-base);
2652
+ z-index: 100;
2653
+ overflow: hidden;
2654
+ }
2655
+ ._content_1dpag_1[data-state='open'] {
2656
+ animation: _stitch-context-menu-in_1dpag_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
2657
+ }
2658
+ ._content_1dpag_1[data-state='closed'] {
2659
+ animation: _stitch-context-menu-out_1dpag_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
2660
+ }
2661
+ ._scroll_1dpag_21 {
2662
+ padding: var(--stitch-spacing-xs);
2663
+ }
2664
+ ._scroll_1dpag_21 [data-radix-scroll-area-viewport] {
2665
+ max-height: 280px;
2666
+ }
2667
+ ._item_1dpag_27 {
2668
+ display: flex;
2669
+ align-items: center;
2670
+ gap: var(--stitch-spacing-sm);
2671
+ padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
2672
+ border-radius: var(--stitch-radius-input);
2673
+ color: var(--stitch-text-primary);
2674
+ cursor: pointer;
2675
+ user-select: none;
2676
+ outline: none;
2677
+ transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
2678
+ }
2679
+ ._item_1dpag_27[data-highlighted] {
2680
+ background: var(--stitch-bg-section);
2681
+ }
2682
+ ._item_1dpag_27[data-disabled] {
2683
+ color: var(--stitch-text-disabled);
2684
+ cursor: not-allowed;
2685
+ pointer-events: none;
2686
+ }
2687
+ ._danger_1dpag_47 {
2688
+ color: var(--stitch-danger);
2689
+ }
2690
+ ._danger_1dpag_47[data-highlighted] {
2691
+ background: var(--stitch-danger-bg);
2692
+ color: var(--stitch-danger);
2693
+ }
2694
+ ._itemIcon_1dpag_54 {
2695
+ flex-shrink: 0;
2696
+ color: currentColor;
2697
+ }
2698
+ ._itemLabel_1dpag_58 {
2699
+ flex: 1;
2700
+ }
2701
+ ._subArrow_1dpag_61 {
2702
+ flex-shrink: 0;
2703
+ margin-left: auto;
2704
+ color: var(--stitch-text-muted);
2705
+ }
2706
+ @keyframes _stitch-context-menu-in_1dpag_1 {
2707
+ from {
2708
+ opacity: 0;
2709
+ transform: scale(0.96);
2710
+ }
2711
+ to {
2712
+ opacity: 1;
2713
+ transform: scale(1);
2714
+ }
2715
+ }
2716
+ @keyframes _stitch-context-menu-out_1dpag_1 {
2717
+ from {
2718
+ opacity: 1;
2719
+ }
2720
+ to {
2721
+ opacity: 0;
2722
+ }
2723
+ }
2724
+ ._wrap_9echt_1 {
2725
+ position: relative;
2726
+ display: inline-block;
2727
+ }
2728
+ ._trigger_9echt_5 {
2729
+ position: absolute;
2730
+ top: var(--stitch-spacing-xs);
2731
+ right: var(--stitch-spacing-xs);
2732
+ display: inline-flex;
2733
+ align-items: center;
2734
+ justify-content: center;
2735
+ width: var(--stitch-height-sm);
2736
+ height: var(--stitch-height-sm);
2737
+ padding: 0;
2738
+ background: var(--stitch-bg-elevated);
2739
+ border: var(--stitch-border-width) solid var(--stitch-border);
2740
+ border-radius: var(--stitch-radius-button);
2741
+ box-shadow: var(--stitch-shadow-sm);
2742
+ color: var(--stitch-text-muted);
2743
+ cursor: pointer;
2744
+ opacity: 0;
2745
+ transition: opacity var(--stitch-motion-duration-fast) var(--stitch-motion-ease), background var(--stitch-motion-duration-fast) var(--stitch-motion-ease), color var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
2746
+ }
2747
+ ._trigger_9echt_5:focus-visible,
2748
+ ._trigger_9echt_5[data-state='open'] {
2749
+ opacity: 1;
2750
+ }
2751
+ ._trigger_9echt_5:hover:not(:disabled) {
2752
+ background: var(--stitch-bg-section);
2753
+ color: var(--stitch-text-primary);
2754
+ }
2755
+ ._trigger_9echt_5:focus-visible {
2756
+ outline: var(--stitch-border-width) solid var(--stitch-focus-ring);
2757
+ outline-offset: 2px;
2758
+ }
2759
+ ._overlay_jixc4_1 {
2760
+ position: absolute;
2761
+ inset: 0;
2762
+ display: flex;
2763
+ flex-direction: column;
2764
+ align-items: center;
2765
+ justify-content: center;
2766
+ gap: var(--stitch-spacing-md);
2767
+ background: var(--stitch-mask-bg);
2768
+ color: var(--stitch-text-on-dark);
2769
+ opacity: 1;
2770
+ transition: opacity var(--stitch-motion-duration-base) var(--stitch-motion-ease);
2771
+ }
2772
+ ._closing_jixc4_14 {
2773
+ opacity: 0;
2540
2774
  }
2541
2775
  ._hidden_jixc4_17 {
2542
2776
  display: none;
@@ -2547,38 +2781,475 @@
2547
2781
  border-radius: var(--stitch-radius-button);
2548
2782
  animation: _stitch-loading-spin_jixc4_1 0.8s linear infinite;
2549
2783
  }
2550
- @keyframes _stitch-loading-spin_jixc4_1 {
2551
- to {
2552
- transform: rotate(360deg);
2553
- }
2784
+ @keyframes _stitch-loading-spin_jixc4_1 {
2785
+ to {
2786
+ transform: rotate(360deg);
2787
+ }
2788
+ }
2789
+ ._spinner-small_jixc4_31 {
2790
+ width: 20px;
2791
+ height: 20px;
2792
+ border-width: 2px;
2793
+ }
2794
+ ._spinner-middle_jixc4_36 {
2795
+ width: 32px;
2796
+ height: 32px;
2797
+ border-width: 3px;
2798
+ }
2799
+ ._spinner-large_jixc4_41 {
2800
+ width: 44px;
2801
+ height: 44px;
2802
+ border-width: 4px;
2803
+ }
2804
+ ._tip_jixc4_46 {
2805
+ font-family: var(--stitch-font-body);
2806
+ font-size: var(--stitch-font-size-sm);
2807
+ line-height: var(--stitch-line-height-base);
2808
+ }
2809
+ @media (prefers-reduced-motion: reduce) {
2810
+ ._spinner_jixc4_20 {
2811
+ animation-duration: 1.6s;
2812
+ }
2813
+ ._overlay_jixc4_1 {
2814
+ transition: none;
2815
+ }
2816
+ }
2817
+ ._list_1xrm9_1 {
2818
+ box-sizing: border-box;
2819
+ display: flex;
2820
+ flex-direction: column;
2821
+ overflow-y: auto;
2822
+ padding: var(--stitch-spacing-md);
2823
+ font-family: var(--stitch-font-body);
2824
+ }
2825
+ ._list_1xrm9_1:focus-visible {
2826
+ outline: 2px solid var(--stitch-focus-ring);
2827
+ outline-offset: -2px;
2828
+ }
2829
+ ._top-loader_1xrm9_13 {
2830
+ position: relative;
2831
+ flex: none;
2832
+ height: var(--stitch-height-lg);
2833
+ }
2834
+ ._input_1o9t1_1 {
2835
+ box-sizing: border-box;
2836
+ display: flex;
2837
+ align-items: center;
2838
+ gap: var(--stitch-spacing-sm);
2839
+ width: 100%;
2840
+ padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
2841
+ background: var(--stitch-bg-elevated);
2842
+ border: var(--stitch-border-width) solid var(--stitch-border);
2843
+ border-radius: var(--stitch-radius-input);
2844
+ font-family: var(--stitch-font-body);
2845
+ font-size: var(--stitch-font-size-base);
2846
+ transition: border-color var(--stitch-motion-duration-base) var(--stitch-motion-ease), box-shadow var(--stitch-motion-duration-base) var(--stitch-motion-ease);
2847
+ }
2848
+ ._input_1o9t1_1:hover:not(._is-disabled_1o9t1_15) {
2849
+ border-color: var(--stitch-border-strong);
2850
+ }
2851
+ ._input_1o9t1_1:focus-within:not(._is-disabled_1o9t1_15) {
2852
+ border-color: var(--stitch-accent);
2853
+ box-shadow: 0 0 0 2px var(--stitch-focus-ring);
2854
+ }
2855
+ ._is-disabled_1o9t1_15 {
2856
+ background: var(--stitch-bg-disabled);
2857
+ opacity: 0.6;
2858
+ cursor: not-allowed;
2859
+ }
2860
+ ._prefix_1o9t1_27 {
2861
+ display: inline-flex;
2862
+ align-items: center;
2863
+ flex-shrink: 0;
2864
+ }
2865
+ ._textarea_1o9t1_32 {
2866
+ flex: 1;
2867
+ min-width: 0;
2868
+ display: block;
2869
+ box-sizing: border-box;
2870
+ border: none;
2871
+ outline: none;
2872
+ resize: none;
2873
+ overflow-y: hidden;
2874
+ background: transparent;
2875
+ color: var(--stitch-text-primary);
2876
+ font-family: inherit;
2877
+ font-size: inherit;
2878
+ font-weight: var(--stitch-font-weight-normal);
2879
+ line-height: var(--stitch-line-height-base);
2880
+ padding: 0;
2881
+ }
2882
+ ._textarea_1o9t1_32::placeholder {
2883
+ color: var(--stitch-text-muted);
2884
+ }
2885
+ ._textarea_1o9t1_32:disabled {
2886
+ color: var(--stitch-text-disabled);
2887
+ cursor: not-allowed;
2888
+ }
2889
+ ._actions_1o9t1_56 {
2890
+ display: inline-flex;
2891
+ align-items: center;
2892
+ gap: var(--stitch-spacing-xs);
2893
+ flex-shrink: 0;
2894
+ }
2895
+ ._send_1o9t1_62 {
2896
+ display: inline-flex;
2897
+ align-items: center;
2898
+ justify-content: center;
2899
+ width: var(--stitch-height-sm);
2900
+ height: var(--stitch-height-sm);
2901
+ padding: 0;
2902
+ border: none;
2903
+ cursor: pointer;
2904
+ color: var(--stitch-accent-text);
2905
+ background: var(--stitch-accent);
2906
+ border-radius: var(--stitch-radius-button);
2907
+ transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease), opacity var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
2908
+ }
2909
+ ._send_1o9t1_62:hover:not(:disabled) {
2910
+ background: var(--stitch-accent-hover);
2911
+ }
2912
+ ._send_1o9t1_62:active:not(:disabled) {
2913
+ background: var(--stitch-accent-active);
2914
+ }
2915
+ ._send_1o9t1_62:focus-visible {
2916
+ outline: none;
2917
+ box-shadow: 0 0 0 2px var(--stitch-bg-elevated), 0 0 0 4px var(--stitch-focus-ring);
2918
+ }
2919
+ ._send_1o9t1_62:disabled {
2920
+ cursor: not-allowed;
2921
+ opacity: 0.4;
2922
+ }
2923
+ ._indicator_hslxz_1 {
2924
+ display: inline-flex;
2925
+ align-items: center;
2926
+ align-self: flex-start;
2927
+ width: fit-content;
2928
+ gap: var(--stitch-spacing-xs);
2929
+ padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
2930
+ background: var(--stitch-bg-card);
2931
+ border-radius: var(--stitch-radius-card);
2932
+ }
2933
+ ._dot_hslxz_11 {
2934
+ width: calc(var(--stitch-font-size-sm) * 0.4);
2935
+ height: calc(var(--stitch-font-size-sm) * 0.4);
2936
+ border-radius: var(--stitch-radius-button);
2937
+ background: var(--stitch-text-muted);
2938
+ animation: _stitch-typing-bounce_hslxz_1 calc(var(--stitch-motion-duration-base) * 3) var(--stitch-motion-ease) infinite;
2939
+ }
2940
+ ._dot_hslxz_11:nth-child(2) {
2941
+ animation-delay: var(--stitch-motion-duration-base);
2942
+ }
2943
+ ._dot_hslxz_11:nth-child(3) {
2944
+ animation-delay: calc(var(--stitch-motion-duration-base) * 2);
2945
+ }
2946
+ @keyframes _stitch-typing-bounce_hslxz_1 {
2947
+ 0%,
2948
+ 60%,
2949
+ 100% {
2950
+ opacity: 0.35;
2951
+ transform: translateY(0);
2952
+ }
2953
+ 30% {
2954
+ opacity: 1;
2955
+ transform: translateY(-25%);
2956
+ }
2957
+ }
2958
+ @media (prefers-reduced-motion: reduce) {
2959
+ ._dot_hslxz_11 {
2960
+ animation: none;
2961
+ opacity: 0.6;
2962
+ }
2963
+ }
2964
+ ._frame_1b4n8_1 {
2965
+ display: block;
2966
+ line-height: 0;
2967
+ max-width: 100%;
2968
+ }
2969
+ ._thumb_1b4n8_6 {
2970
+ display: block;
2971
+ padding: 0;
2972
+ border: none;
2973
+ background: transparent;
2974
+ cursor: zoom-in;
2975
+ border-radius: var(--stitch-radius-image);
2976
+ }
2977
+ ._thumb_1b4n8_6:focus-visible {
2978
+ outline: 2px solid var(--stitch-focus-ring);
2979
+ outline-offset: 2px;
2980
+ }
2981
+ ._mask_1b4n8_18 {
2982
+ position: fixed;
2983
+ inset: 0;
2984
+ z-index: 1000;
2985
+ display: flex;
2986
+ align-items: center;
2987
+ justify-content: center;
2988
+ background: var(--stitch-mask-bg);
2989
+ }
2990
+ ._dialog_1b4n8_27 {
2991
+ position: relative;
2992
+ display: inline-flex;
2993
+ line-height: 0;
2994
+ }
2995
+ ._full_1b4n8_32 {
2996
+ max-width: min(88vw, 1100px);
2997
+ max-height: 86vh;
2998
+ }
2999
+ ._tools_1b4n8_36 {
3000
+ position: absolute;
3001
+ top: var(--stitch-spacing-md);
3002
+ right: var(--stitch-spacing-md);
3003
+ z-index: 1;
3004
+ display: flex;
3005
+ gap: var(--stitch-spacing-sm);
3006
+ }
3007
+ ._toolBtn_1b4n8_44 {
3008
+ width: 28px;
3009
+ height: 28px;
3010
+ display: flex;
3011
+ align-items: center;
3012
+ justify-content: center;
3013
+ padding: 0;
3014
+ color: var(--stitch-text-on-dark);
3015
+ background: var(--stitch-mask-bg);
3016
+ border: none;
3017
+ border-radius: 50%;
3018
+ cursor: pointer;
3019
+ transition: transform var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
3020
+ }
3021
+ ._toolBtn_1b4n8_44:hover {
3022
+ transform: scale(1.1);
3023
+ }
3024
+ ._toolBtn_1b4n8_44:focus-visible {
3025
+ outline: 2px solid var(--stitch-focus-ring);
3026
+ outline-offset: 2px;
3027
+ }
3028
+ ._file_1tjaq_1 {
3029
+ display: flex;
3030
+ align-items: center;
3031
+ gap: var(--stitch-spacing-sm);
3032
+ padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
3033
+ max-width: 320px;
3034
+ }
3035
+ ._trigger_1tjaq_8 {
3036
+ display: flex;
3037
+ align-items: center;
3038
+ gap: var(--stitch-spacing-sm);
3039
+ flex: 1 1 auto;
3040
+ min-width: 0;
3041
+ padding: 0;
3042
+ border: none;
3043
+ background: transparent;
3044
+ font: inherit;
3045
+ color: inherit;
3046
+ text-align: left;
3047
+ }
3048
+ button._trigger_1tjaq_8 {
3049
+ cursor: pointer;
3050
+ }
3051
+ button._trigger_1tjaq_8:focus-visible {
3052
+ outline: 2px solid var(--stitch-focus-ring);
3053
+ outline-offset: 2px;
3054
+ border-radius: var(--stitch-radius-input);
3055
+ }
3056
+ ._type_1tjaq_29 {
3057
+ flex: 0 0 auto;
3058
+ color: var(--stitch-text-secondary);
3059
+ }
3060
+ ._text_1tjaq_33 {
3061
+ display: flex;
3062
+ flex-direction: column;
3063
+ min-width: 0;
3064
+ gap: 2px;
3065
+ }
3066
+ ._name_1tjaq_39 {
3067
+ color: var(--stitch-text-primary);
3068
+ font-weight: var(--stitch-font-weight-medium);
3069
+ font-size: var(--stitch-font-size-base);
3070
+ white-space: nowrap;
3071
+ overflow: hidden;
3072
+ text-overflow: ellipsis;
3073
+ }
3074
+ ._meta_1tjaq_47 {
3075
+ color: var(--stitch-text-muted);
3076
+ font-size: var(--stitch-font-size-sm);
3077
+ }
3078
+ ._download_1tjaq_51 {
3079
+ flex: 0 0 auto;
3080
+ }
3081
+ ._voice_16mxc_1 {
3082
+ display: flex;
3083
+ align-items: center;
3084
+ gap: var(--stitch-spacing-sm);
3085
+ min-width: 180px;
3086
+ }
3087
+ ._play_16mxc_7 {
3088
+ flex: 0 0 auto;
3089
+ width: var(--stitch-height-base);
3090
+ height: var(--stitch-height-base);
3091
+ padding: 0;
3092
+ border-radius: 50%;
3093
+ }
3094
+ ._wave_16mxc_14 {
3095
+ display: flex;
3096
+ align-items: center;
3097
+ gap: 2px;
3098
+ flex: 1 1 auto;
3099
+ height: 28px;
3100
+ min-width: 0;
3101
+ }
3102
+ ._bar_16mxc_22 {
3103
+ flex: 1 1 auto;
3104
+ min-width: 2px;
3105
+ max-width: 4px;
3106
+ border-radius: var(--stitch-radius-button);
3107
+ }
3108
+ ._bar-played_16mxc_28 {
3109
+ background: var(--stitch-accent);
3110
+ }
3111
+ ._bar-idle_16mxc_31 {
3112
+ background: var(--stitch-border);
3113
+ }
3114
+ ._duration_16mxc_34 {
3115
+ flex: 0 0 auto;
3116
+ color: var(--stitch-text-muted);
3117
+ font-size: var(--stitch-font-size-sm);
3118
+ font-variant-numeric: tabular-nums;
3119
+ }
3120
+ ._frame_o1yrk_1 {
3121
+ width: 100%;
3122
+ }
3123
+ ._tooltip_6t8so_1 {
3124
+ padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
3125
+ font-family: var(--stitch-font-body);
3126
+ font-size: var(--stitch-font-size-sm);
3127
+ line-height: var(--stitch-line-height-base);
3128
+ pointer-events: none;
3129
+ }
3130
+ ._label_6t8so_8 {
3131
+ margin-bottom: var(--stitch-spacing-xs);
3132
+ color: var(--stitch-text-secondary);
3133
+ }
3134
+ ._row_6t8so_12 {
3135
+ display: flex;
3136
+ align-items: center;
3137
+ gap: var(--stitch-spacing-sm);
3138
+ color: var(--stitch-text-primary);
3139
+ }
3140
+ ._swatch_6t8so_18 {
3141
+ width: 10px;
3142
+ height: 10px;
3143
+ border-radius: 2px;
3144
+ flex: none;
3145
+ }
3146
+ ._name_6t8so_24 {
3147
+ color: var(--stitch-text-secondary);
3148
+ }
3149
+ ._value_6t8so_27 {
3150
+ margin-left: auto;
3151
+ color: var(--stitch-text-primary);
3152
+ }
3153
+ ._chart_bhyb6_1 {
3154
+ font-family: var(--stitch-font-body);
3155
+ font-size: var(--stitch-font-size-sm);
3156
+ }
3157
+ ._endLabel_bhyb6_5 {
3158
+ fill: var(--stitch-text-primary);
3159
+ font-size: var(--stitch-font-size-sm);
3160
+ }
3161
+ ._chart_1sb8f_1 {
3162
+ font-family: var(--stitch-font-body);
3163
+ font-size: var(--stitch-font-size-sm);
3164
+ }
3165
+ ._chart_yzp1s_1 {
3166
+ font-family: var(--stitch-font-body);
3167
+ font-size: var(--stitch-font-size-sm);
3168
+ }
3169
+ ._center_yzp1s_5 {
3170
+ fill: var(--stitch-text-primary);
3171
+ font-size: var(--stitch-font-size-lg);
3172
+ font-weight: var(--stitch-font-weight-medium);
3173
+ }
3174
+ ._stat_1wp9y_1 {
3175
+ display: flex;
3176
+ flex-direction: column;
3177
+ gap: var(--stitch-spacing-xs);
3178
+ font-family: var(--stitch-font-body);
3179
+ color: var(--stitch-text-primary);
3180
+ }
3181
+ ._stat-title_1wp9y_8 {
3182
+ font-size: var(--stitch-font-size-sm);
3183
+ color: var(--stitch-text-secondary);
3184
+ }
3185
+ ._stat-value-row_1wp9y_12 {
3186
+ display: flex;
3187
+ align-items: baseline;
3188
+ gap: var(--stitch-spacing-sm);
3189
+ }
3190
+ ._stat-value_1wp9y_12 {
3191
+ display: inline-flex;
3192
+ align-items: baseline;
3193
+ gap: var(--stitch-spacing-xs);
3194
+ font-size: var(--stitch-font-size-display);
3195
+ font-weight: var(--stitch-font-weight-medium);
3196
+ line-height: var(--stitch-line-height-base);
3197
+ }
3198
+ ._stat-prefix_1wp9y_25,
3199
+ ._stat-suffix_1wp9y_26 {
3200
+ font-size: var(--stitch-font-size-lg);
3201
+ color: var(--stitch-text-secondary);
2554
3202
  }
2555
- ._spinner-small_jixc4_31 {
2556
- width: 20px;
2557
- height: 20px;
2558
- border-width: 2px;
3203
+ ._stat-trend_1wp9y_30 {
3204
+ display: inline-flex;
3205
+ align-items: center;
3206
+ gap: var(--stitch-spacing-xs);
3207
+ font-size: var(--stitch-font-size-sm);
3208
+ font-weight: var(--stitch-font-weight-medium);
2559
3209
  }
2560
- ._spinner-middle_jixc4_36 {
2561
- width: 32px;
2562
- height: 32px;
2563
- border-width: 3px;
3210
+ ._stat-trend-positive_1wp9y_37 {
3211
+ color: var(--stitch-success);
2564
3212
  }
2565
- ._spinner-large_jixc4_41 {
2566
- width: 44px;
2567
- height: 44px;
2568
- border-width: 4px;
3213
+ ._stat-trend-negative_1wp9y_40 {
3214
+ color: var(--stitch-danger);
2569
3215
  }
2570
- ._tip_jixc4_46 {
2571
- font-family: var(--stitch-font-body);
3216
+ ._stat-caption_1wp9y_43 {
2572
3217
  font-size: var(--stitch-font-size-sm);
2573
- line-height: var(--stitch-line-height-base);
3218
+ color: var(--stitch-text-secondary);
2574
3219
  }
2575
- @media (prefers-reduced-motion: reduce) {
2576
- ._spinner_jixc4_20 {
2577
- animation-duration: 1.6s;
2578
- }
2579
- ._overlay_jixc4_1 {
2580
- transition: none;
2581
- }
3220
+ ._stat-status_1wp9y_47 {
3221
+ display: inline-flex;
3222
+ align-items: center;
3223
+ gap: var(--stitch-spacing-xs);
3224
+ font-size: var(--stitch-font-size-sm);
3225
+ color: var(--stitch-text-secondary);
3226
+ }
3227
+ ._stat-dot-neutral_1wp9y_54 {
3228
+ color: var(--stitch-text-muted);
3229
+ }
3230
+ ._stat-dot-success_1wp9y_57 {
3231
+ color: var(--stitch-success);
3232
+ }
3233
+ ._stat-dot-danger_1wp9y_60 {
3234
+ color: var(--stitch-danger);
3235
+ }
3236
+ ._stat-dot-warning_1wp9y_63 {
3237
+ color: var(--stitch-warning);
3238
+ }
3239
+ ._stat-dot-info_1wp9y_66 {
3240
+ color: var(--stitch-info);
3241
+ }
3242
+ ._group_1wp9y_69 {
3243
+ display: flex;
3244
+ flex-wrap: wrap;
3245
+ align-items: stretch;
3246
+ }
3247
+ ._group-item_1wp9y_74 {
3248
+ display: flex;
3249
+ padding: 0 var(--stitch-spacing-xl);
3250
+ }
3251
+ ._group-item_1wp9y_74 + ._group-item_1wp9y_74 {
3252
+ border-left: var(--stitch-border-width) solid var(--stitch-border);
2582
3253
  }
2583
3254
  ._progress_1oxpl_1 {
2584
3255
  box-sizing: border-box;
@@ -3506,160 +4177,6 @@
3506
4177
  opacity: 0;
3507
4178
  }
3508
4179
  }
3509
- ._content_5l6nu_1 {
3510
- box-sizing: border-box;
3511
- min-width: 180px;
3512
- padding: var(--stitch-spacing-xs);
3513
- background: var(--stitch-bg-elevated);
3514
- border: var(--stitch-border-width) solid var(--stitch-border);
3515
- border-radius: var(--stitch-radius-card);
3516
- box-shadow: var(--stitch-shadow-base);
3517
- color: var(--stitch-text-primary);
3518
- font-family: var(--stitch-font-body);
3519
- font-size: var(--stitch-font-size-sm);
3520
- line-height: var(--stitch-line-height-base);
3521
- z-index: 100;
3522
- }
3523
- ._content_5l6nu_1[data-state='open'] {
3524
- animation: _stitch-dropdown-in_5l6nu_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
3525
- }
3526
- ._content_5l6nu_1[data-state='closed'] {
3527
- animation: _stitch-dropdown-out_5l6nu_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
3528
- }
3529
- ._item_5l6nu_21 {
3530
- display: flex;
3531
- align-items: center;
3532
- gap: var(--stitch-spacing-sm);
3533
- padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
3534
- border-radius: var(--stitch-radius-input);
3535
- color: var(--stitch-text-primary);
3536
- cursor: pointer;
3537
- user-select: none;
3538
- outline: none;
3539
- transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
3540
- }
3541
- ._item_5l6nu_21[data-highlighted] {
3542
- background: var(--stitch-bg-section);
3543
- }
3544
- ._item_5l6nu_21[data-disabled] {
3545
- color: var(--stitch-text-disabled);
3546
- cursor: not-allowed;
3547
- pointer-events: none;
3548
- }
3549
- ._danger_5l6nu_41 {
3550
- color: var(--stitch-danger);
3551
- }
3552
- ._danger_5l6nu_41[data-highlighted] {
3553
- background: var(--stitch-danger-bg);
3554
- color: var(--stitch-danger);
3555
- }
3556
- ._itemIcon_5l6nu_48 {
3557
- flex-shrink: 0;
3558
- color: currentColor;
3559
- }
3560
- ._itemLabel_5l6nu_52 {
3561
- flex: 1;
3562
- }
3563
- ._subArrow_5l6nu_55 {
3564
- flex-shrink: 0;
3565
- margin-left: auto;
3566
- color: var(--stitch-text-muted);
3567
- }
3568
- @keyframes _stitch-dropdown-in_5l6nu_1 {
3569
- from {
3570
- opacity: 0;
3571
- transform: scale(0.96);
3572
- }
3573
- to {
3574
- opacity: 1;
3575
- transform: scale(1);
3576
- }
3577
- }
3578
- @keyframes _stitch-dropdown-out_5l6nu_1 {
3579
- from {
3580
- opacity: 1;
3581
- }
3582
- to {
3583
- opacity: 0;
3584
- }
3585
- }
3586
- ._content_1or0o_1 {
3587
- box-sizing: border-box;
3588
- min-width: 180px;
3589
- padding: var(--stitch-spacing-xs);
3590
- background: var(--stitch-bg-elevated);
3591
- border: var(--stitch-border-width) solid var(--stitch-border);
3592
- border-radius: var(--stitch-radius-card);
3593
- box-shadow: var(--stitch-shadow-base);
3594
- color: var(--stitch-text-primary);
3595
- font-family: var(--stitch-font-body);
3596
- font-size: var(--stitch-font-size-sm);
3597
- line-height: var(--stitch-line-height-base);
3598
- z-index: 100;
3599
- }
3600
- ._content_1or0o_1[data-state='open'] {
3601
- animation: _stitch-context-menu-in_1or0o_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
3602
- }
3603
- ._content_1or0o_1[data-state='closed'] {
3604
- animation: _stitch-context-menu-out_1or0o_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
3605
- }
3606
- ._item_1or0o_21 {
3607
- display: flex;
3608
- align-items: center;
3609
- gap: var(--stitch-spacing-sm);
3610
- padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
3611
- border-radius: var(--stitch-radius-input);
3612
- color: var(--stitch-text-primary);
3613
- cursor: pointer;
3614
- user-select: none;
3615
- outline: none;
3616
- transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
3617
- }
3618
- ._item_1or0o_21[data-highlighted] {
3619
- background: var(--stitch-bg-section);
3620
- }
3621
- ._item_1or0o_21[data-disabled] {
3622
- color: var(--stitch-text-disabled);
3623
- cursor: not-allowed;
3624
- pointer-events: none;
3625
- }
3626
- ._danger_1or0o_41 {
3627
- color: var(--stitch-danger);
3628
- }
3629
- ._danger_1or0o_41[data-highlighted] {
3630
- background: var(--stitch-danger-bg);
3631
- color: var(--stitch-danger);
3632
- }
3633
- ._itemIcon_1or0o_48 {
3634
- flex-shrink: 0;
3635
- color: currentColor;
3636
- }
3637
- ._itemLabel_1or0o_52 {
3638
- flex: 1;
3639
- }
3640
- ._subArrow_1or0o_55 {
3641
- flex-shrink: 0;
3642
- margin-left: auto;
3643
- color: var(--stitch-text-muted);
3644
- }
3645
- @keyframes _stitch-context-menu-in_1or0o_1 {
3646
- from {
3647
- opacity: 0;
3648
- transform: scale(0.96);
3649
- }
3650
- to {
3651
- opacity: 1;
3652
- transform: scale(1);
3653
- }
3654
- }
3655
- @keyframes _stitch-context-menu-out_1or0o_1 {
3656
- from {
3657
- opacity: 1;
3658
- }
3659
- to {
3660
- opacity: 0;
3661
- }
3662
- }
3663
4180
  ._root_907u3_1 {
3664
4181
  display: flex;
3665
4182
  align-items: center;
@@ -4030,59 +4547,4 @@
4030
4547
  transform: translateY(-6px);
4031
4548
  }
4032
4549
  }
4033
- ._root_1mbik_1 {
4034
- overflow: hidden;
4035
- position: relative;
4036
- }
4037
- ._viewport_1mbik_5 {
4038
- width: 100%;
4039
- height: 100%;
4040
- border-radius: inherit;
4041
- }
4042
- ._scrollbar_1mbik_10 {
4043
- display: flex;
4044
- user-select: none;
4045
- touch-action: none;
4046
- padding: var(--sa-track-pad);
4047
- background: transparent;
4048
- transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
4049
- }
4050
- ._scrollbar_1mbik_10:hover {
4051
- background: var(--stitch-bg-section);
4052
- }
4053
- ._scrollbar_1mbik_10[data-orientation='vertical'] {
4054
- width: var(--sa-size);
4055
- }
4056
- ._scrollbar_1mbik_10[data-orientation='horizontal'] {
4057
- flex-direction: column;
4058
- height: var(--sa-size);
4059
- }
4060
- ._thumb_1mbik_28 {
4061
- flex: 1;
4062
- position: relative;
4063
- background: var(--stitch-text-muted);
4064
- border-radius: var(--stitch-radius-button);
4065
- transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
4066
- }
4067
- ._thumb_1mbik_28:hover {
4068
- background: var(--stitch-text-secondary);
4069
- }
4070
- ._thumb_1mbik_28::before {
4071
- content: '';
4072
- position: absolute;
4073
- top: 50%;
4074
- left: 50%;
4075
- width: 100%;
4076
- height: 100%;
4077
- min-width: 44px;
4078
- min-height: 44px;
4079
- transform: translate(-50%, -50%);
4080
- }
4081
- ._corner_1mbik_49 {
4082
- background: transparent;
4083
- }
4084
- ._root_1mbik_1 {
4085
- --sa-size: 10px;
4086
- --sa-track-pad: 2px;
4087
- }
4088
4550
  /*$vite$:1*/