@shuffleio/shuffle-mcps 0.0.1

package/README.md

@@ -0,0 +1,163 @@
+<div align="center">
+
+<img src="./docs/agent-icon.png" alt="Shuffle MCPs" width="96" />
+
+# Shuffle MCPs
+
+Turn 3,000+ SaaS tools into MCP servers your agents can use. One search, one click, authenticated.
+
+[![npm](https://img.shields.io/npm/v/shuffle-mcps.svg)](https://www.npmjs.com/package/shuffle-mcps)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
+[![upstream](https://img.shields.io/badge/upstream-Shuffle%2Fsingul.js-orange)](https://github.com/Shuffle/singul.js)
+
+</div>
+
+---
+
+<table align="center">
+  <tr>
+    <td align="center" width="50%">
+      <img src="./docs/search-preview.png" alt="Search 3,000+ integrations" width="380" style="border-radius: 12px;" />
+      <br/><sub><b>1. Search any of 3,000+ tools</b></sub>
+    </td>
+    <td align="center" width="50%">
+      <img src="./docs/app-detail-preview.png" alt="Authenticate and use as MCP" width="380" style="border-radius: 12px;" />
+      <br/><sub><b>2. Authenticate — your agent uses it instantly</b></sub>
+    </td>
+  </tr>
+</table>
+
+&nbsp;
+
+> **No SDK required.** Once a tool is authenticated in Shuffle, it is live as an MCP server immediately — call it from any agent over plain HTTP. This npm package is the optional UI layer for embedding the search-and-connect flow inside your own product.
+
+## Try it in 30 seconds
+
+Authenticate any tool at [shuffler.io](https://shuffler.io), grab your API key, and call it:
+
+```bash
+curl https://shuffler.io/api/v1/apps/YOUR_APP/run \
+  -H "Authorization: Bearer YOUR_API_KEY" \
+  -H "Content-Type: application/json" \
+  -d '{"action": "send_message", "fields": {"channel": "general", "text": "hi"}}'
+```
+
+That is the MCP. Any agent, any language, no install. Full API reference: [shuffler.io/docs/API](https://shuffler.io/docs/API).
+
+## When to use this package
+
+Install `shuffle-mcps` when you want to **embed** the search, authenticate, and manage flow inside your own React/Vue/Next.js app — onboarding wizards, integration drawers, app pickers. If your agent is just calling MCPs, you do not need this; use the HTTP API directly.
+
+## Install
+
+```bash
+npm install shuffle-mcps
+```
+
+Peer deps: `react >= 18`, `react-dom >= 18`, `algoliasearch >= 5`.
+
+## Quick start
+
+```tsx
+import { SingulJS } from 'shuffle-mcps';
+
+export default function App() {
+  return (
+    <SingulJS
+      authToken="any-token"
+      inline
+      layout="grid"
+      gridColumns={3}
+      onAppSelected={(d) => console.log('picked', d.app.name)}
+    />
+  );
+}
+```
+
+## Recipes
+
+### Search → detail drawer
+
+The most common pattern. Set `preventDefault` and handle `onAppSelected` to chain into your own auth or detail UI:
+
+```tsx
+<SingulJS
+  authToken={token}
+  inline
+  preventDefault
+  onAppSelected={(d) => openDetailDrawer(d.app)}
+/>
+```
+
+Full two-drawer reference implementation: [`src/components/shared/AppSearchDrawer.tsx`](../components/shared/AppSearchDrawer.tsx).
+
+### Predefined search
+
+```tsx
+<SingulJS
+  authToken="..."
+  inline
+  initialFilterQuery="siem"
+  placeholder="Search SIEM tools..."
+/>
+```
+
+### Multi-select
+
+```tsx
+const [picked, setPicked] = useState<AlgoliaSearchApp[]>([]);
+
+<SingulJS
+  authToken="..."
+  inline
+  multiSelect
+  showCheckbox
+  selectedApps={picked}
+  onSelectionChange={setPicked}
+/>
+```
+
+### Your own backend
+
+```tsx
+<SingulJS
+  authToken={user.token}
+  apiKey={user.apiKey}
+  apiBaseUrl="https://your-backend.example.com"
+  algoliaAppId="YOUR_APP_ID"
+  algoliaApiKey="YOUR_SEARCH_KEY"
+/>
+```
+
+When `apiKey` is set, the component also fetches the user's **private apps** from `/api/v1/apps` and merges them into the search results, with an **All / Public / Private** filter shown above the list. Status dots appear too: validated, configured, selected, inactive.
+
+## Common props
+
+| Prop | Type | Description |
+|---|---|---|
+| `authToken` | `string` | Required. Forwarded into the auth URL. |
+| `inline` | `boolean` | Inline results vs floating dropdown. |
+| `layout` | `'list' \| 'grid'` | Result layout. Default `'list'`. |
+| `initialFilterQuery` | `string` | Pre-filter without filling the input. |
+| `preventDefault` | `boolean` | Skip default `window.open(authUrl)` so you can handle selection. |
+| `onAppSelected` | `(detail) => void` | Fires on single-select pick. |
+| `multiSelect` | `boolean` | Allow selecting multiple apps. |
+| `apiKey` | `string` | Bearer token. Enables status dots and merges your private apps from `/api/v1/apps`. |
+| `showSourceFilter` | `boolean` | Toggle the All / Public / Private filter. Default `true`. |
+| `customStyles` | `CustomStyles` | Per-slot style overrides. |
+
+Full prop reference, framework setup (Next.js, Vue), styling slots, custom rendering, and publishing: [**LIBRARY.md**](./LIBRARY.md).
+
+## Imperative handle
+
+```tsx
+const ref = useRef<SingulJSHandle>(null);
+<SingulJS ref={ref} authToken="..." inline />
+
+ref.current?.search('slack');
+ref.current?.clear();
+```
+
+## Next.js
+
+The component touches `window`, so render it client-side with `'use client'` or `next/dynamic({ ssr: false })`. See [LIBRARY.md](./LIBRARY.md#nextjs) for details.

package/dist/index.cjs

@@ -0,0 +1,519 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  SingulJS: () => SingulJS,
+  default: () => SingulJS_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// SingulJS.tsx
+var import_react = __toESM(require("react"), 1);
+var import_algoliasearch = require("algoliasearch");
+var import_singul = require("./singul-GZKBHJNI.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_ALGOLIA_APP_ID = "JNSS5CFDZZ";
+var DEFAULT_ALGOLIA_API_KEY = "33e4e3564f4f060e96e0531957bed552";
+var DEFAULT_ALGOLIA_INDEX = "appsearch";
+var SingulJS = import_react.default.forwardRef(({
+  authToken,
+  placeholder = "Search apps...",
+  layout = "list",
+  gridColumns = 3,
+  showDescription = false,
+  showCategories = false,
+  showCheckbox = false,
+  multiSelect = false,
+  selectedApps = [],
+  preventDefault = false,
+  inline = false,
+  initialQuery = "",
+  initialFilterQuery,
+  hitsPerPage = 15,
+  apiKey,
+  apiBaseUrl = "https://shuffler.io",
+  authPath = "/api/v1/apps/authentication",
+  appAuthPath = "/appauth",
+  privateAppsPath = "/api/v1/apps",
+  disablePrivateApps = false,
+  showSourceFilter = true,
+  singulBaseUrl = "https://singul.io",
+  hideAuthStatus = false,
+  authenticatedApps: externalAuthenticatedApps,
+  pinnedApps,
+  algoliaAppId = DEFAULT_ALGOLIA_APP_ID,
+  algoliaApiKey = DEFAULT_ALGOLIA_API_KEY,
+  algoliaIndexName = DEFAULT_ALGOLIA_INDEX,
+  customStyles = {},
+  className = "",
+  renderItem,
+  renderEmptyState,
+  renderLoadingState,
+  onAppSelected,
+  onSelectionChange,
+  onSearchChange
+}, ref) => {
+  const [query, setQuery] = (0, import_react.useState)(initialQuery);
+  const [results, setResults] = (0, import_react.useState)([]);
+  const [privateApps, setPrivateApps] = (0, import_react.useState)([]);
+  const [sourceFilter, setSourceFilter] = (0, import_react.useState)("all");
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [selectedIndex, setSelectedIndex] = (0, import_react.useState)(-1);
+  const [internalSelectedApps, setInternalSelectedApps] = (0, import_react.useState)(selectedApps);
+  const [authenticatedApps, setAuthenticatedApps] = (0, import_react.useState)(externalAuthenticatedApps || []);
+  const hasInitialized = (0, import_react.useRef)(false);
+  const containerRef = (0, import_react.useRef)(null);
+  const inputRef = (0, import_react.useRef)(null);
+  const debounceTimer = (0, import_react.useRef)(null);
+  const searchClient = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (apiKey) {
+      const fetchAuthenticatedApps = async () => {
+        try {
+          const response = await fetch(`${apiBaseUrl}${authPath}`, {
+            headers: {
+              "Authorization": `Bearer ${apiKey}`
+            }
+          });
+          if (response.ok) {
+            const result = await response.json();
+            const authData = result.data || result;
+            if (Array.isArray(authData)) {
+              console.log("Loaded authenticated apps:", authData.length, authData.map((a) => a.app?.name));
+              setAuthenticatedApps(authData);
+            }
+          }
+        } catch (error) {
+          console.error("Failed to fetch authenticated apps:", error);
+        }
+      };
+      fetchAuthenticatedApps();
+    }
+  }, [apiKey, apiBaseUrl]);
+  (0, import_react.useEffect)(() => {
+    if (!apiKey || disablePrivateApps) {
+      setPrivateApps([]);
+      return;
+    }
+    const fetchPrivateApps = async () => {
+      try {
+        const response = await fetch(`${apiBaseUrl}${privateAppsPath}`, {
+          headers: { "Authorization": `Bearer ${apiKey}` },
+          credentials: "include"
+        });
+        if (!response.ok) return;
+        const data = await response.json();
+        const apps = Array.isArray(data) ? data : data?.data || [];
+        const normalized = apps.map((a) => ({
+          name: a.name || "",
+          description: a.description || "",
+          objectID: a.id || a.objectID || `private-${a.name}`,
+          creator: a.owner || a.creator || "",
+          app_version: a.app_version || "1.0.0",
+          image_url: a.large_image || a.image_url || "",
+          time_edited: a.edited || 0,
+          generated: !!a.generated,
+          invalid: !!a.invalid,
+          priority: a.priority || 0,
+          actions: Array.isArray(a.actions) ? a.actions.length : a.actions || 0,
+          tags: a.tags || [],
+          accessible_by: a.accessible_by || [],
+          categories: a.categories || [],
+          action_labels: a.action_labels || [],
+          triggers: a.triggers || [],
+          verified: !!a.verified,
+          source: "private"
+        }));
+        setPrivateApps(normalized);
+      } catch (error) {
+        console.error("Failed to fetch private apps:", error);
+      }
+    };
+    fetchPrivateApps();
+  }, [apiKey, apiBaseUrl, privateAppsPath, disablePrivateApps]);
+  (0, import_react.useEffect)(() => {
+    if (authenticatedApps.length > 0 && results.length > 0) {
+      const validatedApps = authenticatedApps.filter((auth) => auth.validation?.valid);
+      const appsToAutoSelect = results.filter(
+        (app) => validatedApps.some((auth) => auth.app.name.toLowerCase() === app.name.toLowerCase())
+      );
+      if (appsToAutoSelect.length > 0) {
+        const newSelection = [...internalSelectedApps];
+        appsToAutoSelect.forEach((app) => {
+          if (!newSelection.some((a) => a.objectID === app.objectID)) {
+            newSelection.push(app);
+          }
+        });
+        if (newSelection.length !== internalSelectedApps.length) {
+          setInternalSelectedApps(newSelection);
+          onSelectionChange?.(newSelection);
+        }
+      }
+    }
+  }, [authenticatedApps, results]);
+  (0, import_react.useEffect)(() => {
+    if (externalAuthenticatedApps) {
+      setAuthenticatedApps(externalAuthenticatedApps);
+    }
+  }, [externalAuthenticatedApps]);
+  (0, import_react.useEffect)(() => {
+    searchClient.current = (0, import_algoliasearch.algoliasearch)(algoliaAppId, algoliaApiKey);
+    if (!hasInitialized.current) {
+      hasInitialized.current = true;
+      const searchTerm = initialQuery || initialFilterQuery || "";
+      setTimeout(() => {
+        if (searchClient.current) {
+          performSearch(searchTerm);
+          onSearchChange?.(initialQuery);
+        }
+      }, 100);
+    }
+  }, []);
+  (0, import_react.useEffect)(() => {
+    setInternalSelectedApps(selectedApps);
+  }, [selectedApps]);
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSelectedIndex(-1);
+      }
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, []);
+  const isAppConfigured = (0, import_react.useCallback)((app) => {
+    return authenticatedApps.some(
+      (auth) => auth.app.name.toLowerCase() === app.name.toLowerCase() && auth.active === true
+    );
+  }, [authenticatedApps]);
+  const isAppValidated = (0, import_react.useCallback)((app) => {
+    return authenticatedApps.some(
+      (auth) => auth.app.name.toLowerCase() === app.name.toLowerCase() && auth.validation?.valid === true
+    );
+  }, [authenticatedApps]);
+  const getAppAuthState = (0, import_react.useCallback)((app) => {
+    return {
+      configured: isAppConfigured(app),
+      validated: isAppValidated(app)
+    };
+  }, [isAppConfigured, isAppValidated]);
+  const performSearch = (0, import_react.useCallback)(async (searchQuery) => {
+    if (!searchClient.current) {
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const searchResult = await searchClient.current.searchSingleIndex({
+        indexName: algoliaIndexName,
+        searchParams: {
+          query: searchQuery || "",
+          // Empty string gets top results
+          hitsPerPage
+        }
+      });
+      const hits = searchResult.hits.map((h) => ({ ...h, source: "public" }));
+      setResults(hits);
+      setIsOpen(hits.length > 0);
+      setSelectedIndex(-1);
+    } catch (error) {
+      console.error("Search failed:", error);
+      setResults([]);
+      setIsOpen(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [hitsPerPage]);
+  (0, import_react.useImperativeHandle)(ref, () => ({
+    search: (searchQuery) => {
+      setQuery(searchQuery);
+      onSearchChange?.(searchQuery);
+      performSearch(searchQuery);
+    },
+    clear: () => {
+      setQuery("");
+      performSearch("");
+    },
+    getQuery: () => query
+  }), [performSearch, onSearchChange, query]);
+  const handleInputChange = (0, import_react.useCallback)((event) => {
+    const value = event.target.value;
+    setQuery(value);
+    setSelectedIndex(-1);
+    onSearchChange?.(value);
+    if (debounceTimer.current) {
+      clearTimeout(debounceTimer.current);
+    }
+    debounceTimer.current = setTimeout(() => {
+      performSearch(value);
+    }, 300);
+  }, [performSearch, onSearchChange]);
+  const selectApp = (0, import_react.useCallback)((app) => {
+    const authUrl = `${apiBaseUrl}${appAuthPath}?app_id=${app.objectID}&auth=${authToken}&source=shuffle`;
+    if (multiSelect) {
+      const isAlreadySelected = internalSelectedApps.some((a) => a.objectID === app.objectID);
+      const newSelection = isAlreadySelected ? internalSelectedApps.filter((a) => a.objectID !== app.objectID) : [...internalSelectedApps, app];
+      setInternalSelectedApps(newSelection);
+      onSelectionChange?.(newSelection);
+    } else {
+      onAppSelected?.({ app, authUrl });
+      if (!preventDefault) {
+        window.open(authUrl, "_blank");
+      }
+      setIsOpen(false);
+      setQuery("");
+      setResults([]);
+    }
+  }, [authToken, apiBaseUrl, appAuthPath, multiSelect, internalSelectedApps, onAppSelected, onSelectionChange, preventDefault]);
+  const handleKeyDown = (0, import_react.useCallback)((event) => {
+    if (!isOpen) return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setSelectedIndex((prev) => Math.min(prev + 1, displayResults.length - 1));
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setSelectedIndex((prev) => Math.max(prev - 1, -1));
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (selectedIndex >= 0 && displayResults[selectedIndex]) {
+          selectApp(displayResults[selectedIndex]);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        setIsOpen(false);
+        setSelectedIndex(-1);
+        inputRef.current?.blur();
+        break;
+    }
+  }, [isOpen, results, selectedIndex, selectApp]);
+  const isAppSelected = (0, import_react.useCallback)((app) => {
+    return internalSelectedApps.some((a) => a.objectID === app.objectID);
+  }, [internalSelectedApps]);
+  const filteredPrivateApps = (0, import_react.useMemo)(() => {
+    if (privateApps.length === 0) return [];
+    const q = query.trim().toLowerCase();
+    if (!q) return privateApps;
+    return privateApps.filter(
+      (a) => a.name.toLowerCase().includes(q) || (a.description || "").toLowerCase().includes(q) || (a.categories || []).some((c) => c.toLowerCase().includes(q))
+    );
+  }, [privateApps, query]);
+  const displayResults = (0, import_react.useMemo)(() => {
+    const norm = (n) => (n || "").toLowerCase().replace(/[\s_\-]+/g, "");
+    let merged;
+    if (sourceFilter === "public") {
+      merged = results;
+    } else if (sourceFilter === "private") {
+      merged = filteredPrivateApps;
+    } else {
+      const privateNames = new Set(filteredPrivateApps.map((a) => norm(a.name)));
+      const publicOnly = results.filter((a) => !privateNames.has(norm(a.name)));
+      merged = [...filteredPrivateApps, ...publicOnly];
+    }
+    if (!pinnedApps || pinnedApps.length === 0) return merged;
+    const pinnedNames = new Set(pinnedApps.map((a) => norm(a.name)));
+    return [...pinnedApps, ...merged.filter((a) => !pinnedNames.has(norm(a.name)))];
+  }, [pinnedApps, results, filteredPrivateApps, sourceFilter]);
+  const getGridColumnsStyle = (0, import_react.useMemo)(() => {
+    if (layout !== "grid") return {};
+    const cols = typeof gridColumns === "number" ? gridColumns : gridColumns.md || 3;
+    return { "--singul-grid-columns": cols };
+  }, [layout, gridColumns]);
+  const renderAppItem = (app, index) => {
+    const selected = isAppSelected(app);
+    const isHighlighted = index === selectedIndex;
+    const authState = getAppAuthState(app);
+    if (renderItem) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          onClick: () => selectApp(app),
+          onMouseEnter: () => setSelectedIndex(index),
+          children: renderItem(app, selected, () => selectApp(app), authState)
+        },
+        app.objectID
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: `singul-dropdown-item ${selected ? "singul-selected" : ""} ${authState.validated ? "singul-validated" : ""} ${authState.configured ? "singul-configured" : ""}`,
+        style: {
+          ...customStyles.dropdownItem,
+          ...selected ? customStyles.selectedItem : {}
+        },
+        onClick: () => selectApp(app),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "singul-app-info", style: customStyles.appInfo, children: [
+          app.image_url && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", flexShrink: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "img",
+              {
+                src: app.image_url,
+                alt: app.name,
+                className: "singul-app-icon",
+                style: customStyles.appIcon
+              }
+            ),
+            !hideAuthStatus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: `singul-status-dot ${authState.validated ? "singul-dot-validated" : authState.configured ? "singul-dot-configured" : selected ? "singul-dot-activated" : "singul-dot-inactive"}`
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "singul-app-details", style: customStyles.appDetails, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "singul-app-name", style: customStyles.appName, children: [
+              app.name.replace(/_/g, " "),
+              app.source === "private" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "singul-private-badge", title: "From your private apps", children: "Private" })
+            ] }),
+            showDescription && app.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "singul-app-description", style: customStyles.appDescription, children: app.description }),
+            showCategories && app.categories?.[0] && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "singul-app-category", style: customStyles.appCategory, children: app.categories[0] })
+          ] }),
+          showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: `singul-checkbox ${selected ? "singul-checked" : ""}`,
+              style: selected ? customStyles.checkboxChecked : customStyles.checkbox,
+              children: selected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
+            }
+          )
+        ] })
+      },
+      app.objectID
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className: `singul-container ${inline ? "singul-inline" : ""} ${className}`,
+      style: customStyles.container,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "singul-search-bar-container", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "singul-search-input-wrapper", style: customStyles.inputWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              className: "singul-search-input",
+              style: customStyles.input,
+              placeholder,
+              value: query,
+              onChange: handleInputChange,
+              onFocus: () => {
+                if (!inline && query.trim() && results.length > 0) {
+                  setIsOpen(true);
+                }
+              },
+              onKeyDown: handleKeyDown,
+              autoComplete: "off"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "singul-search-icon", style: customStyles.searchIcon, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m21 21-4.35-4.35" })
+          ] }) }),
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "singul-loading-spinner", style: customStyles.loadingSpinner, children: renderLoadingState ? renderLoadingState() : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "singul-spinner", style: customStyles.spinner }) })
+        ] }),
+        showSourceFilter && privateApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "singul-source-filter", role: "tablist", "aria-label": "Filter by app source", children: [
+          { key: "all", label: "All", count: results.length + filteredPrivateApps.length },
+          { key: "public", label: "Public", count: results.length },
+          { key: "private", label: "Private", count: filteredPrivateApps.length }
+        ].map((opt) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": sourceFilter === opt.key,
+            className: `singul-source-pill ${sourceFilter === opt.key ? "singul-source-pill-active" : ""}`,
+            onClick: () => setSourceFilter(opt.key),
+            children: [
+              opt.label,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "singul-source-count", children: opt.count })
+            ]
+          },
+          opt.key
+        )) }),
+        inline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: `singul-results-container ${layout === "grid" ? "singul-results-grid" : ""}`,
+            style: {
+              ...customStyles.resultsContainer,
+              ...getGridColumnsStyle,
+              ...layout === "grid" ? { display: "grid" } : {}
+            },
+            children: displayResults.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              displayResults.map((app, index) => renderAppItem(app, index)),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "singul-end-of-results", style: {
+                padding: "10px 16px",
+                color: "rgba(255, 255, 255, 0.3)",
+                textAlign: "center",
+                fontSize: "11px",
+                gridColumn: "1 / -1"
+              }, children: "Can't find what you're looking for? Try a different search term." })
+            ] }) : query.trim() ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "singul-empty-state", style: customStyles.emptyState, children: renderEmptyState ? renderEmptyState() : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              'No integrations match "',
+              query,
+              '". Try searching for a different app or category.'
+            ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "singul-empty-state", style: customStyles.emptyState, children: "Start typing to search integrations..." })
+          }
+        ),
+        !inline && isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: `singul-dropdown ${layout === "grid" ? "singul-dropdown-grid" : ""}`,
+            style: {
+              ...customStyles.dropdown,
+              ...getGridColumnsStyle,
+              ...layout === "grid" ? { display: "grid" } : {}
+            },
+            children: displayResults.length > 0 ? displayResults.map((app, index) => renderAppItem(app, index)) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "singul-empty-state", style: customStyles.emptyState, children: renderEmptyState ? renderEmptyState() : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              'No apps found for "',
+              query,
+              '"'
+            ] }) })
+          }
+        )
+      ] })
+    }
+  );
+});
+SingulJS.displayName = "SingulJS";
+var SingulJS_default = SingulJS;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SingulJS
+});
+//# sourceMappingURL=index.cjs.map