@tanstack/devtools 0.6.19 → 0.6.20

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 (6) hide show
  1. package/dist/dev.js +1 -1
  2. package/dist/devtools/{3YT62TLF.js → 6XAY2RKM.js} +65 -53
  3. package/dist/devtools/{MV3V7CMW.js → YM72BEIK.js} +65 -53
  4. package/dist/index.js +1 -1
  5. package/package.json +2 -2
  6. package/src/styles/use-styles.ts +65 -53
package/dist/dev.js CHANGED
@@ -29,7 +29,7 @@ var TanStackDevtoolsCore = class {
29
29
  const mountTo = el;
30
30
  const dispose = render(() => {
31
31
  const _self$ = this;
32
- this.#Component = lazy(() => import('./devtools/3YT62TLF.js'));
32
+ this.#Component = lazy(() => import('./devtools/6XAY2RKM.js'));
33
33
  const Devtools = this.#Component;
34
34
  this.#eventBus = new ClientEventBus(this.#eventBusConfig);
35
35
  this.#eventBus.start();
package/dist/devtools/{3YT62TLF.js → 6XAY2RKM.js} RENAMED
@@ -476,8 +476,8 @@ var stylesFactory = (theme) => {
476
476
  padding: 0;
477
477
  margin: 0 auto;
478
478
  background: ${t(colors.white, colors.darkGray[700])};
479
- border-radius: 12px;
480
- box-shadow: 0 2px 16px ${t("rgba(0, 0, 0, 0.04)", "rgba(0, 0, 0, 0.08)")};
479
+ border-radius: 8px;
480
+ box-shadow: none;
481
481
  overflow-y: auto;
482
482
  height: 100%;
483
483
  display: flex;
@@ -489,16 +489,16 @@ var stylesFactory = (theme) => {
489
489
  seoTabTitle: css2`
490
490
  font-size: 1.25rem;
491
491
  font-weight: 600;
492
- color: ${t(colors.purple[500], colors.purple[400])};
492
+ color: ${t(colors.gray[900], colors.gray[100])};
493
493
  margin: 0;
494
494
  padding: 1rem 1.5rem 0.5rem 1.5rem;
495
495
  text-align: left;
496
- border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
496
+ border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
497
497
  `,
498
498
  seoTabSection: css2`
499
499
  padding: 1.5rem;
500
- background: ${t(colors.gray[100], colors.gray[800])};
501
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
500
+ background: ${t(colors.gray[50], colors.darkGray[800])};
501
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
502
502
  display: flex;
503
503
  flex-direction: column;
504
504
  gap: 0.5rem;
@@ -517,12 +517,12 @@ var stylesFactory = (theme) => {
517
517
  padding-bottom: 0.5rem;
518
518
  `,
519
519
  seoPreviewCard: css2`
520
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
520
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
521
521
  border-radius: 8px;
522
522
  padding: 12px 10px;
523
523
  background: ${t(colors.white, colors.darkGray[900])};
524
524
  margin-bottom: 0;
525
- box-shadow: 0 1px 4px ${t("rgba(0,0,0,0.02)", "rgba(0,0,0,0.04)")};
525
+ box-shadow: 0 1px 3px ${t("rgba(0,0,0,0.05)", "rgba(0,0,0,0.1)")};
526
526
  display: flex;
527
527
  flex-direction: column;
528
528
  align-items: flex-start;
@@ -532,10 +532,10 @@ var stylesFactory = (theme) => {
532
532
  gap: 4px;
533
533
  `,
534
534
  seoPreviewHeader: css2`
535
- font-size: 1rem;
536
- font-weight: 500;
537
- margin-bottom: 6px;
538
- color: ${t(colors.purple[500], colors.purple[400])};
535
+ font-size: 0.875rem;
536
+ font-weight: 600;
537
+ margin-bottom: 0;
538
+ color: ${t(colors.gray[700], colors.gray[300])};
539
539
  `,
540
540
  seoPreviewImage: css2`
541
541
  max-width: 100%;
@@ -543,28 +543,29 @@ var stylesFactory = (theme) => {
543
543
  margin-bottom: 6px;
544
544
  box-shadow: 0 1px 2px ${t("rgba(0,0,0,0.03)", "rgba(0,0,0,0.06)")};
545
545
  height: 160px;
546
+ object-fit: cover;
546
547
  `,
547
548
  seoPreviewTitle: css2`
548
- font-size: 1rem;
549
+ font-size: 0.9rem;
549
550
  font-weight: 600;
550
- margin-bottom: 2px;
551
+ margin-bottom: 4px;
551
552
  color: ${t(colors.gray[900], colors.gray[100])};
552
553
  `,
553
554
  seoPreviewDesc: css2`
554
- color: ${t(colors.gray[700], colors.gray[300])};
555
- margin-bottom: 2px;
556
- font-size: 0.95rem;
555
+ color: ${t(colors.gray[600], colors.gray[400])};
556
+ margin-bottom: 4px;
557
+ font-size: 0.8rem;
557
558
  `,
558
559
  seoPreviewUrl: css2`
559
560
  color: ${t(colors.gray[500], colors.gray[500])};
560
- font-size: 0.9rem;
561
- margin-bottom: 2px;
561
+ font-size: 0.75rem;
562
+ margin-bottom: 0;
562
563
  word-break: break-all;
563
564
  `,
564
565
  seoMissingTagsSection: css2`
565
566
  margin-top: 4px;
566
- font-size: 0.95rem;
567
- color: ${t(colors.red[400], colors.red[400])};
567
+ font-size: 0.875rem;
568
+ color: ${t(colors.red[500], colors.red[400])};
568
569
  `,
569
570
  seoMissingTagsList: css2`
570
571
  margin: 4px 0 0 0;
@@ -572,22 +573,23 @@ var stylesFactory = (theme) => {
572
573
  list-style: none;
573
574
  display: flex;
574
575
  flex-wrap: wrap;
575
- gap: 6px;
576
+ gap: 4px;
576
577
  max-width: 240px;
577
578
  `,
578
579
  seoMissingTag: css2`
579
580
  background: ${t(colors.red[100], colors.red[500] + "22")};
580
581
  color: ${t(colors.red[700], colors.red[500])};
581
- border-radius: 4px;
582
- padding: 1px 6px;
583
- font-size: 0.9rem;
582
+ border-radius: 3px;
583
+ padding: 2px 6px;
584
+ font-size: 0.75rem;
584
585
  font-weight: 500;
585
586
  `,
586
587
  seoAllTagsFound: css2`
587
588
  color: ${t(colors.green[700], colors.green[500])};
588
589
  font-weight: 500;
589
- margin-left: 6px;
590
- font-size: 0.95rem;
590
+ margin-left: 0;
591
+ padding: 0 10px 8px 10px;
592
+ font-size: 0.875rem;
591
593
  `,
592
594
  devtoolsPanelContainer: (panelLocation, isDetached) => css2`
593
595
  direction: ltr;
@@ -599,7 +601,7 @@ var stylesFactory = (theme) => {
599
601
  z-index: 99999;
600
602
  width: 100%;
601
603
  ${isDetached ? "" : "max-height: 90%;"}
602
- border-top: 1px solid ${t(colors.gray[300], colors.gray[700])};
604
+ border-top: 1px solid ${t(colors.gray[200], colors.gray[800])};
603
605
  transform-origin: top;
604
606
  `,
605
607
  devtoolsPanelContainerVisibility: (isOpen) => {
@@ -652,7 +654,7 @@ var stylesFactory = (theme) => {
652
654
  user-select: none;
653
655
  z-index: 100000;
654
656
  &:hover {
655
- background-color: ${t(colors.purple[700], colors.purple[400])};
657
+ background-color: ${t(colors.gray[400], colors.gray[500])};
656
658
  }
657
659
  `,
658
660
  mainCloseBtn: css2`
@@ -731,9 +733,9 @@ var stylesFactory = (theme) => {
731
733
  align-items: center;
732
734
  justify-content: flex-start;
733
735
  height: 100%;
734
- background-color: ${t(colors.gray[100], colors.darkGray[800])};
735
- border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
736
- box-shadow: 0 1px 0 ${t(colors.gray[200], colors.gray[700])};
736
+ background-color: ${t(colors.gray[50], colors.darkGray[900])};
737
+ border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
738
+ box-shadow: none;
737
739
  position: relative;
738
740
  width: ${size[10]};
739
741
  `,
@@ -746,24 +748,24 @@ var stylesFactory = (theme) => {
746
748
  cursor: pointer;
747
749
  font-size: ${fontSize.sm};
748
750
  font-family: ${fontFamily.sans};
749
- color: ${t(colors.gray[700], colors.gray[300])};
751
+ color: ${t(colors.gray[600], colors.gray[400])};
750
752
  background-color: transparent;
751
753
  border: none;
752
- transition: all 0.2s ease-in-out;
754
+ transition: all 0.15s ease;
753
755
  border-left: 2px solid transparent;
754
756
  &:hover:not(.close):not(.active):not(.detach) {
755
- background-color: ${t(colors.gray[200], colors.gray[700])};
757
+ background-color: ${t(colors.gray[100], colors.gray[800])};
756
758
  color: ${t(colors.gray[900], colors.gray[100])};
757
- border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
759
+ border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
758
760
  }
759
761
  &.active {
760
- background-color: ${t(colors.purple[200], colors.purple[500])};
762
+ background-color: ${t(colors.gray[100], colors.gray[800])};
761
763
  color: ${t(colors.gray[900], colors.gray[100])};
762
- border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
764
+ border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
763
765
  }
764
766
  &.detach {
765
767
  &:hover {
766
- background-color: ${t(colors.gray[200], colors.gray[700])};
768
+ background-color: ${t(colors.gray[100], colors.gray[800])};
767
769
  }
768
770
  &:hover {
769
771
  color: ${t(colors.green[700], colors.green[500])};
@@ -772,7 +774,7 @@ var stylesFactory = (theme) => {
772
774
  &.close {
773
775
  margin-top: auto;
774
776
  &:hover {
775
- background-color: ${t(colors.gray[200], colors.gray[700])};
777
+ background-color: ${t(colors.gray[100], colors.gray[800])};
776
778
  }
777
779
  &:hover {
778
780
  color: ${t(colors.red[700], colors.red[500])};
@@ -803,13 +805,13 @@ var stylesFactory = (theme) => {
803
805
  pluginsTabDraw: (isExpanded) => css2`
804
806
  width: ${isExpanded ? size[48] : 0};
805
807
  height: 100%;
806
- background-color: ${t(colors.white, colors.darkGray[800])};
807
- box-shadow: 0 1px 0 ${colors.gray[700]};
808
- ${isExpanded ? `border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};` : ""}
808
+ background-color: ${t(colors.white, colors.darkGray[900])};
809
+ box-shadow: none;
810
+ ${isExpanded ? `border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};` : ""}
809
811
  `,
810
812
  pluginsTabDrawExpanded: css2`
811
813
  width: ${size[48]};
812
- border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
814
+ border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
813
815
  `,
814
816
  pluginsTabDrawTransition: (mSeconds) => {
815
817
  return css2`
@@ -829,38 +831,48 @@ var stylesFactory = (theme) => {
829
831
  pluginName: css2`
830
832
  font-size: ${fontSize.xs};
831
833
  font-family: ${fontFamily.sans};
832
- color: ${t(colors.gray[700], colors.gray[300])};
834
+ color: ${t(colors.gray[600], colors.gray[400])};
833
835
  padding: ${size[2]};
834
836
  cursor: pointer;
835
837
  text-align: center;
836
- transition: all 0.2s ease-in-out;
838
+ transition: all 0.15s ease;
839
+ border-left: 2px solid transparent;
840
+
837
841
  &:hover {
838
- background-color: ${t(colors.gray[200], colors.gray[700])};
842
+ background-color: ${t(colors.gray[100], colors.gray[800])};
839
843
  color: ${t(colors.gray[900], colors.gray[100])};
840
844
  padding: ${size[2]};
841
845
  }
842
846
  &.active {
843
- background-color: ${t(colors.purple[200], colors.purple[500])};
847
+ background-color: ${t(colors.gray[100], colors.gray[800])};
844
848
  color: ${t(colors.gray[900], colors.gray[100])};
849
+ border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
850
+ }
851
+ &.active:hover {
852
+ background-color: ${t(colors.gray[200], colors.gray[700])};
845
853
  }
846
854
  `,
847
855
  pluginsTabContent: css2`
848
856
  width: 100%;
849
857
  height: 100%;
850
858
  overflow-y: auto;
859
+
860
+ &:not(:last-child) {
861
+ border-right: 5px solid ${t(colors.purple[200], colors.purple[800])};
862
+ }
851
863
  `,
852
864
  settingsGroup: css2`
853
865
  display: flex;
854
866
  flex-direction: column;
855
- gap: 1rem;
867
+ gap: 0.75rem;
856
868
  `,
857
869
  conditionalSetting: css2`
858
870
  margin-left: 1.5rem;
859
871
  padding-left: 1rem;
860
- border-left: 2px solid ${t(colors.purple[600], colors.purple[400])};
861
- background-color: ${t(colors.gray[100], colors.darkGray[800])};
862
- padding: 1rem;
863
- border-radius: 0.5rem;
872
+ border-left: 2px solid ${t(colors.gray[300], colors.gray[600])};
873
+ background-color: ${t(colors.gray[50], colors.darkGray[900])};
874
+ padding: 0.75rem;
875
+ border-radius: 0.375rem;
864
876
  margin-top: 0.5rem;
865
877
  `,
866
878
  settingRow: css2`
package/dist/devtools/{MV3V7CMW.js → YM72BEIK.js} RENAMED
@@ -476,8 +476,8 @@ var stylesFactory = (theme) => {
476
476
  padding: 0;
477
477
  margin: 0 auto;
478
478
  background: ${t(colors.white, colors.darkGray[700])};
479
- border-radius: 12px;
480
- box-shadow: 0 2px 16px ${t("rgba(0, 0, 0, 0.04)", "rgba(0, 0, 0, 0.08)")};
479
+ border-radius: 8px;
480
+ box-shadow: none;
481
481
  overflow-y: auto;
482
482
  height: 100%;
483
483
  display: flex;
@@ -489,16 +489,16 @@ var stylesFactory = (theme) => {
489
489
  seoTabTitle: css2`
490
490
  font-size: 1.25rem;
491
491
  font-weight: 600;
492
- color: ${t(colors.purple[500], colors.purple[400])};
492
+ color: ${t(colors.gray[900], colors.gray[100])};
493
493
  margin: 0;
494
494
  padding: 1rem 1.5rem 0.5rem 1.5rem;
495
495
  text-align: left;
496
- border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
496
+ border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
497
497
  `,
498
498
  seoTabSection: css2`
499
499
  padding: 1.5rem;
500
- background: ${t(colors.gray[100], colors.gray[800])};
501
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
500
+ background: ${t(colors.gray[50], colors.darkGray[800])};
501
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
502
502
  display: flex;
503
503
  flex-direction: column;
504
504
  gap: 0.5rem;
@@ -517,12 +517,12 @@ var stylesFactory = (theme) => {
517
517
  padding-bottom: 0.5rem;
518
518
  `,
519
519
  seoPreviewCard: css2`
520
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
520
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
521
521
  border-radius: 8px;
522
522
  padding: 12px 10px;
523
523
  background: ${t(colors.white, colors.darkGray[900])};
524
524
  margin-bottom: 0;
525
- box-shadow: 0 1px 4px ${t("rgba(0,0,0,0.02)", "rgba(0,0,0,0.04)")};
525
+ box-shadow: 0 1px 3px ${t("rgba(0,0,0,0.05)", "rgba(0,0,0,0.1)")};
526
526
  display: flex;
527
527
  flex-direction: column;
528
528
  align-items: flex-start;
@@ -532,10 +532,10 @@ var stylesFactory = (theme) => {
532
532
  gap: 4px;
533
533
  `,
534
534
  seoPreviewHeader: css2`
535
- font-size: 1rem;
536
- font-weight: 500;
537
- margin-bottom: 6px;
538
- color: ${t(colors.purple[500], colors.purple[400])};
535
+ font-size: 0.875rem;
536
+ font-weight: 600;
537
+ margin-bottom: 0;
538
+ color: ${t(colors.gray[700], colors.gray[300])};
539
539
  `,
540
540
  seoPreviewImage: css2`
541
541
  max-width: 100%;
@@ -543,28 +543,29 @@ var stylesFactory = (theme) => {
543
543
  margin-bottom: 6px;
544
544
  box-shadow: 0 1px 2px ${t("rgba(0,0,0,0.03)", "rgba(0,0,0,0.06)")};
545
545
  height: 160px;
546
+ object-fit: cover;
546
547
  `,
547
548
  seoPreviewTitle: css2`
548
- font-size: 1rem;
549
+ font-size: 0.9rem;
549
550
  font-weight: 600;
550
- margin-bottom: 2px;
551
+ margin-bottom: 4px;
551
552
  color: ${t(colors.gray[900], colors.gray[100])};
552
553
  `,
553
554
  seoPreviewDesc: css2`
554
- color: ${t(colors.gray[700], colors.gray[300])};
555
- margin-bottom: 2px;
556
- font-size: 0.95rem;
555
+ color: ${t(colors.gray[600], colors.gray[400])};
556
+ margin-bottom: 4px;
557
+ font-size: 0.8rem;
557
558
  `,
558
559
  seoPreviewUrl: css2`
559
560
  color: ${t(colors.gray[500], colors.gray[500])};
560
- font-size: 0.9rem;
561
- margin-bottom: 2px;
561
+ font-size: 0.75rem;
562
+ margin-bottom: 0;
562
563
  word-break: break-all;
563
564
  `,
564
565
  seoMissingTagsSection: css2`
565
566
  margin-top: 4px;
566
- font-size: 0.95rem;
567
- color: ${t(colors.red[400], colors.red[400])};
567
+ font-size: 0.875rem;
568
+ color: ${t(colors.red[500], colors.red[400])};
568
569
  `,
569
570
  seoMissingTagsList: css2`
570
571
  margin: 4px 0 0 0;
@@ -572,22 +573,23 @@ var stylesFactory = (theme) => {
572
573
  list-style: none;
573
574
  display: flex;
574
575
  flex-wrap: wrap;
575
- gap: 6px;
576
+ gap: 4px;
576
577
  max-width: 240px;
577
578
  `,
578
579
  seoMissingTag: css2`
579
580
  background: ${t(colors.red[100], colors.red[500] + "22")};
580
581
  color: ${t(colors.red[700], colors.red[500])};
581
- border-radius: 4px;
582
- padding: 1px 6px;
583
- font-size: 0.9rem;
582
+ border-radius: 3px;
583
+ padding: 2px 6px;
584
+ font-size: 0.75rem;
584
585
  font-weight: 500;
585
586
  `,
586
587
  seoAllTagsFound: css2`
587
588
  color: ${t(colors.green[700], colors.green[500])};
588
589
  font-weight: 500;
589
- margin-left: 6px;
590
- font-size: 0.95rem;
590
+ margin-left: 0;
591
+ padding: 0 10px 8px 10px;
592
+ font-size: 0.875rem;
591
593
  `,
592
594
  devtoolsPanelContainer: (panelLocation, isDetached) => css2`
593
595
  direction: ltr;
@@ -599,7 +601,7 @@ var stylesFactory = (theme) => {
599
601
  z-index: 99999;
600
602
  width: 100%;
601
603
  ${isDetached ? "" : "max-height: 90%;"}
602
- border-top: 1px solid ${t(colors.gray[300], colors.gray[700])};
604
+ border-top: 1px solid ${t(colors.gray[200], colors.gray[800])};
603
605
  transform-origin: top;
604
606
  `,
605
607
  devtoolsPanelContainerVisibility: (isOpen) => {
@@ -652,7 +654,7 @@ var stylesFactory = (theme) => {
652
654
  user-select: none;
653
655
  z-index: 100000;
654
656
  &:hover {
655
- background-color: ${t(colors.purple[700], colors.purple[400])};
657
+ background-color: ${t(colors.gray[400], colors.gray[500])};
656
658
  }
657
659
  `,
658
660
  mainCloseBtn: css2`
@@ -731,9 +733,9 @@ var stylesFactory = (theme) => {
731
733
  align-items: center;
732
734
  justify-content: flex-start;
733
735
  height: 100%;
734
- background-color: ${t(colors.gray[100], colors.darkGray[800])};
735
- border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
736
- box-shadow: 0 1px 0 ${t(colors.gray[200], colors.gray[700])};
736
+ background-color: ${t(colors.gray[50], colors.darkGray[900])};
737
+ border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
738
+ box-shadow: none;
737
739
  position: relative;
738
740
  width: ${size[10]};
739
741
  `,
@@ -746,24 +748,24 @@ var stylesFactory = (theme) => {
746
748
  cursor: pointer;
747
749
  font-size: ${fontSize.sm};
748
750
  font-family: ${fontFamily.sans};
749
- color: ${t(colors.gray[700], colors.gray[300])};
751
+ color: ${t(colors.gray[600], colors.gray[400])};
750
752
  background-color: transparent;
751
753
  border: none;
752
- transition: all 0.2s ease-in-out;
754
+ transition: all 0.15s ease;
753
755
  border-left: 2px solid transparent;
754
756
  &:hover:not(.close):not(.active):not(.detach) {
755
- background-color: ${t(colors.gray[200], colors.gray[700])};
757
+ background-color: ${t(colors.gray[100], colors.gray[800])};
756
758
  color: ${t(colors.gray[900], colors.gray[100])};
757
- border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
759
+ border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
758
760
  }
759
761
  &.active {
760
- background-color: ${t(colors.purple[200], colors.purple[500])};
762
+ background-color: ${t(colors.gray[100], colors.gray[800])};
761
763
  color: ${t(colors.gray[900], colors.gray[100])};
762
- border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
764
+ border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
763
765
  }
764
766
  &.detach {
765
767
  &:hover {
766
- background-color: ${t(colors.gray[200], colors.gray[700])};
768
+ background-color: ${t(colors.gray[100], colors.gray[800])};
767
769
  }
768
770
  &:hover {
769
771
  color: ${t(colors.green[700], colors.green[500])};
@@ -772,7 +774,7 @@ var stylesFactory = (theme) => {
772
774
  &.close {
773
775
  margin-top: auto;
774
776
  &:hover {
775
- background-color: ${t(colors.gray[200], colors.gray[700])};
777
+ background-color: ${t(colors.gray[100], colors.gray[800])};
776
778
  }
777
779
  &:hover {
778
780
  color: ${t(colors.red[700], colors.red[500])};
@@ -803,13 +805,13 @@ var stylesFactory = (theme) => {
803
805
  pluginsTabDraw: (isExpanded) => css2`
804
806
  width: ${isExpanded ? size[48] : 0};
805
807
  height: 100%;
806
- background-color: ${t(colors.white, colors.darkGray[800])};
807
- box-shadow: 0 1px 0 ${colors.gray[700]};
808
- ${isExpanded ? `border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};` : ""}
808
+ background-color: ${t(colors.white, colors.darkGray[900])};
809
+ box-shadow: none;
810
+ ${isExpanded ? `border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};` : ""}
809
811
  `,
810
812
  pluginsTabDrawExpanded: css2`
811
813
  width: ${size[48]};
812
- border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
814
+ border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
813
815
  `,
814
816
  pluginsTabDrawTransition: (mSeconds) => {
815
817
  return css2`
@@ -829,38 +831,48 @@ var stylesFactory = (theme) => {
829
831
  pluginName: css2`
830
832
  font-size: ${fontSize.xs};
831
833
  font-family: ${fontFamily.sans};
832
- color: ${t(colors.gray[700], colors.gray[300])};
834
+ color: ${t(colors.gray[600], colors.gray[400])};
833
835
  padding: ${size[2]};
834
836
  cursor: pointer;
835
837
  text-align: center;
836
- transition: all 0.2s ease-in-out;
838
+ transition: all 0.15s ease;
839
+ border-left: 2px solid transparent;
840
+
837
841
  &:hover {
838
- background-color: ${t(colors.gray[200], colors.gray[700])};
842
+ background-color: ${t(colors.gray[100], colors.gray[800])};
839
843
  color: ${t(colors.gray[900], colors.gray[100])};
840
844
  padding: ${size[2]};
841
845
  }
842
846
  &.active {
843
- background-color: ${t(colors.purple[200], colors.purple[500])};
847
+ background-color: ${t(colors.gray[100], colors.gray[800])};
844
848
  color: ${t(colors.gray[900], colors.gray[100])};
849
+ border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
850
+ }
851
+ &.active:hover {
852
+ background-color: ${t(colors.gray[200], colors.gray[700])};
845
853
  }
846
854
  `,
847
855
  pluginsTabContent: css2`
848
856
  width: 100%;
849
857
  height: 100%;
850
858
  overflow-y: auto;
859
+
860
+ &:not(:last-child) {
861
+ border-right: 5px solid ${t(colors.purple[200], colors.purple[800])};
862
+ }
851
863
  `,
852
864
  settingsGroup: css2`
853
865
  display: flex;
854
866
  flex-direction: column;
855
- gap: 1rem;
867
+ gap: 0.75rem;
856
868
  `,
857
869
  conditionalSetting: css2`
858
870
  margin-left: 1.5rem;
859
871
  padding-left: 1rem;
860
- border-left: 2px solid ${t(colors.purple[600], colors.purple[400])};
861
- background-color: ${t(colors.gray[100], colors.darkGray[800])};
862
- padding: 1rem;
863
- border-radius: 0.5rem;
872
+ border-left: 2px solid ${t(colors.gray[300], colors.gray[600])};
873
+ background-color: ${t(colors.gray[50], colors.darkGray[900])};
874
+ padding: 0.75rem;
875
+ border-radius: 0.375rem;
864
876
  margin-top: 0.5rem;
865
877
  `,
866
878
  settingRow: css2`
package/dist/index.js CHANGED
@@ -29,7 +29,7 @@ var TanStackDevtoolsCore = class {
29
29
  const mountTo = el;
30
30
  const dispose = render(() => {
31
31
  const _self$ = this;
32
- this.#Component = lazy(() => import('./devtools/3YT62TLF.js'));
32
+ this.#Component = lazy(() => import('./devtools/6XAY2RKM.js'));
33
33
  const Devtools = this.#Component;
34
34
  this.#eventBus = new ClientEventBus(this.#eventBusConfig);
35
35
  this.#eventBus.start();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/devtools",
3
- "version": "0.6.19",
3
+ "version": "0.6.20",
4
4
  "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -54,7 +54,7 @@
54
54
  "goober": "^2.1.16",
55
55
  "solid-js": "^1.9.9",
56
56
  "@tanstack/devtools-event-bus": "0.3.2",
57
- "@tanstack/devtools-ui": "0.4.1"
57
+ "@tanstack/devtools-ui": "0.4.2"
58
58
  },
59
59
  "peerDependencies": {
60
60
  "solid-js": ">=1.9.7"
package/src/styles/use-styles.ts CHANGED
@@ -20,8 +20,8 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
20
20
  padding: 0;
21
21
  margin: 0 auto;
22
22
  background: ${t(colors.white, colors.darkGray[700])};
23
- border-radius: 12px;
24
- box-shadow: 0 2px 16px ${t('rgba(0, 0, 0, 0.04)', 'rgba(0, 0, 0, 0.08)')};
23
+ border-radius: 8px;
24
+ box-shadow: none;
25
25
  overflow-y: auto;
26
26
  height: 100%;
27
27
  display: flex;
@@ -33,16 +33,16 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
33
33
  seoTabTitle: css`
34
34
  font-size: 1.25rem;
35
35
  font-weight: 600;
36
- color: ${t(colors.purple[500], colors.purple[400])};
36
+ color: ${t(colors.gray[900], colors.gray[100])};
37
37
  margin: 0;
38
38
  padding: 1rem 1.5rem 0.5rem 1.5rem;
39
39
  text-align: left;
40
- border-bottom: 1px solid ${t(colors.gray[300], colors.gray[700])};
40
+ border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
41
41
  `,
42
42
  seoTabSection: css`
43
43
  padding: 1.5rem;
44
- background: ${t(colors.gray[100], colors.gray[800])};
45
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
44
+ background: ${t(colors.gray[50], colors.darkGray[800])};
45
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
46
46
  display: flex;
47
47
  flex-direction: column;
48
48
  gap: 0.5rem;
@@ -61,12 +61,12 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
61
61
  padding-bottom: 0.5rem;
62
62
  `,
63
63
  seoPreviewCard: css`
64
- border: 1px solid ${t(colors.gray[300], colors.gray[700])};
64
+ border: 1px solid ${t(colors.gray[200], colors.gray[800])};
65
65
  border-radius: 8px;
66
66
  padding: 12px 10px;
67
67
  background: ${t(colors.white, colors.darkGray[900])};
68
68
  margin-bottom: 0;
69
- box-shadow: 0 1px 4px ${t('rgba(0,0,0,0.02)', 'rgba(0,0,0,0.04)')};
69
+ box-shadow: 0 1px 3px ${t('rgba(0,0,0,0.05)', 'rgba(0,0,0,0.1)')};
70
70
  display: flex;
71
71
  flex-direction: column;
72
72
  align-items: flex-start;
@@ -76,10 +76,10 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
76
76
  gap: 4px;
77
77
  `,
78
78
  seoPreviewHeader: css`
79
- font-size: 1rem;
80
- font-weight: 500;
81
- margin-bottom: 6px;
82
- color: ${t(colors.purple[500], colors.purple[400])};
79
+ font-size: 0.875rem;
80
+ font-weight: 600;
81
+ margin-bottom: 0;
82
+ color: ${t(colors.gray[700], colors.gray[300])};
83
83
  `,
84
84
  seoPreviewImage: css`
85
85
  max-width: 100%;
@@ -87,28 +87,29 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
87
87
  margin-bottom: 6px;
88
88
  box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.03)', 'rgba(0,0,0,0.06)')};
89
89
  height: 160px;
90
+ object-fit: cover;
90
91
  `,
91
92
  seoPreviewTitle: css`
92
- font-size: 1rem;
93
+ font-size: 0.9rem;
93
94
  font-weight: 600;
94
- margin-bottom: 2px;
95
+ margin-bottom: 4px;
95
96
  color: ${t(colors.gray[900], colors.gray[100])};
96
97
  `,
97
98
  seoPreviewDesc: css`
98
- color: ${t(colors.gray[700], colors.gray[300])};
99
- margin-bottom: 2px;
100
- font-size: 0.95rem;
99
+ color: ${t(colors.gray[600], colors.gray[400])};
100
+ margin-bottom: 4px;
101
+ font-size: 0.8rem;
101
102
  `,
102
103
  seoPreviewUrl: css`
103
104
  color: ${t(colors.gray[500], colors.gray[500])};
104
- font-size: 0.9rem;
105
- margin-bottom: 2px;
105
+ font-size: 0.75rem;
106
+ margin-bottom: 0;
106
107
  word-break: break-all;
107
108
  `,
108
109
  seoMissingTagsSection: css`
109
110
  margin-top: 4px;
110
- font-size: 0.95rem;
111
- color: ${t(colors.red[400], colors.red[400])};
111
+ font-size: 0.875rem;
112
+ color: ${t(colors.red[500], colors.red[400])};
112
113
  `,
113
114
  seoMissingTagsList: css`
114
115
  margin: 4px 0 0 0;
@@ -116,22 +117,23 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
116
117
  list-style: none;
117
118
  display: flex;
118
119
  flex-wrap: wrap;
119
- gap: 6px;
120
+ gap: 4px;
120
121
  max-width: 240px;
121
122
  `,
122
123
  seoMissingTag: css`
123
124
  background: ${t(colors.red[100], colors.red[500] + '22')};
124
125
  color: ${t(colors.red[700], colors.red[500])};
125
- border-radius: 4px;
126
- padding: 1px 6px;
127
- font-size: 0.9rem;
126
+ border-radius: 3px;
127
+ padding: 2px 6px;
128
+ font-size: 0.75rem;
128
129
  font-weight: 500;
129
130
  `,
130
131
  seoAllTagsFound: css`
131
132
  color: ${t(colors.green[700], colors.green[500])};
132
133
  font-weight: 500;
133
- margin-left: 6px;
134
- font-size: 0.95rem;
134
+ margin-left: 0;
135
+ padding: 0 10px 8px 10px;
136
+ font-size: 0.875rem;
135
137
  `,
136
138
  devtoolsPanelContainer: (
137
139
  panelLocation: TanStackDevtoolsConfig['panelLocation'],
@@ -146,7 +148,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
146
148
  z-index: 99999;
147
149
  width: 100%;
148
150
  ${isDetached ? '' : 'max-height: 90%;'}
149
- border-top: 1px solid ${t(colors.gray[300], colors.gray[700])};
151
+ border-top: 1px solid ${t(colors.gray[200], colors.gray[800])};
150
152
  transform-origin: top;
151
153
  `,
152
154
  devtoolsPanelContainerVisibility: (isOpen: boolean) => {
@@ -204,7 +206,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
204
206
  user-select: none;
205
207
  z-index: 100000;
206
208
  &:hover {
207
- background-color: ${t(colors.purple[700], colors.purple[400])};
209
+ background-color: ${t(colors.gray[400], colors.gray[500])};
208
210
  }
209
211
  `,
210
212
 
@@ -294,9 +296,9 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
294
296
  align-items: center;
295
297
  justify-content: flex-start;
296
298
  height: 100%;
297
- background-color: ${t(colors.gray[100], colors.darkGray[800])};
298
- border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
299
- box-shadow: 0 1px 0 ${t(colors.gray[200], colors.gray[700])};
299
+ background-color: ${t(colors.gray[50], colors.darkGray[900])};
300
+ border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
301
+ box-shadow: none;
300
302
  position: relative;
301
303
  width: ${size[10]};
302
304
  `,
@@ -310,24 +312,24 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
310
312
  cursor: pointer;
311
313
  font-size: ${fontSize.sm};
312
314
  font-family: ${fontFamily.sans};
313
- color: ${t(colors.gray[700], colors.gray[300])};
315
+ color: ${t(colors.gray[600], colors.gray[400])};
314
316
  background-color: transparent;
315
317
  border: none;
316
- transition: all 0.2s ease-in-out;
318
+ transition: all 0.15s ease;
317
319
  border-left: 2px solid transparent;
318
320
  &:hover:not(.close):not(.active):not(.detach) {
319
- background-color: ${t(colors.gray[200], colors.gray[700])};
321
+ background-color: ${t(colors.gray[100], colors.gray[800])};
320
322
  color: ${t(colors.gray[900], colors.gray[100])};
321
- border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
323
+ border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
322
324
  }
323
325
  &.active {
324
- background-color: ${t(colors.purple[200], colors.purple[500])};
326
+ background-color: ${t(colors.gray[100], colors.gray[800])};
325
327
  color: ${t(colors.gray[900], colors.gray[100])};
326
- border-left: 2px solid ${t(colors.purple[700], colors.purple[500])};
328
+ border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
327
329
  }
328
330
  &.detach {
329
331
  &:hover {
330
- background-color: ${t(colors.gray[200], colors.gray[700])};
332
+ background-color: ${t(colors.gray[100], colors.gray[800])};
331
333
  }
332
334
  &:hover {
333
335
  color: ${t(colors.green[700], colors.green[500])};
@@ -336,7 +338,7 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
336
338
  &.close {
337
339
  margin-top: auto;
338
340
  &:hover {
339
- background-color: ${t(colors.gray[200], colors.gray[700])};
341
+ background-color: ${t(colors.gray[100], colors.gray[800])};
340
342
  }
341
343
  &:hover {
342
344
  color: ${t(colors.red[700], colors.red[500])};
@@ -368,15 +370,15 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
368
370
  pluginsTabDraw: (isExpanded: boolean) => css`
369
371
  width: ${isExpanded ? size[48] : 0};
370
372
  height: 100%;
371
- background-color: ${t(colors.white, colors.darkGray[800])};
372
- box-shadow: 0 1px 0 ${colors.gray[700]};
373
+ background-color: ${t(colors.white, colors.darkGray[900])};
374
+ box-shadow: none;
373
375
  ${isExpanded
374
- ? `border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};`
376
+ ? `border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};`
375
377
  : ''}
376
378
  `,
377
379
  pluginsTabDrawExpanded: css`
378
380
  width: ${size[48]};
379
- border-right: 1px solid ${t(colors.gray[300], colors.gray[700])};
381
+ border-right: 1px solid ${t(colors.gray[200], colors.gray[800])};
380
382
  `,
381
383
  pluginsTabDrawTransition: (mSeconds: number) => {
382
384
  return css`
@@ -399,39 +401,49 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
399
401
  pluginName: css`
400
402
  font-size: ${fontSize.xs};
401
403
  font-family: ${fontFamily.sans};
402
- color: ${t(colors.gray[700], colors.gray[300])};
404
+ color: ${t(colors.gray[600], colors.gray[400])};
403
405
  padding: ${size[2]};
404
406
  cursor: pointer;
405
407
  text-align: center;
406
- transition: all 0.2s ease-in-out;
408
+ transition: all 0.15s ease;
409
+ border-left: 2px solid transparent;
410
+
407
411
  &:hover {
408
- background-color: ${t(colors.gray[200], colors.gray[700])};
412
+ background-color: ${t(colors.gray[100], colors.gray[800])};
409
413
  color: ${t(colors.gray[900], colors.gray[100])};
410
414
  padding: ${size[2]};
411
415
  }
412
416
  &.active {
413
- background-color: ${t(colors.purple[200], colors.purple[500])};
417
+ background-color: ${t(colors.gray[100], colors.gray[800])};
414
418
  color: ${t(colors.gray[900], colors.gray[100])};
419
+ border-left: 2px solid ${t(colors.gray[900], colors.gray[100])};
420
+ }
421
+ &.active:hover {
422
+ background-color: ${t(colors.gray[200], colors.gray[700])};
415
423
  }
416
424
  `,
417
425
  pluginsTabContent: css`
418
426
  width: 100%;
419
427
  height: 100%;
420
428
  overflow-y: auto;
429
+
430
+ &:not(:last-child) {
431
+ border-right: 5px solid ${t(colors.purple[200], colors.purple[800])};
432
+ }
421
433
  `,
422
434
 
423
435
  settingsGroup: css`
424
436
  display: flex;
425
437
  flex-direction: column;
426
- gap: 1rem;
438
+ gap: 0.75rem;
427
439
  `,
428
440
  conditionalSetting: css`
429
441
  margin-left: 1.5rem;
430
442
  padding-left: 1rem;
431
- border-left: 2px solid ${t(colors.purple[600], colors.purple[400])};
432
- background-color: ${t(colors.gray[100], colors.darkGray[800])};
433
- padding: 1rem;
434
- border-radius: 0.5rem;
443
+ border-left: 2px solid ${t(colors.gray[300], colors.gray[600])};
444
+ background-color: ${t(colors.gray[50], colors.darkGray[900])};
445
+ padding: 0.75rem;
446
+ border-radius: 0.375rem;
435
447
  margin-top: 0.5rem;
436
448
  `,
437
449
  settingRow: css`