@shuffleio/shuffle-mcps 0.0.22 → 0.0.23

package/dist/index.d.mts

@@ -62,6 +62,10 @@ interface ShuffleHostProps {
     globalUrl?: string;
     /** Userdata returned by `GET /api/v1/getinfo` (active_org, support, etc.). */
     userdata?: any;
+    /** Optional theme mode forwarded through composed Shuffle surfaces. */
+    theme?: 'light' | 'dark' | 'system';
+    /** Legacy theme alias forwarded through composed Shuffle surfaces. */
+    colorMode?: 'light' | 'dark' | 'auto';
 }
 
 /**
@@ -182,6 +186,8 @@ interface ShuffleMCPProps extends ShuffleHostProps {
     showCheckbox?: boolean;
     multiSelect?: boolean;
     selectedApps?: AlgoliaSearchApp[];
+    /** Disable automatic selection of already validated apps. Useful for explicit user pickers. */
+    disableAutoSelectValidatedApps?: boolean;
     preventDefault?: boolean;
     /** When true, results show inline on the page instead of as a dropdown */
     inline?: boolean;
@@ -505,6 +511,10 @@ interface AgentUIProps {
     apiBaseUrl?: string;
     /** Optional Shuffle Org ID — sent as the `Org-Id` header on every call. */
     orgId?: string;
+    /** Optional theme mode forwarded to nested Shuffle drawers. */
+    theme?: 'light' | 'dark' | 'system';
+    /** Legacy theme alias forwarded to nested Shuffle drawers. */
+    colorMode?: 'light' | 'dark' | 'auto';
     /** Optional className forwarded to the root container. */
     className?: string;
     /** Style overrides merged into the root container sx. */

package/dist/index.d.ts

@@ -62,6 +62,10 @@ interface ShuffleHostProps {
     globalUrl?: string;
     /** Userdata returned by `GET /api/v1/getinfo` (active_org, support, etc.). */
     userdata?: any;
+    /** Optional theme mode forwarded through composed Shuffle surfaces. */
+    theme?: 'light' | 'dark' | 'system';
+    /** Legacy theme alias forwarded through composed Shuffle surfaces. */
+    colorMode?: 'light' | 'dark' | 'auto';
 }
 
 /**
@@ -182,6 +186,8 @@ interface ShuffleMCPProps extends ShuffleHostProps {
     showCheckbox?: boolean;
     multiSelect?: boolean;
     selectedApps?: AlgoliaSearchApp[];
+    /** Disable automatic selection of already validated apps. Useful for explicit user pickers. */
+    disableAutoSelectValidatedApps?: boolean;
     preventDefault?: boolean;
     /** When true, results show inline on the page instead of as a dropdown */
     inline?: boolean;
@@ -505,6 +511,10 @@ interface AgentUIProps {
     apiBaseUrl?: string;
     /** Optional Shuffle Org ID — sent as the `Org-Id` header on every call. */
     orgId?: string;
+    /** Optional theme mode forwarded to nested Shuffle drawers. */
+    theme?: 'light' | 'dark' | 'system';
+    /** Legacy theme alias forwarded to nested Shuffle drawers. */
+    colorMode?: 'light' | 'dark' | 'auto';
     /** Optional className forwarded to the root container. */
     className?: string;
     /** Style overrides merged into the root container sx. */

package/dist/index.js

@@ -6235,6 +6235,7 @@ var ShuffleMCP = import_react12.default.forwardRef(({
   showCheckbox = false,
   multiSelect = false,
   selectedApps = EMPTY_SELECTED_APPS,
+  disableAutoSelectValidatedApps = false,
   preventDefault = false,
   inline = false,
   initialQuery = "",
@@ -6345,6 +6346,7 @@ var ShuffleMCP = import_react12.default.forwardRef(({
     fetchPrivateApps();
   }, [apiKey, apiBaseUrl, privateAppsPath, disablePrivateApps, orgId]);
   (0, import_react12.useEffect)(() => {
+    if (disableAutoSelectValidatedApps) return;
     if (authenticatedApps.length > 0 && results.length > 0) {
       const validatedApps = authenticatedApps.filter((auth) => auth.validation?.valid);
       const appsToAutoSelect = results.filter(
@@ -6363,7 +6365,7 @@ var ShuffleMCP = import_react12.default.forwardRef(({
         }
       }
     }
-  }, [authenticatedApps, results]);
+  }, [authenticatedApps, results, disableAutoSelectValidatedApps]);
   (0, import_react12.useEffect)(() => {
     if (externalAuthenticatedApps) {
       setAuthenticatedApps(externalAuthenticatedApps);
@@ -6861,8 +6863,12 @@ function AppSearchDrawer({
   highlightDelayMs = 5e3,
   multiSelect = false,
   selectedApps,
-  onSelectionChange
+  onSelectionChange,
+  globalUrl,
+  theme,
+  colorMode
 }) {
+  const themeScope = useShuffleMcpTheme();
   const [detailAppName, setDetailAppName] = (0, import_react13.useState)(null);
   const [detailAppId, setDetailAppId] = (0, import_react13.useState)(null);
   const [highlightActive, setHighlightActive] = (0, import_react13.useState)(false);
@@ -6948,6 +6954,7 @@ function AppSearchDrawer({
         anchor,
         open: open && detailAppName === null,
         onClose: handleClose,
+        slotProps: { paper: { className: themeScope?.scopeClassName } },
         sx: {
           zIndex: 9999,
           "& .MuiDrawer-paper": {
@@ -7101,7 +7108,10 @@ function AppSearchDrawer({
                       ShuffleMCP2,
                       {
                         apiKey: API_CONFIG.apiKey || void 0,
-                        apiBaseUrl: API_CONFIG.baseUrl,
+                        apiBaseUrl: globalUrl || API_CONFIG.baseUrl,
+                        globalUrl,
+                        theme,
+                        colorMode,
                         placeholder: initialQuery ? `Search ${initialQuery} integrations...` : "Search integrations...",
                         layout: "grid",
                         gridColumns: 2,
@@ -7113,8 +7123,17 @@ function AppSearchDrawer({
                         showCheckbox: multiSelect,
                         multiSelect,
                         selectedApps: multiSelect ? projectedSelectedApps : void 0,
+                        disableAutoSelectValidatedApps: multiSelect,
                         preventDefault: true,
                         onAppSelected: handleAppSelected,
+                        onSelectionChange: multiSelect ? (next) => {
+                          onSelectionChange?.(next.map((app) => ({
+                            name: app.name,
+                            id: app.objectID || null,
+                            icon: app.image_url || "",
+                            categories: app.categories || []
+                          })));
+                        } : void 0,
                         pinnedApps: pinnedApps?.map((p) => ({
                           name: p.name,
                           image_url: p.image_url,
@@ -7160,6 +7179,9 @@ function AppSearchDrawer({
         appId: detailAppId,
         anchor,
         width,
+        globalUrl,
+        theme,
+        colorMode,
         onRefresh: onClose,
         onAddToCanvas
       }
@@ -9166,6 +9188,8 @@ var AgentUI = ({
   apiKey,
   apiBaseUrl,
   orgId,
+  theme,
+  colorMode,
   className,
   sx,
   contentSx
@@ -11715,6 +11739,9 @@ var AgentUI = ({
                 subtitle: appPickerSubtitle,
                 multiSelect: true,
                 selectedApps: chosenApps.map((a) => ({ name: a.name, id: a.id || null, icon: a.icon })),
+                globalUrl: apiBaseUrl,
+                theme,
+                colorMode,
                 onSelectionChange: (next) => {
                   setChosenApps(
                     next.map((app) => {
@@ -11738,7 +11765,10 @@ var AgentUI = ({
                 onClose: () => setAuthDrawerApp(null),
                 appName: authDrawerApp?.name || null,
                 appId: authDrawerApp?.id || null,
-                activeOrgId: orgId || null
+                activeOrgId: orgId || null,
+                globalUrl: apiBaseUrl,
+                theme,
+                colorMode
               }
             )
           ]
@@ -11776,6 +11806,7 @@ var AgentRunDrawer = ({
   globalUrl
 }) => {
   useSyncHostBaseUrl(globalUrl);
+  const themeScope = useShuffleMcpTheme();
   const [activeTab, setActiveTab] = (0, import_react16.useState)(initialTab);
   const prevOpenRef = (0, import_react16.useRef)(open);
   (0, import_react16.useEffect)(() => {
@@ -11805,7 +11836,7 @@ var AgentRunDrawer = ({
       onClose,
       slotProps: {
         paper: {
-          className,
+          className: [themeScope?.scopeClassName, className].filter(Boolean).join(" ") || void 0,
           sx: [
             {
               width: { xs: "100%", sm: width },
@@ -12729,8 +12760,11 @@ var AgentExecutionDrawer = ({
   headerSx,
   bodySx,
   topBanner,
-  onSchedule
+  onSchedule,
+  theme,
+  colorMode
 }) => {
+  const themeScope = useShuffleMcpTheme();
   const statusKey = (run?.status || "").toUpperCase();
   const cfg = STATUS_CONFIG[statusKey] || STATUS_CONFIG.WAITING;
   const duration = run ? formatDuration(run) : "";
@@ -12742,7 +12776,7 @@ var AgentExecutionDrawer = ({
       onClose,
       slotProps: {
         paper: {
-          className,
+          className: [themeScope?.scopeClassName, className].filter(Boolean).join(" ") || void 0,
           sx: [
             {
               width: { xs: "100%", sm: width },
@@ -12878,7 +12912,9 @@ var AgentExecutionDrawer = ({
               apiKey,
               apiBaseUrl,
               orgId,
-              onSchedule
+              onSchedule,
+              theme,
+              colorMode
             },
             run.execution_id
           ) : null
@@ -12904,7 +12940,9 @@ var AgentsView = ({
   isLoaded,
   isLoggedIn,
   userdata,
-  serverside
+  serverside,
+  theme,
+  colorMode
 }) => {
   useSyncHostBaseUrl(globalUrl);
   const [selectedRun, setSelectedRun] = (0, import_react18.useState)(null);
@@ -13030,7 +13068,9 @@ var AgentsView = ({
           submitLabel: editing ? "Save" : void 0,
           submitTooltip: editing ? "\u2318+Enter to save" : void 0,
           disableSchedule: Boolean(editing),
-          disableScheduleTooltip: editing ? "Scheduling is disabled while editing an existing schedule" : void 0
+          disableScheduleTooltip: editing ? "Scheduling is disabled while editing an existing schedule" : void 0,
+          theme,
+          colorMode
         },
         prefill.key
       ),
@@ -13050,7 +13090,9 @@ var AgentsView = ({
         onClose: () => setSelectedRun(null),
         run: selectedRun,
         apiBaseUrl: globalUrl,
-        onSchedule
+        onSchedule,
+        theme,
+        colorMode
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -13062,7 +13104,9 @@ var AgentsView = ({
         globalUrl,
         localLLMSlot: effectiveLocalLLMSlot,
         permissionsSlot,
-        agentUIProps: { onSchedule, apiBaseUrl: globalUrl }
+        theme,
+        colorMode,
+        agentUIProps: { onSchedule, apiBaseUrl: globalUrl, theme, colorMode }
       }
     )
   ] });
@@ -13305,7 +13349,7 @@ var withMcpTheme = (Inner, displayName) => {
   const Wrapped = ({ theme, colorMode, ...rest }) => import_react20.default.createElement(
     ShuffleMcpThemeProvider,
     { mode: resolveMode(theme, colorMode) },
-    import_react20.default.createElement(Inner, { ...rest })
+    import_react20.default.createElement(Inner, { ...rest, theme, colorMode })
   );
   Wrapped.displayName = `ShuffleMCPs(${displayName})`;
   return Wrapped;
@@ -13315,7 +13359,7 @@ var withMcpThemeRef = (Inner, displayName) => {
     ({ theme, colorMode, ...rest }, ref) => import_react20.default.createElement(
       ShuffleMcpThemeProvider,
       { mode: resolveMode(theme, colorMode) },
-      import_react20.default.createElement(Inner, { ...rest, ref })
+      import_react20.default.createElement(Inner, { ...rest, theme, colorMode, ref })
     )
   );
   Wrapped.displayName = `ShuffleMCPs(${displayName})`;

package/dist/index.mjs

@@ -5872,6 +5872,7 @@ var ShuffleMCP = React3.forwardRef(({
   showCheckbox = false,
   multiSelect = false,
   selectedApps = EMPTY_SELECTED_APPS,
+  disableAutoSelectValidatedApps = false,
   preventDefault = false,
   inline = false,
   initialQuery = "",
@@ -5982,6 +5983,7 @@ var ShuffleMCP = React3.forwardRef(({
     fetchPrivateApps();
   }, [apiKey, apiBaseUrl, privateAppsPath, disablePrivateApps, orgId]);
   useEffect8(() => {
+    if (disableAutoSelectValidatedApps) return;
     if (authenticatedApps.length > 0 && results.length > 0) {
       const validatedApps = authenticatedApps.filter((auth) => auth.validation?.valid);
       const appsToAutoSelect = results.filter(
@@ -6000,7 +6002,7 @@ var ShuffleMCP = React3.forwardRef(({
         }
       }
     }
-  }, [authenticatedApps, results]);
+  }, [authenticatedApps, results, disableAutoSelectValidatedApps]);
   useEffect8(() => {
     if (externalAuthenticatedApps) {
       setAuthenticatedApps(externalAuthenticatedApps);
@@ -6499,8 +6501,12 @@ function AppSearchDrawer({
   highlightDelayMs = 5e3,
   multiSelect = false,
   selectedApps,
-  onSelectionChange
+  onSelectionChange,
+  globalUrl,
+  theme,
+  colorMode
 }) {
+  const themeScope = useShuffleMcpTheme();
   const [detailAppName, setDetailAppName] = useState10(null);
   const [detailAppId, setDetailAppId] = useState10(null);
   const [highlightActive, setHighlightActive] = useState10(false);
@@ -6586,6 +6592,7 @@ function AppSearchDrawer({
         anchor,
         open: open && detailAppName === null,
         onClose: handleClose,
+        slotProps: { paper: { className: themeScope?.scopeClassName } },
         sx: {
           zIndex: 9999,
           "& .MuiDrawer-paper": {
@@ -6739,7 +6746,10 @@ function AppSearchDrawer({
                       ShuffleMCP2,
                       {
                         apiKey: API_CONFIG.apiKey || void 0,
-                        apiBaseUrl: API_CONFIG.baseUrl,
+                        apiBaseUrl: globalUrl || API_CONFIG.baseUrl,
+                        globalUrl,
+                        theme,
+                        colorMode,
                         placeholder: initialQuery ? `Search ${initialQuery} integrations...` : "Search integrations...",
                         layout: "grid",
                         gridColumns: 2,
@@ -6751,8 +6761,17 @@ function AppSearchDrawer({
                         showCheckbox: multiSelect,
                         multiSelect,
                         selectedApps: multiSelect ? projectedSelectedApps : void 0,
+                        disableAutoSelectValidatedApps: multiSelect,
                         preventDefault: true,
                         onAppSelected: handleAppSelected,
+                        onSelectionChange: multiSelect ? (next) => {
+                          onSelectionChange?.(next.map((app) => ({
+                            name: app.name,
+                            id: app.objectID || null,
+                            icon: app.image_url || "",
+                            categories: app.categories || []
+                          })));
+                        } : void 0,
                         pinnedApps: pinnedApps?.map((p) => ({
                           name: p.name,
                           image_url: p.image_url,
@@ -6798,6 +6817,9 @@ function AppSearchDrawer({
         appId: detailAppId,
         anchor,
         width,
+        globalUrl,
+        theme,
+        colorMode,
         onRefresh: onClose,
         onAddToCanvas
       }
@@ -8836,6 +8858,8 @@ var AgentUI = ({
   apiKey,
   apiBaseUrl,
   orgId,
+  theme,
+  colorMode,
   className,
   sx,
   contentSx
@@ -11385,6 +11409,9 @@ var AgentUI = ({
                 subtitle: appPickerSubtitle,
                 multiSelect: true,
                 selectedApps: chosenApps.map((a) => ({ name: a.name, id: a.id || null, icon: a.icon })),
+                globalUrl: apiBaseUrl,
+                theme,
+                colorMode,
                 onSelectionChange: (next) => {
                   setChosenApps(
                     next.map((app) => {
@@ -11408,7 +11435,10 @@ var AgentUI = ({
                 onClose: () => setAuthDrawerApp(null),
                 appName: authDrawerApp?.name || null,
                 appId: authDrawerApp?.id || null,
-                activeOrgId: orgId || null
+                activeOrgId: orgId || null,
+                globalUrl: apiBaseUrl,
+                theme,
+                colorMode
               }
             )
           ]
@@ -11459,6 +11489,7 @@ var AgentRunDrawer = ({
   globalUrl
 }) => {
   useSyncHostBaseUrl(globalUrl);
+  const themeScope = useShuffleMcpTheme();
   const [activeTab, setActiveTab] = useState13(initialTab);
   const prevOpenRef = useRef9(open);
   useEffect12(() => {
@@ -11488,7 +11519,7 @@ var AgentRunDrawer = ({
       onClose,
       slotProps: {
         paper: {
-          className,
+          className: [themeScope?.scopeClassName, className].filter(Boolean).join(" ") || void 0,
           sx: [
             {
               width: { xs: "100%", sm: width },
@@ -12441,8 +12472,11 @@ var AgentExecutionDrawer = ({
   headerSx,
   bodySx,
   topBanner,
-  onSchedule
+  onSchedule,
+  theme,
+  colorMode
 }) => {
+  const themeScope = useShuffleMcpTheme();
   const statusKey = (run?.status || "").toUpperCase();
   const cfg = STATUS_CONFIG[statusKey] || STATUS_CONFIG.WAITING;
   const duration = run ? formatDuration(run) : "";
@@ -12454,7 +12488,7 @@ var AgentExecutionDrawer = ({
       onClose,
       slotProps: {
         paper: {
-          className,
+          className: [themeScope?.scopeClassName, className].filter(Boolean).join(" ") || void 0,
           sx: [
             {
               width: { xs: "100%", sm: width },
@@ -12590,7 +12624,9 @@ var AgentExecutionDrawer = ({
               apiKey,
               apiBaseUrl,
               orgId,
-              onSchedule
+              onSchedule,
+              theme,
+              colorMode
             },
             run.execution_id
           ) : null
@@ -12616,7 +12652,9 @@ var AgentsView = ({
   isLoaded,
   isLoggedIn,
   userdata,
-  serverside
+  serverside,
+  theme,
+  colorMode
 }) => {
   useSyncHostBaseUrl(globalUrl);
   const [selectedRun, setSelectedRun] = useState15(null);
@@ -12742,7 +12780,9 @@ var AgentsView = ({
           submitLabel: editing ? "Save" : void 0,
           submitTooltip: editing ? "\u2318+Enter to save" : void 0,
           disableSchedule: Boolean(editing),
-          disableScheduleTooltip: editing ? "Scheduling is disabled while editing an existing schedule" : void 0
+          disableScheduleTooltip: editing ? "Scheduling is disabled while editing an existing schedule" : void 0,
+          theme,
+          colorMode
         },
         prefill.key
       ),
@@ -12762,7 +12802,9 @@ var AgentsView = ({
         onClose: () => setSelectedRun(null),
         run: selectedRun,
         apiBaseUrl: globalUrl,
-        onSchedule
+        onSchedule,
+        theme,
+        colorMode
       }
     ),
     /* @__PURE__ */ jsx24(
@@ -12774,7 +12816,9 @@ var AgentsView = ({
         globalUrl,
         localLLMSlot: effectiveLocalLLMSlot,
         permissionsSlot,
-        agentUIProps: { onSchedule, apiBaseUrl: globalUrl }
+        theme,
+        colorMode,
+        agentUIProps: { onSchedule, apiBaseUrl: globalUrl, theme, colorMode }
       }
     )
   ] });
@@ -13010,7 +13054,7 @@ var withMcpTheme = (Inner, displayName) => {
   const Wrapped = ({ theme, colorMode, ...rest }) => React5.createElement(
     ShuffleMcpThemeProvider,
     { mode: resolveMode(theme, colorMode) },
-    React5.createElement(Inner, { ...rest })
+    React5.createElement(Inner, { ...rest, theme, colorMode })
   );
   Wrapped.displayName = `ShuffleMCPs(${displayName})`;
   return Wrapped;
@@ -13020,7 +13064,7 @@ var withMcpThemeRef = (Inner, displayName) => {
     ({ theme, colorMode, ...rest }, ref) => React5.createElement(
       ShuffleMcpThemeProvider,
       { mode: resolveMode(theme, colorMode) },
-      React5.createElement(Inner, { ...rest, ref })
+      React5.createElement(Inner, { ...rest, theme, colorMode, ref })
     )
   );
   Wrapped.displayName = `ShuffleMCPs(${displayName})`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuffleio/shuffle-mcps",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "Turn 3,000+ SaaS tools into MCP servers your agents can use. Headless React component for search, selection, and OAuth handoff.",
   "license": "MIT",
   "repository": {