@use-handled/ipaas-react-sdk 0.1.0

package/dist/index.js

@@ -0,0 +1,1091 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/HandledProvider.tsx
+
+// src/api/client.ts
+var DEFAULT_API_BASE_URL = "https://api.usehandled.io";
+var HandledApiClient = class {
+  constructor(config) {
+    this.config = config;
+  }
+  get baseUrl() {
+    return this.config.apiBaseUrl || DEFAULT_API_BASE_URL;
+  }
+  get headers() {
+    return {
+      "Content-Type": "application/json",
+      "X-Client-Id": this.config.clientId,
+      "X-Account-Id": this.config.accountId
+    };
+  }
+  async request(method, path, options = {}) {
+    let url = `${this.baseUrl}/api/v1/ipaas${path}`;
+    if (options.params) {
+      const searchParams = new URLSearchParams();
+      Object.entries(options.params).forEach(([key, value]) => {
+        if (value !== void 0) {
+          searchParams.append(key, String(value));
+        }
+      });
+      const queryString = searchParams.toString();
+      if (queryString) {
+        url += `?${queryString}`;
+      }
+    }
+    const response = await fetch(url, {
+      method,
+      headers: this.headers,
+      body: options.body ? JSON.stringify(options.body) : void 0
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ message: "Request failed" }));
+      throw new Error(error.message || error.error || `Request failed with status ${response.status}`);
+    }
+    if (response.status === 204) {
+      return void 0;
+    }
+    return response.json();
+  }
+  // ============================================
+  // Integrations API
+  // ============================================
+  /**
+   * Get list of available integrations
+   */
+  async getIntegrations() {
+    const response = await this.request("GET", "/integrations");
+    return response.integrations;
+  }
+  // ============================================
+  // Connections API
+  // ============================================
+  /**
+   * Get list of connections for the current account
+   */
+  async getConnections() {
+    const response = await this.request(
+      "GET",
+      `/accounts/${this.config.accountId}/connections`
+    );
+    return response.connections;
+  }
+  /**
+   * Initiate connection to an integration
+   * Returns an auth URL to open in a popup for OAuth, or creates connection directly for other auth types
+   */
+  async connect(integrationId, options) {
+    return this.request(
+      "POST",
+      `/accounts/${this.config.accountId}/connections`,
+      {
+        body: {
+          integration_id: integrationId,
+          redirect_url: options?.redirectUrl || window.location.href,
+          credentials: options?.credentials,
+          account_integration_name: options?.accountIntegrationName
+        }
+      }
+    );
+  }
+  /**
+   * Disconnect an integration
+   */
+  async disconnect(connectionId) {
+    return this.request(
+      "DELETE",
+      `/accounts/${this.config.accountId}/connections/${connectionId}`
+    );
+  }
+  /**
+   * Get a specific connection
+   */
+  async getConnection(connectionId) {
+    return this.request(
+      "GET",
+      `/accounts/${this.config.accountId}/connections/${connectionId}`
+    );
+  }
+  /**
+   * Check connection status (used after OAuth popup closes)
+   */
+  async checkConnectionStatus(connectionId) {
+    return this.request(
+      "GET",
+      `/accounts/${this.config.accountId}/connections/${connectionId}/status`
+    );
+  }
+};
+var HandledContext = react.createContext(null);
+var POPUP_WIDTH = 600;
+var POPUP_HEIGHT = 700;
+function openPopup(url, name) {
+  const left = window.screenX + (window.outerWidth - POPUP_WIDTH) / 2;
+  const top = window.screenY + (window.outerHeight - POPUP_HEIGHT) / 2;
+  return window.open(
+    url,
+    name,
+    `width=${POPUP_WIDTH},height=${POPUP_HEIGHT},left=${left},top=${top},toolbar=no,menubar=no,scrollbars=yes,resizable=yes`
+  );
+}
+function HandledProvider({
+  clientId,
+  accountId,
+  apiBaseUrl,
+  onConnect,
+  onDisconnect,
+  onError,
+  children
+}) {
+  const [isReady, setIsReady] = react.useState(false);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [integrations, setIntegrations] = react.useState([]);
+  const [connections, setConnections] = react.useState([]);
+  const [error, setError] = react.useState(null);
+  const config = react.useMemo(
+    () => ({ clientId, accountId, apiBaseUrl }),
+    [clientId, accountId, apiBaseUrl]
+  );
+  const apiClientRef = react.useRef(null);
+  const getApiClient = react.useCallback(() => {
+    if (!apiClientRef.current) {
+      apiClientRef.current = new HandledApiClient(config);
+    }
+    return apiClientRef.current;
+  }, [config]);
+  react.useEffect(() => {
+    const initialize = async () => {
+      setIsLoading(true);
+      try {
+        const client = getApiClient();
+        const [integrationsData, connectionsData] = await Promise.all([
+          client.getIntegrations(),
+          client.getConnections()
+        ]);
+        setIntegrations(integrationsData);
+        setConnections(connectionsData);
+        setError(null);
+      } catch (err) {
+        const initError = err instanceof Error ? err : new Error("Failed to initialize");
+        setError(initError);
+        onError?.(initError);
+      } finally {
+        setIsLoading(false);
+        setIsReady(true);
+      }
+    };
+    initialize();
+  }, [getApiClient, onError]);
+  const refreshConnections = react.useCallback(async () => {
+    try {
+      const client = getApiClient();
+      const connectionsData = await client.getConnections();
+      setConnections(connectionsData);
+    } catch (err) {
+      const refreshError = err instanceof Error ? err : new Error("Failed to refresh connections");
+      setError(refreshError);
+      onError?.(refreshError);
+    }
+  }, [getApiClient, onError]);
+  const connect = react.useCallback(
+    async (integrationId, options) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const client = getApiClient();
+        const integration = integrations.find(
+          (i) => i.id === integrationId || i.type === integrationId
+        );
+        const isOAuth = integration?.authType === "oauth" || integration?.authType === "oauth2" || integration?.authType === "oauth1";
+        const response = await client.connect(integrationId, {
+          credentials: options?.credentials,
+          accountIntegrationName: options?.accountIntegrationName
+        });
+        if (!isOAuth) {
+          setIsLoading(false);
+          if (response.success && (response.connection || response.account_integration)) {
+            const connection = response.connection || response.account_integration;
+            setConnections((prev) => [...prev, connection]);
+            onConnect?.(connection);
+            return { success: true, connection };
+          } else {
+            const errorMsg = response.message || "Failed to connect";
+            const connError = new Error(errorMsg);
+            setError(connError);
+            onError?.(connError);
+            return { success: false, error: errorMsg };
+          }
+        }
+        const authUrl = response.authUrl || response.redirect_url;
+        if (!authUrl) {
+          throw new Error("No authorization URL received");
+        }
+        const popup = openPopup(authUrl, "handled-connect");
+        if (!popup) {
+          throw new Error("Popup blocked. Please allow popups for this site.");
+        }
+        return new Promise((resolve) => {
+          const pollInterval = setInterval(async () => {
+            if (popup.closed) {
+              clearInterval(pollInterval);
+              setIsLoading(false);
+              try {
+                if (response.connectionId) {
+                  const connection = await client.checkConnectionStatus(response.connectionId);
+                  if (connection.status === "active") {
+                    setConnections((prev) => [...prev, connection]);
+                    onConnect?.(connection);
+                    resolve({ success: true, connection });
+                  } else if (connection.status === "error") {
+                    const connError = new Error(connection.error || "Connection failed");
+                    setError(connError);
+                    onError?.(connError);
+                    resolve({ success: false, error: connection.error });
+                  } else {
+                    await refreshConnections();
+                    resolve({ success: true, connection });
+                  }
+                } else {
+                  await refreshConnections();
+                  resolve({ success: true });
+                }
+              } catch (err) {
+                resolve({ success: false, error: "Connection was cancelled or failed" });
+              }
+            }
+          }, 500);
+          setTimeout(() => {
+            clearInterval(pollInterval);
+            if (!popup.closed) {
+              popup.close();
+            }
+            setIsLoading(false);
+            resolve({ success: false, error: "Connection timed out" });
+          }, 10 * 60 * 1e3);
+        });
+      } catch (err) {
+        const connectError = err instanceof Error ? err : new Error("Failed to connect");
+        setError(connectError);
+        onError?.(connectError);
+        setIsLoading(false);
+        return { success: false, error: connectError.message };
+      }
+    },
+    [getApiClient, integrations, onConnect, onError, refreshConnections]
+  );
+  const disconnect = react.useCallback(
+    async (connectionId) => {
+      setIsLoading(true);
+      try {
+        const client = getApiClient();
+        await client.disconnect(connectionId);
+        setConnections((prev) => prev.filter((c) => c.id !== connectionId));
+        onDisconnect?.(connectionId);
+        setError(null);
+      } catch (err) {
+        const disconnectError = err instanceof Error ? err : new Error("Failed to disconnect");
+        setError(disconnectError);
+        onError?.(disconnectError);
+        throw disconnectError;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [getApiClient, onDisconnect, onError]
+  );
+  const contextValue = react.useMemo(
+    () => ({
+      isReady,
+      isLoading,
+      integrations,
+      connections,
+      connect,
+      disconnect,
+      refreshConnections,
+      error,
+      accountId
+    }),
+    [isReady, isLoading, integrations, connections, connect, disconnect, refreshConnections, error, accountId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(HandledContext.Provider, { value: contextValue, children });
+}
+function useHandledContext() {
+  const context = react.useContext(HandledContext);
+  if (!context) {
+    throw new Error("useHandled must be used within a HandledProvider");
+  }
+  return context;
+}
+var modalStyles = {
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    padding: "16px"
+  },
+  modal: {
+    backgroundColor: "#ffffff",
+    borderRadius: "16px",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    width: "100%",
+    maxWidth: "480px",
+    maxHeight: "90vh",
+    overflow: "auto",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  },
+  header: {
+    padding: "24px 24px 0"
+  },
+  titleRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px"
+  },
+  logo: {
+    width: "40px",
+    height: "40px",
+    borderRadius: "8px",
+    objectFit: "contain"
+  },
+  logoPlaceholder: {
+    width: "40px",
+    height: "40px",
+    borderRadius: "8px",
+    backgroundColor: "#f3f4f6",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "18px",
+    fontWeight: 600,
+    color: "#6b7280"
+  },
+  title: {
+    fontSize: "18px",
+    fontWeight: 600,
+    color: "#111827",
+    margin: 0
+  },
+  description: {
+    fontSize: "14px",
+    color: "#6b7280",
+    marginTop: "8px",
+    lineHeight: 1.5
+  },
+  body: {
+    padding: "24px"
+  },
+  oauthMessage: {
+    textAlign: "center",
+    padding: "16px",
+    backgroundColor: "#f9fafb",
+    borderRadius: "8px",
+    marginBottom: "16px"
+  },
+  oauthText: {
+    fontSize: "14px",
+    color: "#6b7280",
+    margin: 0
+  },
+  infoBox: {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "12px",
+    padding: "12px",
+    backgroundColor: "#eff6ff",
+    border: "1px solid #bfdbfe",
+    borderRadius: "8px",
+    marginBottom: "16px"
+  },
+  infoContent: {
+    flex: 1
+  },
+  infoTitle: {
+    fontSize: "14px",
+    fontWeight: 500,
+    color: "#1e40af",
+    margin: 0
+  },
+  infoText: {
+    fontSize: "13px",
+    color: "#1e40af",
+    margin: "4px 0 0"
+  },
+  fieldGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px"
+  },
+  field: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px"
+  },
+  label: {
+    fontSize: "14px",
+    fontWeight: 500,
+    color: "#374151"
+  },
+  required: {
+    color: "#ef4444"
+  },
+  input: {
+    padding: "10px 12px",
+    fontSize: "14px",
+    border: "1px solid #d1d5db",
+    borderRadius: "8px",
+    outline: "none",
+    transition: "border-color 0.2s, box-shadow 0.2s"
+  },
+  fieldDescription: {
+    fontSize: "12px",
+    color: "#6b7280"
+  },
+  select: {
+    padding: "10px 12px",
+    fontSize: "14px",
+    border: "1px solid #d1d5db",
+    borderRadius: "8px",
+    backgroundColor: "#ffffff",
+    cursor: "pointer"
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "12px",
+    padding: "16px 24px 24px",
+    borderTop: "1px solid #e5e7eb"
+  },
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    padding: "10px 20px",
+    fontSize: "14px",
+    fontWeight: 500,
+    borderRadius: "8px",
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color 0.2s, opacity 0.2s"
+  },
+  buttonCancel: {
+    backgroundColor: "#f3f4f6",
+    color: "#374151"
+  },
+  buttonPrimary: {
+    backgroundColor: "#3b82f6",
+    color: "#ffffff"
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+    cursor: "not-allowed"
+  },
+  error: {
+    padding: "12px",
+    backgroundColor: "#fef2f2",
+    border: "1px solid #fecaca",
+    borderRadius: "8px",
+    color: "#dc2626",
+    fontSize: "14px",
+    marginBottom: "16px"
+  },
+  spinner: {
+    width: "16px",
+    height: "16px",
+    border: "2px solid rgba(255, 255, 255, 0.3)",
+    borderTopColor: "#ffffff",
+    borderRadius: "50%",
+    animation: "handled-spin 0.6s linear infinite"
+  }
+};
+var InfoIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+] });
+var ExternalLinkIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+] });
+var Spinner = () => /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalStyles.spinner, children: /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes handled-spin { to { transform: rotate(360deg); } }` }) });
+function ConnectionModal({
+  isOpen,
+  onClose,
+  integration,
+  onSuccess,
+  onError
+}) {
+  const { connect } = useHandledContext();
+  const [formData, setFormData] = react.useState({});
+  const [loading, setLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const isOAuth = integration.authType === "oauth" || integration.authType === "oauth2" || integration.authType === "oauth1";
+  react.useEffect(() => {
+    if (integration) {
+      const initialFormData = {};
+      if (integration.inputFields) {
+        Object.entries(integration.inputFields).forEach(([fieldName, fieldConfig]) => {
+          initialFormData[fieldName] = fieldConfig.default || "";
+        });
+      }
+      setFormData(initialFormData);
+      setError(null);
+    }
+  }, [integration]);
+  if (!isOpen) return null;
+  const displayName = integration.displayName || integration.name;
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await connect(integration.id, {
+        credentials: formData,
+        accountIntegrationName: formData["account_integration_name"]
+      });
+      if (result.success && result.connection) {
+        onSuccess(result.connection);
+        onClose();
+      } else {
+        const errorMsg = result.error || "Failed to connect";
+        setError(errorMsg);
+        onError(errorMsg);
+      }
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : "Connection failed";
+      setError(errorMsg);
+      onError(errorMsg);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const renderFormFields = () => {
+    if (!integration.inputFields) return null;
+    return Object.entries(integration.inputFields).sort(([, a], [, b]) => (a.sort_order || 0) - (b.sort_order || 0)).map(([fieldName, fieldConfig]) => {
+      const {
+        label = fieldName,
+        type = "text",
+        required = false,
+        placeholder = "",
+        description = "",
+        options
+      } = fieldConfig;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.field, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { style: modalStyles.label, children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { style: modalStyles.required, children: "*" })
+        ] }),
+        type === "select" && options ? /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            name: fieldName,
+            value: formData[fieldName] || "",
+            onChange: handleInputChange,
+            required,
+            style: modalStyles.select,
+            children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.name }, option.value))
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: type === "password" ? "password" : type === "email" ? "email" : "text",
+            name: fieldName,
+            value: formData[fieldName] || "",
+            onChange: handleInputChange,
+            placeholder,
+            required,
+            style: modalStyles.input
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx("span", { style: modalStyles.fieldDescription, children: description })
+      ] }, fieldName);
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalStyles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.modal, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.titleRow, children: [
+        integration.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: integration.logoUrl, alt: displayName, style: modalStyles.logo }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalStyles.logoPlaceholder, children: displayName.charAt(0) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("h2", { style: modalStyles.title, children: [
+          "Connect to ",
+          displayName
+        ] })
+      ] }),
+      integration.description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: modalStyles.description, children: integration.description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.body, children: [
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalStyles.error, children: error }),
+        integration.authType === "api_key" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.infoBox, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.infoContent, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { style: modalStyles.infoTitle, children: "Where to find your API key" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { style: modalStyles.infoText, children: [
+              "Find your API key in your ",
+              displayName,
+              " account settings or developer section."
+            ] })
+          ] })
+        ] }),
+        isOAuth && /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalStyles.oauthMessage, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { style: modalStyles.oauthText, children: [
+          "You'll be redirected to ",
+          displayName,
+          " to authorize access to your account. No credentials will be stored in our system."
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.fieldGroup, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.field, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { style: modalStyles.label, children: [
+              "Integration Name ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: modalStyles.required, children: "*" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                name: "account_integration_name",
+                placeholder: `My ${displayName} Store`,
+                value: formData["account_integration_name"] || "",
+                onChange: handleInputChange,
+                required: true,
+                autoFocus: true,
+                style: modalStyles.input
+              }
+            )
+          ] }),
+          !isOAuth && renderFormFields()
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.actions, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            disabled: loading,
+            style: {
+              ...modalStyles.button,
+              ...modalStyles.buttonCancel,
+              ...loading ? modalStyles.buttonDisabled : {}
+            },
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: loading,
+            style: {
+              ...modalStyles.button,
+              ...modalStyles.buttonPrimary,
+              ...loading ? modalStyles.buttonDisabled : {}
+            },
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+              "Connecting..."
+            ] }) : isOAuth ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ExternalLinkIcon, {}),
+              "Connect with ",
+              displayName
+            ] }) : "Connect"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+var styles = {
+  container: {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    maxWidth: "800px",
+    margin: "0 auto"
+  },
+  header: {
+    marginBottom: "24px"
+  },
+  title: {
+    fontSize: "24px",
+    fontWeight: 600,
+    color: "#111827",
+    margin: 0
+  },
+  description: {
+    fontSize: "14px",
+    color: "#6b7280",
+    marginTop: "8px"
+  },
+  section: {
+    marginBottom: "32px"
+  },
+  sectionTitle: {
+    fontSize: "14px",
+    fontWeight: 600,
+    color: "#374151",
+    marginBottom: "16px",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+    gap: "16px"
+  },
+  card: {
+    border: "1px solid #e5e7eb",
+    borderRadius: "12px",
+    padding: "20px",
+    backgroundColor: "#ffffff",
+    transition: "border-color 0.2s, box-shadow 0.2s",
+    cursor: "pointer"
+  },
+  cardHover: {
+    borderColor: "#3b82f6",
+    boxShadow: "0 4px 12px rgba(59, 130, 246, 0.15)"
+  },
+  cardConnected: {
+    borderColor: "#10b981",
+    backgroundColor: "#f0fdf4"
+  },
+  cardLogo: {
+    width: "48px",
+    height: "48px",
+    borderRadius: "8px",
+    objectFit: "contain",
+    marginBottom: "12px",
+    backgroundColor: "#f3f4f6"
+  },
+  cardLogoPlaceholder: {
+    width: "48px",
+    height: "48px",
+    borderRadius: "8px",
+    backgroundColor: "#e5e7eb",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: "12px",
+    fontSize: "20px",
+    fontWeight: 600,
+    color: "#6b7280"
+  },
+  cardName: {
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "#111827",
+    marginBottom: "4px"
+  },
+  cardDescription: {
+    fontSize: "13px",
+    color: "#6b7280",
+    marginBottom: "12px",
+    lineHeight: 1.4
+  },
+  cardStatus: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    fontSize: "12px",
+    color: "#10b981",
+    fontWeight: 500
+  },
+  cardStoreName: {
+    fontSize: "12px",
+    color: "#6b7280",
+    marginTop: "4px"
+  },
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "8px",
+    padding: "8px 16px",
+    fontSize: "14px",
+    fontWeight: 500,
+    borderRadius: "8px",
+    border: "none",
+    cursor: "pointer",
+    transition: "background-color 0.2s"
+  },
+  buttonPrimary: {
+    backgroundColor: "#3b82f6",
+    color: "#ffffff"
+  },
+  buttonDanger: {
+    backgroundColor: "#fef2f2",
+    color: "#dc2626"
+  },
+  buttonDisabled: {
+    opacity: 0.6,
+    cursor: "not-allowed"
+  },
+  badge: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 8px",
+    fontSize: "11px",
+    fontWeight: 500,
+    borderRadius: "9999px"
+  },
+  badgeBeta: {
+    backgroundColor: "#fef3c7",
+    color: "#92400e"
+  },
+  badgeComingSoon: {
+    backgroundColor: "#f3f4f6",
+    color: "#6b7280"
+  },
+  loading: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px",
+    color: "#6b7280"
+  },
+  spinner: {
+    width: "24px",
+    height: "24px",
+    border: "3px solid #e5e7eb",
+    borderTopColor: "#3b82f6",
+    borderRadius: "50%",
+    animation: "spin 1s linear infinite"
+  },
+  emptyState: {
+    textAlign: "center",
+    padding: "48px",
+    color: "#6b7280"
+  }
+};
+var CheckIcon = ({ size = 16 }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) });
+var LinkIcon = ({ size = 16 }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+] });
+var TrashIcon = ({ size = 16 }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 6 5 6 21 6" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+] });
+var Spinner2 = () => /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.spinner, children: /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }) });
+function IntegrationCard({
+  integration,
+  connection,
+  onConnect,
+  onDisconnect,
+  isLoading
+}) {
+  const [isHovered, setIsHovered] = react.useState(false);
+  const isConnected = !!connection;
+  const isComingSoon = integration.status === "coming_soon";
+  const isBeta = integration.status === "beta";
+  const cardStyle = {
+    ...styles.card,
+    ...isHovered && !isConnected && !isComingSoon ? styles.cardHover : {},
+    ...isConnected ? styles.cardConnected : {},
+    ...isComingSoon ? { opacity: 0.6, cursor: "default" } : {}
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: cardStyle,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        integration.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: integration.logoUrl, alt: integration.name, style: styles.cardLogo }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.cardLogoPlaceholder, children: integration.name.charAt(0) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.cardName, children: [
+          integration.name,
+          isBeta && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles.badge, ...styles.badgeBeta, marginLeft: "8px" }, children: "Beta" }),
+          isComingSoon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { ...styles.badge, ...styles.badgeComingSoon, marginLeft: "8px" }, children: "Coming Soon" })
+        ] }),
+        integration.description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.cardDescription, children: integration.description }),
+        isConnected ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.cardStatus, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: 14 }),
+            "Connected"
+          ] }),
+          connection.storeName && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.cardStoreName, children: connection.storeName }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onDisconnect();
+              },
+              disabled: isLoading,
+              style: {
+                ...styles.button,
+                ...styles.buttonDanger,
+                ...isLoading ? styles.buttonDisabled : {},
+                marginTop: "12px",
+                width: "100%"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, { size: 14 }),
+                "Disconnect"
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: onConnect,
+            disabled: isLoading || isComingSoon,
+            style: {
+              ...styles.button,
+              ...styles.buttonPrimary,
+              ...isLoading || isComingSoon ? styles.buttonDisabled : {},
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, { size: 14 }),
+              "Connect"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function IntegrationHub({
+  onConnect,
+  onDisconnect,
+  onError,
+  className,
+  style,
+  categories,
+  integrationIds,
+  hideConnected,
+  title = "Integrations",
+  description = "Connect your e-commerce platforms to sync data automatically."
+}) {
+  const {
+    isReady,
+    isLoading,
+    integrations,
+    connections,
+    connect,
+    disconnect,
+    error
+  } = useHandledContext();
+  const [loadingIntegrationId, setLoadingIntegrationId] = react.useState(null);
+  const [selectedIntegration, setSelectedIntegration] = react.useState(null);
+  const [showConnectionModal, setShowConnectionModal] = react.useState(false);
+  const filteredIntegrations = integrations.filter((integration) => {
+    if (integrationIds && !integrationIds.includes(integration.id)) {
+      return false;
+    }
+    if (categories && !categories.includes(integration.category)) {
+      return false;
+    }
+    return true;
+  });
+  const getConnection = (integrationId) => {
+    return connections.find((c) => c.integrationId === integrationId);
+  };
+  const handleConnect = (integration) => {
+    setSelectedIntegration(integration);
+    setShowConnectionModal(true);
+  };
+  const handleConnectionSuccess = (connection) => {
+    setShowConnectionModal(false);
+    setSelectedIntegration(null);
+    onConnect?.(connection);
+  };
+  const handleConnectionError = (errorMsg) => {
+    onError?.(new Error(errorMsg));
+  };
+  const handleModalClose = () => {
+    setShowConnectionModal(false);
+    setSelectedIntegration(null);
+  };
+  const handleDisconnect = async (connectionId) => {
+    setLoadingIntegrationId(connectionId);
+    try {
+      await disconnect(connectionId);
+      onDisconnect?.(connectionId);
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error("Disconnect failed"));
+    } finally {
+      setLoadingIntegrationId(null);
+    }
+  };
+  if (!isReady) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...styles.container, ...style }, className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.loading, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner2, {}) }) });
+  }
+  if (error && integrations.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...styles.container, ...style }, className, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.emptyState, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Failed to load integrations. Please try again." }) }) });
+  }
+  const connectedIntegrations = filteredIntegrations.filter((i) => getConnection(i.id));
+  const availableIntegrations = filteredIntegrations.filter((i) => !getConnection(i.id));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...styles.container, ...style }, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles.title, children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles.description, children: description })
+    ] }),
+    !hideConnected && connectedIntegrations.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.section, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: "Connected" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.grid, children: connectedIntegrations.map((integration) => {
+        const connection = getConnection(integration.id);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          IntegrationCard,
+          {
+            integration,
+            connection,
+            onConnect: () => handleConnect(integration),
+            onDisconnect: () => handleDisconnect(connection.id),
+            isLoading: isLoading || loadingIntegrationId === connection.id
+          },
+          integration.id
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.section, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles.sectionTitle, children: connectedIntegrations.length > 0 ? "Available" : "All Integrations" }),
+      availableIntegrations.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.grid, children: availableIntegrations.map((integration) => /* @__PURE__ */ jsxRuntime.jsx(
+        IntegrationCard,
+        {
+          integration,
+          onConnect: () => handleConnect(integration),
+          onDisconnect: () => {
+          },
+          isLoading: isLoading || loadingIntegrationId === integration.id
+        },
+        integration.id
+      )) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.emptyState, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "All available integrations are connected!" }) })
+    ] }),
+    selectedIntegration && /* @__PURE__ */ jsxRuntime.jsx(
+      ConnectionModal,
+      {
+        isOpen: showConnectionModal,
+        onClose: handleModalClose,
+        integration: selectedIntegration,
+        onSuccess: handleConnectionSuccess,
+        onError: handleConnectionError
+      }
+    )
+  ] });
+}
+
+// src/hooks/useHandled.ts
+function useHandled() {
+  return useHandledContext();
+}
+
+exports.ConnectionModal = ConnectionModal;
+exports.HandledApiClient = HandledApiClient;
+exports.HandledProvider = HandledProvider;
+exports.IntegrationHub = IntegrationHub;
+exports.useHandled = useHandled;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map