@shuffleio/shuffle-mcps 0.0.17 → 0.0.20

package/dist/index.mjs

@@ -20,12 +20,30 @@ import {
 
 // index.ts
 import "./shuffle-mcp-CN72CJJQ.css";
+import React5 from "react";
 
 // ShuffleMcpThemeProvider.tsx
 import React from "react";
 import { ThemeProvider, createTheme, useTheme as useMuiTheme } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
-var componentOverrides = {
+var readHtmlDarkClass = () => {
+  if (typeof document === "undefined") return false;
+  return document.documentElement.classList.contains("dark");
+};
+var useHtmlDarkClass = (enabled) => {
+  const [isDark, setIsDark] = React.useState(() => enabled ? readHtmlDarkClass() : false);
+  React.useEffect(() => {
+    if (!enabled || typeof document === "undefined") return;
+    setIsDark(readHtmlDarkClass());
+    const observer = new MutationObserver(() => setIsDark(readHtmlDarkClass()));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, [enabled]);
+  return isDark;
+};
+var ShuffleMcpThemeContext = React.createContext(null);
+var useShuffleMcpTheme = () => React.useContext(ShuffleMcpThemeContext);
+var buildComponentOverrides = (scopeClassName) => ({
   MuiTextField: { defaultProps: { size: "small" } },
   MuiButton: { defaultProps: { size: "small" } },
   MuiFormControl: { defaultProps: { size: "small" } },
@@ -67,7 +85,15 @@ var componentOverrides = {
       }
     }
   },
+  // ---- Portaled surfaces: stamp scopeClassName so HSL tokens resolve ----
+  MuiDrawer: {
+    defaultProps: { slotProps: { paper: { className: scopeClassName } } }
+  },
+  MuiDialog: {
+    defaultProps: { slotProps: { paper: { className: scopeClassName } } }
+  },
   MuiMenu: {
+    defaultProps: { slotProps: { paper: { className: scopeClassName } } },
     styleOverrides: {
       paper: {
         backgroundColor: "hsl(var(--popover))",
@@ -77,6 +103,7 @@ var componentOverrides = {
     }
   },
   MuiPopover: {
+    defaultProps: { slotProps: { paper: { className: scopeClassName } } },
     styleOverrides: {
       paper: {
         backgroundColor: "hsl(var(--popover))",
@@ -85,32 +112,23 @@ var componentOverrides = {
       }
     }
   },
+  MuiTooltip: {
+    defaultProps: { slotProps: { tooltip: { className: scopeClassName } } }
+  },
   MuiDivider: {
     styleOverrides: { root: { borderColor: "hsl(var(--border))" } }
   }
-};
-var readHtmlDarkClass = () => {
-  if (typeof document === "undefined") return false;
-  return document.documentElement.classList.contains("dark");
-};
-var useHtmlDarkClass = (enabled) => {
-  const [isDark, setIsDark] = React.useState(() => enabled ? readHtmlDarkClass() : false);
-  React.useEffect(() => {
-    if (!enabled || typeof document === "undefined") return;
-    setIsDark(readHtmlDarkClass());
-    const observer = new MutationObserver(() => setIsDark(readHtmlDarkClass()));
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
-    return () => observer.disconnect();
-  }, [enabled]);
-  return isDark;
-};
+});
 var ShuffleMcpThemeProvider = ({
   children,
   mode = "auto"
 }) => {
   const parent = useMuiTheme();
+  const parentCtx = useShuffleMcpTheme();
   const htmlIsDark = useHtmlDarkClass(mode === "auto");
   const effectiveDark = mode === "auto" ? htmlIsDark : mode === "dark";
+  const sameAsParent = parentCtx !== null && parentCtx.isDark === effectiveDark;
+  const scopeClassName = effectiveDark ? "shuffle-mcp-scope dark" : "shuffle-mcp-scope";
   const merged = React.useMemo(
     () => createTheme({
       ...parent,
@@ -120,16 +138,19 @@ var ShuffleMcpThemeProvider = ({
       },
       components: {
         ...parent.components,
-        ...componentOverrides
+        ...buildComponentOverrides(scopeClassName)
       }
     }),
-    [parent, effectiveDark]
+    [parent, effectiveDark, scopeClassName]
+  );
+  const ctxValue = React.useMemo(
+    () => ({ mode, isDark: effectiveDark, scopeClassName }),
+    [mode, effectiveDark, scopeClassName]
   );
-  const tree = /* @__PURE__ */ jsx(ThemeProvider, { theme: merged, children });
-  if (mode === "light" || mode === "dark") {
-    return /* @__PURE__ */ jsx("div", { className: mode === "dark" ? "dark" : "", "data-shuffle-mode": mode, children: tree });
+  if (sameAsParent) {
+    return /* @__PURE__ */ jsx(ShuffleMcpThemeContext.Provider, { value: ctxValue, children });
   }
-  return tree;
+  return /* @__PURE__ */ jsx(ShuffleMcpThemeContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(ThemeProvider, { theme: merged, children: /* @__PURE__ */ jsx("div", { className: scopeClassName, "data-shuffle-mode": mode, "data-shuffle-mcp-root": true, children }) }) });
 };
 
 // ShuffleMCP.tsx
@@ -5588,19 +5609,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 +5658,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 +5709,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 +5757,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 +6349,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 +6692,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 +6741,7 @@ function AppSearchDrawer({
       }
     ),
     /* @__PURE__ */ jsx15(
-      AppDetailDrawer,
+      AppDetailDrawer2,
       {
         open: open && detailAppName !== null,
         onClose: () => {
@@ -8679,6 +8773,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 +10627,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 +11421,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;
@@ -12445,10 +12558,22 @@ var AgentExecutionDrawer = ({
 var AgentExecutionDrawer_default = AgentExecutionDrawer;
 
 // AgentsView.tsx
-import { useCallback as useCallback10, useState as useState15 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo7, 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,
+  localLLMSlot,
+  permissionsSlot,
+  globalUrl,
+  isLoaded,
+  isLoggedIn,
+  userdata,
+  serverside
+}) => {
   useSyncHostBaseUrl(globalUrl);
   const [selectedRun, setSelectedRun] = useState15(null);
   const [agentView, setAgentView] = useState15("start");
@@ -12458,6 +12583,33 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
     key: 0
   });
   const [editing, setEditing] = useState15(null);
+  const [builtInDrawer, setBuiltInDrawer] = useState15({
+    open: false,
+    tab: "localLLM"
+  });
+  const effectiveLocalLLMSlot = useMemo7(
+    () => localLLMSlot ?? /* @__PURE__ */ jsxs20(Box18, { sx: { p: 3, color: "hsl(var(--muted-foreground))", fontSize: "0.85rem", lineHeight: 1.6 }, children: [
+      /* @__PURE__ */ jsx24(Typography17, { sx: { fontSize: "0.95rem", fontWeight: 600, color: "hsl(var(--foreground))", mb: 1 }, children: "Local LLM not configured" }),
+      "This host hasn't wired a Local LLM picker yet. Pass an",
+      " ",
+      /* @__PURE__ */ jsx24("code", { style: { fontFamily: "monospace" }, children: "onChooseLLM" }),
+      " handler or a",
+      " ",
+      /* @__PURE__ */ jsx24("code", { style: { fontFamily: "monospace" }, children: "localLLMSlot" }),
+      " to",
+      " ",
+      /* @__PURE__ */ jsx24("code", { style: { fontFamily: "monospace" }, children: "<AgentsView />" }),
+      " to render your own configuration UI here."
+    ] }),
+    [localLLMSlot]
+  );
+  const handleChooseLLM = useCallback10(() => {
+    if (onChooseLLM) {
+      onChooseLLM();
+      return;
+    }
+    setBuiltInDrawer({ open: true, tab: "localLLM" });
+  }, [onChooseLLM]);
   const handleEditWorkflow = useCallback10(
     ({ workflowId, name, prompt, apps }) => {
       setEditing({ workflowId, name });
@@ -12490,8 +12642,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 +12690,8 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
           apiBaseUrl: globalUrl,
           onViewChange: setAgentView,
           onSchedule,
+          onChooseLLM: handleChooseLLM,
+          hideChooseLLM,
           defaultInput: prefill.input,
           defaultApps: prefill.apps.length > 0 ? prefill.apps : void 0,
           submitOverride: editing ? handleSaveEdit : void 0,
@@ -12548,7 +12702,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,
@@ -12566,13 +12720,25 @@ var AgentsView = ({ onSchedule, maxWidth = 820, globalUrl, isLoaded, isLoggedIn,
         apiBaseUrl: globalUrl,
         onSchedule
       }
+    ),
+    /* @__PURE__ */ jsx24(
+      AgentRunDrawer_default,
+      {
+        open: builtInDrawer.open,
+        onClose: () => setBuiltInDrawer((s) => ({ ...s, open: false })),
+        initialTab: builtInDrawer.tab,
+        globalUrl,
+        localLLMSlot: effectiveLocalLLMSlot,
+        permissionsSlot,
+        agentUIProps: { onSchedule, apiBaseUrl: globalUrl }
+      }
     )
   ] });
 };
 var AgentsView_default = AgentsView;
 
 // useAppLookup.ts
-import { useEffect as useEffect14, useMemo as useMemo7, useState as useState16 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo8, useState as useState16 } from "react";
 var norm3 = (s) => s.toLowerCase().replace(/[\s_\-]+/g, "_");
 function useAppLookup(appName) {
   const [loading, setLoading] = useState16(false);
@@ -12665,13 +12831,13 @@ function useAppLookup(appName) {
       setLoading(false);
     })();
   }, [appName]);
-  const matchingEntries = useMemo7(() => {
+  const matchingEntries = useMemo8(() => {
     if (!appName) return [];
     return authenticatedApps.filter(
       (auth) => auth.app?.name && norm3(auth.app.name) === norm3(appName)
     );
   }, [appName, authenticatedApps]);
-  const image = useMemo7(() => {
+  const image = useMemo8(() => {
     if (info?.image) return info.image;
     for (const entry of matchingEntries) {
       const img = entry.app?.large_image || entry.large_image;
@@ -12679,7 +12845,7 @@ function useAppLookup(appName) {
     }
     return "";
   }, [info, matchingEntries]);
-  const algoliaApp = useMemo7(() => {
+  const algoliaApp = useMemo8(() => {
     if (!appName) return null;
     return {
       objectID: algoliaId || appName,
@@ -12789,23 +12955,66 @@ var UsageBar = ({
     ) })
   ] }) });
 };
+
+// index.ts
+var resolveMode = (theme, colorMode) => {
+  if (theme === "light" || theme === "dark") return theme;
+  if (theme === "system") return "auto";
+  return colorMode ?? "auto";
+};
+var withMcpTheme = (Inner, displayName) => {
+  const Wrapped = ({ theme, colorMode, ...rest }) => React5.createElement(
+    ShuffleMcpThemeProvider,
+    { mode: resolveMode(theme, colorMode) },
+    React5.createElement(Inner, { ...rest })
+  );
+  Wrapped.displayName = `ShuffleMCPs(${displayName})`;
+  return Wrapped;
+};
+var withMcpThemeRef = (Inner, displayName) => {
+  const Wrapped = React5.forwardRef(
+    ({ theme, colorMode, ...rest }, ref) => React5.createElement(
+      ShuffleMcpThemeProvider,
+      { mode: resolveMode(theme, 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 +13024,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.20",
   "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": {