@powerhousedao/reactor-browser 6.0.0-dev.84 → 6.0.0-dev.88

package/dist/src/index.js

@@ -8495,6 +8495,12 @@ function createClient(urlOrGQLClient, middleware) {
   const client = typeof urlOrGQLClient === "string" ? new GraphQLClient(urlOrGQLClient) : urlOrGQLClient;
   return getSdk(client, middleware);
 }
+// src/renown/use-renown-auth.ts
+import { useCallback } from "react";
+
+// src/hooks/renown.ts
+import { useEffect, useState, useSyncExternalStore as useSyncExternalStore2 } from "react";
+
 // ../../node_modules/.pnpm/change-case@5.4.4/node_modules/change-case/dist/index.js
 var SPLIT_LOWER_UPPER_RE = /([\p{Ll}\d])(\p{Lu})/gu;
 var SPLIT_UPPER_UPPER_RE = /(\p{Lu})([\p{Lu}][\p{Ll}])/gu;
@@ -8571,42 +8577,66 @@ function splitPrefixSuffix(input, options = {}) {
 
 // src/hooks/make-ph-event-functions.ts
 import { useSyncExternalStore } from "react";
+var isServer = typeof window === "undefined";
 function makePHEventFunctions(key) {
   const setEventName = `ph:set${capitalCase(key)}`;
   const updateEventName = `ph:${key}Updated`;
   function setValue(value) {
+    if (isServer) {
+      return;
+    }
     const event = new CustomEvent(setEventName, {
       detail: { [key]: value }
     });
     window.dispatchEvent(event);
   }
   function dispatchUpdatedEvent() {
+    if (isServer) {
+      return;
+    }
     const event = new CustomEvent(updateEventName);
     window.dispatchEvent(event);
   }
   function handleSetValueEvent(event) {
+    if (isServer) {
+      return;
+    }
     const value = event.detail[key];
-    if (!window.ph)
-      throw new Error("ph global store is not defined");
+    if (!window.ph) {
+      window.ph = {};
+    }
     window.ph[key] = value;
     dispatchUpdatedEvent();
   }
   function addEventHandler() {
+    if (isServer) {
+      return;
+    }
     window.addEventListener(setEventName, handleSetValueEvent);
   }
   function subscribeToValue(onStoreChange) {
+    if (isServer)
+      return () => {};
     window.addEventListener(updateEventName, onStoreChange);
     return () => {
       window.removeEventListener(updateEventName, onStoreChange);
     };
   }
   function getSnapshot() {
-    if (!window.ph)
-      throw new Error("ph global store is not defined");
+    if (isServer) {
+      return;
+    }
+    if (!window.ph) {
+      console.warn(`ph global store is not initialized. Did you call set${capitalCase(key)}?`);
+      return;
+    }
     return window.ph[key];
   }
+  function getServerSnapshot() {
+    return;
+  }
   function useValue() {
-    return useSyncExternalStore(subscribeToValue, getSnapshot);
+    return useSyncExternalStore(subscribeToValue, getSnapshot, getServerSnapshot);
   }
   return {
     useValue,
@@ -8615,6 +8645,199 @@ function makePHEventFunctions(key) {
   };
 }
 
+// src/hooks/loading.ts
+var {
+  useValue: useLoading,
+  setValue: setLoading,
+  addEventHandler: addLoadingEventHandler
+} = makePHEventFunctions("loading");
+var loading = null;
+
+// src/hooks/renown.ts
+var renownEventFunctions = makePHEventFunctions("renown");
+var addRenownEventHandler = renownEventFunctions.addEventHandler;
+var useRenown = renownEventFunctions.useValue;
+var setRenown = renownEventFunctions.setValue;
+function useDid() {
+  const renown = useRenown();
+  return renown?.did;
+}
+function useUser() {
+  const renown = useRenown();
+  const [user, setUser] = useState(renown?.user);
+  useEffect(() => {
+    setUser(renown?.user);
+    if (!renown)
+      return;
+    return renown.on("user", setUser);
+  }, [renown]);
+  return user;
+}
+function useLoginStatus() {
+  const renown = useRenown();
+  return useSyncExternalStore2((cb) => {
+    if (!renown) {
+      return () => {};
+    }
+    return renown.on("status", cb);
+  }, () => renown === loading ? "loading" : renown?.status, () => {
+    return;
+  });
+}
+
+// src/renown/utils.ts
+import { logger as logger5 } from "document-drive";
+
+// src/renown/constants.ts
+var RENOWN_URL = "https://www.renown.id";
+var RENOWN_NETWORK_ID = "eip155";
+var RENOWN_CHAIN_ID = "1";
+var DOMAIN_TYPE = [
+  { name: "name", type: "string" },
+  { name: "version", type: "string" },
+  { name: "chainId", type: "uint256" },
+  { name: "verifyingContract", type: "address" }
+];
+var VERIFIABLE_CREDENTIAL_EIP712_TYPE = [
+  { name: "@context", type: "string[]" },
+  { name: "type", type: "string[]" },
+  { name: "id", type: "string" },
+  { name: "issuer", type: "Issuer" },
+  { name: "credentialSubject", type: "CredentialSubject" },
+  { name: "credentialSchema", type: "CredentialSchema" },
+  { name: "issuanceDate", type: "string" },
+  { name: "expirationDate", type: "string" }
+];
+var CREDENTIAL_SCHEMA_EIP712_TYPE = [
+  { name: "id", type: "string" },
+  { name: "type", type: "string" }
+];
+var CREDENTIAL_SUBJECT_TYPE = [
+  { name: "app", type: "string" },
+  { name: "id", type: "string" },
+  { name: "name", type: "string" }
+];
+var ISSUER_TYPE = [
+  { name: "id", type: "string" },
+  { name: "ethereumAddress", type: "string" }
+];
+var CREDENTIAL_TYPES = {
+  EIP712Domain: DOMAIN_TYPE,
+  VerifiableCredential: VERIFIABLE_CREDENTIAL_EIP712_TYPE,
+  CredentialSchema: CREDENTIAL_SCHEMA_EIP712_TYPE,
+  CredentialSubject: CREDENTIAL_SUBJECT_TYPE,
+  Issuer: ISSUER_TYPE
+};
+
+// src/renown/utils.ts
+function openRenown(documentId) {
+  const renown = window.ph?.renown;
+  let renownUrl = renown?.baseUrl;
+  if (!renownUrl) {
+    logger5.warn("Renown instance not found, falling back to: ", RENOWN_URL);
+    renownUrl = RENOWN_URL;
+  }
+  if (documentId) {
+    window.open(`${renownUrl}/profile/${documentId}`, "_blank")?.focus();
+    return;
+  }
+  const url = new URL(renownUrl);
+  url.searchParams.set("app", renown?.did ?? "");
+  url.searchParams.set("connect", renown?.did ?? "");
+  url.searchParams.set("network", RENOWN_NETWORK_ID);
+  url.searchParams.set("chain", RENOWN_CHAIN_ID);
+  const returnUrl = new URL(window.location.pathname, window.location.origin);
+  url.searchParams.set("returnUrl", returnUrl.toJSON());
+  window.open(url, "_self")?.focus();
+}
+function consumeDidFromUrl() {
+  if (typeof window === "undefined")
+    return;
+  const urlParams = new URLSearchParams(window.location.search);
+  const userParam = urlParams.get("user");
+  if (!userParam)
+    return;
+  const userDid = decodeURIComponent(userParam);
+  const cleanUrl = new URL(window.location.href);
+  cleanUrl.searchParams.delete("user");
+  window.history.replaceState({}, "", cleanUrl.toString());
+  return userDid;
+}
+async function login(userDid, renown) {
+  if (!renown) {
+    return;
+  }
+  const did = userDid ?? consumeDidFromUrl();
+  try {
+    const user = renown.user;
+    if (user?.did && (user.did === did || !did)) {
+      return user;
+    }
+    if (!did) {
+      return;
+    }
+    return await renown.login(did);
+  } catch (error) {
+    logger5.error(error instanceof Error ? error.message : JSON.stringify(error));
+  }
+}
+async function logout() {
+  const renown = window.ph?.renown;
+  await renown?.logout();
+  const url = new URL(window.location.href);
+  if (url.searchParams.has("user")) {
+    url.searchParams.delete("user");
+    window.history.replaceState(null, "", url.toString());
+  }
+}
+
+// src/renown/use-renown-auth.ts
+function truncateAddress(address) {
+  if (address.length <= 13)
+    return address;
+  return `${address.slice(0, 7)}...${address.slice(-5)}`;
+}
+function toRenownAuthStatus(loginStatus, user) {
+  if (loginStatus === "authorized") {
+    return user ? "authorized" : "checking";
+  }
+  return loginStatus;
+}
+function useRenownAuth() {
+  const user = useUser();
+  const loginStatus = useLoginStatus();
+  const status = toRenownAuthStatus(loginStatus, user);
+  const address = user?.address;
+  const ensName = user?.ens?.name;
+  const avatarUrl = user?.profile?.userImage ?? user?.ens?.avatarUrl;
+  const profileId = user?.profile?.documentId;
+  const displayName = ensName ?? user?.profile?.username ?? undefined;
+  const displayAddress = address ? truncateAddress(address) : undefined;
+  const login2 = useCallback(() => {
+    openRenown();
+  }, []);
+  const logout2 = useCallback(async () => {
+    await logout();
+  }, []);
+  const openProfile = useCallback(() => {
+    if (profileId) {
+      openRenown(profileId);
+    }
+  }, [profileId]);
+  return {
+    status,
+    user,
+    address,
+    ensName,
+    avatarUrl,
+    profileId,
+    displayName,
+    displayAddress,
+    login: login2,
+    logout: logout2,
+    openProfile
+  };
+}
 // src/hooks/config/editor.ts
 var isExternalControlsEnabledEventFunctions = makePHEventFunctions("isExternalControlsEnabled");
 var setIsExternalControlsEnabled = isExternalControlsEnabledEventFunctions.setValue;
@@ -8648,12 +8871,12 @@ var phDocumentEditorConfigHooks = {
 
 // src/hooks/vetra-packages.ts
 import { DuplicateModuleError } from "@powerhousedao/reactor";
-import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useSyncExternalStore as useSyncExternalStore3 } from "react";
 var vetraPackageManagerFunctions = makePHEventFunctions("vetraPackageManager");
 var useVetraPackageManager = vetraPackageManagerFunctions.useValue;
 var useVetraPackages = () => {
   const packageManager = useVetraPackageManager();
-  return useSyncExternalStore2((cb) => packageManager ? packageManager.subscribe(cb) : () => {}, () => packageManager?.packages ?? []);
+  return useSyncExternalStore3((cb) => packageManager ? packageManager.subscribe(cb) : () => {}, () => packageManager?.packages ?? []);
 };
 var addVetraPackageManagerEventHandler = vetraPackageManagerFunctions.addEventHandler;
 function setVetraPackageManager(packageManager) {
@@ -8663,6 +8886,17 @@ function setVetraPackageManager(packageManager) {
     updateReactorClientDocumentModels(packages);
   });
 }
+var EMPTY_PENDING = [];
+var EMPTY_DISMISSED = [];
+var NOOP_UNSUBSCRIBE = () => {};
+function usePendingInstallations() {
+  const pm = useVetraPackageManager();
+  return useSyncExternalStore3((cb) => pm ? pm.subscribePendingChanges(cb) : NOOP_UNSUBSCRIBE, () => pm?.getPendingInstallations() ?? EMPTY_PENDING);
+}
+function useDismissedPackages() {
+  const pm = useVetraPackageManager();
+  return useSyncExternalStore3((cb) => pm ? pm.subscribePendingChanges(cb) : NOOP_UNSUBSCRIBE, () => pm?.getDismissedPackages() ?? EMPTY_DISMISSED);
+}
 function updateReactorClientDocumentModels(packages) {
   const documentModelModules = packages.flatMap((pkg) => pkg.modules.documentModelModules).filter((module) => module !== undefined);
   const registry = window.ph?.reactorClientModule?.reactorModule?.documentModelRegistry;
@@ -8698,74 +8932,6 @@ function useAllowedDocumentModelModules() {
     return documentModelModules;
   return documentModelModules?.filter((module) => allowedDocumentTypes.includes(module.documentModel.global.id));
 }
-// src/hooks/connection-state.ts
-import { useEffect, useRef, useState } from "react";
-
-// src/hooks/reactor.ts
-var reactorClientModuleEventFunctions = makePHEventFunctions("reactorClientModule");
-var reactorClientEventFunctions = makePHEventFunctions("reactorClient");
-var useReactorClientModule = reactorClientModuleEventFunctions.useValue;
-var setReactorClientModule = reactorClientModuleEventFunctions.setValue;
-var addReactorClientModuleEventHandler = reactorClientModuleEventFunctions.addEventHandler;
-var useReactorClient = reactorClientEventFunctions.useValue;
-var setReactorClient = reactorClientEventFunctions.setValue;
-var addReactorClientEventHandler = reactorClientEventFunctions.addEventHandler;
-var useSync = () => useReactorClientModule()?.reactorModule?.syncModule?.syncManager;
-var useSyncList = () => {
-  const sync = useSync();
-  return sync?.list() ?? [];
-};
-var useModelRegistry = () => useReactorClientModule()?.reactorModule?.documentModelRegistry;
-var useDatabase = () => useReactorClientModule()?.reactorModule?.database;
-var usePGlite = () => useReactorClientModule()?.pg;
-
-// src/hooks/connection-state.ts
-function useConnectionStates() {
-  const syncManager = useSync();
-  const [states, setStates] = useState(() => buildSnapshot(syncManager));
-  const unsubscribesRef = useRef([]);
-  useEffect(() => {
-    if (!syncManager)
-      return;
-    function subscribe() {
-      for (const unsub of unsubscribesRef.current) {
-        unsub();
-      }
-      unsubscribesRef.current = [];
-      const remotes = syncManager.list();
-      for (const remote of remotes) {
-        const unsub = remote.channel.onConnectionStateChange(() => {
-          setStates(buildSnapshot(syncManager));
-        });
-        unsubscribesRef.current.push(unsub);
-      }
-      setStates(buildSnapshot(syncManager));
-    }
-    subscribe();
-    const interval = setInterval(subscribe, 5000);
-    return () => {
-      clearInterval(interval);
-      for (const unsub of unsubscribesRef.current) {
-        unsub();
-      }
-      unsubscribesRef.current = [];
-    };
-  }, [syncManager]);
-  return states;
-}
-function useConnectionState(remoteName) {
-  const states = useConnectionStates();
-  return states.get(remoteName);
-}
-function buildSnapshot(syncManager) {
-  const map = new Map;
-  if (!syncManager)
-    return map;
-  for (const remote of syncManager.list()) {
-    map.set(remote.name, remote.channel.getConnectionState());
-  }
-  return map;
-}
 // src/utils/nodes.ts
 function sortNodesByName(nodes) {
   return nodes.toSorted((a, b) => a.name.localeCompare(b.name));
@@ -8782,16 +8948,16 @@ function isFolderNodeKind(node) {
 }
 
 // src/hooks/dispatch.ts
-import { logger as logger5 } from "document-drive";
+import { logger as logger6 } from "document-drive";
 function useDispatch(document2) {
   function dispatch(actionOrActions, onErrors, onSuccess) {
-    dispatchActions(actionOrActions, document2, onErrors, onSuccess).catch(logger5.error);
+    dispatchActions(actionOrActions, document2, onErrors, onSuccess).catch(logger6.error);
   }
   return [document2, dispatch];
 }
 
 // src/hooks/document-cache.ts
-import { use, useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore3 } from "react";
+import { use, useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore4 } from "react";
 var documentEventFunctions = makePHEventFunctions("documentCache");
 var useDocumentCache = documentEventFunctions.useValue;
 var setDocumentCache = documentEventFunctions.setValue;
@@ -8824,12 +8990,12 @@ function getDocumentQueryState(promise) {
 }
 function useDocument(id) {
   const documentCache = useDocumentCache();
-  const document2 = useSyncExternalStore3((cb) => id && documentCache ? documentCache.subscribe(id, cb) : () => {}, () => id ? documentCache?.get(id) : undefined);
+  const document2 = useSyncExternalStore4((cb) => id && documentCache ? documentCache.subscribe(id, cb) : () => {}, () => id ? documentCache?.get(id) : undefined);
   return document2 ? use(document2) : undefined;
 }
 function useDocuments(ids) {
   const documentCache = useDocumentCache();
-  const documents = useSyncExternalStore3((cb) => ids?.length && documentCache ? documentCache.subscribe(ids, cb) : () => {}, () => ids?.length && documentCache ? documentCache.getBatch(ids) : undefined);
+  const documents = useSyncExternalStore4((cb) => ids?.length && documentCache ? documentCache.subscribe(ids, cb) : () => {}, () => ids?.length && documentCache ? documentCache.getBatch(ids) : undefined);
   return documents ? use(documents) : [];
 }
 function useGetDocument() {
@@ -10303,39 +10469,107 @@ function usePHDocumentEditorConfigByKey(key) {
   const useValueHook = phDocumentEditorConfigHooks[key];
   return useValueHook();
 }
-// src/hooks/document-of-type.ts
-import {
-  DocumentModelNotFoundError,
-  DocumentNotFoundError
-} from "document-drive";
-function useDocumentOfType(documentId, documentType) {
-  const [document2, dispatch] = useDocumentById(documentId);
-  const documentModelModule = useDocumentModelModuleById(documentType);
-  if (!documentId || !documentType)
-    return [];
-  if (!document2) {
-    throw new DocumentNotFoundError(documentId);
-  }
-  if (!documentModelModule) {
-    throw new DocumentModelNotFoundError(documentType);
-  }
-  if (document2.header.documentType !== documentType) {
-    throw new DocumentTypeMismatchError(documentId, documentType, document2.header.documentType);
-  }
-  return [document2, dispatch];
+// src/hooks/connection-state.ts
+import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+
+// src/hooks/reactor.ts
+var reactorClientModuleEventFunctions = makePHEventFunctions("reactorClientModule");
+var reactorClientEventFunctions = makePHEventFunctions("reactorClient");
+var useReactorClientModule = reactorClientModuleEventFunctions.useValue;
+var setReactorClientModule = reactorClientModuleEventFunctions.setValue;
+var addReactorClientModuleEventHandler = reactorClientModuleEventFunctions.addEventHandler;
+var useReactorClient = reactorClientEventFunctions.useValue;
+var setReactorClient = reactorClientEventFunctions.setValue;
+var addReactorClientEventHandler = reactorClientEventFunctions.addEventHandler;
+var useSync = () => useReactorClientModule()?.reactorModule?.syncModule?.syncManager;
+var useSyncList = () => {
+  const sync = useSync();
+  return sync?.list() ?? [];
+};
+var useModelRegistry = () => useReactorClientModule()?.reactorModule?.documentModelRegistry;
+var useDatabase = () => useReactorClientModule()?.reactorModule?.database;
+var usePGlite = () => useReactorClientModule()?.pg;
+
+// src/hooks/connection-state.ts
+function useConnectionStates() {
+  const syncManager = useSync();
+  const [states, setStates] = useState3(() => buildSnapshot(syncManager));
+  const unsubscribesRef = useRef([]);
+  useEffect3(() => {
+    if (!syncManager)
+      return;
+    function subscribe() {
+      for (const unsub of unsubscribesRef.current) {
+        unsub();
+      }
+      unsubscribesRef.current = [];
+      const remotes = syncManager.list();
+      for (const remote of remotes) {
+        const unsub = remote.channel.onConnectionStateChange(() => {
+          setStates(buildSnapshot(syncManager));
+        });
+        unsubscribesRef.current.push(unsub);
+      }
+      setStates(buildSnapshot(syncManager));
+    }
+    subscribe();
+    const interval = setInterval(subscribe, 5000);
+    return () => {
+      clearInterval(interval);
+      for (const unsub of unsubscribesRef.current) {
+        unsub();
+      }
+      unsubscribesRef.current = [];
+    };
+  }, [syncManager]);
+  return states;
+}
+function useConnectionState(remoteName) {
+  const states = useConnectionStates();
+  return states.get(remoteName);
+}
+function buildSnapshot(syncManager) {
+  const map = new Map;
+  if (!syncManager)
+    return map;
+  for (const remote of syncManager.list()) {
+    map.set(remote.name, remote.channel.getConnectionState());
+  }
+  return map;
+}
+// src/hooks/document-of-type.ts
+import {
+  DocumentModelNotFoundError,
+  DocumentNotFoundError
+} from "document-drive";
+function useDocumentOfType(documentId, documentType) {
+  const [document2, dispatch] = useDocumentById(documentId);
+  const documentModelModule = useDocumentModelModuleById(documentType);
+  if (!documentId || !documentType)
+    return [];
+  if (!document2) {
+    throw new DocumentNotFoundError(documentId);
+  }
+  if (!documentModelModule) {
+    throw new DocumentModelNotFoundError(documentType);
+  }
+  if (document2.header.documentType !== documentType) {
+    throw new DocumentTypeMismatchError(documentId, documentType, document2.header.documentType);
+  }
+  return [document2, dispatch];
 }
 // src/hooks/document-operations.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
 function useDocumentOperations(documentId) {
   const reactorClient = useReactorClient();
   const hasFetchedRef = useRef2(false);
-  const [state, setState] = useState3(() => ({
+  const [state, setState] = useState4(() => ({
     globalOperations: [],
     localOperations: [],
     isLoading: !!documentId,
     error: undefined
   }));
-  const fetchOperations = useCallback3(async (retryCount = 0) => {
+  const fetchOperations = useCallback4(async (retryCount = 0) => {
     const MAX_RETRIES = 5;
     const RETRY_DELAY_MS = 500;
     if (!documentId || !reactorClient) {
@@ -10381,7 +10615,7 @@ function useDocumentOperations(documentId) {
     });
     hasFetchedRef.current = true;
   }, [documentId, reactorClient]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (documentId && reactorClient) {
       fetchOperations();
     } else if (!documentId) {
@@ -10394,7 +10628,7 @@ function useDocumentOperations(documentId) {
       hasFetchedRef.current = false;
     }
   }, [documentId, reactorClient, fetchOperations]);
-  const refetch = useCallback3(() => {
+  const refetch = useCallback4(() => {
     fetchOperations(0);
   }, [fetchOperations]);
   return { ...state, refetch };
@@ -10981,145 +11215,6 @@ function makeVetraPackageManifestModulesEntry(modules) {
     return acc;
   }, {});
 }
-
-// src/renown/utils.ts
-import { logger as logger6 } from "document-drive";
-
-// src/renown/constants.ts
-var RENOWN_URL = "https://www.renown.id";
-var RENOWN_NETWORK_ID = "eip155";
-var RENOWN_CHAIN_ID = "1";
-var DOMAIN_TYPE = [
-  { name: "name", type: "string" },
-  { name: "version", type: "string" },
-  { name: "chainId", type: "uint256" },
-  { name: "verifyingContract", type: "address" }
-];
-var VERIFIABLE_CREDENTIAL_EIP712_TYPE = [
-  { name: "@context", type: "string[]" },
-  { name: "type", type: "string[]" },
-  { name: "id", type: "string" },
-  { name: "issuer", type: "Issuer" },
-  { name: "credentialSubject", type: "CredentialSubject" },
-  { name: "credentialSchema", type: "CredentialSchema" },
-  { name: "issuanceDate", type: "string" },
-  { name: "expirationDate", type: "string" }
-];
-var CREDENTIAL_SCHEMA_EIP712_TYPE = [
-  { name: "id", type: "string" },
-  { name: "type", type: "string" }
-];
-var CREDENTIAL_SUBJECT_TYPE = [
-  { name: "app", type: "string" },
-  { name: "id", type: "string" },
-  { name: "name", type: "string" }
-];
-var ISSUER_TYPE = [
-  { name: "id", type: "string" },
-  { name: "ethereumAddress", type: "string" }
-];
-var CREDENTIAL_TYPES = {
-  EIP712Domain: DOMAIN_TYPE,
-  VerifiableCredential: VERIFIABLE_CREDENTIAL_EIP712_TYPE,
-  CredentialSchema: CREDENTIAL_SCHEMA_EIP712_TYPE,
-  CredentialSubject: CREDENTIAL_SUBJECT_TYPE,
-  Issuer: ISSUER_TYPE
-};
-
-// src/renown/utils.ts
-function openRenown(documentId) {
-  if (documentId) {
-    window.open(`${RENOWN_URL}/profile/${documentId}`, "_blank")?.focus();
-    return;
-  }
-  const url = new URL(RENOWN_URL);
-  url.searchParams.set("connect", window.ph?.renown?.did ?? "");
-  url.searchParams.set("network", RENOWN_NETWORK_ID);
-  url.searchParams.set("chain", RENOWN_CHAIN_ID);
-  const returnUrl = new URL(window.location.pathname, window.location.origin);
-  url.searchParams.set("returnUrl", returnUrl.toJSON());
-  window.open(url, "_self")?.focus();
-}
-function consumeDidFromUrl() {
-  if (typeof window === "undefined")
-    return;
-  const urlParams = new URLSearchParams(window.location.search);
-  const userParam = urlParams.get("user");
-  if (!userParam)
-    return;
-  const userDid = decodeURIComponent(userParam);
-  const cleanUrl = new URL(window.location.href);
-  cleanUrl.searchParams.delete("user");
-  window.history.replaceState({}, "", cleanUrl.toString());
-  return userDid;
-}
-async function login(userDid, renown) {
-  if (!renown) {
-    return;
-  }
-  const did = userDid ?? consumeDidFromUrl();
-  try {
-    const user = renown.user;
-    if (user?.did && (user.did === did || !did)) {
-      return user;
-    }
-    if (!did) {
-      return;
-    }
-    return await renown.login(did);
-  } catch (error) {
-    logger6.error("@error", error);
-  }
-}
-async function logout() {
-  const renown = window.ph?.renown;
-  await renown?.logout();
-  const url = new URL(window.location.href);
-  if (url.searchParams.has("user")) {
-    url.searchParams.delete("user");
-    window.history.replaceState(null, "", url.toString());
-  }
-}
-// src/hooks/loading.ts
-var {
-  useValue: useLoading,
-  setValue: setLoading,
-  addEventHandler: addLoadingEventHandler
-} = makePHEventFunctions("loading");
-
-// src/hooks/renown.ts
-import { useEffect as useEffect4, useState as useState4 } from "react";
-var renownEventFunctions = makePHEventFunctions("renown");
-var useRenown = renownEventFunctions.useValue;
-var setRenown = renownEventFunctions.setValue;
-function useDid() {
-  const renown = useRenown();
-  return renown?.did;
-}
-function useUser() {
-  const renown = useRenown();
-  const [user, setUser] = useState4(() => renown?.user);
-  useEffect4(() => {
-    setUser(renown?.user);
-    if (!renown)
-      return;
-    return renown.on("user", setUser);
-  }, [renown]);
-  return user;
-}
-function useLoginStatus() {
-  const renown = useRenown();
-  const [status, setStatus] = useState4(() => renown ? renown.status : "initializing");
-  useEffect4(() => {
-    setStatus(renown ? renown.status : "initializing");
-    if (!renown)
-      return;
-    return renown.on("status", setStatus);
-  }, [renown]);
-  return status;
-}
-var addRenownEventHandler = renownEventFunctions.addEventHandler;
-
 // src/hooks/add-ph-event-handlers.ts
 var phGlobalEventHandlerRegisterFunctions = {
   loading: addLoadingEventHandler,
@@ -11259,6 +11354,49 @@ function useUserPermissions() {
     isAllowedToEditDocuments: allowList.includes(user?.address ?? "")
   };
 }
+// src/registry/client.ts
+function cdnUrlToApiUrl(cdnUrl) {
+  return cdnUrl.replace(/\/-\/cdn\/?$/, "");
+}
+function mapPackageInfo(pkg) {
+  return {
+    name: pkg.name,
+    description: pkg.manifest?.description,
+    version: pkg.manifest?.version,
+    category: pkg.manifest?.category,
+    publisher: pkg.manifest?.publisher?.name,
+    publisherUrl: pkg.manifest?.publisher?.url
+  };
+}
+
+class RegistryClient {
+  apiUrl;
+  constructor(cdnUrl) {
+    this.apiUrl = cdnUrlToApiUrl(cdnUrl);
+  }
+  async getPackages() {
+    const res = await fetch(`${this.apiUrl}/packages`);
+    if (!res.ok)
+      throw new Error(`Registry error: HTTP ${res.status}`);
+    const data = await res.json();
+    return data.map(mapPackageInfo);
+  }
+  async getPackagesByDocumentType(documentType) {
+    const encodedType = encodeURIComponent(documentType);
+    const res = await fetch(`${this.apiUrl}/packages/by-document-type?type=${encodedType}`);
+    if (!res.ok)
+      throw new Error(`Registry error: HTTP ${res.status}`);
+    return await res.json();
+  }
+  async searchPackages(query) {
+    const packages = await this.getPackages();
+    if (!query)
+      return packages;
+    const lowerQuery = query.toLowerCase();
+    return packages.filter((pkg) => pkg.name.toLowerCase().includes(lowerQuery) || pkg.description?.toLowerCase().includes(lowerQuery));
+  }
+}
+
 // src/storage/base-storage.ts
 class BaseStorage {
   #store;
@@ -11305,6 +11443,20 @@ class BrowserLocalStorage extends BaseStorage {
 }
 
 // src/package-manager.ts
+var DISMISSED_STORAGE_KEY = "ph-connect-dismissed-packages";
+function loadDismissedPackages() {
+  try {
+    const raw = localStorage.getItem(DISMISSED_STORAGE_KEY);
+    if (raw)
+      return JSON.parse(raw);
+  } catch {}
+  return [];
+}
+function persistDismissedPackages(dismissed) {
+  try {
+    localStorage.setItem(DISMISSED_STORAGE_KEY, JSON.stringify(dismissed));
+  } catch {}
+}
 function loadCSS(pkg, registryUrl) {
   const head = document.getElementsByTagName("head")[0];
   const existingStyle = head.querySelector(`link[data-package='${pkg}']`);
@@ -11325,10 +11477,13 @@ function removeCSS(pkg) {
     style.remove();
   }
 }
+async function runtimeImport(url) {
+  return new Function("u", "return import(u)")(url);
+}
 async function loadExternalPackage(name, registryUrl) {
   registryUrl = registryUrl.endsWith("/") ? registryUrl : `${registryUrl}/`;
   const url = `${registryUrl}${name}/index.js`;
-  const module = await import(url);
+  const module = await runtimeImport(url);
   loadCSS(name, registryUrl);
   return convertLegacyLibToVetraPackage(module);
 }
@@ -11339,12 +11494,23 @@ class BrowserPackageManager {
   #localPackageIds = new Set;
   #subscribers = new Set;
   #packagesMemo = [];
-  constructor(namespace) {
+  #registryCdnUrl;
+  #registryClient;
+  #documentModelRegistry;
+  #pending = [];
+  #dismissed = loadDismissedPackages();
+  #deferredActions = new Map;
+  #pendingListeners = new Set;
+  constructor(namespace, registryCdnUrl) {
     this.#storage = new BrowserLocalStorage(namespace + ":PH_PACKAGES");
     const packages = this.#storage.get("packages");
     if (!packages) {
       this.#storage.set("packages", []);
     }
+    if (registryCdnUrl) {
+      this.#registryCdnUrl = registryCdnUrl;
+      this.#registryClient = new RegistryClient(registryCdnUrl);
+    }
   }
   async init() {
     const packages = this.#storage.get("packages");
@@ -11400,6 +11566,99 @@ class BrowserPackageManager {
       handler({ packages });
     });
   }
+  setDocumentModelRegistry(registry) {
+    this.#documentModelRegistry = registry;
+  }
+  async load(documentType) {
+    if (!this.#registryClient || !this.#registryCdnUrl) {
+      throw new Error("Registry CDN URL not configured — cannot discover packages");
+    }
+    const packageNames = await this.#registryClient.getPackagesByDocumentType(documentType);
+    if (packageNames.length === 0) {
+      throw new Error(`No package found containing document type: ${documentType}`);
+    }
+    const packageName = packageNames.sort((a, b) => a.localeCompare(b))[0];
+    this.#pending = [...this.#pending, { documentType, packageName }];
+    this.#notifyPendingListeners();
+    return new Promise((resolve, reject) => {
+      this.#deferredActions.set(packageName, { resolve, reject });
+    });
+  }
+  async approveInstallation(packageName) {
+    const deferred = this.#deferredActions.get(packageName);
+    if (!deferred)
+      return;
+    try {
+      await this.addPackage(packageName, this.#registryCdnUrl);
+    } catch (error) {
+      this.#removePending(packageName);
+      this.#deferredActions.delete(packageName);
+      deferred.reject(error instanceof Error ? error : new Error(`Failed to install package: ${packageName}`));
+      return;
+    }
+    const pendingEntries = this.#pending.filter((p) => p.packageName === packageName);
+    this.#removePending(packageName);
+    this.#deferredActions.delete(packageName);
+    if (!this.#documentModelRegistry) {
+      deferred.reject(new Error("Document model registry not available"));
+      return;
+    }
+    for (const entry of pendingEntries) {
+      try {
+        const module = this.#documentModelRegistry.getModule(entry.documentType);
+        deferred.resolve(module);
+        return;
+      } catch {}
+    }
+    deferred.reject(new Error(`Module not found after installing package: ${packageName}`));
+  }
+  rejectInstallation(packageName) {
+    const deferred = this.#deferredActions.get(packageName);
+    if (!deferred)
+      return;
+    const rejectedEntries = this.#pending.filter((p) => p.packageName === packageName);
+    const documentTypes = rejectedEntries.map((e) => e.documentType);
+    this.#addDismissed(packageName, documentTypes);
+    this.#removePending(packageName);
+    this.#deferredActions.delete(packageName);
+    deferred.reject(new Error(`Installation rejected for package: ${packageName}`));
+  }
+  subscribePendingChanges(listener) {
+    this.#pendingListeners.add(listener);
+    return () => {
+      this.#pendingListeners.delete(listener);
+    };
+  }
+  getPendingInstallations() {
+    return this.#pending;
+  }
+  getDismissedPackages() {
+    return this.#dismissed;
+  }
+  removeDismissed(packageName) {
+    this.#dismissed = this.#dismissed.filter((d) => d.packageName !== packageName);
+    persistDismissedPackages(this.#dismissed);
+    this.#notifyPendingListeners();
+  }
+  #addDismissed(packageName, documentTypes) {
+    const existing = this.#dismissed.find((d) => d.packageName === packageName);
+    if (existing) {
+      const merged = new Set([...existing.documentTypes, ...documentTypes]);
+      existing.documentTypes = [...merged];
+    } else {
+      this.#dismissed = [...this.#dismissed, { packageName, documentTypes }];
+    }
+    persistDismissedPackages(this.#dismissed);
+  }
+  #removePending(packageName) {
+    this.#pending = this.#pending.filter((p) => p.packageName !== packageName);
+    this.#notifyPendingListeners();
+  }
+  #notifyPendingListeners() {
+    for (const listener of this.#pendingListeners) {
+      listener();
+    }
+  }
 }
 // src/pglite/drop.ts
 import { REACTOR_SCHEMA } from "@powerhousedao/reactor";
@@ -11468,52 +11727,17 @@ var usePGlite2 = () => {
 import {
   ChannelScheme,
   ConsoleLogger,
-  DocumentChangeType,
-  driveCollectionId as driveCollectionId3,
-  GqlRequestChannel as GqlRequestChannel2,
-  InMemoryQueue,
-  IntervalPollTimer,
-  REACTOR_SCHEMA as REACTOR_SCHEMA2,
-  ReactorBuilder,
-  ReactorClientBuilder,
-  RelationalDbProcessor,
-  SyncOperationStatus
-} from "@powerhousedao/reactor";
-// src/registry/client.ts
-function cdnUrlToApiUrl(cdnUrl) {
-  return cdnUrl.replace(/\/-\/cdn\/?$/, "");
-}
-function mapPackageInfo(pkg) {
-  return {
-    name: pkg.name,
-    description: pkg.manifest?.description,
-    version: pkg.manifest?.version,
-    category: pkg.manifest?.category,
-    publisher: pkg.manifest?.publisher?.name,
-    publisherUrl: pkg.manifest?.publisher?.url
-  };
-}
-
-class RegistryClient {
-  apiUrl;
-  constructor(cdnUrl) {
-    this.apiUrl = cdnUrlToApiUrl(cdnUrl);
-  }
-  async getPackages() {
-    const res = await fetch(`${this.apiUrl}/packages`);
-    if (!res.ok)
-      throw new Error(`Registry error: HTTP ${res.status}`);
-    const data = await res.json();
-    return data.map(mapPackageInfo);
-  }
-  async searchPackages(query) {
-    const packages = await this.getPackages();
-    if (!query)
-      return packages;
-    const lowerQuery = query.toLowerCase();
-    return packages.filter((pkg) => pkg.name.toLowerCase().includes(lowerQuery) || pkg.description?.toLowerCase().includes(lowerQuery));
-  }
-}
+  DocumentChangeType,
+  driveCollectionId as driveCollectionId3,
+  GqlRequestChannel as GqlRequestChannel2,
+  InMemoryQueue,
+  IntervalPollTimer,
+  REACTOR_SCHEMA as REACTOR_SCHEMA2,
+  ReactorBuilder,
+  ReactorClientBuilder,
+  RelationalDbProcessor,
+  SyncOperationStatus
+} from "@powerhousedao/reactor";
 // src/reactor-client-document-cache.ts
 import {
   DocumentChangeType as DocumentChangeType2
@@ -30428,7 +30652,7 @@ function useRelationalQuery(ProcessorClass, driveId, queryCallback, parameters,
 
 // src/relational/utils/createProcessorQuery.ts
 var import_lodash = __toESM(require_lodash(), 1);
-import { useCallback as useCallback4, useMemo as useMemo3, useRef as useRef4 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo3, useRef as useRef4 } from "react";
 function useStableParams(params) {
   const prevParamsRef = useRef4(null);
   return useMemo3(() => {
@@ -30441,7 +30665,7 @@ function useStableParams(params) {
 function createProcessorQuery(ProcessorClass) {
   function useQuery(driveId, queryCallback, parameters, options) {
     const stableParams = useStableParams(parameters);
-    const memoizedCallback = useCallback4(queryCallback, [stableParams]);
+    const memoizedCallback = useCallback5(queryCallback, [stableParams]);
     return useRelationalQuery(ProcessorClass, driveId, memoizedCallback, stableParams, options);
   }
   return useQuery;
@@ -30922,7 +31146,7 @@ class RemoteDocumentController {
   }
 }
 // src/renown/components/RenownLoginButton.tsx
-import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
+import { useCallback as useCallback6, useState as useState7 } from "react";
 
 // src/renown/components/icons.tsx
 import { jsxDEV } from "react/jsx-dev-runtime";
@@ -30991,41 +31215,6 @@ function CopyIcon({ size = 14, color = "#9EA0A1" }) {
     ]
   }, undefined, true, undefined, this);
 }
-function ExternalLinkIcon({
-  size = 14,
-  color = "currentColor"
-}) {
-  return /* @__PURE__ */ jsxDEV("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ jsxDEV("path", {
-        d: "M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333",
-        stroke: color,
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("path", {
-        d: "M10 2H14V6",
-        stroke: color,
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("path", {
-        d: "M6.66669 9.33333L14 2",
-        stroke: color,
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
-}
 function DisconnectIcon({ size = 14, color = "#EA4335" }) {
   return /* @__PURE__ */ jsxDEV("svg", {
     width: size,
@@ -31128,6 +31317,27 @@ function SpinnerIcon({ size = 14, color = "currentColor" }) {
     ]
   }, undefined, true, undefined, this);
 }
+function ChevronDownIcon({
+  size = 14,
+  color = "currentColor",
+  style
+}) {
+  return /* @__PURE__ */ jsxDEV("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style,
+    children: /* @__PURE__ */ jsxDEV("path", {
+      d: "M4 6L8 10L12 6",
+      stroke: color,
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
 function UserIcon({ size = 24, color = "#6366f1" }) {
   return /* @__PURE__ */ jsxDEV("svg", {
     width: size,
@@ -31153,80 +31363,93 @@ function UserIcon({ size = 24, color = "#6366f1" }) {
   }, undefined, true, undefined, this);
 }
 
-// src/renown/components/image-data.ts
-var renownShortDataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAYAAADnRuK4AAAACXBIWXMAACxLAAAsSwGlPZapAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAtmSURBVHgB7Z3dbtvmGsefl5LsqHYCq0C6tEUCZ0kDzAFqd0NTYAmweAfr0YD0CrpeQboriH0H6RUsu4ChAYodtCdJD3LQBGttILEBJ4tdJ2uzBoi0yIpsi+S790+ZDkmREilSHySfX6FKpkgliH5+nuf9pKAEkFLO1Bu7VzRNzEuiWfXzglDHSIgZYsYC9b1sCaEeJFZMU66WCnS7XC5vUUwE9Qmk2dndvar+ZpetB5NCxIr6Hr+II1NkgQ7FMeTnHGGygxLhRkGj5agiRRKo3mxeY3EyjkZLR8vl5bCnhxKo2WzOGqb4UpJcCDpH1T+E/wpKY+3gU4XoO0MyCaKyhvVsqifTNNWzVM8y8Hz1rW2pr3ExTDTq+Q3vNPc/lYZ+3S/qwI+iVlDSCJYlZcgDiVqGQdLXJVGTJD47NjV5s9vndP3W6429a8rZpY6LIE6hoB4aMenHMMxgkXqktECBguSBNHhwxMkWiEgt3SRDpbgOukjka8HLxt4VQeaX3uOlIkedrKPr7WjkRWiFv0yXJ/7ecdx7AAWzbsgfnDUPgs1EsWgVykz2QTTaa+melCZqRU1+4C2sO8KJSoe3vAXzZInlyRMoTxAw3MgZXbXEvee6BELdg6EI5zGkLa538gcCRkk1lNzIhXqjseQ8cmiGlbpM2nS+WdA0migViMkvKKx1V00kavr+5OlKRdTw02EEUqnrmvNCBJ1SkQvmvFMsauROQHKmOPHqc/sn6y2/6MMtLsams2X2OgpZhrQM92h6u6OQ5WHadItCliWqSL7quqDAdQ/jpqB5nBDaH6wnv/R1ZKLILS/GBbqEdvdarmP6/pGK5k1f1qg6y8N4gBHevsBSafeKOuSeoqGxPEwAXjcwvUfVQGLedZLGxTPjj9cNKWhWw/9cJ3EAYgLwuqHaZvM4Nus+zAYxAXSkMDGj9TiHYQ7pVEP1BxEzFL6+9T3tvGrS4u/fpzcrRykrcMU8BLb/85yePa/STmOX1h49oSzBAg2BJ0qgw9dPn1OWYIEGzH5LtyKQ8+dnv1QpK7BAA2ZbRRxI42T1wSZlBRZowKw/2u44hnpov9WiLMACDRCI8qK64/ve2sZTygIs0ABZvf848L31je1MRCEWaEA82vxZRaBa4Puoi1bvp78WYoEGxOqa457nrD18kvoWGQs0AFYfPLY6DcOdm+4oxAIlzE6jSSsRpEChvbaR3t5pFihBUBR/fft7isq9lY3UpjIWKEHufLceOnV1XHtvzYpeaYMFSgjUPds/9T/OBfEQvdLWtGeBEgDyrCRQDFsS3UqXRCxQTJKSx+ZFbSdVErFAMbi38jBReWwg0Vff3E1FTcQC9YHV2lJRYm1jmwaFXRONu0Si3mi69qEqT5aICQb9NnfurvXd2uqHhfO/pvnzp2kcaHpWp7JAIUHUWX2wNdCo0403Z6Zp8eL7ND1VplHCAvXBuuopXlHFsndi2Cg4O/u2FY1GJRILFBJEnEebz2j94fZQ01UYpqeO0InjlZGIxAL1ADUOJsFjOsY4RJxenHr3OJ05/Tadeuc4DQMWKIC0dtqtnvGKNmGZKBXp4oU5S6hB4hWIm/EHoO8lrfIAa/XHT8NfMsQCHXDirYqqK9J7FytEoLmzp2jYcMrzgCiEqRWYUTjuEQnSWPWPSlsoqocB10ARwIJATH7vNrd5FECc35w7SXPnTlmvhwkL1AdokY1DRBqlODYsUAzQmTiqOcwnVTP90kdzIxPHhgWKSXuQ819Da0aQdTRffp62pjLR6emloKu7VkZv3zZuCIK4m/O5v3hxQciFVSBjddMeoAsuolWlgwQR9aEKmWmkY26EOpbrzabsyVJt9SfMxt0DlppmmiLhNf4YJZqPLAFQXGMEXW/gVEnmCPWEvITv5qn41yKQFBKY7KCtPoCjx4tL4W9InKIQDQqGOaSENqnxGSEtjj69JHrFeGd4tydvnNMWyS6rMLdVW/HI5MShBoQNejbfsR5/REJcCiTJZKYl4Jm1QfPEjMmyBoWT2AOj+rQ+REzCY2pIzf7lcbJ/wH9VD8KK3ri6QAAAABJRU5ErkJggg==";
-var renownShortHoverDataUrl = "data:image/png;base64,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";
+// src/renown/components/slot.tsx
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement
+} from "react";
+function mergeProps(parentProps, childProps) {
+  const merged = { ...parentProps };
+  for (const key of Object.keys(childProps)) {
+    const parentValue = parentProps[key];
+    const childValue = childProps[key];
+    if (key === "style") {
+      merged[key] = { ...parentValue, ...childValue };
+    } else if (key === "className") {
+      merged[key] = [parentValue, childValue].filter(Boolean).join(" ");
+    } else if (typeof parentValue === "function" && typeof childValue === "function") {
+      merged[key] = (...args) => {
+        childValue(...args);
+        parentValue(...args);
+      };
+    } else if (childValue !== undefined) {
+      merged[key] = childValue;
+    }
+  }
+  return merged;
+}
+var Slot = forwardRef(({ children, ...props }, ref) => {
+  const child = Children.only(children);
+  if (!isValidElement(child)) {
+    return null;
+  }
+  const childElement = child;
+  const mergedProps = mergeProps(props, childElement.props);
+  if (ref) {
+    mergedProps.ref = ref;
+  }
+  return cloneElement(childElement, mergedProps);
+});
+Slot.displayName = "Slot";
 
 // src/renown/components/RenownLoginButton.tsx
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-var POPOVER_GAP = 8;
-var POPOVER_HEIGHT = 120;
-var styles = {
+var lightStyles = {
   trigger: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 0,
-    border: "none",
-    background: "transparent",
-    cursor: "pointer"
-  },
-  popoverBase: {
-    position: "absolute",
-    left: 0,
-    borderRadius: "8px",
-    width: "208px",
-    zIndex: 1000
-  },
-  popoverLight: {
-    backgroundColor: "white",
-    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
+    backgroundColor: "#ffffff",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#d1d5db",
+    color: "#111827"
   },
-  popoverDark: {
+  triggerHover: {
+    backgroundColor: "#ecf3f8",
+    borderColor: "#9ca3af"
+  }
+};
+var darkStyles = {
+  trigger: {
     backgroundColor: "#1f2937",
-    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2)"
-  },
-  popoverContent: {
-    padding: "16px"
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#4b5563",
+    color: "#ecf3f8"
   },
-  logoContainer: {
-    display: "flex",
-    justifyContent: "center",
-    height: "22px",
-    width: "83px",
-    margin: "0 auto 16px",
-    overflow: "hidden"
+  triggerHover: {
+    backgroundColor: "#374151",
+    borderColor: "#6b7280"
+  }
+};
+var styles = {
+  wrapper: {
+    position: "relative",
+    display: "inline-block"
   },
-  connectButtonBase: {
+  trigger: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: "100%",
-    height: "28px",
+    gap: "8px",
+    padding: "8px 32px",
     borderRadius: "8px",
-    backgroundColor: "transparent",
-    fontSize: "14px",
     cursor: "pointer",
-    marginTop: "16px"
-  },
-  connectButtonLight: {
-    border: "1px solid #d1d5db",
-    color: "#111827"
-  },
-  connectButtonDark: {
-    border: "1px solid #4b5563",
-    color: "#f9fafb"
-  },
-  wrapper: {
-    position: "relative",
-    display: "inline-block"
-  },
-  triggerImageLight: {
-    display: "block"
-  },
-  triggerImageDark: {
-    display: "block",
-    filter: "invert(1)"
+    fontSize: "14px",
+    fontWeight: 500,
+    fontFamily: "inherit",
+    lineHeight: "20px",
+    transition: "background-color 150ms, border-color 150ms"
   }
 };
 function RenownLoginButton({
@@ -31234,134 +31457,60 @@ function RenownLoginButton({
   darkMode = false,
   style,
   className,
-  renderTrigger,
-  showPopover = false
+  asChild = false,
+  children
 }) {
   const onLogin = onLoginProp ?? (() => openRenown());
-  const [isOpen, setIsOpen] = useState7(false);
   const [isLoading, setIsLoading] = useState7(false);
   const [isHovered, setIsHovered] = useState7(false);
-  const [showAbove, setShowAbove] = useState7(true);
-  const wrapperRef = useRef5(null);
-  const closeTimeoutRef = useRef5(null);
-  const calculatePosition = useCallback5(() => {
-    if (!wrapperRef.current)
-      return;
-    const rect = wrapperRef.current.getBoundingClientRect();
-    const spaceAbove = rect.top;
-    setShowAbove(spaceAbove >= POPOVER_HEIGHT + POPOVER_GAP);
-  }, []);
-  const handleMouseEnter = useCallback5(() => {
-    setIsHovered(true);
-    if (!showPopover)
-      return;
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-    calculatePosition();
-    setIsOpen(true);
-  }, [calculatePosition, showPopover]);
-  const handleMouseLeave = useCallback5(() => {
-    closeTimeoutRef.current = setTimeout(() => {
-      setIsOpen(false);
-      setIsHovered(false);
-    }, 150);
-  }, []);
-  useEffect7(() => {
-    return () => {
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-      }
-    };
-  }, []);
-  const handleConnect = () => {
-    setIsLoading(true);
-    onLogin();
-  };
-  const handleDirectClick = () => {
-    if (!showPopover && !isLoading) {
+  const handleMouseEnter = useCallback6(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback6(() => setIsHovered(false), []);
+  const handleClick = () => {
+    if (!isLoading) {
       setIsLoading(true);
       onLogin();
     }
   };
+  const themeStyles = darkMode ? darkStyles : lightStyles;
   const triggerStyle = {
     ...styles.trigger,
-    cursor: !isLoading ? "pointer" : "wait",
+    ...themeStyles.trigger,
+    ...isHovered && !isLoading ? themeStyles.triggerHover : {},
+    cursor: isLoading ? "wait" : "pointer",
     ...style
   };
-  const allowLogin = !isLoading && !!onLogin;
-  const connectButtonStyle = {
-    ...styles.connectButtonBase,
-    ...darkMode ? styles.connectButtonDark : styles.connectButtonLight,
-    cursor: allowLogin ? "pointer" : "wait"
-  };
-  const popoverStyle = {
-    ...styles.popoverBase,
-    ...darkMode ? styles.popoverDark : styles.popoverLight,
-    ...showAbove ? { bottom: `calc(100% + ${POPOVER_GAP}px)` } : { top: `calc(100% + ${POPOVER_GAP}px)` }
-  };
-  const triggerImageStyle = darkMode ? styles.triggerImageDark : styles.triggerImageLight;
-  const logoColor = darkMode ? "#f9fafb" : "#374151";
+  const triggerElement = asChild ? /* @__PURE__ */ jsxDEV2(Slot, {
+    onClick: handleClick,
+    "data-renown-state": "login",
+    ...isLoading ? { "data-loading": "" } : {},
+    children
+  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("button", {
+    type: "button",
+    style: triggerStyle,
+    "aria-label": "Log in with Renown",
+    onClick: handleClick,
+    "data-renown-state": "login",
+    ...isLoading ? { "data-loading": "" } : {},
+    children: isLoading ? /* @__PURE__ */ jsxDEV2(SpinnerIcon, {
+      size: 16
+    }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("span", {
+      children: "Log in"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
   return /* @__PURE__ */ jsxDEV2("div", {
-    ref: wrapperRef,
     style: styles.wrapper,
     className,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    children: [
-      renderTrigger ? renderTrigger({
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        isLoading
-      }) : /* @__PURE__ */ jsxDEV2("button", {
-        type: "button",
-        style: triggerStyle,
-        "aria-label": showPopover ? "Open Renown Login" : "Login with Renown",
-        onClick: showPopover ? undefined : handleDirectClick,
-        children: isLoading ? /* @__PURE__ */ jsxDEV2(SpinnerIcon, {
-          size: 42
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("img", {
-          width: 42,
-          height: 42,
-          src: isHovered ? renownShortHoverDataUrl : renownShortDataUrl,
-          alt: "Renown Login",
-          style: triggerImageStyle
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
-      isOpen && showPopover && /* @__PURE__ */ jsxDEV2("div", {
-        style: popoverStyle,
-        children: /* @__PURE__ */ jsxDEV2("div", {
-          style: styles.popoverContent,
-          children: [
-            /* @__PURE__ */ jsxDEV2("div", {
-              style: styles.logoContainer,
-              children: /* @__PURE__ */ jsxDEV2(RenownLogo, {
-                width: 83,
-                height: 22,
-                color: logoColor
-              }, undefined, false, undefined, this)
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV2("button", {
-              type: "button",
-              onClick: allowLogin ? handleConnect : undefined,
-              style: connectButtonStyle,
-              children: isLoading ? /* @__PURE__ */ jsxDEV2(SpinnerIcon, {
-                size: 14
-              }, undefined, false, undefined, this) : "Connect"
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this)
-    ]
-  }, undefined, true, undefined, this);
+    children: triggerElement
+  }, undefined, false, undefined, this);
 }
 
 // src/renown/components/RenownUserButton.tsx
-import { useCallback as useCallback6, useEffect as useEffect8, useRef as useRef6, useState as useState8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef5, useState as useState8 } from "react";
 import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
-var POPOVER_GAP2 = 8;
-var POPOVER_HEIGHT2 = 150;
+var POPOVER_GAP = 4;
+var POPOVER_HEIGHT = 150;
 var styles2 = {
   wrapper: {
     position: "relative",
@@ -31370,56 +31519,89 @@ var styles2 = {
   trigger: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
-    padding: 0,
-    border: "none",
-    background: "transparent",
+    gap: "8px",
+    padding: "6px 12px",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#e5e7eb",
+    backgroundColor: "#ffffff",
     cursor: "pointer",
-    borderRadius: "50%",
-    overflow: "hidden"
+    borderRadius: "8px",
+    fontSize: "12px",
+    fontWeight: 500,
+    fontFamily: "inherit",
+    color: "#111827",
+    transition: "background-color 150ms, border-color 150ms"
+  },
+  triggerHover: {
+    backgroundColor: "#f9fafb",
+    borderColor: "#9ca3af"
   },
   avatar: {
-    width: "40px",
-    height: "40px",
+    width: "28px",
+    height: "28px",
     borderRadius: "50%",
-    objectFit: "cover"
+    objectFit: "cover",
+    flexShrink: 0
   },
   avatarPlaceholder: {
-    width: "40px",
-    height: "40px",
+    width: "28px",
+    height: "28px",
     borderRadius: "50%",
-    backgroundColor: "#e5e7eb",
+    background: "linear-gradient(135deg, #8b5cf6, #3b82f6)",
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  avatarInitial: {
+    fontSize: "12px",
+    fontWeight: 700,
+    color: "#ffffff",
+    lineHeight: 1
+  },
+  displayName: {
+    maxWidth: "120px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  chevron: {
+    flexShrink: 0,
+    transition: "transform 150ms",
+    color: "#6b7280"
+  },
+  chevronOpen: {
+    transform: "rotate(180deg)"
   },
   popoverBase: {
     position: "absolute",
-    left: 0,
-    backgroundColor: "white",
+    right: 0,
+    backgroundColor: "#ffffff",
     borderRadius: "8px",
-    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-    width: "208px",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08)",
+    width: "100%",
     zIndex: 1000,
-    color: "#111827"
+    color: "#111827",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#e5e7eb",
+    overflow: "hidden"
   },
-  section: {
-    padding: "8px 12px",
+  header: {
+    padding: "12px 16px",
     borderBottom: "1px solid #e5e7eb"
   },
-  sectionLast: {
-    padding: "8px 12px",
-    borderBottom: "none"
-  },
-  username: {
+  headerUsername: {
     fontSize: "14px",
-    fontWeight: 500,
-    color: "#111827"
+    fontWeight: 600,
+    color: "#111827",
+    margin: 0
   },
   addressRow: {
     display: "flex",
     alignItems: "center",
-    gap: "8px",
+    gap: "4px",
     marginTop: "4px"
   },
   addressButton: {
@@ -31428,19 +31610,21 @@ var styles2 = {
     gap: "4px",
     padding: 0,
     border: "none",
-    background: "transparent",
+    backgroundColor: "transparent",
     cursor: "pointer",
     fontSize: "12px",
-    color: "#111827",
+    color: "#6b7280",
+    fontFamily: "inherit",
     position: "relative",
     width: "100%"
   },
   copiedText: {
     fontSize: "12px",
-    color: "#111827",
+    color: "#059669",
     position: "absolute",
     left: 0,
-    transition: "opacity 150ms"
+    transition: "opacity 150ms",
+    fontWeight: 500
   },
   addressText: {
     display: "flex",
@@ -31448,24 +31632,38 @@ var styles2 = {
     gap: "4px",
     transition: "opacity 150ms"
   },
+  menuSection: {
+    padding: "4px 0"
+  },
   menuItem: {
     display: "flex",
     alignItems: "center",
     gap: "8px",
     width: "100%",
-    padding: 0,
+    padding: "8px 16px",
     border: "none",
-    background: "transparent",
+    backgroundColor: "transparent",
     cursor: "pointer",
     fontSize: "14px",
-    color: "#111827",
-    textDecoration: "none"
+    color: "#374151",
+    textDecoration: "none",
+    fontFamily: "inherit",
+    transition: "background-color 150ms"
+  },
+  menuItemHover: {
+    backgroundColor: "#f3f4f6"
   },
   disconnectItem: {
-    color: "#7f1d1d"
+    color: "#dc2626"
+  },
+  separator: {
+    height: "1px",
+    backgroundColor: "#e5e7eb",
+    margin: 0,
+    border: "none"
   }
 };
-function truncateAddress(address) {
+function truncateAddress2(address) {
   if (address.length <= 13)
     return address;
   return `${address.slice(0, 7)}...${address.slice(-5)}`;
@@ -31478,27 +31676,34 @@ function RenownUserButton({
   onDisconnect: onDisconnectProp,
   style,
   className,
-  renderTrigger
+  asChild = false,
+  children,
+  menuItems
 }) {
   const user = useUser();
   const address = addressProp ?? user?.address ?? "";
-  const username = usernameProp ?? user?.ens?.name;
-  const avatarUrl = avatarUrlProp ?? user?.ens?.avatarUrl;
+  const username = usernameProp ?? user?.profile?.username ?? user?.ens?.name;
+  const avatarUrl = avatarUrlProp ?? user?.profile?.userImage ?? user?.ens?.avatarUrl;
   const userId = userIdProp ?? user?.profile?.documentId;
   const onDisconnect = onDisconnectProp ?? (() => void logout());
+  const displayName = username ?? (address ? truncateAddress2(address) : "Account");
+  const profileId = userId ?? address;
   const [isOpen, setIsOpen] = useState8(false);
+  const [isHovered, setIsHovered] = useState8(false);
   const [isCopied, setIsCopied] = useState8(false);
   const [showAbove, setShowAbove] = useState8(true);
-  const wrapperRef = useRef6(null);
-  const closeTimeoutRef = useRef6(null);
-  const calculatePosition = useCallback6(() => {
+  const [hoveredItem, setHoveredItem] = useState8(null);
+  const wrapperRef = useRef5(null);
+  const closeTimeoutRef = useRef5(null);
+  const calculatePosition = useCallback7(() => {
     if (!wrapperRef.current)
       return;
     const rect = wrapperRef.current.getBoundingClientRect();
     const spaceAbove = rect.top;
-    setShowAbove(spaceAbove >= POPOVER_HEIGHT2 + POPOVER_GAP2);
+    setShowAbove(spaceAbove >= POPOVER_HEIGHT + POPOVER_GAP);
   }, []);
-  const handleMouseEnter = useCallback6(() => {
+  const handleMouseEnter = useCallback7(() => {
+    setIsHovered(true);
     if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current);
       closeTimeoutRef.current = null;
@@ -31506,19 +31711,21 @@ function RenownUserButton({
     calculatePosition();
     setIsOpen(true);
   }, [calculatePosition]);
-  const handleMouseLeave = useCallback6(() => {
+  const handleMouseLeave = useCallback7(() => {
     closeTimeoutRef.current = setTimeout(() => {
       setIsOpen(false);
+      setIsHovered(false);
+      setHoveredItem(null);
     }, 150);
   }, []);
-  useEffect8(() => {
+  useEffect7(() => {
     return () => {
       if (closeTimeoutRef.current) {
         clearTimeout(closeTimeoutRef.current);
       }
     };
   }, []);
-  const copyToClipboard = useCallback6(async () => {
+  const copyToClipboard = useCallback7(async () => {
     try {
       await navigator.clipboard.writeText(address);
       setIsCopied(true);
@@ -31527,6 +31734,43 @@ function RenownUserButton({
       console.error("Failed to copy address:", err);
     }
   }, [address]);
+  const triggerElement = asChild ? /* @__PURE__ */ jsxDEV3(Slot, {
+    "data-renown-state": "authenticated",
+    children
+  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("button", {
+    type: "button",
+    style: {
+      ...styles2.trigger,
+      ...isHovered ? styles2.triggerHover : {},
+      ...style
+    },
+    "aria-label": "Open account menu",
+    "data-renown-state": "authenticated",
+    children: [
+      avatarUrl ? /* @__PURE__ */ jsxDEV3("img", {
+        src: avatarUrl,
+        alt: "Avatar",
+        style: styles2.avatar
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("div", {
+        style: styles2.avatarPlaceholder,
+        children: /* @__PURE__ */ jsxDEV3("span", {
+          style: styles2.avatarInitial,
+          children: (displayName || "U")[0].toUpperCase()
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("span", {
+        style: styles2.displayName,
+        children: displayName
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3(ChevronDownIcon, {
+        size: 14,
+        style: {
+          ...styles2.chevron,
+          ...isOpen ? styles2.chevronOpen : {}
+        }
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
   return /* @__PURE__ */ jsxDEV3("div", {
     ref: wrapperRef,
     style: styles2.wrapper,
@@ -31534,46 +31778,25 @@ function RenownUserButton({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     children: [
-      renderTrigger ? renderTrigger({
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        address,
-        username,
-        avatarUrl
-      }) : /* @__PURE__ */ jsxDEV3("button", {
-        type: "button",
-        style: { ...styles2.trigger, ...style },
-        "aria-label": "Open account menu",
-        children: avatarUrl ? /* @__PURE__ */ jsxDEV3("img", {
-          src: avatarUrl,
-          alt: "Avatar",
-          style: styles2.avatar
-        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3("div", {
-          style: styles2.avatarPlaceholder,
-          children: /* @__PURE__ */ jsxDEV3(UserIcon, {
-            size: 24,
-            color: "#9ca3af"
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this)
-      }, undefined, false, undefined, this),
+      triggerElement,
       isOpen && /* @__PURE__ */ jsxDEV3("div", {
         style: {
           ...styles2.popoverBase,
-          ...showAbove ? { bottom: `calc(100% + ${POPOVER_GAP2}px)` } : { top: `calc(100% + ${POPOVER_GAP2}px)` }
+          ...showAbove ? { bottom: `calc(100% + ${POPOVER_GAP}px)` } : { top: `calc(100% + ${POPOVER_GAP}px)` }
         },
         children: [
           /* @__PURE__ */ jsxDEV3("div", {
-            style: styles2.section,
+            style: styles2.header,
             children: [
               username && /* @__PURE__ */ jsxDEV3("div", {
-                style: styles2.username,
+                style: styles2.headerUsername,
                 children: username
               }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV3("div", {
+              address && /* @__PURE__ */ jsxDEV3("div", {
                 style: styles2.addressRow,
                 children: /* @__PURE__ */ jsxDEV3("button", {
                   type: "button",
-                  onClick: copyToClipboard,
+                  onClick: () => void copyToClipboard(),
                   style: styles2.addressButton,
                   children: /* @__PURE__ */ jsxDEV3("div", {
                     style: {
@@ -31585,20 +31808,26 @@ function RenownUserButton({
                     },
                     children: [
                       /* @__PURE__ */ jsxDEV3("div", {
-                        style: { ...styles2.addressText, opacity: isCopied ? 0 : 1 },
+                        style: {
+                          ...styles2.addressText,
+                          opacity: isCopied ? 0 : 1
+                        },
                         children: [
                           /* @__PURE__ */ jsxDEV3("span", {
-                            children: truncateAddress(address)
+                            children: truncateAddress2(address)
                           }, undefined, false, undefined, this),
                           /* @__PURE__ */ jsxDEV3(CopyIcon, {
-                            size: 14,
-                            color: "#9EA0A1"
+                            size: 12,
+                            color: "#9ca3af"
                           }, undefined, false, undefined, this)
                         ]
                       }, undefined, true, undefined, this),
                       /* @__PURE__ */ jsxDEV3("div", {
-                        style: { ...styles2.copiedText, opacity: isCopied ? 1 : 0 },
-                        children: "Copied to clipboard!"
+                        style: {
+                          ...styles2.copiedText,
+                          opacity: isCopied ? 1 : 0
+                        },
+                        children: "Copied!"
                       }, undefined, false, undefined, this)
                     ]
                   }, undefined, true, undefined, this)
@@ -31606,35 +31835,64 @@ function RenownUserButton({
               }, undefined, false, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          userId && /* @__PURE__ */ jsxDEV3("div", {
-            style: styles2.section,
-            children: /* @__PURE__ */ jsxDEV3("button", {
-              type: "button",
-              onClick: () => openRenown(userId),
-              style: styles2.menuItem,
-              children: [
-                /* @__PURE__ */ jsxDEV3(ExternalLinkIcon, {
-                  size: 14
-                }, undefined, false, undefined, this),
-                "View on Renown"
-              ]
-            }, undefined, true, undefined, this)
+          /* @__PURE__ */ jsxDEV3("div", {
+            style: styles2.menuSection,
+            children: [
+              profileId && /* @__PURE__ */ jsxDEV3("button", {
+                type: "button",
+                onClick: () => openRenown(profileId),
+                onMouseEnter: () => setHoveredItem("profile"),
+                onMouseLeave: () => setHoveredItem(null),
+                style: {
+                  ...styles2.menuItem,
+                  ...hoveredItem === "profile" ? styles2.menuItemHover : {}
+                },
+                children: [
+                  /* @__PURE__ */ jsxDEV3(UserIcon, {
+                    size: 14,
+                    color: "#6b7280"
+                  }, undefined, false, undefined, this),
+                  "View Profile"
+                ]
+              }, undefined, true, undefined, this),
+              menuItems?.map((item) => /* @__PURE__ */ jsxDEV3("button", {
+                type: "button",
+                onClick: item.onClick,
+                onMouseEnter: () => setHoveredItem(item.label),
+                onMouseLeave: () => setHoveredItem(null),
+                style: {
+                  ...styles2.menuItem,
+                  ...hoveredItem === item.label ? styles2.menuItemHover : {},
+                  ...item.style
+                },
+                children: [
+                  item.icon,
+                  item.label
+                ]
+              }, item.label, true, undefined, this))
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("hr", {
+            style: styles2.separator
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV3("div", {
-            style: styles2.sectionLast,
+            style: styles2.menuSection,
             children: /* @__PURE__ */ jsxDEV3("button", {
               type: "button",
               onClick: onDisconnect,
+              onMouseEnter: () => setHoveredItem("disconnect"),
+              onMouseLeave: () => setHoveredItem(null),
               style: {
                 ...styles2.menuItem,
-                ...styles2.disconnectItem
+                ...styles2.disconnectItem,
+                ...hoveredItem === "disconnect" ? styles2.menuItemHover : {}
               },
               children: [
                 /* @__PURE__ */ jsxDEV3(DisconnectIcon, {
                   size: 14,
-                  color: "#EA4335"
+                  color: "#dc2626"
                 }, undefined, false, undefined, this),
-                "Disconnect"
+                "Log out"
               ]
             }, undefined, true, undefined, this)
           }, undefined, false, undefined, this)
@@ -31645,26 +31903,26 @@ function RenownUserButton({
 }
 
 // src/renown/components/RenownAuthButton.tsx
-import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+import { jsxDEV as jsxDEV4, Fragment } from "react/jsx-dev-runtime";
 function RenownAuthButton({
   className = "",
-  renderAuthenticated,
-  renderUnauthenticated,
-  renderLoading
+  darkMode,
+  loginContent,
+  userContent,
+  loadingContent,
+  children
 }) {
-  const user = useUser();
-  const loginStatus = useLoginStatus();
-  const isLoading = loginStatus === "checking";
-  const openProfile = () => {
-    if (!user)
-      return;
-    openRenown(user.profile?.documentId);
-  };
-  if (isLoading) {
-    if (renderLoading) {
+  const auth = useRenownAuth();
+  if (children) {
+    return /* @__PURE__ */ jsxDEV4(Fragment, {
+      children: children(auth)
+    }, undefined, false, undefined, this);
+  }
+  if (auth.status === "loading" || auth.status === "checking") {
+    if (loadingContent) {
       return /* @__PURE__ */ jsxDEV4("div", {
         className,
-        children: renderLoading()
+        children: loadingContent
       }, undefined, false, undefined, this);
     }
     return /* @__PURE__ */ jsxDEV4("div", {
@@ -31672,24 +31930,44 @@ function RenownAuthButton({
       children: [
         /* @__PURE__ */ jsxDEV4("div", {
           style: {
-            width: "40px",
-            height: "40px",
-            borderRadius: "50%",
-            backgroundColor: "#e5e7eb",
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "6px 12px",
+            borderRadius: "8px",
+            border: "1px solid #e5e7eb",
             animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
-          }
-        }, undefined, false, undefined, this),
+          },
+          children: [
+            /* @__PURE__ */ jsxDEV4("div", {
+              style: {
+                width: "28px",
+                height: "28px",
+                borderRadius: "50%",
+                backgroundColor: "#e5e7eb"
+              }
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV4("div", {
+              style: {
+                width: "80px",
+                height: "14px",
+                borderRadius: "4px",
+                backgroundColor: "#e5e7eb"
+              }
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
         /* @__PURE__ */ jsxDEV4("style", {
           children: `@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }`
         }, undefined, false, undefined, this)
       ]
     }, undefined, true, undefined, this);
   }
-  if (loginStatus === "authorized" && user) {
-    if (renderAuthenticated) {
+  if (auth.status === "authorized") {
+    if (userContent) {
       return /* @__PURE__ */ jsxDEV4("div", {
         className,
-        children: renderAuthenticated({ user, logout, openProfile })
+        children: userContent
       }, undefined, false, undefined, this);
     }
     return /* @__PURE__ */ jsxDEV4("div", {
@@ -31697,62 +31975,63 @@ function RenownAuthButton({
       children: /* @__PURE__ */ jsxDEV4(RenownUserButton, {}, undefined, false, undefined, this)
     }, undefined, false, undefined, this);
   }
-  if (renderUnauthenticated) {
+  if (loginContent) {
     return /* @__PURE__ */ jsxDEV4("div", {
       className,
-      children: renderUnauthenticated({ openRenown: () => openRenown(), isLoading })
+      children: loginContent
     }, undefined, false, undefined, this);
   }
   return /* @__PURE__ */ jsxDEV4("div", {
     className,
-    children: /* @__PURE__ */ jsxDEV4(RenownLoginButton, {}, undefined, false, undefined, this)
+    children: /* @__PURE__ */ jsxDEV4(RenownLoginButton, {
+      darkMode
+    }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
-// src/renown/provider.tsx
-import { useEffect as useEffect9, useRef as useRef7 } from "react";
-function RenownProvider({
+// src/renown/use-renown-init.ts
+import { useRef as useRef6 } from "react";
+async function initRenown(appName, namespace, url) {
+  addRenownEventHandler();
+  setRenown(loading);
+  const builder = new RenownBuilder(appName, {
+    basename: namespace,
+    baseUrl: url
+  });
+  const renown = await builder.build();
+  setRenown(renown);
+  await login(undefined, renown);
+  return renown;
+}
+function useRenownInit({
   appName,
-  basename,
-  baseUrl,
-  children
+  namespace,
+  url
 }) {
-  const initRef = useRef7(false);
-  const initialPropsRef = useRef7({ appName, basename, baseUrl });
+  const promiseRef = useRef6(Promise.withResolvers());
+  const initRef = useRef6(false);
+  if (typeof window === "undefined") {
+    promiseRef.current.reject(new Error("window is undefined"));
+    return promiseRef.current.promise;
+  }
   if (initRef.current) {
-    const initial = initialPropsRef.current;
-    if (appName !== initial.appName) {
-      console.warn("RenownProvider: 'appName' changed after mount. This prop is only read once during initialization.");
-    }
-    if (basename !== initial.basename) {
-      console.warn("RenownProvider: 'basename' changed after mount. This prop is only read once during initialization.");
-    }
-    if (baseUrl !== initial.baseUrl) {
-      console.warn("RenownProvider: 'baseUrl' changed after mount. This prop is only read once during initialization.");
-    }
+    return promiseRef.current.promise;
   }
-  useEffect9(() => {
-    if (initRef.current)
-      return;
-    initRef.current = true;
-    if (!window.ph) {
-      window.ph = {};
-    }
-    addRenownEventHandler();
-    const init = async () => {
-      const builder = new RenownBuilder(appName, { basename, baseUrl });
-      const instance = await builder.build();
-      setRenown(instance);
-      await login(undefined, instance);
-    };
-    init().catch(console.error);
-  }, []);
-  return children;
+  initRef.current = true;
+  initRenown(appName, namespace, url).then(promiseRef.current.resolve).catch(promiseRef.current.reject);
+  return promiseRef.current.promise;
+}
+
+// src/renown/renown-init.tsx
+function Renown2({ onError, ...initOptions }) {
+  useRenownInit(initOptions).catch(onError ?? console.error);
+  return null;
 }
 export {
   validateDocument,
   useVetraPackages,
   useVetraPackageManager,
   useUserPermissions,
+  useUser,
   useSupportedDocumentTypesInReactor,
   useSubgraphModules,
   useSetPHDriveEditorConfig,
@@ -31771,8 +32050,12 @@ export {
   useSelectedDocumentId,
   useSelectedDocument,
   useRevisionHistoryVisible,
+  useRenownInit,
+  useRenownAuth,
+  useRenown,
   useRelationalQuery,
   useRelationalDb,
+  usePendingInstallations,
   useParentFolderForSelectedNode,
   usePHToast,
   usePHModal,
@@ -31788,6 +32071,8 @@ export {
   useNodeParentFolderById,
   useNodeById,
   useNodeActions,
+  useLoginStatus,
+  useLoading,
   useIsExternalControlsEnabled,
   useIsDragAndDropEnabled,
   useInspectorEnabled,
@@ -31823,6 +32108,8 @@ export {
   useDocumentCache,
   useDocumentById,
   useDocument,
+  useDismissedPackages,
+  useDid,
   useDefaultDriveEditorModule,
   useConnectionStates,
   useConnectionState,
@@ -31847,6 +32134,7 @@ export {
   setPHDriveEditorConfig,
   setPHDocumentEditorConfigByKey,
   setPHDocumentEditorConfig,
+  setLoading,
   setGlobal,
   setFeatures,
   setDriveSharingType,
@@ -31866,6 +32154,7 @@ export {
   makeDriveUrlComponent,
   logout,
   login,
+  loading,
   isInspectorEnabledSync,
   isFolderNodeKind,
   isFileNodeKind,
@@ -31914,6 +32203,7 @@ export {
   baseDocumentModelsMap,
   baseDocumentModels,
   addTrigger,
+  addRenownEventHandler,
   addRemoteDrive,
   addPromiseState,
   addFolder,
@@ -31925,10 +32215,10 @@ export {
   SyncOperationStatus,
   SpinnerIcon,
   RenownUserButton,
-  RenownProvider,
   RenownLogo,
   RenownLoginButton,
   RenownAuthButton,
+  Renown2 as Renown,
   RemoteDocumentController,
   RemoteClient,
   RelationalDbProcessor,
@@ -31946,7 +32236,6 @@ export {
   InMemoryQueue,
   ISSUER_TYPE,
   GqlRequestChannel2 as GqlRequestChannel,
-  ExternalLinkIcon,
   DocumentChangeType,
   DocumentCache,
   DisconnectIcon,
@@ -31955,6 +32244,7 @@ export {
   CopyIcon,
   ConsoleLogger,
   ConflictError,
+  ChevronDownIcon,
   ChannelScheme,
   CREDENTIAL_TYPES,
   CREDENTIAL_SUBJECT_TYPE,