@shuffleio/shuffle-mcps 0.0.3 → 0.0.5

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.
@@ -5,16 +5,64 @@
5
5
  */
6
6
 
7
7
  .singul-container {
8
- /* CSS Custom Properties for easy customization */
8
+ /* ============================================================
9
+ * Default theme: Shuffle-style dark (matches the rest of the app).
10
+ * For a light theme, add the `singul-theme-light` class on the
11
+ * <ShuffleMCP className="singul-theme-light" /> root.
12
+ * ============================================================ */
9
13
  --singul-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
10
14
  --singul-input-padding: 12px 16px;
11
15
  --singul-input-padding-right: 48px;
16
+ --singul-input-border: 1px solid rgba(255, 255, 255, 0.08);
17
+ --singul-input-border-radius: 10px;
18
+ --singul-input-bg: #14161b;
19
+ --singul-input-color: #f3f4f6;
20
+ --singul-input-font-size: 14px;
21
+ --singul-input-line-height: 1.5;
22
+ --singul-input-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
23
+ --singul-input-focus-border: rgba(255, 102, 0, 0.55);
24
+ --singul-input-focus-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
25
+ --singul-placeholder-color: #6b7280;
26
+ --singul-icon-color: #9ca3af;
27
+ --singul-spinner-border: 2px solid rgba(255, 255, 255, 0.08);
28
+ --singul-spinner-border-top: 2px solid #FF6600;
29
+ --singul-dropdown-bg: #14161b;
30
+ --singul-dropdown-border: 1px solid rgba(255, 255, 255, 0.08);
31
+ --singul-dropdown-border-radius: 10px;
32
+ --singul-dropdown-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
33
+ --singul-dropdown-max-height: 400px;
34
+ --singul-item-padding: 12px 16px;
35
+ --singul-item-border: 1px solid rgba(255, 255, 255, 0.06);
36
+ --singul-item-hover-bg: rgba(255, 255, 255, 0.04);
37
+ --singul-item-selected-bg: rgba(255, 102, 0, 0.12);
38
+ --singul-item-selected-border: rgba(255, 102, 0, 0.55);
39
+ --singul-app-icon-size: 40px;
40
+ --singul-app-icon-border: 1px solid rgba(255, 255, 255, 0.08);
41
+ --singul-app-icon-border-radius: 8px;
42
+ --singul-app-name-font-weight: 600;
43
+ --singul-app-name-color: #f3f4f6;
44
+ --singul-app-name-font-size: 14px;
45
+ --singul-app-description-color: #9ca3af;
46
+ --singul-app-description-font-size: 12px;
47
+ --singul-app-category-bg: rgba(255, 255, 255, 0.06);
48
+ --singul-app-category-color: #d1d5db;
49
+ --singul-empty-state-color: #9ca3af;
50
+ --singul-empty-state-font-size: 14px;
51
+ --singul-grid-gap: 12px;
52
+ --singul-grid-columns: 3;
53
+ --singul-accent-color: #FF6600;
54
+
55
+ display: block;
56
+ position: relative;
57
+ width: 100%;
58
+ font-family: var(--singul-font-family);
59
+ }
60
+
61
+ /* Opt-in light theme (use className="singul-theme-light") */
62
+ .singul-container.singul-theme-light {
12
63
  --singul-input-border: 1px solid #d1d5db;
13
- --singul-input-border-radius: 8px;
14
64
  --singul-input-bg: #ffffff;
15
65
  --singul-input-color: #1f2937;
16
- --singul-input-font-size: 16px;
17
- --singul-input-line-height: 1.5;
18
66
  --singul-input-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
19
67
  --singul-input-focus-border: #3b82f6;
20
68
  --singul-input-focus-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(59, 130, 246, 0.1);
@@ -24,34 +72,17 @@
24
72
  --singul-spinner-border-top: 2px solid #3b82f6;
25
73
  --singul-dropdown-bg: #ffffff;
26
74
  --singul-dropdown-border: 1px solid #e5e7eb;
27
- --singul-dropdown-border-radius: 8px;
28
75
  --singul-dropdown-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
29
- --singul-dropdown-max-height: 400px;
30
- --singul-item-padding: 12px 16px;
31
76
  --singul-item-border: 1px solid #f3f4f6;
32
77
  --singul-item-hover-bg: #dff0ff;
33
78
  --singul-item-selected-bg: rgba(59, 130, 246, 0.1);
34
79
  --singul-item-selected-border: #3b82f6;
35
- --singul-app-icon-size: 40px;
36
80
  --singul-app-icon-border: 1px solid #e5e7eb;
37
- --singul-app-icon-border-radius: 8px;
38
- --singul-app-name-font-weight: 600;
39
81
  --singul-app-name-color: #1f2937;
40
- --singul-app-name-font-size: 14px;
41
82
  --singul-app-description-color: #6b7280;
42
- --singul-app-description-font-size: 12px;
43
83
  --singul-app-category-bg: rgba(0, 0, 0, 0.05);
44
84
  --singul-app-category-color: #6b7280;
45
- --singul-empty-state-color: #9ca3af;
46
- --singul-empty-state-font-size: 14px;
47
- --singul-grid-gap: 12px;
48
- --singul-grid-columns: 3;
49
85
  --singul-accent-color: #3b82f6;
50
-
51
- display: block;
52
- position: relative;
53
- width: 100%;
54
- font-family: var(--singul-font-family);
55
86
  }
