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

package/dist/index.js

@@ -0,0 +1,893 @@
+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';
+
+// src/context/MeroContext.tsx
+
+// src/storage/index.ts
+var STORAGE_KEYS = {
+  ACCESS_TOKEN: "mero:access_token",
+  REFRESH_TOKEN: "mero:refresh_token",
+  EXPIRES_AT: "mero:expires_at",
+  NODE_URL: "mero:node_url",
+  APPLICATION_ID: "mero:application_id",
+  CONTEXT_ID: "mero:context_id"
+};
+function isLocalStorageAvailable() {
+  try {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return false;
+    }
+    const testKey = "__mero_test__";
+    localStorage.setItem(testKey, "test");
+    localStorage.removeItem(testKey);
+    return true;
+  } catch {
+    return false;
+  }
+}
+var localStorageTokenStorage = {
+  async get() {
+    if (!isLocalStorageAvailable()) {
+      return null;
+    }
+    try {
+      const accessToken = localStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN);
+      const refreshToken = localStorage.getItem(STORAGE_KEYS.REFRESH_TOKEN);
+      const expiresAt = localStorage.getItem(STORAGE_KEYS.EXPIRES_AT);
+      if (!accessToken || !refreshToken) {
+        return null;
+      }
+      return {
+        access_token: accessToken,
+        refresh_token: refreshToken,
+        expires_at: expiresAt ? parseInt(expiresAt, 10) : Date.now() + 36e5
+      };
+    } catch (e) {
+      console.error("[mero-react] Failed to get token from storage:", e);
+      return null;
+    }
+  },
+  async set(token) {
+    if (!isLocalStorageAvailable()) {
+      return;
+    }
+    try {
+      localStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, token.access_token);
+      localStorage.setItem(STORAGE_KEYS.REFRESH_TOKEN, token.refresh_token);
+      localStorage.setItem(STORAGE_KEYS.EXPIRES_AT, token.expires_at.toString());
+    } catch (e) {
+      console.error("[mero-react] Failed to save token to storage:", e);
+    }
+  },
+  async clear() {
+    if (!isLocalStorageAvailable()) {
+      return;
+    }
+    try {
+      localStorage.removeItem(STORAGE_KEYS.ACCESS_TOKEN);
+      localStorage.removeItem(STORAGE_KEYS.REFRESH_TOKEN);
+      localStorage.removeItem(STORAGE_KEYS.EXPIRES_AT);
+    } catch (e) {
+      console.error("[mero-react] Failed to clear token from storage:", e);
+    }
+  }
+};
+function getNodeUrl() {
+  if (!isLocalStorageAvailable()) return null;
+  return localStorage.getItem(STORAGE_KEYS.NODE_URL);
+}
+function setNodeUrl(url) {
+  if (!isLocalStorageAvailable()) return;
+  localStorage.setItem(STORAGE_KEYS.NODE_URL, url);
+}
+function clearNodeUrl() {
+  if (!isLocalStorageAvailable()) return;
+  localStorage.removeItem(STORAGE_KEYS.NODE_URL);
+}
+function getApplicationId() {
+  if (!isLocalStorageAvailable()) return null;
+  return localStorage.getItem(STORAGE_KEYS.APPLICATION_ID);
+}
+function setApplicationId(id) {
+  if (!isLocalStorageAvailable()) return;
+  localStorage.setItem(STORAGE_KEYS.APPLICATION_ID, id);
+}
+function clearApplicationId() {
+  if (!isLocalStorageAvailable()) return;
+  localStorage.removeItem(STORAGE_KEYS.APPLICATION_ID);
+}
+function getContextId() {
+  if (!isLocalStorageAvailable()) return null;
+  return localStorage.getItem(STORAGE_KEYS.CONTEXT_ID);
+}
+function setContextId(id) {
+  if (!isLocalStorageAvailable()) return;
+  localStorage.setItem(STORAGE_KEYS.CONTEXT_ID, id);
+}
+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);
+function getPermissionsForMode(mode) {
+  switch (mode) {
+    case "single-context" /* SingleContext */:
+      return ["context:execute"];
+    case "multi-context" /* MultiContext */:
+      return ["context:create", "context:list", "context:execute"];
+    case "admin" /* Admin */:
+      return ["admin"];
+    default:
+      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);
+    }
+  } else if (params.applicationId) {
+    authParams.append("application-id", params.applicationId);
+  }
+  if (params.applicationPath) {
+    authParams.append("application-path", params.applicationPath);
+  }
+  authParams.append("app-url", params.nodeUrl);
+  window.location.href = `${params.nodeUrl}/auth/login?${authParams.toString()}`;
+}
+function MeroProvider({
+  children,
+  mode,
+  packageName,
+  packageVersion,
+  registryUrl,
+  applicationId: propApplicationId,
+  applicationPath,
+  timeoutMs = 3e4
+}) {
+  const [mero, setMero] = useState(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isOnline, setIsOnline] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const [nodeUrl, setNodeUrlState] = useState(() => getNodeUrl());
+  const [applicationId, setApplicationIdState] = useState(
+    () => getApplicationId() || propApplicationId || null
+  );
+  const [contextId, setContextIdState] = useState(() => getContextId());
+  const meroRef = useRef(null);
+  const createMeroInstance = useCallback(
+    (url) => {
+      const instance = new MeroJs({
+        baseUrl: url,
+        tokenStorage: localStorageTokenStorage,
+        timeoutMs
+      });
+      meroRef.current = instance;
+      return instance;
+    },
+    [timeoutMs]
+  );
+  const checkAuth = useCallback(async (instance) => {
+    try {
+      await instance.admin.contexts.listContexts();
+      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) => {
+      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: callbackUrl.toString(),
+        permissions,
+        mode,
+        packageName,
+        packageVersion,
+        registryUrl,
+        applicationId: propApplicationId,
+        applicationPath
+      });
+    },
+    [mode, packageName, packageVersion, registryUrl, propApplicationId, applicationPath]
+  );
+  const logout = useCallback(async () => {
+    if (meroRef.current) {
+      await meroRef.current.clearToken();
+    }
+    clearAllStorage();
+    setMero(null);
+    setIsAuthenticated(false);
+    setNodeUrlState(null);
+    setApplicationIdState(null);
+    setContextIdState(null);
+    meroRef.current = null;
+  }, []);
+  useEffect(() => {
+    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();
+      if (!savedUrl) {
+        setIsLoading(false);
+        return;
+      }
+      const instance = createMeroInstance(savedUrl);
+      await instance.init();
+      const authed = await checkAuth(instance);
+      if (authed) {
+        setMero(instance);
+        setIsAuthenticated(true);
+        setIsOnline(true);
+      } else if (hasCallback) {
+        setMero(instance);
+        setIsAuthenticated(false);
+      }
+      setIsLoading(false);
+    };
+    init();
+  }, [createMeroInstance, checkAuth, processAuthCallback]);
+  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);
+      }
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, [isAuthenticated, isOnline, checkAuth]);
+  useEffect(() => {
+    if (propApplicationId && !applicationId) {
+      setApplicationIdState(propApplicationId);
+    }
+  }, [propApplicationId, applicationId]);
+  const contextValue = useMemo(
+    () => ({
+      mero,
+      isAuthenticated,
+      isOnline,
+      nodeUrl,
+      applicationId,
+      contextId,
+      connectToNode,
+      logout,
+      isLoading
+    }),
+    [mero, isAuthenticated, isOnline, nodeUrl, applicationId, contextId, connectToNode, logout, isLoading]
+  );
+  return /* @__PURE__ */ jsx(MeroContext.Provider, { value: contextValue, children });
+}
+function useMero() {
+  const context = useContext(MeroContext);
+  if (context === void 0) {
+    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);
+  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;
+  useEffect(() => {
+    const savedUrl = localStorage.getItem("mero:node_url");
+    if (savedUrl) {
+      setNodeUrl2(savedUrl);
+    }
+  }, []);
+  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}`);
+      }
+    } 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" })
+    }
+  );
+}
+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);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsDropdownOpen(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;
+    }
+    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
+      }
+    )
+  ] });
+}
+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" })
+    }
+  );
+}
+
+export { AppMode, ConnectButton, ConnectionType, EventStreamMode, LoginModal, MeroContext, MeroProvider, clearAllStorage, clearApplicationId, clearNodeUrl, getApplicationId, getNodeUrl, localStorageTokenStorage, setApplicationId, setNodeUrl, useMero };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map