@shuffleio/shuffle-mcps 0.0.59 → 0.0.63

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.
@@ -0,0 +1,169 @@
1
+ /**
2
+ * Shuffle-Core — Styles
3
+ *
4
+ * Standalone fallback tokens. The lib uses shadcn-style HSL CSS custom
5
+ * properties throughout its sx/styled code (e.g. `hsl(var(--card))`). When
6
+ * the lib is consumed in a host app that does NOT define those tokens,
7
+ * `var(--card)` resolves to nothing and backgrounds render transparent.
8
+ *
9
+ * `:where(:root)` has specificity 0, so any host-defined `:root { --card: ... }`
10
+ * still wins. These defaults only kick in when the host has nothing.
11
+ */
12
+ :where(:root) {
13
+ --background: 0 0% 10%;
14
+ --background-elevated: 0 0% 13%;
15
+ --background-surface: 0 0% 16%;
16
+ --foreground: 0 0% 98%;
17
+ --foreground-muted: 0 0% 60%;
18
+ --card: 0 0% 13%;
19
+ --card-foreground: 0 0% 100%;
20
+ --popover: 0 0% 13%;
21
+ --popover-foreground: 0 0% 100%;
22
+ --primary: 22 100% 50%;
23
+ --primary-foreground: 0 0% 100%;
24
+ --secondary: 0 0% 16%;
25
+ --secondary-foreground: 0 0% 100%;
26
+ --muted: 0 0% 16%;
27
+ --muted-foreground: 0 0% 65%;
28
+ --accent: 22 100% 50%;
29
+ --accent-foreground: 0 0% 100%;
30
+ --destructive: 0 84% 60%;
31
+ --destructive-foreground: 0 0% 100%;
32
+ --border: 0 0% 20%;
33
+ --border-subtle: 0 0% 16%;
34
+ --input: 0 0% 16%;
35
+ --ring: 22 100% 50%;
36
+ --primary-glow: 24 100% 60%;
37
+ --severity-critical: 0 84% 60%;
38
+ --severity-high: 12 92% 52%;
39
+ --severity-medium: 45 93% 47%;
40
+ --severity-low: 142 71% 45%;
41
+ --severity-info: 210 100% 56%;
42
+ --sidebar-background: 0 0% 9%;
43
+ --sidebar-foreground: 0 0% 100%;
44
+ --sidebar-primary: 24 100% 50%;
45
+ --sidebar-primary-foreground: 0 0% 100%;
46
+ --sidebar-accent: 0 0% 16%;
47
+ --sidebar-accent-foreground: 0 0% 100%;
48
+ --sidebar-border: 0 0% 16%;
49
+ --sidebar-ring: 24 100% 50%;
50
+ --gradient-card: linear-gradient(145deg, hsl(0 0% 14%) 0%, hsl(0 0% 12%) 100%);
51
+ --gradient-accent: linear-gradient(135deg, hsl(24 100% 50%) 0%, hsl(24 100% 60%) 100%);
52
+ }
53
+
54
+ .shuffle-core-scope,
55
+ .shuffle-core-scope *,
56
+ .shuffle-core-scope *::before,
57
+ .shuffle-core-scope *::after {
58
+ box-sizing: border-box;
59
+ }
60
+
61
+ .shuffle-core-scope {
62
+ color: hsl(var(--foreground));
63
+ font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
64
+ line-height: 1.5;
65
+ isolation: isolate;
66
+ }
67
+
68
+ .shuffle-core-scope button,
69
+ .shuffle-core-scope input,
70
+ .shuffle-core-scope textarea,
71
+ .shuffle-core-scope select {
72
+ font: inherit;
73
+ }
74
+
75
+ /* Scoped theme overrides for <ShuffleCoreThemeProvider mode="light|dark">.
76
+ * Stamped on the wrapper div and portaled MUI paper. Light values mirror
77
+ * Shuffle Security's :root; dark values mirror the defaults above. */
78
+ :root:not(.dark) .shuffle-core-scope:not(.dark),
79
+ html:not(.dark) .shuffle-core-scope:not(.dark),
80
+ body:not(.dark) .shuffle-core-scope:not(.dark),
81
+ .shuffle-core-scope.light {
82
+ --background: 0 0% 98%;
83
+ --background-elevated: 0 0% 100%;
84
+ --background-surface: 0 0% 96%;
85
+ --foreground: 0 0% 9%;
86
+ --foreground-muted: 0 0% 40%;
87
+ --card: 0 0% 100%;
88
+ --card-foreground: 0 0% 9%;
89
+ --popover: 0 0% 100%;
90
+ --popover-foreground: 0 0% 9%;
91
+ --secondary: 0 0% 94%;
92
+ --secondary-foreground: 0 0% 9%;
93
+ --muted: 0 0% 94%;
94
+ --muted-foreground: 0 0% 40%;
95
+ --accent: 0 0% 92%;
96
+ --accent-foreground: 0 0% 9%;
97
+ --destructive: 0 72% 51%;
98
+ --destructive-foreground: 0 0% 100%;
99
+ --border: 0 0% 78%;
100
+ --border-subtle: 0 0% 86%;
101
+ --input: 0 0% 94%;
102
+ --severity-critical: 0 72% 51%;
103
+ --severity-high: 12 88% 46%;
104
+ --severity-medium: 38 92% 33%;
105
+ --severity-low: 142 72% 31%;
106
+ --severity-info: 215 90% 45%;
107
+ --sidebar-background: 0 0% 97%;
108
+ --sidebar-foreground: 0 0% 9%;
109
+ --sidebar-accent: 0 0% 94%;
110
+ --sidebar-accent-foreground: 0 0% 9%;
111
+ --sidebar-border: 0 0% 80%;
112
+ --gradient-card: linear-gradient(145deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);
113
+ }
114
+
115
+ .dark .shuffle-core-scope:not(.light),
116
+ .shuffle-core-scope.dark {
117
+ --background: 0 0% 10%;
118
+ --background-elevated: 0 0% 13%;
119
+ --background-surface: 0 0% 16%;
120
+ --foreground: 0 0% 100%;
121
+ --foreground-muted: 0 0% 60%;
122
+ --card: 0 0% 13%;
123
+ --card-foreground: 0 0% 100%;
124
+ --popover: 0 0% 12%;
125
+ --popover-foreground: 0 0% 100%;
126
+ --secondary: 0 0% 18%;
127
+ --secondary-foreground: 0 0% 100%;
128
+ --muted: 0 0% 16%;
129
+ --muted-foreground: 0 0% 50%;
130
+ --accent: 0 0% 20%;
131
+ --accent-foreground: 0 0% 100%;
132
+ --destructive: 0 84% 60%;
133
+ --destructive-foreground: 0 0% 100%;
134
+ --border: 0 0% 20%;
135
+ --border-subtle: 0 0% 16%;
136
+ --input: 0 0% 18%;
137
+ --severity-critical: 0 84% 60%;
138
+ --severity-high: 12 92% 52%;
139
+ --severity-medium: 45 93% 47%;
140
+ --severity-low: 142 71% 45%;
141
+ --severity-info: 210 100% 56%;
142
+ --sidebar-background: 0 0% 9%;
143
+ --sidebar-foreground: 0 0% 100%;
144
+ --sidebar-accent: 0 0% 16%;
145
+ --sidebar-accent-foreground: 0 0% 100%;
146
+ --sidebar-border: 0 0% 16%;
147
+ --gradient-card: linear-gradient(145deg, hsl(0 0% 14%) 0%, hsl(0 0% 12%) 100%);
148
+ }
149
+
150
+ /* Scoped to Shuffle-Core's own tooltips only. The provider stamps
151
+ * `shuffle-core-scope` on the portaled `.MuiTooltip-tooltip`, so this styles
152
+ * our tooltips without leaking into host apps (e.g. shaffuru) whose tooltips
153
+ * carry no scope class. */
154
+ .MuiTooltip-tooltip.shuffle-core-scope {
155
+ background-color: hsl(var(--popover)) !important;
156
+ color: hsl(var(--popover-foreground)) !important;
157
+ border: 1px solid hsl(var(--border)) !important;
158
+ box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
159
+ border-radius: 8px !important;
160
+ }
161
+
162
+ .MuiTooltip-tooltip.shuffle-core-scope .MuiTooltip-arrow {
163
+ color: hsl(var(--popover)) !important;
164
+ }
165
+
166
+ .MuiTooltip-tooltip.shuffle-core-scope .MuiTooltip-arrow::before {
167
+ border: 1px solid hsl(var(--border)) !important;
168
+ box-sizing: border-box;
169
+ }
@@ -91,7 +91,11 @@ body:not(.dark) .shuffle-mcp-scope:not(.dark),
91
91
  --infra-email: 215 90% 45%;