56
87
 
57
88
  .singul-search-bar-container {
@@ -486,3 +517,308 @@
486
517
  letter-spacing: 0.05em;
487
518
  vertical-align: middle;
488
519
  }
520
+
521
+ /* ============================================================
522
+ * Built-in App Auth Drawer (default click behavior)
523
+ * ============================================================ */
524
+ .singul-drawer-backdrop {
525
+ position: fixed;
526
+ inset: 0;
527
+ background: rgba(0, 0, 0, 0.55);
528
+ z-index: 9998;
529
+ animation: singul-fade-in 0.15s ease-out;
530
+ }
531
+ .singul-drawer {
532
+ position: fixed;
533
+ top: 0;
534
+ right: 0;
535
+ height: 100vh;
536
+ width: 100%;
537
+ max-width: 460px;
538
+ background: #0f1115;
539
+ color: #e5e7eb;
540
+ border-left: 1px solid rgba(255, 255, 255, 0.08);
541
+ z-index: 9999;
542
+ display: flex;
543
+ flex-direction: column;
544
+ animation: singul-slide-in 0.2s ease-out;
545
+ font-family: var(--singul-font-family);
546
+ }
547
+ @keyframes singul-fade-in { from { opacity: 0; } to { opacity: 1; } }
548
+ @keyframes singul-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
549
+
550
+ .singul-drawer-header {
551
+ display: flex;
552
+ align-items: flex-start;
553
+ justify-content: space-between;
554
+ padding: 20px;
555
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
556
+ }
557
+ .singul-drawer-title-row { display: flex; gap: 12px; align-items: center; }
558
+ .singul-drawer-icon {
559
+ width: 40px; height: 40px; border-radius: 8px;
560
+ background: #fff; padding: 4px; object-fit: contain;
561
+ }
562
+ .singul-drawer-title { font-size: 16px; font-weight: 700; color: #fff; }
563
+ .singul-drawer-subtitle { font-size: 12px; color: #9ca3af; margin-top: 2px; }
564
+ .singul-drawer-close {
565
+ background: transparent; border: 0; color: #9ca3af;
566
+ font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px;
567
+ }
568
+ .singul-drawer-close:hover { color: #fff; }
569
+
570
+ .singul-drawer-body { padding: 20px; overflow-y: auto; flex: 1; }
571
+ .singul-drawer-desc { font-size: 13px; color: #9ca3af; margin: 0 0 20px; line-height: 1.5; }
572
+
573
+ .singul-drawer-section-title {
574
+ font-size: 14px; font-weight: 600; color: #fff;
575
+ display: flex; align-items: baseline; justify-content: space-between;
576
+ margin-bottom: 10px;
577
+ }
578
+ .singul-drawer-count { font-size: 11px; font-weight: 400; color: #9ca3af; }
579
+
580
+ .singul-drawer-auth-list { list-style: none; margin: 0 0 16px; padding: 0; }
581
+ .singul-drawer-auth-item {
582
+ border: 1px solid rgba(255, 255, 255, 0.08);
583
+ border-radius: 10px; padding: 12px; margin-bottom: 8px;
584
+ background: rgba(255, 255, 255, 0.02);
585
+ }
586
+ .singul-drawer-auth-label { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 6px; }
587
+ .singul-drawer-auth-chips { display: flex; gap: 6px; flex-wrap: wrap; }
588
+ .singul-chip {
589
+ font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
590
+ text-transform: uppercase; letter-spacing: 0.04em;
591
+ }
592
+ .singul-chip-configured { background: rgba(234, 179, 8, 0.15); color: #facc15; }
593
+ .singul-chip-tested { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
594
+ .singul-chip-inactive { background: rgba(156, 163, 175, 0.15); color: #9ca3af; }
595
+
596
+ .singul-drawer-empty {
597
+ font-size: 13px; color: #9ca3af; padding: 16px;
598
+ border: 1px dashed rgba(255, 255, 255, 0.1);
599
+ border-radius: 10px; text-align: center; margin-bottom: 16px;
600
+ }
601
+
602
+ .singul-drawer-cta {
603
+ display: block; text-align: center; text-decoration: none;
604
+ background: #FF6600; color: #fff; font-weight: 600; font-size: 13px;
605
+ padding: 11px 16px; border-radius: 10px; margin-top: 8px;
606
+ transition: background 0.15s;
607
+ }
608
+ .singul-drawer-cta:hover { background: #e65a00; }
609
+
610
+ /* ============================================================
611
+ * Drawer extensions: meta row, auth tabs, edit form, MCP chat
612
+ * ============================================================ */
613
+ .singul-drawer-meta {
614
+ display: flex;
615
+ align-items: flex-start;
616
+ gap: 12px;
617
+ margin-bottom: 16px;
618
+ }
619
+ .singul-drawer-meta .singul-drawer-desc { flex: 1; margin: 0; }
620
+
621
+ .singul-drawer-activate {
622
+ flex-shrink: 0;
623
+ background: #FF6600;
624
+ color: #fff;
625
+ border: 0;
626
+ border-radius: 8px;
627
+ font-size: 12px;
628
+ font-weight: 600;
629
+ padding: 6px 12px;
630
+ cursor: pointer;
631
+ transition: background 0.15s, opacity 0.15s;
632
+ }
633
+ .singul-drawer-activate:hover:not(:disabled) { background: #e65a00; }
634
+ .singul-drawer-activate:disabled { opacity: 0.6; cursor: default; }
635
+ .singul-drawer-activate-on {
636
+ background: transparent;
637
+ color: #9ca3af;
638
+ border: 1px solid rgba(255, 255, 255, 0.12);
639
+ }
640
+ .singul-drawer-activate-on:hover:not(:disabled) {
641
+ background: rgba(239, 68, 68, 0.1);
642
+ color: #f87171;
643
+ border-color: rgba(239, 68, 68, 0.4);
644
+ }
645
+
646
+ /* Auth tabs */
647
+ .singul-auth-tabs {
648
+ display: flex;
649
+ flex-wrap: wrap;
650
+ gap: 6px;
651
+ margin-bottom: 12px;
652
+ }
653
+ .singul-auth-tab {
654
+ display: inline-flex;
655
+ align-items: center;
656
+ gap: 8px;
657
+ padding: 6px 10px;
658
+ border: 1px solid rgba(255, 255, 255, 0.1);
659
+ background: rgba(255, 255, 255, 0.02);
660
+ border-radius: 8px;
661
+ color: #d1d5db;
662
+ font-size: 12px;
663
+ font-weight: 500;
664
+ cursor: pointer;
665
+ transition: all 0.15s;
666
+ }
667
+ .singul-auth-tab:hover { border-color: rgba(255, 255, 255, 0.2); }
668
+ .singul-auth-tab-active {
669
+ border-color: rgba(255, 102, 0, 0.6);
670
+ background: rgba(255, 102, 0, 0.08);
671
+ color: #fff;
672
+ }
673
+ .singul-auth-tab-label { white-space: nowrap; }
674
+ .singul-auth-tab-chips { display: inline-flex; gap: 4px; }
675
+ .singul-auth-tab-new { color: #FF8533; border-style: dashed; }
676
+
677
+ /* Auth form */
678
+ .singul-auth-form {
679
+ display: flex;
680
+ flex-direction: column;
681
+ gap: 12px;
682
+ margin-bottom: 16px;
683
+ }
684
+ .singul-auth-field {
685
+ display: flex;
686
+ flex-direction: column;
687
+ gap: 4px;
688
+ }
689
+ .singul-auth-field-label {
690
+ font-size: 12px;
691
+ font-weight: 600;
692
+ color: #e5e7eb;
693
+ }
694
+ .singul-auth-field-req { color: #f87171; }
695
+ .singul-auth-field-desc {
696
+ font-size: 11px;
697
+ color: #9ca3af;
698
+ line-height: 1.4;
699
+ }
700
+ .singul-auth-input {
701
+ background: #0a0c10;
702
+ border: 1px solid rgba(255, 255, 255, 0.1);
703
+ border-radius: 8px;
704
+ color: #fff;
705
+ font-size: 13px;
706
+ padding: 8px 10px;
707
+ font-family: inherit;
708
+ transition: border-color 0.15s, box-shadow 0.15s;
709
+ }
710
+ .singul-auth-input:focus {
711
+ outline: none;
712
+ border-color: rgba(255, 102, 0, 0.6);
713
+ box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.12);
714
+ }
715
+
716
+ .singul-auth-actions {
717
+ display: flex;
718
+ gap: 8px;
719
+ margin-top: 4px;
720
+ }
721
+ .singul-btn {
722
+ border: 0;
723
+ border-radius: 8px;
724
+ font-size: 13px;
725
+ font-weight: 600;
726
+ padding: 8px 14px;
727
+ cursor: pointer;
728
+ transition: background 0.15s, opacity 0.15s;
729
+ font-family: inherit;
730
+ }
731
+ .singul-btn:disabled { opacity: 0.6; cursor: default; }
732
+ .singul-btn-primary { background: #FF6600; color: #fff; }
733
+ .singul-btn-primary:hover:not(:disabled) { background: #e65a00; }
734
+ .singul-btn-secondary {
735
+ background: transparent;
736
+ color: #d1d5db;
737
+ border: 1px solid rgba(255, 255, 255, 0.12);
738
+ }
739
+ .singul-btn-secondary:hover:not(:disabled) {
740
+ background: rgba(255, 255, 255, 0.04);
741
+ color: #fff;
742
+ }
743
+
744
+ .singul-auth-message {
745
+ font-size: 12px;
746
+ padding: 8px 10px;
747
+ border-radius: 8px;
748
+ margin-top: 4px;
749
+ }
750
+ .singul-auth-message-ok {
751
+ background: rgba(34, 197, 94, 0.1);
752
+ color: #4ade80;
753
+ border: 1px solid rgba(34, 197, 94, 0.25);
754
+ }
755
+ .singul-auth-message-err {
756
+ background: rgba(239, 68, 68, 0.1);
757
+ color: #f87171;
758
+ border: 1px solid rgba(239, 68, 68, 0.25);
759
+ }
760
+
761
+ /* MCP "Try it out" */
762
+ .singul-mcp-input-wrap {
763
+ display: flex;
764
+ align-items: center;
765
+ gap: 8px;
766
+ border: 1px solid rgba(255, 255, 255, 0.1);
767
+ background: #0a0c10;
768
+ border-radius: 10px;
769
+ padding: 6px 10px;
770
+ margin-bottom: 8px;
771
+ transition: border-color 0.15s, box-shadow 0.15s;
772
+ }
773
+ .singul-mcp-input-wrap:focus-within {
774
+ border-color: rgba(255, 102, 0, 0.6);
775
+ box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.12);
776
+ }
777
+ .singul-mcp-prompt {
778
+ color: #FF8533;
779
+ font-weight: 700;
780
+ font-family: 'JetBrains Mono', ui-monospace, monospace;
781
+ }
782
+ .singul-mcp-input {
783
+ flex: 1;
784
+ background: transparent;
785
+ border: 0;
786
+ color: #fff;
787
+ font-size: 13px;
788
+ padding: 4px 0;
789
+ font-family: inherit;
790
+ outline: none;
791
+ }
792
+ .singul-mcp-input::placeholder { color: #6b7280; }
793
+ .singul-mcp-run {
794
+ background: #FF6600;
795
+ color: #fff;
796
+ border: 0;
797
+ border-radius: 6px;
798
+ width: 28px;
799
+ height: 28px;
800
+ font-size: 12px;
801
+ cursor: pointer;
802
+ transition: background 0.15s, opacity 0.15s;
803
+ }
804
+ .singul-mcp-run:hover:not(:disabled) { background: #e65a00; }
805
+ .singul-mcp-run:disabled { opacity: 0.4; cursor: default; }
806
+
807
+ .singul-mcp-result {
808
+ background: #0a0c10;
809
+ border: 1px solid rgba(255, 255, 255, 0.08);
810
+ border-radius: 8px;
811
+ padding: 10px 12px;
812
+ font-size: 12px;
813
+ color: #d1d5db;
814
+ white-space: pre-wrap;
815
+ word-break: break-word;
816
+ max-height: 280px;
817
+ overflow-y: auto;
818
+ font-family: 'JetBrains Mono', ui-monospace, monospace;
819
+ margin: 0;
820
+ }
821
+ .singul-mcp-result-err {
822
+ border-color: rgba(239, 68, 68, 0.25);
823
+ color: #fca5a5;
824
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shuffleio/shuffle-mcps",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "Turn 3,000+ SaaS tools into MCP servers your agents can use. Headless React component for search, selection, and OAuth handoff.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -28,7 +28,7 @@
28
28
  "import": "./dist/index.js",
29
29
  "require": "./dist/index.cjs"
30
30
  },
31
- "./singul.css": "./dist/singul.css"
31
+ "./shuffle-mcp.css": "./dist/shuffle-mcp.css"
32
32
  },
33
33
  "files": [
34
34
  "dist",
@@ -45,7 +45,22 @@
45
45
  },
46
46
  "peerDependencies": {
47
47
  "react": ">=18",
48
- "react-dom": ">=18"
48
+ "react-dom": ">=18",
49
+ "@mui/material": ">=5",
50
+ "@mui/icons-material": ">=5",
51
+ "@emotion/react": ">=11",
52
+ "@emotion/styled": ">=11",
53
+ "framer-motion": ">=10",
54
+ "sonner": ">=1",
55
+ "lucide-react": ">=0.300.0",
56
+ "react-router-dom": ">=6",
57
+ "react-markdown": ">=8",
58
+ "remark-gfm": ">=3"
59
+ },
60
+ "peerDependenciesMeta": {
61
+ "react-router-dom": {
62
+ "optional": true
63
+ }
49
64
  },
50
65
  "dependencies": {
51
66
  "algoliasearch": "^5.0.0"