@shuffleio/shuffle-mcps 0.0.21 → 0.0.23

package/dist/index.js

@@ -459,15 +459,34 @@ var readHtmlDarkClass = () => {
   if (typeof document === "undefined") return false;
   return document.documentElement.classList.contains("dark");
 };
-var useHtmlDarkClass = (enabled) => {
+var readAncestorDark = (anchor) => {
+  if (!anchor || typeof document === "undefined") return null;
+  const start = anchor.parentElement;
+  if (!start) return null;
+  const scoped = start.closest('[data-shuffle-mode="dark"], [data-shuffle-mode="light"]');
+  if (scoped) return scoped.getAttribute("data-shuffle-mode") === "dark";
+  const darkAncestor = start.closest(".dark");
+  if (darkAncestor) return true;
+  return null;
+};
+var useAutoDarkClass = (enabled, anchorRef) => {
   const [isDark, setIsDark] = import_react.default.useState(() => enabled ? readHtmlDarkClass() : false);
-  import_react.default.useEffect(() => {
+  import_react.default.useLayoutEffect(() => {
     if (!enabled || typeof document === "undefined") return;
-    setIsDark(readHtmlDarkClass());
-    const observer = new MutationObserver(() => setIsDark(readHtmlDarkClass()));
+    const recompute = () => {
+      const ancestor = readAncestorDark(anchorRef.current);
+      setIsDark(ancestor !== null ? ancestor : readHtmlDarkClass());
+    };
+    recompute();
+    const observer = new MutationObserver(recompute);
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    let node = anchorRef.current?.parentElement ?? null;
+    while (node) {
+      observer.observe(node, { attributes: true, attributeFilter: ["class", "data-shuffle-mode"] });
+      node = node.parentElement;
+    }
     return () => observer.disconnect();
-  }, [enabled]);
+  }, [enabled, anchorRef]);
   return isDark;
 };
 var ShuffleMcpThemeContext = import_react.default.createContext(null);
@@ -554,10 +573,12 @@ var ShuffleMcpThemeProvider = ({
 }) => {
   const parent = (0, import_material.useTheme)();
   const parentCtx = useShuffleMcpTheme();
-  const htmlIsDark = useHtmlDarkClass(mode === "auto");
-  const effectiveDark = mode === "auto" ? htmlIsDark : mode === "dark";
+  const anchorRef = import_react.default.useRef(null);
+  const autoIsDark = useAutoDarkClass(mode === "auto", anchorRef);
+  const effectiveDark = mode === "auto" ? autoIsDark : mode === "dark";
   const sameAsParent = parentCtx !== null && parentCtx.isDark === effectiveDark;
   const scopeClassName = effectiveDark ? "shuffle-mcp-scope dark" : "shuffle-mcp-scope";
+  const resolvedModeAttr = effectiveDark ? "dark" : "light";
   const merged = import_react.default.useMemo(
     () => (0, import_material.createTheme)({
       ...parent,
@@ -577,9 +598,15 @@ var ShuffleMcpThemeProvider = ({
     [mode, effectiveDark, scopeClassName]
   );
   if (sameAsParent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShuffleMcpThemeContext.Provider, { value: ctxValue, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ShuffleMcpThemeContext.Provider, { value: ctxValue, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: anchorRef, style: { display: "none" }, "aria-hidden": true }),
+      children
+    ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShuffleMcpThemeContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ThemeProvider, { theme: merged, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: scopeClassName, "data-shuffle-mode": mode, "data-shuffle-mcp-root": true, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShuffleMcpThemeContext.Provider, { value: ctxValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.ThemeProvider, { theme: merged, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: scopeClassName, "data-shuffle-mode": resolvedModeAttr, "data-shuffle-mcp-root": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: anchorRef, style: { display: "none" }, "aria-hidden": true }),
+    children
+  ] }) }) });
 };
 
 // views/ShuffleMCP.tsx
