@industry-theme/xterm-terminal-panel 0.5.7 → 0.5.8

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 CHANGED
@@ -167,7 +167,7 @@
167
167
  animation: blinds-up .3s ease-in forwards;
168
168
  }
169
169
 
170
- /* node_modules/@principal-ade/panels/dist/panels.css */
170
+ /* node_modules/@principal-ade/panels/dist/index.css */
171
171
  .animated-resizable-layout {
172
172
  position: relative;
173
173
  background-color: var(--panel-background);
@@ -448,185 +448,6 @@
448
448
  background-color: var(--panel-handle-bar-hover, #80808099);
449
449
  }
450
450
 
451
- .tab-group {
452
- display: flex;
453
- overflow: hidden;
454
- width: 100%;
455
- height: 100%;
456
- }
457
-
458
- .tab-group.tab-position-top, .tab-group.tab-position-bottom {
459
- flex-direction: column;
460
- }
461
-
462
- .tab-group.tab-position-left, .tab-group.tab-position-right {
463
- flex-direction: row;
464
- }
465
-
466
- .tab-list {
467
- display: flex;
468
- background: var(--tab-list-bg, #f5f5f5);
469
- border-bottom: 1px solid var(--tab-border, #ddd);
470
- overflow-x: auto;
471
- overflow-y: hidden;
472
- scrollbar-width: none;
473
- -ms-overflow-style: none;
474
- flex-shrink: 0;
475
- gap: 0;
476
- padding: 0;
477
- }
478
-
479
- .tab-list::-webkit-scrollbar {
480
- display: none;
481
- }
482
-
483
- .tab-position-top .tab-list, .tab-position-bottom .tab-list {
484
- width: 100%;
485
- }
486
-
487
- .tab-list.centered {
488
- justify-content: flex-start;
489
- }
490
-
491
- @media (min-width: 0) {
492
- .tab-list.centered {
493
- justify-content: center;
494
- }
495
-
496
- .tab-list.centered:has(.tab-button:nth-child(n)) {
497
- justify-content: flex-start;
498
- }
499
- }
500
-
501
- .tab-position-bottom .tab-list {
502
- border-top: none;
503
- border-bottom: none;
504
- }
505
-
506
- .tab-position-left .tab-list, .tab-position-right .tab-list {
507
- border-bottom: none;
508
- border-right: none;
509
- flex-direction: column;
510
- width: auto;
511
- min-width: 120px;
512
- }
513
-
514
- .tab-position-top .tab-button, .tab-position-bottom .tab-button {
515
- flex: 1 1 0;
516
- min-width: 40px;
517
- max-width: 100%;
518
- }
519
-
520
- .tab-button {
521
- background: var(--tab-bg, #fff);
522
- border: 1px solid var(--tab-border, #ddd);
523
- cursor: pointer;
524
- font-family: var(--tab-font-family, inherit);
525
- font-size: var(--tab-font-size, 14px);
526
- font-weight: var(--tab-font-weight, 500);
527
- color: var(--tab-text, #333);
528
- white-space: nowrap;
529
- display: flex;
530
- box-sizing: border-box;
531
- container-type: inline-size;
532
- border-radius: 0;
533
- justify-content: center;
534
- align-items: center;
535
- gap: 6px;
536
- height: 39px;
537
- padding: 8px 16px;
538
- transition: all .2s;
539
- line-height: 1;
540
- }
541
-
542
- .tab-position-top .tab-button {
543
- border-top: none;
544
- border-bottom: none;
545
- border-left: none;
546
- }
547
-
548
- .tab-position-top .tab-button:last-child {
549
- border-right: none;
550
- }
551
-
552
- .tab-position-bottom .tab-button {
553
- border-top: none;
554
- border-bottom: none;
555
- border-left: none;
556
- }
557
-
558
- .tab-position-bottom .tab-button:last-child {
559
- border-right: none;
560
- }
561
-
562
- .tab-position-left .tab-button {
563
- border-bottom: none;
564
- border-right: none;
565
- }
566
-
567
- .tab-position-left .tab-button:last-child {
568
- border-bottom: 1px solid var(--tab-border, #ddd);
569
- }
570
-
571
- .tab-position-right .tab-button {
572
- border-bottom: none;
573
- border-left: none;
574
- }
575
-
576
- .tab-position-right .tab-button:last-child {
577
- border-bottom: 1px solid var(--tab-border, #ddd);
578
- }
579
-
580
- .tab-icon {
581
- display: inline-flex;
582
- justify-content: center;
583
- align-items: center;
584
- }
585
-
586
- .tab-label {
587
- display: none;
588
- }
589
-
590
- @container (width >= 100px) {
591
- .tab-label {
592
- display: inline;
593
- }
594
-
595
- .tab-icon {
596
- display: none;
597
- }
598
- }
599
-
600
- .tab-button:hover {
601
- background: var(--tab-bg-hover, #f9f9f9);
602
- }
603
-
604
- .tab-button.active {
605
- background: var(--tab-bg-active, #007bff);
606
- color: var(--tab-text-active, #fff);
607
- border-color: var(--tab-border-active, #007bff);
608
- }
609
-
610
- .tab-button:focus-visible {
611
- outline: 2px solid var(--tab-focus, #007bff);
612
- outline-offset: 2px;
613
- }
614
-
615
- .tab-content {
616
- overflow: auto;
617
- background: var(--tab-content-bg, #fff);
618
- flex: 1;
619
- }
620
-
621
- .tab-group-empty {
622
- display: flex;
623
- color: var(--tab-empty-text, #999);
624
- justify-content: center;
625
- align-items: center;
626
- height: 100%;
627
- font-style: italic;
628
- }
629
-
630
451
  .three-panel-layout {
631
452
  display: flex;
632
453
  position: relative;
@@ -797,166 +618,38 @@
797
618
  }
798
619
  }
799
620
 
800
- .snap-carousel-container {
801
- display: flex;
802
- overflow-x: auto;
803
- overflow-y: hidden;
804
- scroll-snap-type: x mandatory;
805
- scroll-behavior: smooth;
806
- gap: var(--snap-carousel-gap, 0px);
807
- background-color: var(--panel-background);
808
- box-sizing: border-box;
809
- position: relative;
810
- container-type: inline-size;
811
- -ms-overflow-style: none;
812
- scrollbar-width: none;
813
- width: 100%;
814
- height: 100%;
815
- margin: 0;
816
- padding: 0;
817
- left: 0;
818
- transform: none;
819
- }
621
+ @keyframes wiggle {
622
+ 0% {
623
+ transform: rotate(0);
624
+ }
820
625
 
821
- .snap-carousel-container::-webkit-scrollbar {
822
- display: none;
823
- }
626
+ 25% {
627
+ transform: rotate(1deg);
628
+ }
824
629
 
825
- .snap-carousel-container.swipe-disabled {
826
- touch-action: pan-y pinch-zoom;
827
- overscroll-behavior-x: none;
828
- }
630
+ 50% {
631
+ transform: rotate(0);
632
+ }
829
633
 
830
- .snap-carousel-panel {
831
- scroll-snap-align: start;
832
- scroll-snap-stop: always;
833
- width: var(--snap-carousel-panel-width, 33.33%);
834
- box-sizing: border-box;
835
- overflow: hidden;
836
- flex: none;
837
- height: 100%;
838
- }
634
+ 75% {
635
+ transform: rotate(-1deg);
636
+ }
839
637
 
840
- @media (max-width: 540px) {
841
- .snap-carousel-panel {
842
- min-width: 280px;
638
+ to {
639
+ transform: rotate(0);
843
640
  }
844
641
  }
845
642
 
846
- .mobile-tab-layout {
847
- display: flex;
848
- overflow: hidden;
849
- flex-direction: column;
850
- width: 100%;
851
- height: 100%;
852
- }
643
+ @keyframes scaleIn {
644
+ 0% {
645
+ transform: scale(.95);
646
+ opacity: 0;
647
+ }
853
648
 
854
- .mobile-tab-content {
855
- overflow: hidden;
856
- flex: 1;
857
- min-height: 0;
858
- }
859
-
860
- .mobile-tab-nav {
861
- display: flex;
862
- background: var(--tab-list-bg, #f5f5f5);
863
- border-top: 1px solid var(--tab-border, #ddd);
864
- flex-shrink: 0;
865
- margin: 0;
866
- padding: 0;
867
- }
868
-
869
- .mobile-tab-button {
870
- display: flex;
871
- padding: 14px 4px;
872
- padding-bottom: calc(14px + min(12px, env(safe-area-inset-bottom, 0px)));
873
- cursor: pointer;
874
- font-family: var(--tab-font-family, inherit);
875
- font-size: var(--tab-font-size, 11px);
876
- font-weight: var(--tab-font-weight, 500);
877
- color: var(--tab-text, #666);
878
- background: none;
879
- border: none;
880
- flex-direction: column;
881
- flex: 1;
882
- justify-content: center;
883
- align-items: center;
884
- gap: 6px;
885
- min-width: 0;
886
- transition: color .2s;
887
- }
888
-
889
- .mobile-tab-button:hover {
890
- color: var(--tab-text-hover, #333);
891
- }
892
-
893
- .mobile-tab-button.active {
894
- color: var(--mobile-tab-text-active, #007bff);
895
- }
896
-
897
- .mobile-tab-button .tab-icon {
898
- display: flex;
899
- color: var(--tab-icon-color, #999);
900
- justify-content: center;
901
- align-items: center;
902
- transition: color .2s;
903
- font-size: 24px;
904
- }
905
-
906
- .mobile-tab-button.active .tab-icon {
907
- color: var(--mobile-tab-icon-active, #007bff);
908
- }
909
-
910
- .mobile-tab-button .tab-label {
911
- display: block;
912
- white-space: nowrap;
913
- overflow: hidden;
914
- text-overflow: ellipsis;
915
- color: inherit;
916
- opacity: 1;
917
- max-width: 100%;
918
- font-size: 11px;
919
- line-height: 1.2;
920
- }
921
-
922
- .mobile-tab-button:focus-visible {
923
- outline: 2px solid var(--tab-focus, #007bff);
924
- outline-offset: -2px;
925
- z-index: 1;
926
- }
927
-
928
- @keyframes wiggle {
929
- 0% {
930
- transform: rotate(0);
931
- }
932
-
933
- 25% {
934
- transform: rotate(1deg);
935
- }
936
-
937
- 50% {
938
- transform: rotate(0);
939
- }
940
-
941
- 75% {
942
- transform: rotate(-1deg);
943
- }
944
-
945
- to {
946
- transform: rotate(0);
947
- }
948
- }
949
-
950
- @keyframes scaleIn {
951
- 0% {
952
- transform: scale(.95);
953
- opacity: 0;
954
- }
955
-
956
- to {
957
- transform: scale(1);
958
- opacity: 1;
959
- }
649
+ to {
650
+ transform: scale(1);
651
+ opacity: 1;
652
+ }
960
653
  }
961
654
 
962
655
  @keyframes pulse {
@@ -1816,3 +1509,590 @@
1816
1509
  padding: .75rem 1rem;
1817
1510
  font-size: .875rem;
1818
1511
  }
1512
+
1513
+ .tab-group {
1514
+ display: flex;
1515
+ overflow: hidden;
1516
+ width: 100%;
1517
+ height: 100%;
1518
+ }
1519
+
1520
+ .tab-group.tab-position-top, .tab-group.tab-position-bottom {
1521
+ flex-direction: column;
1522
+ }
1523
+
1524
+ .tab-group.tab-position-left, .tab-group.tab-position-right {
1525
+ flex-direction: row;
1526
+ }
1527
+
1528
+ .tab-list {
1529
+ display: flex;
1530
+ background: var(--tab-list-bg, #f5f5f5);
1531
+ border-bottom: 1px solid var(--tab-border, #ddd);
1532
+ overflow-x: auto;
1533
+ overflow-y: hidden;
1534
+ scrollbar-width: none;
1535
+ -ms-overflow-style: none;
1536
+ flex-shrink: 0;
1537
+ gap: 0;
1538
+ padding: 0;
1539
+ }
1540
+
1541
+ .tab-list::-webkit-scrollbar {
1542
+ display: none;
1543
+ }
1544
+
1545
+ .tab-position-top .tab-list, .tab-position-bottom .tab-list {
1546
+ width: 100%;
1547
+ }
1548
+
1549
+ .tab-list.centered {
1550
+ justify-content: flex-start;
1551
+ }
1552
+
1553
+ @media (min-width: 0) {
1554
+ .tab-list.centered {
1555
+ justify-content: center;
1556
+ }
1557
+
1558
+ .tab-list.centered:has(.tab-button:nth-child(n)) {
1559
+ justify-content: flex-start;
1560
+ }
1561
+ }
1562
+
1563
+ .tab-position-bottom .tab-list {
1564
+ border-top: none;
1565
+ border-bottom: none;
1566
+ }
1567
+
1568
+ .tab-position-left .tab-list, .tab-position-right .tab-list {
1569
+ border-bottom: none;
1570
+ border-right: none;
1571
+ flex-direction: column;
1572
+ width: auto;
1573
+ min-width: 120px;
1574
+ }
1575
+
1576
+ .tab-position-top .tab-button, .tab-position-bottom .tab-button {
1577
+ flex: 1 1 0;
1578
+ min-width: 40px;
1579
+ max-width: 100%;
1580
+ }
1581
+
1582
+ .tab-button {
1583
+ background: var(--tab-bg, #fff);
1584
+ border: 1px solid var(--tab-border, #ddd);
1585
+ cursor: pointer;
1586
+ font-family: var(--tab-font-family, inherit);
1587
+ font-size: var(--tab-font-size, 14px);
1588
+ font-weight: var(--tab-font-weight, 500);
1589
+ color: var(--tab-text, #333);
1590
+ white-space: nowrap;
1591
+ display: flex;
1592
+ box-sizing: border-box;
1593
+ container-type: inline-size;
1594
+ border-radius: 0;
1595
+ justify-content: center;
1596
+ align-items: center;
1597
+ gap: 6px;
1598
+ height: 39px;
1599
+ padding: 8px 16px;
1600
+ transition: all .2s;
1601
+ line-height: 1;
1602
+ }
1603
+
1604
+ .tab-position-top .tab-button {
1605
+ border-top: none;
1606
+ border-bottom: none;
1607
+ border-left: none;
1608
+ }
1609
+
1610
+ .tab-position-top .tab-button:last-child {
1611
+ border-right: none;
1612
+ }
1613
+
1614
+ .tab-position-bottom .tab-button {
1615
+ border-top: none;
1616
+ border-bottom: none;
1617
+ border-left: none;
1618
+ }
1619
+
1620
+ .tab-position-bottom .tab-button:last-child {
1621
+ border-right: none;
1622
+ }
1623
+
1624
+ .tab-position-left .tab-button {
1625
+ border-bottom: none;
1626
+ border-right: none;
1627
+ }
1628
+
1629
+ .tab-position-left .tab-button:last-child {
1630
+ border-bottom: 1px solid var(--tab-border, #ddd);
1631
+ }
1632
+
1633
+ .tab-position-right .tab-button {
1634
+ border-bottom: none;
1635
+ border-left: none;
1636
+ }
1637
+
1638
+ .tab-position-right .tab-button:last-child {
1639
+ border-bottom: 1px solid var(--tab-border, #ddd);
1640
+ }
1641
+
1642
+ .tab-icon {
1643
+ display: inline-flex;
1644
+ justify-content: center;
1645
+ align-items: center;
1646
+ }
1647
+
1648
+ .tab-label {
1649
+ display: none;
1650
+ }
1651
+
1652
+ @container (width >= 100px) {
1653
+ .tab-label {
1654
+ display: inline;
1655
+ }
1656
+
1657
+ .tab-icon {
1658
+ display: none;
1659
+ }
1660
+ }
1661
+
1662
+ .tab-button:hover {
1663
+ background: var(--tab-bg-hover, #f9f9f9);
1664
+ }
1665
+
1666
+ .tab-button.active {
1667
+ background: var(--tab-bg-active, #007bff);
1668
+ color: var(--tab-text-active, #fff);
1669
+ border-color: var(--tab-border-active, #007bff);
1670
+ }
1671
+
1672
+ .tab-button:focus-visible {
1673
+ outline: 2px solid var(--tab-focus, #007bff);
1674
+ outline-offset: 2px;
1675
+ }
1676
+
1677
+ .tab-content {
1678
+ overflow: auto;
1679
+ background: var(--tab-content-bg, #fff);
1680
+ flex: 1;
1681
+ }
1682
+
1683
+ .tab-group-empty {
1684
+ display: flex;
1685
+ color: var(--tab-empty-text, #999);
1686
+ justify-content: center;
1687
+ align-items: center;
1688
+ height: 100%;
1689
+ font-style: italic;
1690
+ }
1691
+
1692
+ .snap-carousel-container {
1693
+ display: flex;
1694
+ overflow-x: auto;
1695
+ overflow-y: hidden;
1696
+ scroll-snap-type: x mandatory;
1697
+ scroll-behavior: smooth;
1698
+ gap: var(--snap-carousel-gap, 0px);
1699
+ background-color: var(--panel-background);
1700
+ box-sizing: border-box;
1701
+ position: relative;
1702
+ container-type: inline-size;
1703
+ -ms-overflow-style: none;
1704
+ scrollbar-width: none;
1705
+ width: 100%;
1706
+ height: 100%;
1707
+ margin: 0;
1708
+ padding: 0;
1709
+ left: 0;
1710
+ transform: none;
1711
+ }
1712
+
1713
+ .snap-carousel-container::-webkit-scrollbar {
1714
+ display: none;
1715
+ }
1716
+
1717
+ .snap-carousel-container.swipe-disabled {
1718
+ touch-action: pan-y pinch-zoom;
1719
+ overscroll-behavior-x: none;
1720
+ }
1721
+
1722
+ .snap-carousel-panel {
1723
+ scroll-snap-align: start;
1724
+ scroll-snap-stop: always;
1725
+ width: var(--snap-carousel-panel-width, 33.33%);
1726
+ box-sizing: border-box;
1727
+ overflow: hidden;
1728
+ flex: none;
1729
+ height: 100%;
1730
+ }
1731
+
1732
+ @media (max-width: 540px) {
1733
+ .snap-carousel-panel {
1734
+ min-width: 280px;
1735
+ }
1736
+ }
1737
+
1738
+ .mobile-tab-layout {
1739
+ display: flex;
1740
+ overflow: hidden;
1741
+ flex-direction: column;
1742
+ width: 100%;
1743
+ height: 100%;
1744
+ }
1745
+
1746
+ .mobile-tab-content {
1747
+ overflow: hidden;
1748
+ flex: 1;
1749
+ min-height: 0;
1750
+ }
1751
+
1752
+ .mobile-tab-nav {
1753
+ display: flex;
1754
+ background: var(--tab-list-bg, #f5f5f5);
1755
+ border-top: 1px solid var(--tab-border, #ddd);
1756
+ flex-shrink: 0;
1757
+ margin: 0;
1758
+ padding: 0;
1759
+ }
1760
+
1761
+ .mobile-tab-button {
1762
+ display: flex;
1763
+ padding: 14px 4px;
1764
+ padding-bottom: calc(14px + min(12px, env(safe-area-inset-bottom, 0px)));
1765
+ cursor: pointer;
1766
+ font-family: var(--tab-font-family, inherit);
1767
+ font-size: var(--tab-font-size, 11px);
1768
+ font-weight: var(--tab-font-weight, 500);
1769
+ color: var(--tab-text, #666);
1770
+ background: none;
1771
+ border: none;
1772
+ flex-direction: column;
1773
+ flex: 1;
1774
+ justify-content: center;
1775
+ align-items: center;
1776
+ gap: 6px;
1777
+ min-width: 0;
1778
+ transition: color .2s;
1779
+ }
1780
+
1781
+ .mobile-tab-button:hover {
1782
+ color: var(--tab-text-hover, #333);
1783
+ }
1784
+
1785
+ .mobile-tab-button.active {
1786
+ color: var(--mobile-tab-text-active, #007bff);
1787
+ }
1788
+
1789
+ .mobile-tab-button .tab-icon {
1790
+ display: flex;
1791
+ color: var(--tab-icon-color, #999);
1792
+ justify-content: center;
1793
+ align-items: center;
1794
+ transition: color .2s;
1795
+ font-size: 24px;
1796
+ }
1797
+
1798
+ .mobile-tab-button.active .tab-icon {
1799
+ color: var(--mobile-tab-icon-active, #007bff);
1800
+ }
1801
+
1802
+ .mobile-tab-button .tab-label {
1803
+ display: block;
1804
+ white-space: nowrap;
1805
+ overflow: hidden;
1806
+ text-overflow: ellipsis;
1807
+ color: inherit;
1808
+ opacity: 1;
1809
+ max-width: 100%;
1810
+ font-size: 11px;
1811
+ line-height: 1.2;
1812
+ }
1813
+
1814
+ .mobile-tab-button:focus-visible {
1815
+ outline: 2px solid var(--tab-focus, #007bff);
1816
+ outline-offset: -2px;
1817
+ z-index: 1;
1818
+ }
1819
+
1820
+ :root {
1821
+ --panels-background: #fff;
1822
+ --panels-foreground: #000;
1823
+ --panels-border: #e5e7eb;
1824
+ --panels-handle-bg: #f3f4f6;
1825
+ --panels-handle-hover: #e5e7eb;
1826
+ --panels-handle-active: #d1d5db;
1827
+ --panels-button-bg: #fff;
1828
+ --panels-button-hover: #f9fafb;
1829
+ --panels-button-active: #f3f4f6;
1830
+ --panels-shadow: #0000001a;
1831
+ --panels-animation-duration: .3s;
1832
+ --panels-animation-easing: cubic-bezier(.4, 0, .2, 1);
1833
+ }
1834
+
1835
+ @media (prefers-color-scheme: dark) {
1836
+ :root {
1837
+ --panels-background: #1a1a1a;
1838
+ --panels-foreground: #fff;
1839
+ --panels-border: #404040;
1840
+ --panels-handle-bg: #2a2a2a;
1841
+ --panels-handle-hover: #333;
1842
+ --panels-handle-active: #404040;
1843
+ --panels-button-bg: #2a2a2a;
1844
+ --panels-button-hover: #333;
1845
+ --panels-button-active: #404040;
1846
+ --panels-shadow: #0000004d;
1847
+ }
1848
+ }
1849
+
1850
+ [data-theme="light"] {
1851
+ --panels-background: #fff;
1852
+ --panels-foreground: #000;
1853
+ --panels-border: #e5e7eb;
1854
+ --panels-handle-bg: #f3f4f6;
1855
+ --panels-handle-hover: #e5e7eb;
1856
+ --panels-handle-active: #d1d5db;
1857
+ --panels-button-bg: #fff;
1858
+ --panels-button-hover: #f9fafb;
1859
+ --panels-button-active: #f3f4f6;
1860
+ --panels-shadow: #0000001a;
1861
+ }
1862
+
1863
+ [data-theme="dark"] {
1864
+ --panels-background: #1a1a1a;
1865
+ --panels-foreground: #fff;
1866
+ --panels-border: #404040;
1867
+ --panels-handle-bg: #2a2a2a;
1868
+ --panels-handle-hover: #333;
1869
+ --panels-handle-active: #404040;
1870
+ --panels-button-bg: #2a2a2a;
1871
+ --panels-button-hover: #333;
1872
+ --panels-button-active: #404040;
1873
+ --panels-shadow: #0000004d;
1874
+ }
1875
+
1876
+ .panels-container {
1877
+ display: flex;
1878
+ background-color: var(--panels-background);
1879
+ color: var(--panels-foreground);
1880
+ position: relative;
1881
+ width: 100%;
1882
+ height: 100%;
1883
+ }
1884
+
1885
+ .panels-panel {
1886
+ position: relative;
1887
+ overflow: auto;
1888
+ background-color: var(--panels-background);
1889
+ }
1890
+
1891
+ .panels-handle {
1892
+ background-color: var(--panels-handle-bg);
1893
+ position: relative;
1894
+ z-index: 10;
1895
+ transition: background-color .15s;
1896
+ }
1897
+
1898
+ .panels-handle:hover {
1899
+ background-color: var(--panels-handle-hover);
1900
+ }
1901
+
1902
+ .panels-handle:active {
1903
+ background-color: var(--panels-handle-active);
1904
+ }
1905
+
1906
+ .panels-handle-horizontal {
1907
+ cursor: col-resize;
1908
+ width: 8px;
1909
+ }
1910
+
1911
+ .panels-handle-vertical {
1912
+ cursor: row-resize;
1913
+ height: 8px;
1914
+ }
1915
+
1916
+ .panels-handle-collapsed {
1917
+ pointer-events: none;
1918
+ background-color: var(--panels-border) !important;
1919
+ cursor: default !important;
1920
+ width: 1px !important;
1921
+ min-width: 1px !important;
1922
+ }
1923
+
1924
+ .panels-handle-collapsed .panels-collapse-button {
1925
+ pointer-events: auto;
1926
+ }
1927
+
1928
+ .panels-collapse-button {
1929
+ position: absolute;
1930
+ background-color: var(--panels-button-bg);
1931
+ border: 1px solid var(--panels-border);
1932
+ display: flex;
1933
+ cursor: pointer;
1934
+ box-shadow: 0 1px 3px var(--panels-shadow);
1935
+ z-index: 20;
1936
+ border-radius: 4px;
1937
+ justify-content: center;
1938
+ align-items: center;
1939
+ width: 24px;
1940
+ height: 24px;
1941
+ transition: all .15s;
1942
+ top: 50%;
1943
+ left: 50%;
1944
+ transform: translate(-50%, -50%);
1945
+ }
1946
+
1947
+ .panels-collapse-button:hover {
1948
+ background-color: var(--panels-button-hover);
1949
+ transform: translate(-50%, -50%)scale(1.1);
1950
+ }
1951
+
1952
+ .panels-collapse-button:active {
1953
+ background-color: var(--panels-button-active);
1954
+ transform: translate(-50%, -50%)scale(.95);
1955
+ }
1956
+
1957
+ .panels-collapse-button-floating {
1958
+ position: absolute;
1959
+ z-index: 30;
1960
+ left: -12px;
1961
+ }
1962
+
1963
+ .panels-collapse-icon {
1964
+ stroke: var(--panels-foreground);
1965
+ stroke-width: 2;
1966
+ fill: none;
1967
+ width: 16px;
1968
+ height: 16px;
1969
+ transition: transform .15s;
1970
+ }
1971
+
1972
+ .panels-content-fade {
1973
+ transition: opacity var(--panels-animation-duration) var(--panels-animation-easing);
1974
+ }
1975
+
1976
+ .panels-content-fading {
1977
+ opacity: .3;
1978
+ }
1979
+
1980
+ .panels-content-hidden {
1981
+ opacity: 0;
1982
+ }
1983
+
1984
+ .panels-animating {
1985
+ pointer-events: none;
1986
+ }
1987
+
1988
+ @media (max-width: 768px) {
1989
+ .panels-handle-horizontal {
1990
+ width: 4px;
1991
+ }
1992
+
1993
+ .panels-handle-vertical {
1994
+ height: 4px;
1995
+ }
1996
+
1997
+ .panels-collapse-button {
1998
+ width: 20px;
1999
+ height: 20px;
2000
+ }
2001
+
2002
+ .panels-collapse-icon {
2003
+ width: 12px;
2004
+ height: 12px;
2005
+ }
2006
+ }
2007
+
2008
+ .panels-mobile-stack {
2009
+ display: flex;
2010
+ flex-direction: column;
2011
+ gap: 1rem;
2012
+ padding: 1rem;
2013
+ }
2014
+
2015
+ .panels-mobile-panel {
2016
+ border: 1px solid var(--panels-border);
2017
+ border-radius: 8px;
2018
+ padding: 1rem;
2019
+ }
2020
+
2021
+ .panels-tabs-header {
2022
+ display: flex;
2023
+ border-bottom: 1px solid var(--panels-border);
2024
+ background-color: var(--panels-handle-bg);
2025
+ }
2026
+
2027
+ .panels-tab {
2028
+ color: var(--panels-foreground);
2029
+ cursor: pointer;
2030
+ position: relative;
2031
+ background: none;
2032
+ border: none;
2033
+ flex: 1;
2034
+ padding: .75rem 1rem;
2035
+ transition: background-color .15s;
2036
+ }
2037
+
2038
+ .panels-tab:hover {
2039
+ background-color: var(--panels-handle-hover);
2040
+ }
2041
+
2042
+ .panels-tab-active {
2043
+ background-color: var(--panels-background);
2044
+ }
2045
+
2046
+ .panels-tab-active:after {
2047
+ content: "";
2048
+ position: absolute;
2049
+ background-color: var(--panels-foreground);
2050
+ height: 2px;
2051
+ bottom: -1px;
2052
+ left: 0;
2053
+ right: 0;
2054
+ }
2055
+
2056
+ .panels-drawer-toggle {
2057
+ position: fixed;
2058
+ z-index: 100;
2059
+ background-color: var(--panels-button-bg);
2060
+ border: 1px solid var(--panels-border);
2061
+ display: flex;
2062
+ cursor: pointer;
2063
+ box-shadow: 0 2px 8px var(--panels-shadow);
2064
+ border-radius: 8px;
2065
+ justify-content: center;
2066
+ align-items: center;
2067
+ width: 40px;
2068
+ height: 40px;
2069
+ top: 1rem;
2070
+ left: 1rem;
2071
+ }
2072
+
2073
+ .panels-drawer-icon {
2074
+ width: 24px;
2075
+ height: 24px;
2076
+ }
2077
+
2078
+ .panels-drawer {
2079
+ position: fixed;
2080
+ background-color: var(--panels-background);
2081
+ border-right: 1px solid var(--panels-border);
2082
+ transition: transform var(--panels-animation-duration) var(--panels-animation-easing);
2083
+ z-index: 90;
2084
+ overflow-y: auto;
2085
+ width: 300px;
2086
+ top: 0;
2087
+ bottom: 0;
2088
+ left: 0;
2089
+ transform: translate(-100%);
2090
+ }
2091
+
2092
+ .panels-drawer-open {
2093
+ transform: translate(0);
2094
+ }
2095
+
2096
+ .panels-drawer-panel, .panels-main-panel {
2097
+ padding: 4rem 1rem 1rem;
2098
+ }
@@ -1,4 +1,3 @@
1
- import '@principal-ade/panels/dist/panels.css';
2
1
  import React from 'react';
3
2
  import type { TabbedTerminalPanelProps, TerminalTab } from '../panel-types';
4
3
  export interface TerminalTabContentRef {
@@ -1 +1 @@
1
- {"version":3,"file":"TabbedTerminalPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/TabbedTerminalPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,uCAAuC,CAAC;AAE/C,OAAO,KAKN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,wBAAwB,EACxB,WAAW,EAMZ,MAAM,gBAAgB,CAAC;AAkExB,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAu/CD,eAAO,MAAM,mBAAmB,EAAkC,CAAC,IAAI,SAAS,OAAO,cAAc,EAAE,OAAO,GAAG,WAAW,EAC1H,KAAK,EAAE,wBAAwB,CAAC,IAAI,CAAC,KAClC,KAAK,CAAC,YAAY,CAAC"}
1
+ {"version":3,"file":"TabbedTerminalPanel.d.ts","sourceRoot":"","sources":["../../../src/panels/TabbedTerminalPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAKN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EACV,wBAAwB,EACxB,WAAW,EAMZ,MAAM,gBAAgB,CAAC;AAkExB,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAu/CD,eAAO,MAAM,mBAAmB,EAAkC,CAAC,IAAI,SAAS,OAAO,cAAc,EAAE,OAAO,GAAG,WAAW,EAC1H,KAAK,EAAE,wBAAwB,CAAC,IAAI,CAAC,KAClC,KAAK,CAAC,YAAY,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@industry-theme/xterm-terminal-panel",
3
- "version": "0.5.7",
3
+ "version": "0.5.8",
4
4
  "description": "Industry-themed xterm.js terminal components with panel framework integration",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -54,7 +54,7 @@
54
54
  "author": "Principal ADE Team",
55
55
  "license": "MIT",
56
56
  "dependencies": {
57
- "@principal-ade/panels": "^1.0.56",
57
+ "@principal-ade/panels": "^1.0.58",
58
58
  "clsx": "^2.1.1",
59
59
  "react-resizable-panels": "^4.7.3"
60
60
  },