92
92
  }
93
93
 
94
- .MuiTooltip-popper .MuiTooltip-tooltip {
94
+ /* Scoped to Shuffle-MCPs' own tooltips only. The provider stamps
95
+ * `shuffle-mcp-scope` on the portaled `.MuiTooltip-tooltip`, so this styles
96
+ * our tooltips without leaking into host apps whose tooltips carry no scope
97
+ * class. */
98
+ .MuiTooltip-tooltip.shuffle-mcp-scope {
95
99
  background-color: hsl(var(--popover)) !important;
96
100
  color: hsl(var(--popover-foreground)) !important;
97
101
  border: 1px solid hsl(var(--border)) !important;
@@ -99,11 +103,11 @@ body:not(.dark) .shuffle-mcp-scope:not(.dark),
99
103
  border-radius: 8px !important;
100
104
  }
101
105
 
102
- .MuiTooltip-popper .MuiTooltip-arrow {
106
+ .MuiTooltip-tooltip.shuffle-mcp-scope .MuiTooltip-arrow {
103
107
  color: hsl(var(--popover)) !important;
104
108
  }
105
109
 
106
- .MuiTooltip-popper .MuiTooltip-arrow::before {
110
+ .MuiTooltip-tooltip.shuffle-mcp-scope .MuiTooltip-arrow::before {
107
111
  border: 1px solid hsl(var(--border)) !important;
108
112
  box-sizing: border-box;
109
113
  }
@@ -141,40 +145,40 @@ body:not(.dark) .shuffle-mcp-scope:not(.dark),
141
145
  --singul-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
142
146
  --singul-input-padding: 12px 16px;
143
147
  --singul-input-padding-right: 48px;
144
- --singul-input-border: 1px solid rgba(255, 255, 255, 0.08);
148
+ --singul-input-border: 1px solid hsl(var(--border));
145
149
  --singul-input-border-radius: 10px;
146
- --singul-input-bg: #14161b;
147
- --singul-input-color: #f3f4f6;
150
+ --singul-input-bg: hsl(var(--input));
151
+ --singul-input-color: hsl(var(--foreground));
148
152
  --singul-input-font-size: 14px;
149
153
  --singul-input-line-height: 1.5;
150
154
  --singul-input-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
151
155
  --singul-input-focus-border: rgba(255, 102, 0, 0.55);
152
156
  --singul-input-focus-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15);
153
- --singul-placeholder-color: #6b7280;
154
- --singul-icon-color: #9ca3af;
155
- --singul-spinner-border: 2px solid rgba(255, 255, 255, 0.08);
157
+ --singul-placeholder-color: hsl(var(--muted-foreground));
158
+ --singul-icon-color: hsl(var(--muted-foreground));
159
+ --singul-spinner-border: 2px solid hsl(var(--border));
156
160
  --singul-spinner-border-top: 2px solid #FF6600;
157
- --singul-dropdown-bg: #14161b;
158
- --singul-dropdown-border: 1px solid rgba(255, 255, 255, 0.08);
161
+ --singul-dropdown-bg: hsl(var(--card));
162
+ --singul-dropdown-border: 1px solid hsl(var(--border));
159
163
  --singul-dropdown-border-radius: 10px;
160
164
  --singul-dropdown-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
161
165
  --singul-dropdown-max-height: 400px;
162
166
  --singul-item-padding: 12px 16px;
163
- --singul-item-border: 1px solid rgba(255, 255, 255, 0.06);
164
- --singul-item-hover-bg: rgba(255, 255, 255, 0.04);
167
+ --singul-item-border: 1px solid hsl(var(--border));
168
+ --singul-item-hover-bg: hsla(var(--primary) / 0.08);
165
169
  --singul-item-selected-bg: rgba(255, 102, 0, 0.12);
166
170
  --singul-item-selected-border: rgba(255, 102, 0, 0.55);
167
171
  --singul-app-icon-size: 40px;
168
- --singul-app-icon-border: 1px solid rgba(255, 255, 255, 0.08);
172
+ --singul-app-icon-border: 1px solid hsl(var(--border));
169
173
  --singul-app-icon-border-radius: 8px;
170
174
  --singul-app-name-font-weight: 600;
171
- --singul-app-name-color: #f3f4f6;
175
+ --singul-app-name-color: hsl(var(--foreground));
172
176
  --singul-app-name-font-size: 14px;
173
- --singul-app-description-color: #9ca3af;
177
+ --singul-app-description-color: hsl(var(--muted-foreground));
174
178
  --singul-app-description-font-size: 12px;
175
- --singul-app-category-bg: rgba(255, 255, 255, 0.06);
176
- --singul-app-category-color: #d1d5db;
177
- --singul-empty-state-color: #9ca3af;
179
+ --singul-app-category-bg: hsl(var(--muted));
180
+ --singul-app-category-color: hsl(var(--muted-foreground));
181
+ --singul-empty-state-color: hsl(var(--muted-foreground));
178
182
  --singul-empty-state-font-size: 14px;
179
183
  --singul-grid-gap: 12px;
180
184
  --singul-grid-columns: 3;
@@ -513,8 +517,7 @@ body:not(.dark) .shuffle-mcp-scope:not(.dark),
513
517
  }
514
518
 
515
519
  .singul-dot-inactive {
516
- background-color: #f59e0b;
517
- box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
520
+ display: none;
518
521
  }
519
522
 
520
523
  /* Item border colors based on auth state */
@@ -558,7 +561,7 @@ body:not(.dark) .shuffle-mcp-scope:not(.dark),
558
561
  flex-shrink: 0;
559
562
  width: 18px;
560
563
  height: 18px;
561
- border: 2px solid rgba(255, 255, 255, 0.2);
564
+ border: 2px solid hsl(var(--border));
562
565
  border-radius: 4px;
563
566
  display: flex;
564
567
  align-items: center;
@@ -683,6 +686,7 @@ body:not(.dark) .shuffle-mcp-scope:not(.dark),
683
686
  border-radius: 4px;
684
687
  background: rgba(156, 90, 242, 0.15);
685
688
  color: #B584F5;
689
+ border: 1px solid rgba(156, 90, 242, 0.3);
686
690
  font-size: 9px;
687
691
  font-weight: 700;
688
692
  text-transform: uppercase;
@@ -690,6 +694,13 @@ body:not(.dark) .shuffle-mcp-scope:not(.dark),
690
694
  vertical-align: middle;
691
695
  }
