@calimero-network/mero-react 1.0.0-beta.1 → 1.0.2

package/dist/index.js

@@ -1,11 +1,25 @@
 import { createContext, useState, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
-import { MeroJs } from '@calimero-network/mero-js';
-export { MeroJs } from '@calimero-network/mero-js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createPortal } from 'react-dom';
+import { parseAuthCallback, MeroJs, buildAuthLoginUrl, LocalStorageTokenStore } from '@calimero-network/mero-js';
+export * from '@calimero-network/mero-js';
+import { jsx } from 'react/jsx-runtime';
 
 // src/context/MeroContext.tsx
 
+// src/types.ts
+var AppMode = /* @__PURE__ */ ((AppMode2) => {
+  AppMode2["SingleContext"] = "single-context";
+  AppMode2["MultiContext"] = "multi-context";
+  AppMode2["Admin"] = "admin";
+  return AppMode2;
+})(AppMode || {});
+var ConnectionType = /* @__PURE__ */ ((ConnectionType2) => {
+  ConnectionType2["RemoteAndLocal"] = "remote-and-local";
+  ConnectionType2["Remote"] = "remote";
+  ConnectionType2["Local"] = "local";
+  ConnectionType2["Custom"] = "custom";
+  return ConnectionType2;
+})(ConnectionType || {});
+
 // src/storage/index.ts
 var STORAGE_KEYS = {
   ACCESS_TOKEN: "mero:access_token",
@@ -13,20 +27,25 @@ var STORAGE_KEYS = {
   EXPIRES_AT: "mero:expires_at",
   NODE_URL: "mero:node_url",
   APPLICATION_ID: "mero:application_id",
-  CONTEXT_ID: "mero:context_id"
+  CONTEXT_ID: "mero:context_id",
+  CONTEXT_IDENTITY: "mero:context_identity"
 };
+var _storageAvailable = null;
 function isLocalStorageAvailable() {
+  if (_storageAvailable !== null) return _storageAvailable;
   try {
     if (typeof window === "undefined" || !window.localStorage) {
+      _storageAvailable = false;
       return false;
     }
     const testKey = "__mero_test__";
     localStorage.setItem(testKey, "test");
     localStorage.removeItem(testKey);
-    return true;
+    _storageAvailable = true;
   } catch {
-    return false;
+    _storageAvailable = false;
   }
+  return _storageAvailable;
 }
 var localStorageTokenStorage = {
   async get() {
@@ -107,46 +126,37 @@ function setContextId(id) {
   if (!isLocalStorageAvailable()) return;
   localStorage.setItem(STORAGE_KEYS.CONTEXT_ID, id);
 }
+function clearContextId() {
+  if (!isLocalStorageAvailable()) return;
+  localStorage.removeItem(STORAGE_KEYS.CONTEXT_ID);
+}
+function getContextIdentity() {
+  if (!isLocalStorageAvailable()) return null;
+  return localStorage.getItem(STORAGE_KEYS.CONTEXT_IDENTITY);
+}
+function setContextIdentity(id) {
+  if (!isLocalStorageAvailable()) return;
+  localStorage.setItem(STORAGE_KEYS.CONTEXT_IDENTITY, id);
+}
+function clearContextIdentity() {
+  if (!isLocalStorageAvailable()) return;
+  localStorage.removeItem(STORAGE_KEYS.CONTEXT_IDENTITY);
+}
 function clearAllStorage() {
   if (!isLocalStorageAvailable()) return;
   Object.values(STORAGE_KEYS).forEach((key) => {
     localStorage.removeItem(key);
   });
 }
-
-// src/types.ts
-var AppMode = /* @__PURE__ */ ((AppMode2) => {
-  AppMode2["SingleContext"] = "single-context";
-  AppMode2["MultiContext"] = "multi-context";
-  AppMode2["Admin"] = "admin";
-  return AppMode2;
-})(AppMode || {});
-var ConnectionType = /* @__PURE__ */ ((ConnectionType2) => {
-  ConnectionType2["RemoteAndLocal"] = "remote-and-local";
-  ConnectionType2["Remote"] = "remote";
-  ConnectionType2["Local"] = "local";
-  ConnectionType2["Custom"] = "custom";
-  return ConnectionType2;
-})(ConnectionType || {});
-var EventStreamMode = /* @__PURE__ */ ((EventStreamMode2) => {
-  EventStreamMode2["WebSocket"] = "websocket";
-  EventStreamMode2["SSE"] = "sse";
-  return EventStreamMode2;
-})(EventStreamMode || {});
-var defaultContextValue = {
-  mero: null,
-  isAuthenticated: false,
-  isOnline: true,
-  nodeUrl: null,
-  applicationId: null,
-  contextId: null,
-  connectToNode: () => {
-  },
-  logout: () => {
-  },
-  isLoading: true
-};
-var MeroContext = createContext(defaultContextValue);
+var MeroContext = createContext(null);
+var isBrowser = typeof window !== "undefined";
+var _tokenStore = null;
+function getTokenStore() {
+  if (!_tokenStore) {
+    _tokenStore = new LocalStorageTokenStore();
+  }
+  return _tokenStore;
+}
 function getPermissionsForMode(mode) {
   switch (mode) {
     case "single-context" /* SingleContext */:
@@ -159,27 +169,20 @@ function getPermissionsForMode(mode) {
       throw new Error(`Unsupported application mode: ${mode}`);
   }
 }
-function redirectToAuthLogin(params) {
-  const authParams = new URLSearchParams();
-  authParams.append("callback-url", params.callbackUrl);
-  authParams.append("permissions", params.permissions.join(","));
-  authParams.append("mode", params.mode);
-  if (params.packageName) {
-    authParams.append("package-name", params.packageName);
-    if (params.packageVersion) {
-      authParams.append("package-version", params.packageVersion);
-    }
-    if (params.registryUrl) {
-      authParams.append("registry-url", params.registryUrl);
+function parseJwtExpiry(token) {
+  try {
+    const parts = token.split(".");
+    if (parts.length === 3) {
+      let b64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
+      while (b64.length % 4) b64 += "=";
+      const payload = JSON.parse(atob(b64));
+      if (payload.exp && payload.exp > 0) {
+        return payload.exp * 1e3;
+      }
     }
-  } else if (params.applicationId) {
-    authParams.append("application-id", params.applicationId);
-  }
-  if (params.applicationPath) {
-    authParams.append("application-path", params.applicationPath);
+  } catch {
   }
-  authParams.append("app-url", params.nodeUrl);
-  window.location.href = `${params.nodeUrl}/auth/login?${authParams.toString()}`;
+  return Date.now() + 36e5;
 }
 function MeroProvider({
   children,
@@ -187,8 +190,6 @@ function MeroProvider({
   packageName,
   packageVersion,
   registryUrl,
-  applicationId: propApplicationId,
-  applicationPath,
   timeoutMs = 3e4
 }) {
   const [mero, setMero] = useState(null);
@@ -197,15 +198,23 @@ function MeroProvider({
   const [isLoading, setIsLoading] = useState(true);
   const [nodeUrl, setNodeUrlState] = useState(() => getNodeUrl());
   const [applicationId, setApplicationIdState] = useState(
-    () => getApplicationId() || propApplicationId || null
+    () => getApplicationId() || null
   );
   const [contextId, setContextIdState] = useState(() => getContextId());
+  const [contextIdentity, setContextIdentityState] = useState(() => getContextIdentity());
   const meroRef = useRef(null);
+  const callbackRef = useRef(void 0);
+  if (callbackRef.current === void 0 && isBrowser) {
+    callbackRef.current = parseAuthCallback(window.location.href);
+  }
   const createMeroInstance = useCallback(
     (url) => {
+      if (meroRef.current) {
+        meroRef.current.close();
+      }
       const instance = new MeroJs({
         baseUrl: url,
-        tokenStorage: localStorageTokenStorage,
+        tokenStore: getTokenStore(),
         timeoutMs
       });
       meroRef.current = instance;
@@ -215,127 +224,35 @@ function MeroProvider({
   );
   const checkAuth = useCallback(async (instance) => {
     try {
-      await instance.admin.contexts.listContexts();
+      await instance.admin.getContexts();
       return true;
     } catch {
       return false;
     }
   }, []);
-  const processAuthCallback = useCallback(() => {
-    const url = new URL(window.location.href);
-    const rawHash = url.hash;
-    const hash = rawHash.slice(1);
-    console.log("========== AUTH CALLBACK DEBUG ==========");
-    console.log("Raw URL:", window.location.href);
-    console.log("Raw hash:", rawHash);
-    console.log("Hash (without #):", hash);
-    if (!hash) {
-      console.log("No hash found, skipping auth callback");
-      console.log("==========================================");
-      return false;
-    }
-    const params = new URLSearchParams(hash);
-    console.log("All hash params:");
-    for (const [key, value] of params.entries()) {
-      console.log(`  ${key}: ${value.substring(0, 50)}${value.length > 50 ? "..." : ""}`);
-    }
-    console.log("==========================================");
-    const accessToken = params.get("access_token");
-    const refreshToken = params.get("refresh_token");
-    const appId = params.get("application_id") || params.get("applicationId") || params.get("app_id");
-    const ctxId = params.get("context_id") || params.get("contextId") || params.get("context");
-    const expiresIn = params.get("expires_in");
-    const nodeUrlParam = params.get("node_url") || params.get("nodeUrl") || params.get("node");
-    if (!accessToken || !refreshToken) return false;
-    if (nodeUrlParam) {
-      const decodedNodeUrl = decodeURIComponent(nodeUrlParam);
-      setNodeUrl(decodedNodeUrl);
-      setNodeUrlState(decodedNodeUrl);
-      console.log("[mero-react] SSO: Node URL from hash params:", decodedNodeUrl);
-    }
-    try {
-      const decodedAccess = decodeURIComponent(accessToken);
-      const decodedRefresh = decodeURIComponent(refreshToken);
-      let expiresAt = Date.now() + 36e5;
-      if (expiresIn) {
-        expiresAt = Date.now() + parseInt(expiresIn, 10) * 1e3;
-      } else {
-        try {
-          const parts = decodedAccess.split(".");
-          if (parts.length === 3) {
-            const payload = JSON.parse(atob(parts[1]));
-            if (payload.exp) {
-              expiresAt = payload.exp * 1e3;
-            }
-          }
-        } catch {
-        }
-      }
-      localStorageTokenStorage.set({
-        access_token: decodedAccess,
-        refresh_token: decodedRefresh,
-        expires_at: expiresAt
-      });
-      if (appId) {
-        setApplicationId(appId);
-        setApplicationIdState(appId);
-      }
-      if (ctxId) {
-        setContextId(ctxId);
-        setContextIdState(ctxId);
-      }
-      params.delete("access_token");
-      params.delete("refresh_token");
-      params.delete("application_id");
-      params.delete("applicationId");
-      params.delete("app_id");
-      params.delete("context_id");
-      params.delete("contextId");
-      params.delete("context");
-      params.delete("expires_in");
-      params.delete("node_url");
-      params.delete("nodeUrl");
-      params.delete("node");
-      const newHash = params.toString();
-      url.hash = newHash ? `#${newHash}` : "";
-      window.history.replaceState({}, document.title, url.toString());
-      console.log("[mero-react] Stored contextId:", ctxId, "applicationId:", appId);
-      return true;
-    } catch (e) {
-      console.error("[mero-react] Failed to process auth callback:", e);
-      return false;
-    }
-  }, []);
   const connectToNode = useCallback(
     (url) => {
+      if (!isBrowser) return;
       setNodeUrl(url);
       setNodeUrlState(url);
       const callbackUrl = new URL(window.location.href);
-      if (callbackUrl.hash) {
-        const hashParams = new URLSearchParams(callbackUrl.hash.substring(1));
-        hashParams.delete("access_token");
-        hashParams.delete("refresh_token");
-        hashParams.delete("application_id");
-        callbackUrl.hash = hashParams.toString() ? `#${hashParams.toString()}` : "";
-      }
-      const permissions = getPermissionsForMode(mode);
-      redirectToAuthLogin({
-        nodeUrl: url,
+      callbackUrl.hash = "";
+      const loginUrl = buildAuthLoginUrl(url, {
         callbackUrl: callbackUrl.toString(),
-        permissions,
+        permissions: getPermissionsForMode(mode),
         mode,
         packageName,
         packageVersion,
-        registryUrl,
-        applicationId: propApplicationId,
-        applicationPath
+        registryUrl
       });
+      window.location.href = loginUrl;
     },
-    [mode, packageName, packageVersion, registryUrl, propApplicationId, applicationPath]
+    [mode, packageName, packageVersion, registryUrl]
   );
-  const logout = useCallback(async () => {
+  const logout = useCallback(() => {
     if (meroRef.current) {
-      await meroRef.current.clearToken();
+      meroRef.current.clearToken();
+      meroRef.current.close();
     }
     clearAllStorage();
     setMero(null);
@@ -343,56 +260,90 @@ function MeroProvider({
     setNodeUrlState(null);
     setApplicationIdState(null);
     setContextIdState(null);
+    setContextIdentityState(null);
     meroRef.current = null;
   }, []);
   useEffect(() => {
+    let active = true;
     const init = async () => {
-      console.log("[mero-react] Init starting...");
-      console.log("[mero-react] Current URL:", window.location.href);
-      console.log("[mero-react] Stored nodeUrl:", getNodeUrl());
-      console.log("[mero-react] Stored contextId:", getContextId());
-      console.log("[mero-react] Stored applicationId:", getApplicationId());
-      const hasCallback = processAuthCallback();
-      console.log("[mero-react] hasCallback:", hasCallback);
-      const savedUrl = getNodeUrl();
+      const callback = callbackRef.current;
+      if (callback) {
+        getTokenStore().setTokens({
+          access_token: callback.accessToken,
+          refresh_token: callback.refreshToken,
+          expires_at: parseJwtExpiry(callback.accessToken)
+        });
+        if (callback.applicationId) {
+          setApplicationId(callback.applicationId);
+          if (active) setApplicationIdState(callback.applicationId);
+        }
+        if (callback.contextId) {
+          setContextId(callback.contextId);
+          if (active) setContextIdState(callback.contextId);
+        }
+        if (callback.contextIdentity) {
+          setContextIdentity(callback.contextIdentity);
+          if (active) setContextIdentityState(callback.contextIdentity);
+        }
+        if (callback.nodeUrl) {
+          setNodeUrl(callback.nodeUrl);
+          if (active) setNodeUrlState(callback.nodeUrl);
+        }
+        if (isBrowser) {
+          window.history.replaceState({}, "", window.location.pathname + window.location.search);
+        }
+        callbackRef.current = null;
+      }
+      const savedUrl = callback?.nodeUrl || getNodeUrl();
       if (!savedUrl) {
-        setIsLoading(false);
+        if (active) setIsLoading(false);
         return;
       }
       const instance = createMeroInstance(savedUrl);
-      await instance.init();
       const authed = await checkAuth(instance);
+      if (!active) return;
       if (authed) {
         setMero(instance);
         setIsAuthenticated(true);
         setIsOnline(true);
-      } else if (hasCallback) {
+      } else if (callback) {
         setMero(instance);
-        setIsAuthenticated(false);
       }
       setIsLoading(false);
     };
-    init();
-  }, [createMeroInstance, checkAuth, processAuthCallback]);
+    init().catch((err) => {
+      console.error("[MeroProvider] Initialization failed:", err);
+      if (active) setIsLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [createMeroInstance, checkAuth]);
   useEffect(() => {
     if (!isAuthenticated || !meroRef.current) return;
-    const interval = setInterval(async () => {
-      const instance = meroRef.current;
-      if (!instance) return;
-      const healthy = await checkAuth(instance);
-      if (!healthy && isOnline) {
-        setIsOnline(false);
-      } else if (healthy && !isOnline) {
-        setIsOnline(true);
+    let active = true;
+    const sse = meroRef.current.events;
+    const onConnect = () => {
+      if (active) setIsOnline(true);
+    };
+    const onError = (err) => {
+      if (!active) return;
+      setIsOnline(false);
+      if (err.message.includes("401")) {
+        logout();
       }
-    }, 5e3);
-    return () => clearInterval(interval);
-  }, [isAuthenticated, isOnline, checkAuth]);
-  useEffect(() => {
-    if (propApplicationId && !applicationId) {
-      setApplicationIdState(propApplicationId);
-    }
-  }, [propApplicationId, applicationId]);
+    };
+    sse.on("connect", onConnect);
+    sse.on("error", onError);
+    sse.connect().catch(() => {
+      if (active) setIsOnline(false);
+    });
+    return () => {
+      active = false;
+      sse.off("connect", onConnect);
+      sse.off("error", onError);
+    };
+  }, [isAuthenticated, mero]);
   const contextValue = useMemo(
     () => ({
       mero,
@@ -401,493 +352,122 @@ function MeroProvider({
       nodeUrl,
       applicationId,
       contextId,
+      contextIdentity,
       connectToNode,
       logout,
       isLoading
     }),
-    [mero, isAuthenticated, isOnline, nodeUrl, applicationId, contextId, connectToNode, logout, isLoading]
+    [mero, isAuthenticated, isOnline, nodeUrl, applicationId, contextId, contextIdentity, connectToNode, logout, isLoading]
   );
   return /* @__PURE__ */ jsx(MeroContext.Provider, { value: contextValue, children });
 }
 function useMero() {
   const context = useContext(MeroContext);
-  if (context === void 0) {
+  if (!context) {
     throw new Error("useMero must be used within a MeroProvider");
   }
   return context;
 }
-function isValidUrl(urlString) {
-  if (!urlString || urlString.trim() === "") {
-    return false;
-  }
-  try {
-    const urlToTest = urlString.startsWith("http://") || urlString.startsWith("https://") ? urlString : `https://${urlString}`;
-    const url = new URL(urlToTest);
-    if (url.protocol !== "http:" && url.protocol !== "https:") {
-      return false;
-    }
-    if (!url.hostname) {
-      return false;
-    }
-    const hostname = url.hostname;
-    if (hostname === "localhost") {
-      return true;
-    }
-    const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;
-    if (ipv4Regex.test(hostname)) {
-      const octets = hostname.split(".").map(Number);
-      return octets.every((octet) => octet >= 0 && octet <= 255);
-    }
-    const domainRegex = /^[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
-    return domainRegex.test(hostname);
-  } catch {
-    return false;
-  }
-}
-var styles = {
-  overlay: {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.75)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1e4,
-    padding: "1rem"
-  },
-  content: {
-    backgroundColor: "#1f2937",
-    borderRadius: "12px",
-    padding: "2rem",
-    maxWidth: "400px",
-    width: "100%",
-    position: "relative",
-    border: "1px solid #374151",
-    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
-  },
-  closeButton: {
-    position: "absolute",
-    top: "1rem",
-    right: "1rem",
-    background: "none",
-    border: "none",
-    fontSize: "1.5rem",
-    color: "#9ca3af",
-    cursor: "pointer",
-    padding: "0.25rem",
-    lineHeight: 1
-  },
-  header: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "0.75rem",
-    marginBottom: "1.5rem"
-  },
-  title: {
-    fontSize: "1.25rem",
-    fontWeight: 600,
-    color: "#f3f4f6",
-    margin: 0
-  },
-  info: {
-    color: "#9ca3af",
-    textAlign: "center",
-    marginBottom: "1.5rem",
-    fontSize: "0.875rem"
-  },
-  error: {
-    color: "#ef4444",
-    backgroundColor: "rgba(239, 68, 68, 0.1)",
-    border: "1px solid rgba(239, 68, 68, 0.3)",
-    borderRadius: "6px",
-    padding: "0.75rem",
-    marginBottom: "1rem",
-    fontSize: "0.875rem",
-    textAlign: "center"
-  },
-  radioGroup: {
-    display: "flex",
-    gap: "1rem",
-    marginBottom: "1rem",
-    justifyContent: "center"
-  },
-  radioLabel: {
-    display: "flex",
-    alignItems: "center",
-    gap: "0.5rem",
-    color: "#e5e7eb",
-    cursor: "pointer",
-    padding: "0.5rem 1rem",
-    borderRadius: "6px",
-    border: "1px solid #374151",
-    backgroundColor: "#111827",
-    transition: "all 0.2s"
-  },
-  radioLabelActive: {
-    borderColor: "#3b82f6",
-    backgroundColor: "rgba(59, 130, 246, 0.1)"
-  },
-  input: {
-    width: "100%",
-    padding: "0.75rem 1rem",
-    borderRadius: "6px",
-    border: "1px solid #374151",
-    backgroundColor: "#111827",
-    color: "#f3f4f6",
-    fontSize: "0.875rem",
-    outline: "none",
-    marginBottom: "1rem",
-    boxSizing: "border-box"
-  },
-  localInfo: {
-    color: "#9ca3af",
-    fontSize: "0.875rem",
-    textAlign: "center",
-    padding: "0.75rem",
-    backgroundColor: "#111827",
-    borderRadius: "6px",
-    marginBottom: "1rem"
-  },
-  buttonGroup: {
-    display: "flex",
-    justifyContent: "center"
-  },
-  button: {
-    padding: "0.75rem 2rem",
-    borderRadius: "6px",
-    border: "none",
-    fontSize: "0.875rem",
-    fontWeight: 600,
-    cursor: "pointer",
-    backgroundColor: "#3b82f6",
-    color: "white",
-    transition: "all 0.2s"
-  },
-  buttonDisabled: {
-    opacity: 0.5,
-    cursor: "not-allowed"
-  },
-  loading: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "1rem",
-    padding: "2rem",
-    color: "#9ca3af"
-  },
-  spinner: {
-    width: "2rem",
-    height: "2rem",
-    border: "3px solid #374151",
-    borderTopColor: "#3b82f6",
-    borderRadius: "50%",
-    animation: "spin 1s linear infinite"
-  }
-};
-function LoginModal({
-  onConnect,
-  onClose,
-  connectionType,
-  isOpen
-}) {
-  const [nodeType, setNodeType] = useState("local");
-  const [nodeUrl, setNodeUrl2] = useState("");
-  const [isValid, setIsValid] = useState(true);
+function useExecute(contextId, executorId) {
+  const { mero } = useMero();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const shouldShowLocal = connectionType === "remote-and-local" /* RemoteAndLocal */ || connectionType === "local" /* Local */;
-  const shouldShowRemote = connectionType === "remote-and-local" /* RemoteAndLocal */ || connectionType === "remote" /* Remote */;
-  const shouldShowRadioGroup = shouldShowLocal && shouldShowRemote;
+  const mountedRef = useRef(true);
   useEffect(() => {
-    const savedUrl = localStorage.getItem("mero:node_url");
-    if (savedUrl) {
-      setNodeUrl2(savedUrl);
-    }
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
   }, []);
-  useEffect(() => {
-    if (connectionType === "local" /* Local */) {
-      setNodeType("local");
-    } else if (connectionType === "remote" /* Remote */) {
-      setNodeType("remote");
-    }
-  }, [connectionType]);
-  useEffect(() => {
-    if (nodeType === "remote") {
-      setIsValid(isValidUrl(nodeUrl));
-    } else {
-      setIsValid(true);
-    }
-  }, [nodeUrl, nodeType]);
-  const handleConnect = useCallback(async () => {
-    if (!isValid) return;
-    setLoading(true);
-    setError(null);
-    const baseUrl = nodeType === "local" ? "http://node1.127.0.0.1.nip.io" : nodeUrl;
-    try {
-      const response = await fetch(
-        new URL("admin-api/is-authed", baseUrl).toString()
-      );
-      if (response.ok || response.status === 401) {
-        setLoading(false);
-        const normalizedUrl = baseUrl.replace(/\/+$/, "");
-        onConnect(normalizedUrl);
-      } else {
-        throw new Error(`Connection failed: ${response.statusText}`);
+  const execute = useCallback(
+    async (method, params) => {
+      if (!mero || !contextId || !executorId) {
+        if (mountedRef.current) setError(new Error("Not connected"));
+        return null;
       }
-    } catch (err) {
-      console.error("Connection failed:", err);
-      setError("Failed to connect. Please check the URL and try again.");
-      setLoading(false);
-    }
-  }, [isValid, nodeType, nodeUrl, onConnect]);
-  if (!isOpen) {
-    return null;
-  }
-  const modalContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: `
-        @keyframes spin {
-          to { transform: rotate(360deg); }
-        }
-      ` }),
-    /* @__PURE__ */ jsx("div", { style: styles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: styles.content, onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsx("button", { style: styles.closeButton, onClick: onClose, children: "\xD7" }),
-      /* @__PURE__ */ jsxs("div", { style: styles.header, children: [
-        /* @__PURE__ */ jsx(MeroLogo, {}),
-        /* @__PURE__ */ jsx("h1", { style: styles.title, children: "Connect to Calimero" })
-      ] }),
-      loading ? /* @__PURE__ */ jsxs("div", { style: styles.loading, children: [
-        /* @__PURE__ */ jsx("p", { children: "Connecting to node..." }),
-        /* @__PURE__ */ jsx("div", { style: styles.spinner })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("p", { style: styles.info, children: shouldShowRadioGroup ? "Select your Calimero node type to continue." : connectionType === "local" /* Local */ ? "Connect to your local Calimero node." : "Enter your remote Calimero node URL." }),
-        error && /* @__PURE__ */ jsx("p", { style: styles.error, children: error }),
-        shouldShowRadioGroup && /* @__PURE__ */ jsxs("div", { style: styles.radioGroup, children: [
-          /* @__PURE__ */ jsxs(
-            "label",
-            {
-              style: {
-                ...styles.radioLabel,
-                ...nodeType === "local" ? styles.radioLabelActive : {}
-              },
-              onClick: () => setNodeType("local"),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "radio",
-                    value: "local",
-                    checked: nodeType === "local",
-                    onChange: () => setNodeType("local"),
-                    style: { display: "none" }
-                  }
-                ),
-                "\u{1F3E0} Local"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "label",
-            {
-              style: {
-                ...styles.radioLabel,
-                ...nodeType === "remote" ? styles.radioLabelActive : {}
-              },
-              onClick: () => setNodeType("remote"),
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "radio",
-                    value: "remote",
-                    checked: nodeType === "remote",
-                    onChange: () => setNodeType("remote"),
-                    style: { display: "none" }
-                  }
-                ),
-                "\u{1F310} Remote"
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { children: shouldShowRemote && nodeType === "remote" ? /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            value: nodeUrl,
-            onChange: (e) => setNodeUrl2(e.target.value),
-            placeholder: "https://your-node-url.calimero.network",
-            style: styles.input,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" && isValid) {
-                handleConnect();
-              }
-            }
-          }
-        ) : shouldShowLocal ? /* @__PURE__ */ jsxs("p", { style: styles.localInfo, children: [
-          "Using default local node: ",
-          /* @__PURE__ */ jsx("br", {}),
-          /* @__PURE__ */ jsx("code", { style: { color: "#60a5fa" }, children: "http://node1.127.0.0.1.nip.io" })
-        ] }) : null }),
-        /* @__PURE__ */ jsx("div", { style: styles.buttonGroup, children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleConnect,
-            disabled: !isValid || loading,
-            style: {
-              ...styles.button,
-              ...!isValid || loading ? styles.buttonDisabled : {}
-            },
-            children: "Connect"
-          }
-        ) })
-      ] })
-    ] }) })
-  ] });
-  return createPortal(modalContent, document.body);
-}
-function MeroLogo() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "40",
-      height: "40",
-      viewBox: "0 0 24 24",
-      fill: "#3b82f6",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" })
-    }
+      if (mountedRef.current) {
+        setLoading(true);
+        setError(null);
+      }
+      try {
+        const result = await mero.rpc.execute({
+          contextId,
+          method,
+          argsJson: params,
+          executorPublicKey: executorId
+        });
+        return result;
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        if (mountedRef.current) setError(e);
+        return null;
+      } finally {
+        if (mountedRef.current) setLoading(false);
+      }
+    },
+    [mero, contextId, executorId]
   );
+  return { execute, loading, error };
 }
-function ConnectButton({
-  connectionType = "remote-and-local" /* RemoteAndLocal */,
-  className,
-  style
-}) {
-  const { isAuthenticated, connectToNode, logout, nodeUrl, isOnline } = useMero();
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const dropdownRef = useRef(null);
+function useSubscription(contextIds, callback) {
+  const { mero } = useMero();
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  const contextIdsKey = JSON.stringify(contextIds);
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsDropdownOpen(false);
-      }
+    if (!mero || contextIds.length === 0) return;
+    const sse = mero.events;
+    const handler = (event) => {
+      callbackRef.current(event);
+    };
+    sse.on("event", handler);
+    sse.connect().catch(() => {
+    });
+    sse.subscribe(contextIds).catch(() => {
+    });
+    return () => {
+      sse.off("event", handler);
+    };
+  }, [mero, contextIdsKey]);
+}
+function useContexts(applicationId) {
+  const { mero } = useMero();
+  const [contexts, setContexts] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const dashboardUrl = useMemo(() => {
-    if (!isAuthenticated || !nodeUrl) return "#";
-    return new URL("admin-dashboard/", nodeUrl).toString();
-  }, [isAuthenticated, nodeUrl]);
-  const handleConnect = () => {
-    if (typeof connectionType === "object" && connectionType.type === "custom" /* Custom */) {
-      connectToNode(connectionType.url);
-      return;
+  const refetch = useCallback(async () => {
+    if (!mero) return;
+    if (mountedRef.current) {
+      setLoading(true);
+      setError(null);
     }
-    setIsModalOpen(true);
-  };
-  const handleModalConnect = (url) => {
-    setIsModalOpen(false);
-    connectToNode(url);
-  };
-  if (isAuthenticated && !isOnline) {
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: `mero-connect-button mero-reconnecting ${className || ""}`,
-        style,
-        disabled: true,
-        children: [
-          /* @__PURE__ */ jsx(MeroLogo2, {}),
-          "Reconnecting..."
-        ]
-      }
-    );
-  }
-  if (isAuthenticated) {
-    return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, className: "mero-connect-container", style: { position: "relative", display: "inline-block" }, children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          className: `mero-connect-button mero-connected ${className || ""}`,
-          style,
-          onClick: () => setIsDropdownOpen((prev) => !prev),
-          children: [
-            /* @__PURE__ */ jsx(MeroLogo2, {}),
-            "Connected"
-          ]
-        }
-      ),
-      isDropdownOpen && /* @__PURE__ */ jsxs("div", { className: "mero-dropdown", children: [
-        /* @__PURE__ */ jsx("div", { className: "mero-dropdown-info", title: nodeUrl || "", children: nodeUrl }),
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: dashboardUrl,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "mero-dropdown-item",
-            children: "Dashboard"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: "mero-dropdown-item",
-            onClick: () => {
-              setIsDropdownOpen(false);
-              logout();
-            },
-            children: "Log out"
-          }
-        )
-      ] })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: `mero-connect-button ${className || ""}`,
-        style,
-        onClick: handleConnect,
-        children: [
-          /* @__PURE__ */ jsx(MeroLogo2, {}),
-          "Connect"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      LoginModal,
-      {
-        isOpen: isModalOpen,
-        onConnect: handleModalConnect,
-        onClose: () => setIsModalOpen(false),
-        connectionType: typeof connectionType === "object" ? "remote-and-local" /* RemoteAndLocal */ : connectionType
+    try {
+      const response = await mero.admin.getContexts();
+      let list = (response.contexts ?? []).map((c) => ({ contextId: c.id, applicationId: c.applicationId }));
+      if (applicationId) {
+        list = list.filter((c) => c.applicationId === applicationId);
       }
-    )
-  ] });
-}
-function MeroLogo2() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: "mero-logo",
-      width: "24",
-      height: "24",
-      viewBox: "0 0 24 24",
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z" })
+      if (mountedRef.current) setContexts(list);
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      if (mountedRef.current) setError(e);
+    } finally {
+      if (mountedRef.current) setLoading(false);
     }
-  );
+  }, [mero, applicationId]);
+  useEffect(() => {
+    void refetch();
+  }, [refetch]);
+  return { contexts, loading, error, refetch };
 }
 
-export { AppMode, ConnectButton, ConnectionType, EventStreamMode, LoginModal, MeroContext, MeroProvider, clearAllStorage, clearApplicationId, clearNodeUrl, getApplicationId, getNodeUrl, localStorageTokenStorage, setApplicationId, setNodeUrl, useMero };
+export { AppMode, ConnectionType, MeroContext, MeroProvider, clearAllStorage, clearApplicationId, clearContextId, clearContextIdentity, clearNodeUrl, getApplicationId, getContextId, getContextIdentity, getNodeUrl, localStorageTokenStorage, setApplicationId, setContextId, setContextIdentity, setNodeUrl, useContexts, useExecute, useMero, useSubscription };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map