@@ -588,7 +615,7 @@ var import_algoliasearch = require("algoliasearch");
 var import_material10 = require("@mui/material");
 
 // views/AppDetailDrawer.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // toast.ts
 var defaultImpl = (arg, opts) => {
@@ -2125,7 +2152,7 @@ var import_material5 = require("@mui/material");
 var import_framer_motion3 = require("framer-motion");
 
 // components/AppAuthConfig.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_lucide_react3 = require("lucide-react");
 var import_material4 = require("@mui/material");
 var import_framer_motion2 = require("framer-motion");
@@ -2278,6 +2305,18 @@ var AppFallbackIcon = ({
 
 // components/AppAuthConfig.tsx
 init_api();
+
+// useSyncHostBaseUrl.ts
+var import_react6 = require("react");
+init_api();
+var useSyncHostBaseUrl = (globalUrl) => {
+  (0, import_react6.useEffect)(() => {
+    if (!globalUrl) return;
+    setHostBaseUrl(globalUrl);
+  }, [globalUrl]);
+};
+
+// components/AppAuthConfig.tsx
 var import_react_markdown = __toESM(require("react-markdown"));
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -2333,8 +2372,14 @@ var AppAuthCard = ({
   hideStatusChips,
   hideDocsLink,
   hideUrlFields,
-  borderless
+  borderless,
+  globalUrl,
+  userdata,
+  isLoaded,
+  isLoggedIn,
+  serverside
 }) => {
+  useSyncHostBaseUrl(globalUrl);
   const getBestDefaultAuth = (entries) => {
     if (entries.length === 0) return ADD_NEW_AUTH;
     const validatedEntry = entries.find((e) => e.validation?.valid === true);
@@ -2344,15 +2389,15 @@ var AppAuthCard = ({
     const lastEntry = entries[entries.length - 1];
     return lastEntry.id || lastEntry.label || "0";
   };
-  const [selectedAuthId, setSelectedAuthId] = (0, import_react6.useState)(() => {
+  const [selectedAuthId, setSelectedAuthId] = (0, import_react7.useState)(() => {
     return getBestDefaultAuth(apiAuthEntries);
   });
-  const [userHasSelected, setUserHasSelected] = (0, import_react6.useState)(false);
-  const [testStatusPerAuth, setTestStatusPerAuth] = (0, import_react6.useState)({});
-  const [testMessagesPerAuth, setTestMessagesPerAuth] = (0, import_react6.useState)({});
-  const [testingAuthId, setTestingAuthId] = (0, import_react6.useState)(null);
-  const [deleteConfirmAuthId, setDeleteConfirmAuthId] = (0, import_react6.useState)(null);
-  const [deleting, setDeleting] = (0, import_react6.useState)(false);
+  const [userHasSelected, setUserHasSelected] = (0, import_react7.useState)(false);
+  const [testStatusPerAuth, setTestStatusPerAuth] = (0, import_react7.useState)({});
+  const [testMessagesPerAuth, setTestMessagesPerAuth] = (0, import_react7.useState)({});
+  const [testingAuthId, setTestingAuthId] = (0, import_react7.useState)(null);
+  const [deleteConfirmAuthId, setDeleteConfirmAuthId] = (0, import_react7.useState)(null);
+  const [deleting, setDeleting] = (0, import_react7.useState)(false);
   const handleDeleteAuth = async (authId) => {
     setDeleting(true);
     try {
@@ -2376,10 +2421,10 @@ var AppAuthCard = ({
     }
   };
   const localTestStatus = testStatusPerAuth[selectedAuthId] || "untested";
-  const [wasPreValidatedPerAuth, setWasPreValidatedPerAuth] = (0, import_react6.useState)({});
-  const prevEntryCountRef = (0, import_react6.useRef)(apiAuthEntries.length);
-  const autoTestFiredRef = (0, import_react6.useRef)(null);
-  (0, import_react6.useEffect)(() => {
+  const [wasPreValidatedPerAuth, setWasPreValidatedPerAuth] = (0, import_react7.useState)({});
+  const prevEntryCountRef = (0, import_react7.useRef)(apiAuthEntries.length);
+  const autoTestFiredRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     if (apiAuthEntries.length > 0) {
       if (apiAuthEntries.length > prevEntryCountRef.current) {
         const sorted = [...apiAuthEntries].sort((a, b) => {
@@ -2408,7 +2453,7 @@ var AppAuthCard = ({
     }
     prevEntryCountRef.current = apiAuthEntries.length;
   }, [apiAuthEntries, userHasSelected]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (wasPreValidatedPerAuth[selectedAuthId] === void 0) {
       const currentAuth = apiAuthEntries.find(
         (auth2) => (auth2.id || auth2.label || "") === selectedAuthId
@@ -2430,7 +2475,7 @@ var AppAuthCard = ({
   };
   const localTestMessages = testMessagesPerAuth[selectedAuthId] || {};
   const wasPreValidated = wasPreValidatedPerAuth[selectedAuthId] || false;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!testingAuthId) return;
     if (authState.status === "testing") {
       setTestStatusForAuth(testingAuthId, "testing");
@@ -2484,19 +2529,19 @@ var AppAuthCard = ({
       minute: "2-digit"
     });
   };
-  const [localCredentials, setLocalCredentials] = (0, import_react6.useState)(authState.credentials || {});
-  const [fieldErrors, setFieldErrors] = (0, import_react6.useState)({});
-  const [loading, setLoading] = (0, import_react6.useState)(false);
-  const [saving, setSaving] = (0, import_react6.useState)(false);
-  const [saveSuccess, setSaveSuccess] = (0, import_react6.useState)(null);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [appConfig, setAppConfig] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
+  const [localCredentials, setLocalCredentials] = (0, import_react7.useState)(authState.credentials || {});
+  const [fieldErrors, setFieldErrors] = (0, import_react7.useState)({});
+  const [loading, setLoading] = (0, import_react7.useState)(false);
+  const [saving, setSaving] = (0, import_react7.useState)(false);
+  const [saveSuccess, setSaveSuccess] = (0, import_react7.useState)(null);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [appConfig, setAppConfig] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
     if (isExpanded && onRefreshAuth) {
       onRefreshAuth();
     }
   }, [isExpanded]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const fetchAppConfig = async () => {
       if (!isExpanded || appConfig) return;
       setLoading(true);
@@ -2529,13 +2574,13 @@ var AppAuthCard = ({
   }, [isExpanded, app.objectID, appConfig]);
   const auth = appConfig?.authentication;
   const isOAuth2 = isOAuth2Type(auth?.type);
-  const [selectedScopes, setSelectedScopes] = (0, import_react6.useState)([]);
-  (0, import_react6.useEffect)(() => {
+  const [selectedScopes, setSelectedScopes] = (0, import_react7.useState)([]);
+  (0, import_react7.useEffect)(() => {
     if (auth?.scope) {
       setSelectedScopes(auth.scope);
     }
   }, [auth?.scope]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (disableUrlPrefill) return;
     if (!auth?.parameters || auth.parameters.length === 0) return;
     const urlDefaults = {};
@@ -2552,7 +2597,7 @@ var AppAuthCard = ({
       setLocalCredentials((prev) => ({ ...urlDefaults, ...prev }));
     }
   }, [auth?.parameters, disableUrlPrefill]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const incoming = authState.credentials || {};
     setLocalCredentials((prev) => {
       let changed = false;
@@ -2568,12 +2613,12 @@ var AppAuthCard = ({
       return changed ? next : prev;
     });
   }, [authState.credentials]);
-  const [docsOpen, setDocsOpen] = (0, import_react6.useState)(false);
-  const [docsContent, setDocsContent] = (0, import_react6.useState)("");
-  const [docsLoading, setDocsLoading] = (0, import_react6.useState)(false);
-  const [editingLabel, setEditingLabel] = (0, import_react6.useState)(false);
-  const [editLabelValue, setEditLabelValue] = (0, import_react6.useState)("");
-  const [savingLabel, setSavingLabel] = (0, import_react6.useState)(false);
+  const [docsOpen, setDocsOpen] = (0, import_react7.useState)(false);
+  const [docsContent, setDocsContent] = (0, import_react7.useState)("");
+  const [docsLoading, setDocsLoading] = (0, import_react7.useState)(false);
+  const [editingLabel, setEditingLabel] = (0, import_react7.useState)(false);
+  const [editLabelValue, setEditLabelValue] = (0, import_react7.useState)("");
+  const [savingLabel, setSavingLabel] = (0, import_react7.useState)(false);
   const handleRenameAuth = async () => {
     if (!selectedAuth || !editLabelValue.trim()) return;
     setSavingLabel(true);
@@ -2969,8 +3014,8 @@ var AppAuthCard = ({
       {
         sx: {
           background: "transparent",
-          border: borderless ? "none" : "1px solid",
-          borderColor: borderless ? "transparent" : isTested ? "hsl(var(--severity-low) / 0.5)" : authState.status === "error" ? "hsl(var(--destructive) / 0.3)" : "hsl(var(--border))",
+          border: borderless ? "none" : "2px solid",
+          borderColor: borderless ? "transparent" : isTested ? "hsl(var(--severity-low) / 0.9)" : authState.status === "error" ? "hsl(var(--destructive) / 0.7)" : "hsl(var(--border))",
           borderRadius: borderless ? 0 : 3,
           boxShadow: "none",
           overflow: "hidden",
@@ -4012,8 +4057,14 @@ var AppAuthConfig = ({
   onTestConnection,
   onSaveAuth,
   onSelectAuth,
-  onRefreshAuth
+  onRefreshAuth,
+  globalUrl,
+  userdata,
+  isLoaded,
+  isLoggedIn,
+  serverside
 }) => {
+  useSyncHostBaseUrl(globalUrl);
   const getApiAuthEntries = (app) => {
     const normalize = (n) => n.toLowerCase().replace(/[\s_\-]+/g, "_");
     return authenticatedApps.filter((auth) => normalize(auth.app?.name || "") === normalize(app.name)).map((auth) => ({
@@ -4032,8 +4083,8 @@ var AppAuthConfig = ({
     const entries = getApiAuthEntries(app);
     return entries.some((e) => e.validation?.valid === true);
   };
-  const initialSortRef = (0, import_react6.useRef)(null);
-  const authAppsLoadedRef = (0, import_react6.useRef)(false);
+  const initialSortRef = (0, import_react7.useRef)(null);
+  const authAppsLoadedRef = (0, import_react7.useRef)(false);
   if (!authAppsLoadedRef.current && authenticatedApps.length > 0) {
     authAppsLoadedRef.current = true;
     initialSortRef.current = null;
@@ -4056,7 +4107,7 @@ var AppAuthConfig = ({
   const firstNotConfigured = sortedApps.find((app) => !isAppConfigured(app));
   const firstNotValidated = sortedApps.find((app) => !isAppValidated(app));
   const defaultExpanded = firstNotConfigured?.objectID || firstNotValidated?.objectID || false;
-  const [expanded, setExpanded] = (0, import_react6.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react7.useState)(defaultExpanded);
   if (apps.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_material4.Alert,
@@ -4116,6 +4167,11 @@ var AppAuthConfig = ({
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         AppAuthCard,
         {
+          globalUrl,
+          userdata,
+          isLoaded,
+          isLoggedIn,
+          serverside,
           app,
           authState,
           isExpanded,
@@ -4175,7 +4231,7 @@ var import_material7 = require("@mui/material");
 var import_framer_motion5 = require("framer-motion");
 
 // views/AppMcpChat.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_lucide_react4 = require("lucide-react");
 var import_material6 = require("@mui/material");
 
@@ -4331,14 +4387,14 @@ function getPrimaryCategory(appName, categories) {
   return null;
 }
 var AppMcpChat = ({ appName, appIcon, appId, categories }) => {
-  const [input, setInput] = (0, import_react7.useState)("");
-  const [runState, setRunState] = (0, import_react7.useState)("idle");
-  const [query, setQuery] = (0, import_react7.useState)("");
-  const [result, setResult] = (0, import_react7.useState)("");
-  const [isError, setIsError] = (0, import_react7.useState)(false);
-  const inputRef = (0, import_react7.useRef)(null);
-  const suggestions = (0, import_react7.useMemo)(() => getSuggestions(appName, categories), [appName, categories]);
-  const primaryCategory = (0, import_react7.useMemo)(() => getPrimaryCategory(appName, categories), [appName, categories]);
+  const [input, setInput] = (0, import_react8.useState)("");
+  const [runState, setRunState] = (0, import_react8.useState)("idle");
+  const [query, setQuery] = (0, import_react8.useState)("");
+  const [result, setResult] = (0, import_react8.useState)("");
+  const [isError, setIsError] = (0, import_react8.useState)(false);
+  const inputRef = (0, import_react8.useRef)(null);
+  const suggestions = (0, import_react8.useMemo)(() => getSuggestions(appName, categories), [appName, categories]);
+  const primaryCategory = (0, import_react8.useMemo)(() => getPrimaryCategory(appName, categories), [appName, categories]);
   const MIN_INPUT_LENGTH = 6;
   const runAction = async () => {
     const trimmed = input.trim();
@@ -4790,7 +4846,7 @@ function TryMcpSection({ appName, appIcon, appId, categories }) {
 }
 
 // components/SingulActionsPreview.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_material8 = require("@mui/material");
 var import_lucide_react5 = require("lucide-react");
 init_api();
@@ -4798,7 +4854,7 @@ var import_react18_json_view = __toESM(require("react18-json-view"));
 var import_style = require("react18-json-view/src/style.css");
 var import_dark = require("react18-json-view/src/dark.css");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var import_react9 = require("react");
+var import_react10 = require("react");
 var deepParseJsonStrings = (obj, depth = 0) => {
   if (depth > 5) return obj;
   if (typeof obj === "string") {
@@ -5055,29 +5111,29 @@ var SingulActionsPreview = ({
   activeOrgId,
   onAuthenticate
 }) => {
-  const defaultCategory = (0, import_react8.useMemo)(() => pickDefaultCategory(categories), [categories]);
+  const defaultCategory = (0, import_react9.useMemo)(() => pickDefaultCategory(categories), [categories]);
   const actions = ALL_ACTIONS;
-  const sortedActions = (0, import_react8.useMemo)(() => {
+  const sortedActions = (0, import_react9.useMemo)(() => {
     const inCat = actions.filter((a) => a.category === defaultCategory);
     const rest = actions.filter((a) => a.category !== defaultCategory);
     return [...inCat, ...rest];
   }, [actions, defaultCategory]);
   const isDisabled = false;
-  const [selected, setSelected] = (0, import_react8.useState)(null);
-  const [lang, setLang] = (0, import_react8.useState)("curl");
-  const [snippet, setSnippet] = (0, import_react8.useState)("");
-  const curlOpts = (0, import_react8.useMemo)(() => {
+  const [selected, setSelected] = (0, import_react9.useState)(null);
+  const [lang, setLang] = (0, import_react9.useState)("curl");
+  const [snippet, setSnippet] = (0, import_react9.useState)("");
+  const curlOpts = (0, import_react9.useMemo)(() => {
     const apiKey = API_CONFIG.apiKey;
     const trackedOrg = getTrackedOrgId();
     const orgId = trackedOrg && activeOrgId && trackedOrg !== activeOrgId ? trackedOrg : null;
     const baseUrl = API_CONFIG.baseUrl;
     return { apiKey, orgId, baseUrl };
   }, [activeOrgId]);
-  const buildSnippet = (0, import_react8.useCallback)(
+  const buildSnippet = (0, import_react9.useCallback)(
     (action, l) => l === "python" ? buildSingulPython(appName, action, curlOpts) : buildSingulCurl(appName, action, curlOpts),
     [appName, curlOpts]
   );
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const initial = sortedActions[0] || null;
     setSelected(initial);
     setSnippet(buildSnippet(initial, lang));
@@ -5095,10 +5151,10 @@ var SingulActionsPreview = ({
       toast.error("Copy failed");
     }
   };
-  const [playLoading, setPlayLoading] = (0, import_react8.useState)(false);
-  const [playResult, setPlayResult] = (0, import_react8.useState)(null);
-  const responseRef = (0, import_react8.useRef)(null);
-  const [copied, setCopied] = (0, import_react8.useState)(false);
+  const [playLoading, setPlayLoading] = (0, import_react9.useState)(false);
+  const [playResult, setPlayResult] = (0, import_react9.useState)(null);
+  const responseRef = (0, import_react9.useRef)(null);
+  const [copied, setCopied] = (0, import_react9.useState)(false);
   const scrollToResponse = () => {
     requestAnimationFrame(() => {
       responseRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
@@ -5166,7 +5222,7 @@ var SingulActionsPreview = ({
       scrollToResponse();
     }
   };
-  const lineCount = (0, import_react8.useMemo)(() => Math.max(snippet.split("\n").length, 1), [snippet]);
+  const lineCount = (0, import_react9.useMemo)(() => Math.max(snippet.split("\n").length, 1), [snippet]);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material8.Box, { sx: { mt: 5, mb: 3, opacity: isDisabled ? 0.55 : 1 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material8.Box, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 1.5 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material8.Typography, { sx: { color: "hsl(var(--foreground))", fontWeight: 600, fontSize: "0.95rem" }, children: "Try individual actions" }),
@@ -5216,7 +5272,7 @@ var SingulActionsPreview = ({
                 groupBy: (o) => o.category,
                 getOptionLabel: (o) => o?.label ?? "",
                 isOptionEqualToValue: (a, b) => a?.name === b?.name && a?.category === b?.category,
-                renderOption: (props, option) => /* @__PURE__ */ (0, import_react9.createElement)("li", { ...props, key: `${option.category}-${option.name}` }, /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material8.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
+                renderOption: (props, option) => /* @__PURE__ */ (0, import_react10.createElement)("li", { ...props, key: `${option.category}-${option.name}` }, /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material8.Box, { sx: { display: "flex", flexDirection: "column" }, children: [
                   /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material8.Typography, { sx: { fontSize: "0.78rem", color: "hsl(var(--foreground))" }, children: option.label }),
                   /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material8.Typography, { sx: { fontFamily: "'JetBrains Mono', monospace", fontSize: "0.65rem", color: "hsl(var(--muted-foreground))" }, children: option.name })
                 ] })),
@@ -5603,15 +5659,15 @@ function AppDetailDrawer({
   isAuthenticated = true,
   activeOrgId
 }) {
-  const [appInfo, setAppInfo] = (0, import_react10.useState)(null);
-  const [appLoading, setAppLoading] = (0, import_react10.useState)(true);
-  const [isActivated, setIsActivated] = (0, import_react10.useState)(null);
-  const [activatedAppId, setActivatedAppId] = (0, import_react10.useState)(null);
-  const [activateLoading, setActivateLoading] = (0, import_react10.useState)(false);
-  const [resolvedAlgoliaId, setResolvedAlgoliaId] = (0, import_react10.useState)(null);
-  const [authExpanded, setAuthExpanded] = (0, import_react10.useState)(true);
-  const lastValidAuthRef = (0, import_react10.useRef)(null);
-  const [incidentStats, setIncidentStats] = (0, import_react10.useState)(null);
+  const [appInfo, setAppInfo] = (0, import_react11.useState)(null);
+  const [appLoading, setAppLoading] = (0, import_react11.useState)(true);
+  const [isActivated, setIsActivated] = (0, import_react11.useState)(null);
+  const [activatedAppId, setActivatedAppId] = (0, import_react11.useState)(null);
+  const [activateLoading, setActivateLoading] = (0, import_react11.useState)(false);
+  const [resolvedAlgoliaId, setResolvedAlgoliaId] = (0, import_react11.useState)(null);
+  const [authExpanded, setAuthExpanded] = (0, import_react11.useState)(true);
+  const lastValidAuthRef = (0, import_react11.useRef)(null);
+  const [incidentStats, setIncidentStats] = (0, import_react11.useState)(null);
   const {
     authStates,
     authenticatedApps,
@@ -5621,7 +5677,7 @@ function AppDetailDrawer({
     handleSaveAuth,
     refreshAuth
   } = useAppAuth();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!open || !appName) return;
     setAppLoading(true);
     setAppInfo(null);
@@ -5713,7 +5769,7 @@ function AppDetailDrawer({
       setAppLoading(false);
     })();
   }, [open, appName, appId]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!open || !appName || !isAuthenticated) {
       setIncidentStats(null);
       return;
@@ -5752,13 +5808,13 @@ function AppDetailDrawer({
     onRefresh?.();
     onClose();
   };
-  const matchingEntries = (0, import_react10.useMemo)(() => {
+  const matchingEntries = (0, import_react11.useMemo)(() => {
     if (!appName || !isAuthenticated) return [];
     return authenticatedApps.filter(
       (auth) => auth.app?.name?.toLowerCase().replace(/[\s_\-]+/g, "_") === appName.toLowerCase().replace(/[\s_\-]+/g, "_")
     );
   }, [appName, authenticatedApps, isAuthenticated]);
-  const resolvedImage = (0, import_react10.useMemo)(() => {
+  const resolvedImage = (0, import_react11.useMemo)(() => {
     if (appInfo?.large_image) return appInfo.large_image;
     for (const entry of matchingEntries) {
       const img = entry.app?.large_image || entry.large_image;
@@ -5766,7 +5822,7 @@ function AppDetailDrawer({
     }
     return "";
   }, [appInfo, matchingEntries]);
-  const algoliaApp = (0, import_react10.useMemo)(() => {
+  const algoliaApp = (0, import_react11.useMemo)(() => {
     if (!appName) return null;
     return {
       objectID: resolvedAlgoliaId || appName,
@@ -5782,12 +5838,12 @@ function AppDetailDrawer({
   const effectiveActivated = isActivated === null ? hasAnyAuth ? true : null : isActivated || hasAnyAuth;
   const authCount = matchingEntries.length;
   const displayName = (appInfo?.name || appName || "").replace(/_/g, " ");
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (lastValidAuthRef.current === hasValidAuth) return;
     lastValidAuthRef.current = hasValidAuth;
     setAuthExpanded(!hasValidAuth);
   }, [hasValidAuth]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     lastValidAuthRef.current = null;
   }, [appName]);
   const handleActivateToggle = async () => {
@@ -6162,16 +6218,6 @@ function SegmentedControl({
   ) });
 }
 
-// useSyncHostBaseUrl.ts
-var import_react11 = require("react");
-init_api();
-var useSyncHostBaseUrl = (globalUrl) => {
-  (0, import_react11.useEffect)(() => {
-    if (!globalUrl) return;
-    setHostBaseUrl(globalUrl);
-  }, [globalUrl]);
-};
-
 // views/ShuffleMCP.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_ALGOLIA_APP_ID = "JNSS5CFDZZ";
@@ -6189,6 +6235,7 @@ var ShuffleMCP = import_react12.default.forwardRef(({
   showCheckbox = false,
   multiSelect = false,
   selectedApps = EMPTY_SELECTED_APPS,
+  disableAutoSelectValidatedApps = false,
   preventDefault = false,
   inline = false,
   initialQuery = "",
@@ -6299,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(
@@ -6317,7 +6365,7 @@ var ShuffleMCP = import_react12.default.forwardRef(({
         }
       }
     }
-  }, [authenticatedApps, results]);
+  }, [authenticatedApps, results, disableAutoSelectValidatedApps]);
   (0, import_react12.useEffect)(() => {
     if (externalAuthenticatedApps) {
       setAuthenticatedApps(externalAuthenticatedApps);
@@ -6815,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);
@@ -6902,6 +6954,7 @@ function AppSearchDrawer({
         anchor,
         open: open && detailAppName === null,
         onClose: handleClose,
+        slotProps: { paper: { className: themeScope?.scopeClassName } },
         sx: {
           zIndex: 9999,
           "& .MuiDrawer-paper": {
@@ -7055,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,
@@ -7067,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,
@@ -7114,6 +7179,9 @@ function AppSearchDrawer({
         appId: detailAppId,
         anchor,
         width,
+        globalUrl,
+        theme,
+        colorMode,
         onRefresh: onClose,
         onAddToCanvas
       }
@@ -9120,6 +9188,8 @@ var AgentUI = ({
   apiKey,
   apiBaseUrl,
   orgId,
+  theme,
+  colorMode,
   className,
   sx,
   contentSx
@@ -11669,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) => {
@@ -11692,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
               }
             )
           ]
@@ -11730,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)(() => {
@@ -11759,7 +11836,7 @@ var AgentRunDrawer = ({
       onClose,
       slotProps: {
         paper: {
-          className,
+          className: [themeScope?.scopeClassName, className].filter(Boolean).join(" ") || void 0,
           sx: [
             {
               width: { xs: "100%", sm: width },
@@ -12683,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) : "";
@@ -12696,7 +12776,7 @@ var AgentExecutionDrawer = ({
       onClose,
       slotProps: {
         paper: {
-          className,
+          className: [themeScope?.scopeClassName, className].filter(Boolean).join(" ") || void 0,
           sx: [
             {
               width: { xs: "100%", sm: width },
@@ -12832,7 +12912,9 @@ var AgentExecutionDrawer = ({
               apiKey,
               apiBaseUrl,
               orgId,
-              onSchedule
+              onSchedule,
+              theme,
+              colorMode
             },
             run.execution_id
           ) : null
@@ -12858,7 +12940,9 @@ var AgentsView = ({
   isLoaded,
   isLoggedIn,
   userdata,
-  serverside
+  serverside,
+  theme,
+  colorMode
 }) => {
   useSyncHostBaseUrl(globalUrl);
   const [selectedRun, setSelectedRun] = (0, import_react18.useState)(null);
@@ -12984,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
       ),
@@ -13004,7 +13090,9 @@ var AgentsView = ({
         onClose: () => setSelectedRun(null),
         run: selectedRun,
         apiBaseUrl: globalUrl,
-        onSchedule
+        onSchedule,
+        theme,
+        colorMode
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -13016,7 +13104,9 @@ var AgentsView = ({
         globalUrl,
         localLLMSlot: effectiveLocalLLMSlot,
         permissionsSlot,
-        agentUIProps: { onSchedule, apiBaseUrl: globalUrl }
+        theme,
+        colorMode,
+        agentUIProps: { onSchedule, apiBaseUrl: globalUrl, theme, colorMode }
       }
     )
   ] });
@@ -13259,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;
@@ -13269,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})`;