@shuffleio/shuffle-mcps 0.0.17 → 0.0.18

package/dist/index.mjs

@@ -20,6 +20,7 @@ import {
 
 // index.ts
 import "./shuffle-mcp-CN72CJJQ.css";
+import React5 from "react";
 
 // ShuffleMcpThemeProvider.tsx
 import React from "react";
@@ -106,7 +107,7 @@ var useHtmlDarkClass = (enabled) => {
 };
 var ShuffleMcpThemeProvider = ({
   children,
-  mode = "auto"
+  mode = "dark"
 }) => {
   const parent = useMuiTheme();
   const htmlIsDark = useHtmlDarkClass(mode === "auto");
@@ -126,10 +127,11 @@ var ShuffleMcpThemeProvider = ({
     [parent, effectiveDark]
   );
   const tree = /* @__PURE__ */ jsx(ThemeProvider, { theme: merged, children });
+  const scopeClassName = mode === "light" ? "shuffle-mcp-scope" : "shuffle-mcp-scope dark";
   if (mode === "light" || mode === "dark") {
-    return /* @__PURE__ */ jsx("div", { className: mode === "dark" ? "dark" : "", "data-shuffle-mode": mode, children: tree });
+    return /* @__PURE__ */ jsx("div", { className: scopeClassName, "data-shuffle-mode": mode, "data-shuffle-mcp-root": true, children: tree });
   }
-  return tree;
+  return /* @__PURE__ */ jsx("div", { className: "shuffle-mcp-scope", "data-shuffle-mode": "auto", "data-shuffle-mcp-root": true, children: tree });
 };
 
 // ShuffleMCP.tsx
@@ -5588,19 +5590,32 @@ import "./shuffle-mcp-CN72CJJQ.css";
 import * as React2 from "react";
 import { motion as motion7, LayoutGroup } from "framer-motion";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-var cn = (...inputs) => inputs.filter(Boolean).join(" ");
-var sizeClasses = {
+var SIZE = {
   sm: {
-    container: "p-0.5 text-[11px]",
-    item: "px-2.5 py-1 gap-1.5",
-    count: "min-w-[16px] h-[16px] px-1 text-[10px]",
-    divider: "h-4 mx-0.5"
+    containerPadding: "2px",
+    fontSize: "11px",
+    itemPaddingY: "4px",
+    itemPaddingX: "10px",
+    itemGap: "6px",
+    countMin: "16px",
+    countH: "16px",
+    countPx: "4px",
+    countFs: "10px",
+    dividerH: "16px",
+    dividerMx: "2px"
   },
   md: {
-    container: "p-1 text-xs",
-    item: "px-3 py-1.5 gap-1.5",
-    count: "min-w-[18px] h-[18px] px-1.5 text-[10px]",
-    divider: "h-5 mx-1"
+    containerPadding: "4px",
+    fontSize: "12px",
+    itemPaddingY: "6px",
+    itemPaddingX: "12px",
+    itemGap: "6px",
+    countMin: "18px",
+    countH: "18px",
+    countPx: "6px",
+    countFs: "10px",
+    dividerH: "20px",
+    dividerMx: "4px"
   }
 };
 var uid = 0;
@@ -5624,25 +5639,36 @@ function SegmentedControl({
 }) {
   const autoId = useUniqueId("segmented");
   const groupId = layoutId ?? autoId;
-  const s = sizeClasses[size];
+  const s = SIZE[size];
   return /* @__PURE__ */ jsx13(LayoutGroup, { id: groupId, children: /* @__PURE__ */ jsx13(
     "div",
     {
       role: "tablist",
       "aria-label": ariaLabel,
-      className: cn(
-        "inline-flex items-center gap-0.5 rounded-full",
-        variant === "outline" ? "border border-border bg-transparent" : "border border-transparent bg-muted/40",
-        s.container,
-        className
-      ),
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "2px",
+        borderRadius: 9999,
+        padding: s.containerPadding,
+        fontSize: s.fontSize,
+        border: variant === "outline" ? "1px solid hsl(var(--border))" : "1px solid transparent",
+        background: variant === "outline" ? "transparent" : "hsl(var(--muted) / 0.4)"
+      },
       children: options.map((opt, i) => {
         if (opt.type === "divider") {
           return /* @__PURE__ */ jsx13(
             "span",
             {
               "aria-hidden": true,
-              className: cn("w-px bg-border self-center", s.divider)
+              style: {
+                width: 1,
+                height: s.dividerH,
+                margin: `0 ${s.dividerMx}`,
+                background: "hsl(var(--border))",
+                alignSelf: "center"
+              }
             },
             opt.key ?? `divider-${i}`
           );
@@ -5664,20 +5690,46 @@ function SegmentedControl({
               if (isAction) opt.onClick();
               else onChange(opt.value);
             },
-            className: cn(
-              "relative inline-flex items-center rounded-full font-medium",
-              "transition-colors duration-300",
-              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              s.item,
-              active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
-              opt.disabled && "opacity-50 cursor-not-allowed"
-            ),
+            style: {
+              position: "relative",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: s.itemGap,
+              padding: `${s.itemPaddingY} ${s.itemPaddingX}`,
+              borderRadius: 9999,
+              fontWeight: 500,
+              fontSize: s.fontSize,
+              background: "transparent",
+              border: "none",
+              cursor: opt.disabled ? "not-allowed" : "pointer",
+              color: active ? "hsl(var(--foreground))" : "hsl(var(--muted-foreground))",
+              opacity: opt.disabled ? 0.5 : 1,
+              transition: "color 200ms ease",
+              outline: "none",
+              fontFamily: "inherit"
+            },
+            onMouseEnter: (e) => {
+              if (!active && !opt.disabled) {
+                e.currentTarget.style.color = "hsl(var(--foreground))";
+              }
+            },
+            onMouseLeave: (e) => {
+              if (!active && !opt.disabled) {
+                e.currentTarget.style.color = "hsl(var(--muted-foreground))";
+              }
+            },
             children: [
               active && /* @__PURE__ */ jsx13(
                 motion7.span,
                 {
                   layoutId: `${groupId}-pill`,
-                  className: "absolute inset-0 rounded-full bg-muted border border-border",
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    borderRadius: 9999,
+                    background: "hsl(var(--muted))",
+                    border: "1px solid hsl(var(--border))"
+                  },
                   initial: false,
                   transition: {
                     type: "spring",
@@ -5686,15 +5738,39 @@ function SegmentedControl({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx13("span", { className: "relative z-10 inline-flex items-center gap-1.5", children: opt.label }),
+              /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  style: {
+                    position: "relative",
+                    zIndex: 1,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: s.itemGap
+                  },
+                  children: opt.label
+                }
+              ),
               !isAction && typeof opt.count === "number" && /* @__PURE__ */ jsx13(
                 "span",
                 {
-                  className: cn(
-                    "relative z-10 inline-flex items-center justify-center rounded-md font-semibold tabular-nums border border-border/60",
-                    s.count,
-                    active ? "bg-transparent text-foreground" : "bg-transparent text-muted-foreground"
-                  ),
+                  style: {
+                    position: "relative",
+                    zIndex: 1,
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minWidth: s.countMin,
+                    height: s.countH,
+                    padding: `0 ${s.countPx}`,
+                    fontSize: s.countFs,
+                    fontWeight: 600,
+                    fontVariantNumeric: "tabular-nums",
+                    borderRadius: 6,
+                    border: "1px solid hsl(var(--border) / 0.6)",
+                    color: active ? "hsl(var(--foreground))" : "hsl(var(--muted-foreground))",
+                    background: "transparent"
+                  },
                   children: opt.count
                 }
               )
@@ -6254,7 +6330,6 @@ var ShuffleMCP = React3.forwardRef(({
   );
 });
 ShuffleMCP.displayName = "ShuffleMCP";
-var ShuffleMCP_default = ShuffleMCP;
 
 // AppSearchDrawer.tsx
 import { useState as useState10, useEffect as useEffect9 } from "react";
@@ -6598,7 +6673,7 @@ function AppSearchDrawer({
                     transition: { duration: 0.2 },
                     style: { height: "100%", minHeight: 0 },
                     children: /* @__PURE__ */ jsx15(
-                      ShuffleMCP,
+                      ShuffleMCP2,
                       {
                         apiKey: API_CONFIG.apiKey || void 0,
                         apiBaseUrl: API_CONFIG.baseUrl,
@@ -6647,7 +6722,7 @@ function AppSearchDrawer({
       }
     ),
     /* @__PURE__ */ jsx15(
-      AppDetailDrawer,
+      AppDetailDrawer2,
       {
         open: open && detailAppName !== null,
         onClose: () => {
@@ -8679,6 +8754,8 @@ var AgentUI = ({
   appPickerLabel = "Select Apps",
   appPickerTitle = "Select Apps",
   appPickerSubtitle = "Pick the tools the agent is allowed to use for this run",
+  onChooseLLM,
+  hideChooseLLM = false,
   submitTooltip = "\u2318+Enter to send",
   submitIcon,
   submitOverride,
@@ -10531,15 +10608,25 @@ var AgentUI = ({
                     bgcolor: "hsl(var(--card))",
                     maxWidth: "100%"
                   }, children: [
-                    /* @__PURE__ */ jsx20(Tooltip9, { title: "Configure the local LLM used for this agent", children: /* @__PURE__ */ jsxs16(
+                    !hideChooseLLM && /* @__PURE__ */ jsx20(Tooltip9, { title: "Configure the local LLM used for this agent", children: /* @__PURE__ */ jsxs16(
                       Box14,
                       {
                         component: "button",
                         type: "button",
                         onClick: () => {
-                          if (typeof window !== "undefined") {
-                            window.dispatchEvent(
-                              new CustomEvent("agent-drawer-open", { detail: { tab: "localLLM" } })
+                          if (onChooseLLM) {
+                            onChooseLLM();
+                            return;
+                          }
+                          if (typeof window === "undefined") return;
+                          const evt = new CustomEvent("agent-drawer-open", {
+                            detail: { tab: "localLLM" },
+                            cancelable: true
+                          });
+                          const handled = window.dispatchEvent(evt);
+                          if (handled && !window.__shuffleAgentDrawerMounted) {
+                            console.warn(
+                              '[AgentUI] "Choose LLM" was clicked but no host handler is wired. Pass an `onChooseLLM` prop, mount the bundled `AgentRunDrawer`, or set `hideChooseLLM` to remove the chip.'
                             );
                           }
                         },
@@ -11315,6 +11402,13 @@ var AgentRunDrawer = ({
     if (open && !prevOpenRef.current) setActiveTab(initialTab);
     prevOpenRef.current = open;
   }, [open, initialTab]);
+  useEffect12(() => {
+    if (typeof window === "undefined") return;
+    window.__shuffleAgentDrawerMounted = (window.__shuffleAgentDrawerMounted || 0) + 1;
+    return () => {
+      window.__shuffleAgentDrawerMounted = Math.max(0, (window.__shuffleAgentDrawerMounted || 1) - 1);
+    };
+  }, []);
   const visibleTabs = TAB_ORDER.filter((t) => {
     if (t === "run") return true;
     if (t === "permissions") return !!permissionsSlot;
@@ -12448,7 +12542,7 @@ var AgentExecutionDrawer_default = AgentExecutionDrawer;
 import { useCallback as useCallback10, useState as useState15 } from "react";
 import { Box as Box18, Stack, Typography as Typography17 } from "@mui/material";
 import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
-var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn, userdata, serverside }) => {
+var AgentsView = ({ onSchedule, maxWidth = 820, onChooseLLM, hideChooseLLM, globalUrl, isLoaded, isLoggedIn, userdata, serverside }) => {
   useSyncHostBaseUrl(globalUrl);
   const [selectedRun, setSelectedRun] = useState15(null);
   const [agentView, setAgentView] = useState15("start");
@@ -12490,8 +12584,8 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
     },
     [editing]
   );
-  return /* @__PURE__ */ jsxs20(Box18, { sx: { minHeight: "100vh", width: "100%", px: { xs: 2, md: 4 }, pt: "5vh", pb: 6 }, children: [
-    /* @__PURE__ */ jsxs20(Stack, { spacing: 6, sx: { maxWidth, mx: "auto" }, children: [
+  return /* @__PURE__ */ jsxs20(Box18, { sx: { minHeight: "100%", width: "100%", px: { xs: 2, md: 4 }, pt: { xs: 3, md: "5vh" }, pb: 6, boxSizing: "border-box" }, children: [
+    /* @__PURE__ */ jsxs20(Stack, { spacing: 6, sx: { maxWidth, mx: "auto", width: "100%" }, children: [
       editing && /* @__PURE__ */ jsxs20(
         Box18,
         {
@@ -12538,6 +12632,8 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
           apiBaseUrl: globalUrl,
           onViewChange: setAgentView,
           onSchedule,
+          onChooseLLM,
+          hideChooseLLM,
           defaultInput: prefill.input,
           defaultApps: prefill.apps.length > 0 ? prefill.apps : void 0,
           submitOverride: editing ? handleSaveEdit : void 0,
@@ -12548,7 +12644,7 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
         },
         prefill.key
       ),
-      agentView === "start" && /* @__PURE__ */ jsx24(Box18, { sx: { pt: "12vh" }, children: /* @__PURE__ */ jsx24(
+      agentView === "start" && /* @__PURE__ */ jsx24(Box18, { sx: { pt: { xs: 4, md: "8vh" } }, children: /* @__PURE__ */ jsx24(
         AgentActivityList_default,
         {
           apiBaseUrl: globalUrl,
@@ -12789,23 +12885,61 @@ var UsageBar = ({
     ) })
   ] }) });
 };
+
+// index.ts
+var withMcpTheme = (Inner, displayName) => {
+  const Wrapped = ({ colorMode, ...rest }) => React5.createElement(
+    ShuffleMcpThemeProvider,
+    { mode: colorMode },
+    React5.createElement(Inner, { ...rest })
+  );
+  Wrapped.displayName = `ShuffleMCPs(${displayName})`;
+  return Wrapped;
+};
+var withMcpThemeRef = (Inner, displayName) => {
+  const Wrapped = React5.forwardRef(
+    ({ colorMode, ...rest }, ref) => React5.createElement(
+      ShuffleMcpThemeProvider,
+      { mode: colorMode },
+      React5.createElement(Inner, { ...rest, ref })
+    )
+  );
+  Wrapped.displayName = `ShuffleMCPs(${displayName})`;
+  return Wrapped;
+};
+var ShuffleMCP2 = withMcpThemeRef(ShuffleMCP, "ShuffleMCP");
+var index_default = ShuffleMCP2;
+var AppDetailDrawer2 = withMcpTheme(AppDetailDrawer, "AppDetailDrawer");
+var AppSearchDrawer2 = withMcpTheme(AppSearchDrawer, "AppSearchDrawer");
+var AiAgentPromptsEditor2 = withMcpTheme(AiAgentPromptsEditor_default, "AiAgentPromptsEditor");
+var ShufflePipelinesBanner2 = withMcpTheme(ShufflePipelinesBanner_default, "ShufflePipelinesBanner");
+var AppTitleHeader2 = withMcpTheme(AppTitleHeader, "AppTitleHeader");
+var AppAuthSection2 = withMcpTheme(AppAuthSection, "AppAuthSection");
+var TryMcpSection2 = withMcpTheme(TryMcpSection, "TryMcpSection");
+var SingulActionsPreview2 = withMcpTheme(SingulActionsPreview_default, "SingulActionsPreview");
+var AgentUI2 = withMcpTheme(AgentUI_default, "AgentUI");
+var AgentRunDrawer2 = withMcpTheme(AgentRunDrawer_default, "AgentRunDrawer");
+var AgentActivityList2 = withMcpTheme(AgentActivityList_default, "AgentActivityList");
+var AgentExecutionDrawer2 = withMcpTheme(AgentExecutionDrawer_default, "AgentExecutionDrawer");
+var AgentsView2 = withMcpTheme(AgentsView_default, "AgentsView");
+var AgentRunDiagnosisBanner2 = withMcpTheme(AgentRunDiagnosisBanner_default, "AgentRunDiagnosisBanner");
 export {
   API_CONFIG,
-  AgentActivityList_default as AgentActivityList,
-  AgentExecutionDrawer_default as AgentExecutionDrawer,
+  AgentActivityList2 as AgentActivityList,
+  AgentExecutionDrawer2 as AgentExecutionDrawer,
   AgentIcon_default as AgentIcon,
-  AgentRunDiagnosisBanner_default as AgentRunDiagnosisBanner,
-  AgentRunDrawer_default as AgentRunDrawer,
-  AgentUI_default as AgentUI,
-  AgentsView_default as AgentsView,
-  AiAgentPromptsEditor_default as AiAgentPromptsEditor,
+  AgentRunDiagnosisBanner2 as AgentRunDiagnosisBanner,
+  AgentRunDrawer2 as AgentRunDrawer,
+  AgentUI2 as AgentUI,
+  AgentsView2 as AgentsView,
+  AiAgentPromptsEditor2 as AiAgentPromptsEditor,
   AppAuthCard,
   AppAuthConfig,
-  AppAuthSection,
-  AppDetailDrawer,
+  AppAuthSection2 as AppAuthSection,
+  AppDetailDrawer2 as AppDetailDrawer,
   AppDetailProvider,
-  AppSearchDrawer,
-  AppTitleHeader,
+  AppSearchDrawer2 as AppSearchDrawer,
+  AppTitleHeader2 as AppTitleHeader,
   CASES_PATTERNS,
   COMMUNICATION_PATTERNS_NAMES,
   DATASTORE_CATEGORIES,
@@ -12815,15 +12949,15 @@ export {
   INGEST_TICKETS_WORKFLOW_NAME,
   IntegrationStatus,
   SIEM_PATTERNS,
-  ShuffleMCP,
+  ShuffleMCP2 as ShuffleMCP,
   ShuffleMcpThemeProvider,
-  ShufflePipelinesBanner_default as ShufflePipelinesBanner,
-  SingulActionsPreview_default as SingulActionsPreview,
+  ShufflePipelinesBanner2 as ShufflePipelinesBanner,
+  SingulActionsPreview2 as SingulActionsPreview,
   THREAT_INTEL_PATTERNS,
-  TryMcpSection,
+  TryMcpSection2 as TryMcpSection,
   UsageBar,
   VULN_SCANNER_PATTERNS,
-  ShuffleMCP_default as default,
+  index_default as default,
   deleteDatastoreItem,
   deleteDatastoreItems,
   diagnoseOutputWarning,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuffleio/shuffle-mcps",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "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": {