692
696
 
697
+ :root:not(.dark) .singul-private-badge,
698
+ .light .singul-private-badge {
699
+ background: rgba(124, 58, 237, 0.12);
700
+ color: #7c3aed;
701
+ border-color: rgba(124, 58, 237, 0.3);
702
+ }
703
+
693
704
  /* ============================================================
694
705
  * Built-in App Auth Drawer (default click behavior)
695
706
  * ============================================================ */
@@ -994,3 +1005,85 @@ body:not(.dark) .shuffle-mcp-scope:not(.dark),
994
1005
  border-color: rgba(239, 68, 68, 0.25);
995
1006
  color: #fca5a5;
996
1007
  }
1008
+
1009
+ :root:not(.dark) .singul-drawer,
1010
+ .light .singul-drawer {
1011
+ background: hsl(var(--card));
1012
+ color: hsl(var(--foreground));
1013
+ border-left: 1px solid hsl(var(--border));
1014
+ }
1015
+
1016
+ :root:not(.dark) .singul-drawer-header,
1017
+ .light .singul-drawer-header {
1018
+ border-bottom: 1px solid hsl(var(--border));
1019
+ }
1020
+
1021
+ :root:not(.dark) .singul-drawer-title,
1022
+ .light .singul-drawer-title,
1023
+ :root:not(.dark) .singul-drawer-section-title,
1024
+ .light .singul-drawer-section-title,
1025
+ :root:not(.dark) .singul-drawer-auth-label,
1026
+ .light .singul-drawer-auth-label {
1027
+ color: hsl(var(--foreground));
1028
+ }
1029
+
1030
+ :root:not(.dark) .singul-drawer-subtitle,
1031
+ .light .singul-drawer-subtitle,
1032
+ :root:not(.dark) .singul-drawer-desc,
1033
+ .light .singul-drawer-desc,
1034
+ :root:not(.dark) .singul-drawer-count,
1035
+ .light .singul-drawer-count,
1036
+ :root:not(.dark) .singul-drawer-close,
1037
+ .light .singul-drawer-close {
1038
+ color: hsl(var(--muted-foreground));
1039
+ }
1040
+
1041
+ :root:not(.dark) .singul-drawer-auth-item,
1042
+ .light .singul-drawer-auth-item {
1043
+ border-color: hsl(var(--border));
1044
+ background: hsl(var(--muted) / 0.3);
1045
+ }
1046
+
1047
+ :root:not(.dark) .singul-auth-input,
1048
+ .light .singul-auth-input {
1049
+ background: hsl(var(--input));
1050
+ border-color: hsl(var(--border));
1051
+ color: hsl(var(--foreground));
1052
+ }
1053
+
1054
+ :root:not(.dark) .singul-auth-field-label,
1055
+ .light .singul-auth-field-label {
1056
+ color: hsl(var(--foreground));
1057
+ }
1058
+
1059
+ :root:not(.dark) .singul-auth-tab,
1060
+ .light .singul-auth-tab {
1061
+ background: hsl(var(--muted) / 0.4);
1062
+ border-color: hsl(var(--border));
1063
+ color: hsl(var(--foreground));
1064
+ }
1065
+
1066
+ :root:not(.dark) .singul-auth-tab-active,
1067
+ .light .singul-auth-tab-active {
1068
+ background: hsla(var(--primary) / 0.1);
1069
+ border-color: hsl(var(--primary));
1070
+ color: hsl(var(--primary));
1071
+ }
1072
+
1073
+ :root:not(.dark) .singul-mcp-input-wrap,
1074
+ .light .singul-mcp-input-wrap {
1075
+ background: hsl(var(--input));
1076
+ border-color: hsl(var(--border));
1077
+ }
1078
+
1079
+ :root:not(.dark) .singul-mcp-input,
1080
+ .light .singul-mcp-input {
1081
+ color: hsl(var(--foreground));
1082
+ }
1083
+
1084
+ :root:not(.dark) .singul-mcp-result,
1085
+ .light .singul-mcp-result {
1086
+ background: hsl(var(--muted) / 0.3);
1087
+ border-color: hsl(var(--border));
1088
+ color: hsl(var(--foreground));
1089
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shuffleio/shuffle-mcps",
3
- "version": "0.0.59",
3
+ "version": "0.0.63",
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": {
@@ -52,7 +52,13 @@
52
52
  "@emotion/react": ">=11",
53
53
  "@emotion/styled": ">=11",
54
54
  "lucide-react": ">=0.300.0",
55
- "react-router-dom": ">=6"
55
+ "react-router-dom": ">=6",
56
+ "@tanstack/react-query": ">=5"
57
+ },
58
+ "peerDependenciesMeta": {
59
+ "@tanstack/react-query": {
60
+ "optional": true
61
+ }
56
62
  },
57
63
  "dependencies": {
58
64
  "algoliasearch": "^5.0.0",
@@ -67,6 +73,7 @@
67
73
  "devDependencies": {
68
74
  "@types/react": "^18.0.0",
69
75
  "@types/node": "^20.0.0",
76
+ "@tanstack/react-query": "^5.0.0",
70
77
  "tsup": "^8.0.0",
71
78
  "typescript": "^5.0.0"
72
79
  }