@xyo-network/react-chain-provider 1.20.1 → 1.20.3

package/src/contexts/gateway/Provider.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable react-hooks/set-state-in-effect */
+/* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect */
+import { isDefinedNotNull, isNull } from '@xylabs/sdk-js'
+import { ErrorRender } from '@xyo-network/react-error'
+import type { GatewayName } from '@xyo-network/xl1-sdk'
+import type { PropsWithChildren } from 'react'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
+
+import { useGatewayFromWallet } from '../../hooks/index.ts'
+import type { ContextGatewayType } from '../../types/index.ts'
+import { useProvidedInPageGateways } from '../in-page-gateways/index.ts'
+import { GatewayContext } from './context.ts'
+import type { GatewayState } from './state.ts'
+
+export interface GatewayProviderProps extends PropsWithChildren {
+  gatewayName?: GatewayName
+}
+
+export const GatewayProvider: React.FC<GatewayProviderProps> = ({ gatewayName, children }) => {
+  const [defaultGateway, setDefaultGateway] = useState<ContextGatewayType | null | undefined>()
+  const [gateways, setGateways] = useState<GatewayState['gateways']>({
+    inPageGateway: undefined,
+    walletGateway: undefined,
+  })
+
+  const {
+    gateway: gatewayFromWallet,
+    error: gatewayFromWalletError,
+  } = useGatewayFromWallet(gatewayName)
+
+  const {
+    gateways: allGateways,
+    errors: allGatewayErrors,
+    clearAll,
+  } = useProvidedInPageGateways(true)
+
+  const gatewayFromConfig = gatewayName ? allGateways[gatewayName] : undefined
+  const gatewayFromConfigError = gatewayName ? allGatewayErrors[gatewayName] : undefined
+
+  useEffect(() => {
+    if (isNull(gatewayFromWallet)) {
+      // if no gateway from wallet, use the one from config
+      setDefaultGateway(gatewayFromConfig)
+      setGateways({
+        inPageGateway: gatewayFromConfig,
+        walletGateway: null,
+      })
+    } else if (isDefinedNotNull(gatewayFromWallet)) {
+      setDefaultGateway(gatewayFromWallet)
+      setGateways({
+        inPageGateway: gatewayFromConfig,
+        walletGateway: gatewayFromWallet,
+      })
+    }
+  }, [gatewayFromConfig, gatewayFromWallet])
+
+  const value = useMemo(() => {
+    const value: GatewayState = {
+      defaultGateway,
+      error: gatewayFromWalletError || gatewayFromConfigError,
+      gateways,
+      provided: true,
+      resetGatewaysFromConfig: clearAll,
+    }
+    return value
+  }, [
+    defaultGateway,
+    gatewayFromWalletError,
+    gatewayFromConfigError,
+    gateways,
+    clearAll,
+  ])
+
+  return (
+    <GatewayContext value={value}>
+      <ErrorRender error={gatewayFromConfigError} />
+      {children}
+    </GatewayContext>
+  )
+}

package/src/contexts/gateway/context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xylabs/react-shared'
+
+import type { GatewayState } from './state.ts'
+
+export const GatewayContext = createContextEx<GatewayState>()

package/src/contexts/gateway/index.ts

@@ -0,0 +1,4 @@
+export * from './context.ts'
+export * from './Provider.tsx'
+export * from './state.ts'
+export * from './use.ts'

package/src/contexts/gateway/state.ts

@@ -0,0 +1,15 @@
+import type { ContextExState } from '@xylabs/react-shared'
+
+import type { ContextGatewayType } from '../../types/index.ts'
+
+export interface GatewayStateFields {
+  defaultGateway: ContextGatewayType | undefined | null
+  error: Error | null | undefined
+  gateways: {
+    inPageGateway: ContextGatewayType | undefined | null
+    walletGateway: ContextGatewayType | undefined | null
+  }
+  resetGatewaysFromConfig: () => void
+}
+
+export type GatewayState = ContextExState<GatewayStateFields>

package/src/contexts/gateway/story/GatewayStats.tsx

@@ -0,0 +1,33 @@
+import { Stack, Typography } from '@mui/material'
+import type { AccountInstance } from '@xyo-network/sdk-js'
+import type { GatewayName } from '@xyo-network/xl1-sdk'
+
+import { InPageGatewaysProvider } from '../../in-page-gateways/index.ts'
+import { GatewayProvider } from '../Provider.tsx'
+import { GatewayStatus } from './GatewayStatus.tsx'
+
+export interface GatewayStatsProps {
+  account?: AccountInstance
+  id?: GatewayName
+  url?: string
+}
+
+export const GatewayStats: React.FC<GatewayStatsProps> = ({
+  account, id, url,
+}) => {
+  return (
+    <InPageGatewaysProvider account={account}>
+      <GatewayProvider key={id} gatewayName={id}>
+        <Stack gap={1}>
+          <Typography variant="subtitle1">
+            <strong>{id}</strong>
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            {url}
+          </Typography>
+          <GatewayStatus />
+        </Stack>
+      </GatewayProvider>
+    </InPageGatewaysProvider>
+  )
+}

package/src/contexts/gateway/story/GatewayStatus.tsx

@@ -0,0 +1,53 @@
+import {
+  Alert, Chip, Stack, Typography,
+} from '@mui/material'
+
+import { useProvidedGateway } from '../use.ts'
+
+/** Inner component that consumes the GatewayContext to display load status */
+export const GatewayStatus: React.FC = () => {
+  const { defaultGateway: gateway, error } = useProvidedGateway(false) ?? {}
+
+  if (error) {
+    return (
+      <Alert severity="error">
+        <Typography variant="body2">
+          Failed to load gateway:
+          {' '}
+          {error.message}
+        </Typography>
+      </Alert>
+    )
+  }
+
+  if (gateway === undefined) {
+    return (
+      <Alert severity="info">
+        <Typography variant="body2">Gateway loading...</Typography>
+      </Alert>
+    )
+  }
+
+  if (gateway === null) {
+    return (
+      <Alert severity="warning">
+        <Typography variant="body2">Gateway not available</Typography>
+      </Alert>
+    )
+  }
+
+  return (
+    <Alert severity="success">
+      <Stack direction="row" gap={1} alignItems="center">
+        <Typography variant="body2">Gateway loaded</Typography>
+        <Chip label="connected" color="success" size="small" />
+        {gateway?.connection?.viewer && (
+          <Chip label="viewer available" color="success" size="small" />
+        )}
+        {gateway?.connection.runner && (
+          <Chip label="runner available" color="success" size="small" />
+        )}
+      </Stack>
+    </Alert>
+  )
+}

package/src/contexts/gateway/story/Provider.stories.tsx

@@ -0,0 +1,38 @@
+import { Stack } from '@mui/material'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Account } from '@xyo-network/sdk-js'
+import { DefaultNetworks } from '@xyo-network/xl1-sdk'
+
+import type { GatewayProviderProps } from '../Provider.tsx'
+import { GatewayProvider } from '../Provider.tsx'
+import { GatewayStats } from './GatewayStats.tsx'
+
+const meta: Meta<GatewayProviderProps> = {
+  title: 'provider/GatewayProvider',
+  component: GatewayProvider,
+
+  parameters: { docs: { description: { component: 'Wraps children with a `GatewayContext` populated from the given `gatewayName` and show the gateways from the default networks if available.' } } },
+}
+
+export default meta
+
+const account = await Account.random()
+
+/**
+ * Convenience story that proves ALL default networks are represented.
+ * Each row corresponds to one entry in DefaultNetworks.
+ */
+const AllDefaultNetworks: StoryObj<GatewayProviderProps> = {
+  name: 'All Default Networks',
+  render: () => {
+    return (
+      <Stack gap={3} p={2}>
+        {DefaultNetworks.map(network => (
+          <GatewayStats key={network.id} id={network.id} url={network.url} account={account} />
+        ))}
+      </Stack>
+    )
+  },
+}
+
+export { AllDefaultNetworks }

package/src/contexts/gateway/story/ProviderWithWallet.stories.tsx

@@ -0,0 +1,46 @@
+import { Alert, Stack } from '@mui/material'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { isDefinedNotNull } from '@xylabs/sdk-js'
+import { IframeWalletWarningDecorator } from '@xyo-network/react-chain-shared'
+import type { GatewayName } from '@xyo-network/xl1-sdk'
+
+import { useClientFromWallet } from '../../../hooks/index.ts'
+import type { GatewayProviderProps } from '../Provider.tsx'
+import { GatewayProvider } from '../Provider.tsx'
+import { GatewayStats } from './GatewayStats.tsx'
+
+const meta: Meta<GatewayProviderProps> = {
+  title: 'provider/GatewayProvider',
+  component: GatewayProvider,
+  decorators: [IframeWalletWarningDecorator],
+
+  parameters: { docs: { description: { component: 'Wraps children with a `GatewayContext` populated from the given `gatewayName` and show the wallet-provided gateways if available.' } } },
+}
+
+export default meta
+
+type Story = StoryObj<GatewayProviderProps>
+
+/**
+ * Convenience story that proves ALL client gateways are represented.
+ * Each row corresponds to one entry in the client's gateways.
+ */
+const AllClientGateways: Story = {
+  name: 'All Client Gateways',
+  render: () => {
+    const { client } = useClientFromWallet()
+    const foundClient = isDefinedNotNull(client)
+    return (
+      <Stack gap={3} p={2}>
+        <Alert severity={foundClient ? 'success' : 'error'}>
+          {foundClient ? 'Client found, displaying gateways:' : 'No client found. Please ensure your wallet is connected and has access to the current page.'}
+        </Alert>
+        {Object.keys(client?.gateways || {}).map(id => (
+          <GatewayStats key={id} id={id as GatewayName} />
+        ))}
+      </Stack>
+    )
+  },
+}
+
+export { AllClientGateways }

package/src/contexts/gateway/use.ts

@@ -0,0 +1,5 @@
+import { useContextEx } from '@xylabs/react-shared'
+
+import { GatewayContext } from './context.ts'
+
+export const useProvidedGateway = (required = true) => useContextEx(GatewayContext, 'Gateway', required)

package/src/contexts/in-page-gateways/Provider.tsx

@@ -0,0 +1,82 @@
+import type { AccountInstance } from '@xyo-network/sdk-js'
+import type { GatewayName } from '@xyo-network/xl1-sdk'
+import { DefaultNetworks } from '@xyo-network/xl1-sdk'
+import type { PropsWithChildren } from 'react'
+import React, {
+  startTransition,
+  useCallback, useEffect, useMemo, useState,
+} from 'react'
+
+import { buildGateway } from '../../lib/index.ts'
+import type { ContextGatewayType } from '../../types/index.ts'
+import { InPageGatewaysContext } from './context.ts'
+import type { InPageGatewaysState } from './state.ts'
+
+export interface InPageGatewaysProviderProps extends PropsWithChildren {
+  account?: AccountInstance
+}
+
+export const InPageGatewaysProvider: React.FC<InPageGatewaysProviderProps> = ({ account, children }) => {
+  const [gateways, setGateways] = useState<Partial<Record<GatewayName, ContextGatewayType>>>({})
+  const [errors, setErrors] = useState<Partial<Record<GatewayName, Error>>>({})
+  const [previousAccount, setPreviousAccount] = useState<AccountInstance | undefined>(account)
+
+  const clearAll = useCallback(() => {
+    setGateways({})
+    setErrors({})
+  }, [])
+
+  if (previousAccount !== account) {
+    clearAll()
+    setPreviousAccount(account)
+  }
+
+  useEffect(() => {
+    let cancelled = false
+
+    const buildAll = async () => {
+      const results = await Promise.allSettled(
+        DefaultNetworks.map(async (network) => {
+          const gateway = await buildGateway(network.id as GatewayName, account)
+          return { id: network.id as GatewayName, gateway }
+        }),
+      )
+
+      if (cancelled) return
+
+      const nextGateways: Partial<Record<GatewayName, ContextGatewayType>> = {}
+      const nextErrors: Partial<Record<GatewayName, Error>> = {}
+
+      for (const [index, result] of results.entries()) {
+        const networkId = DefaultNetworks[index].id as GatewayName
+        if (result.status === 'fulfilled') {
+          nextGateways[networkId] = result.value.gateway
+        } else {
+          nextErrors[networkId] = result.reason instanceof Error ? result.reason : new Error(String(result.reason))
+        }
+      }
+
+      startTransition(() => {
+        setGateways(nextGateways)
+        setErrors(nextErrors)
+      })
+    }
+
+    void buildAll()
+    return () => {
+      cancelled = true
+    }
+  }, [account])
+
+  const value = useMemo(() => {
+    const value: InPageGatewaysState = {
+      clearAll,
+      errors,
+      gateways,
+      provided: true,
+    }
+    return value
+  }, [clearAll, errors, gateways])
+
+  return <InPageGatewaysContext value={value}>{children}</InPageGatewaysContext>
+}

package/src/contexts/in-page-gateways/context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xylabs/react-shared'
+
+import type { InPageGatewaysState } from './state.ts'
+
+export const InPageGatewaysContext = createContextEx<InPageGatewaysState>()

package/src/contexts/in-page-gateways/index.ts

@@ -0,0 +1,4 @@
+export * from './context.ts'
+export * from './Provider.tsx'
+export * from './state.ts'
+export * from './use.ts'

package/src/contexts/in-page-gateways/state.ts

@@ -0,0 +1,12 @@
+import type { ContextExState } from '@xylabs/react-shared'
+import type { GatewayName } from '@xyo-network/xl1-sdk'
+
+import type { ContextGatewayType } from '../../types/index.ts'
+
+export interface InPageGatewaysStateFields {
+  clearAll: () => void
+  errors: Partial<Record<GatewayName, Error>>
+  gateways: Partial<Record<GatewayName, ContextGatewayType>>
+}
+
+export type InPageGatewaysState = ContextExState<InPageGatewaysStateFields>

package/src/contexts/in-page-gateways/use.ts

@@ -0,0 +1,5 @@
+import { useContextEx } from '@xylabs/react-shared'
+
+import { InPageGatewaysContext } from './context.ts'
+
+export const useProvidedInPageGateways = (required = true) => useContextEx(InPageGatewaysContext, 'InPageGateways', required)

package/src/contexts/index.ts

@@ -1 +1,3 @@
 export * from './current-block/index.ts'
+export * from './gateway/index.ts'
+export * from './in-page-gateways/index.ts'

package/src/hooks/client/index.ts

@@ -1,3 +1,3 @@
 export * from './permissions/index.ts'
-export * from './useClient.ts'
-export * from './useGateway.ts'
+export * from './useClientFromWallet.ts'
+export * from './useGatewayFromWallet.ts'

package/src/hooks/client/permissions/usePermissions.ts

@@ -1,9 +1,9 @@
-import { useClient } from '../useClient.ts'
+import { useClientFromWallet } from '../useClientFromWallet.ts'
 
 export const usePermissions = () => {
   const {
     client, isLoading, error, timedout,
-  } = useClient()
+  } = useClientFromWallet()
   const permissions = client?.permissions
   return {
     permissions,

package/src/hooks/client/{useClient.ts → useClientFromWallet.ts}

@@ -63,7 +63,7 @@ const subscribe = (listener: () => void, timeout?: number) => {
 
 const getSnapshot = (): ClientState => currentState
 
-export const useClient = (timeout?: number) => {
+export const useClientFromWallet = (timeout?: number) => {
   const subscribeWithTimeout = useCallback((listener: () => void) => subscribe(listener, timeout), [timeout])
   const clientState = useSyncExternalStore(subscribeWithTimeout, getSnapshot)
 
@@ -91,3 +91,6 @@ export const useClient = (timeout?: number) => {
 
   return clientState
 }
+
+/** @deprecated - use useClientFromWallet instead */
+export const useClient = useClientFromWallet

package/src/hooks/client/{useGateway.ts → useGatewayFromWallet.ts}

@@ -1,12 +1,13 @@
 import { isDefined, isNull } from '@xylabs/sdk-js'
 import type { GatewayName } from '@xyo-network/xl1-sdk'
 
-import { useClient } from './useClient.ts'
+import type { GatewayFromWallet } from '../../types/index.ts'
+import { useClientFromWallet } from './useClientFromWallet.ts'
 
-export const useGateway = (gatewayName?: GatewayName, timeout?: number) => {
+export const useGatewayFromWallet = (gatewayName?: GatewayName, timeout?: number): GatewayFromWallet => {
   const {
     client, isLoading, error, timedout,
-  } = useClient(timeout)
+  } = useClientFromWallet(timeout)
 
   const resolveGateway = () => {
     // null client means we do not have to wait for timedout
@@ -24,3 +25,6 @@ export const useGateway = (gatewayName?: GatewayName, timeout?: number) => {
     timedout,
   }
 }
+
+/** @deprecated - useGatewayFromWallet */
+export const useGateway = useGatewayFromWallet

package/src/hooks/gateway/index.ts

@@ -0,0 +1,3 @@
+export * from './useNetwork.ts'
+export * from './useRunner.ts'
+export * from './useViewer.ts'

package/src/hooks/gateway/useNetwork.ts

@@ -0,0 +1,6 @@
+import { useProvidedGateway } from '../../contexts/index.ts'
+
+export const useNetworkFromGateway = () => {
+  const { defaultGateway } = useProvidedGateway()
+  return defaultGateway?.connection?.network
+}

package/src/hooks/gateway/useRunner.ts

@@ -0,0 +1,6 @@
+import { useProvidedGateway } from '../../contexts/index.ts'
+
+export const useRunnerFromGateway = () => {
+  const { defaultGateway } = useProvidedGateway()
+  return defaultGateway?.connection?.runner
+}

package/src/hooks/gateway/useViewer.ts

@@ -0,0 +1,6 @@
+import { useProvidedGateway } from '../../contexts/index.ts'
+
+export const useViewerFromGateway = () => {
+  const { defaultGateway } = useProvidedGateway()
+  return defaultGateway?.connection?.viewer
+}

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './account/index.ts'
 export * from './client/index.ts'
+export * from './gateway/index.ts'
 export * from './helpers/index.ts'
 export * from './useAddressBalance.ts'
 export * from './useConfirmTransactionBase.ts'

package/src/hooks/useConnectAccount.ts

@@ -4,14 +4,14 @@ import type { GatewayName } from '@xyo-network/xl1-sdk'
 import { MainNetwork } from '@xyo-network/xl1-sdk'
 import { useCallback, useState } from 'react'
 
-import { useAccountPermissions, useGateway } from './client/index.ts'
+import { useAccountPermissions, useGatewayFromWallet } from './client/index.ts'
 
 export const useConnectAccount = (gatewayName: GatewayName = MainNetwork.id, timeout?: number) => {
   const [connectError, setConnectError] = useState<Error>()
 
   const {
     gateway, error, timedout,
-  } = useGateway(gatewayName, timeout)
+  } = useGatewayFromWallet(gatewayName, timeout)
 
   const [accountPermissions, accountPermissionsError] = useAccountPermissions()
 

package/src/hooks/useCurrentBlock.ts

@@ -3,6 +3,9 @@ import { usePromise } from '@xylabs/react-promise'
 import { isDefinedNotNull } from '@xylabs/sdk-js'
 import type { HydratedBlockWithHashMeta, XyoViewer } from '@xyo-network/xl1-sdk'
 
+import { useViewerFromGateway } from './gateway/index.ts'
+
+/* @deprecated - use useCurrentBlockFromGateway instead */
 export const useCurrentBlock = (refresh = 1, viewer?: XyoViewer | null): [HydratedBlockWithHashMeta | undefined,
   Error | undefined, UsePromiseState | undefined] => {
   return usePromise(async () => {
@@ -12,3 +15,13 @@ export const useCurrentBlock = (refresh = 1, viewer?: XyoViewer | null): [Hydrat
     }
   }, [viewer, refresh])
 }
+
+export const useCurrentBlockFromGateway = (refresh = 1) => {
+  const viewer = useViewerFromGateway()
+  return usePromise(async () => {
+    if (isDefinedNotNull(viewer) && refresh > 0) {
+      const block = await viewer.currentBlock()
+      return block
+    }
+  }, [viewer, refresh])
+}

package/src/hooks/useHttpRpcRunner.ts

@@ -7,6 +7,7 @@ import {
   AccountBalanceViewerRpcSchemas, buildJsonRpcProviderLocator, HttpRpcTransport, JsonRpcAccountBalanceViewer, SimpleTransactionViewer, XyoRunnerMoniker,
 } from '@xyo-network/xl1-sdk'
 
+/* @deprecated use useRunnerFromGateway */
 export const useHttpRpcRunner = (url?: string) => {
   return usePromise(async () => {
     if (isUndefined(url)) {

package/src/hooks/viewer/useCheckRpc.ts

@@ -2,13 +2,12 @@ import { usePromise } from '@xylabs/react-promise'
 import {
   delay, isDefined, isUndefined,
 } from '@xylabs/sdk-js'
-import type {
-  JsonRpcXyoViewer, RpcSchemaMap, TransportFactory,
-} from '@xyo-network/xl1-sdk'
+import { basicRemoteViewerLocator } from '@xyo-network/chain-orchestration'
+import type { JsonRpcXyoViewer } from '@xyo-network/xl1-sdk'
 import {
-  AccountBalanceViewerRpcSchemas, buildJsonRpcProviderLocator,
-  HttpRpcTransport, JsonRpcAccountBalanceViewer, LocalNetwork,
-  SequenceNetwork, SimpleTransactionViewer, XyoViewerMoniker,
+  LocalNetwork,
+  SequenceNetwork,
+  XyoViewerMoniker,
 } from '@xyo-network/xl1-sdk'
 import { useEffect, useState } from 'react'
 
@@ -23,8 +22,8 @@ export const useCheckLocalRpc = () => {
 }
 
 export const useCheckSequenceRpc = () => {
-  const isLocalProducer = useCheckRpc(sequenceRpcEndpoint)
-  return isLocalProducer
+  const isSequenceRpc = useCheckRpc(sequenceRpcEndpoint)
+  return isSequenceRpc
 }
 
 export const useCheckRpc = (endpoint?: string) => {
@@ -34,15 +33,7 @@ export const useCheckRpc = (endpoint?: string) => {
   const [viewer] = usePromise(async () => {
     if (isUndefined(endpoint)) return
 
-    const transportFactory: TransportFactory = (schemas: RpcSchemaMap) => new HttpRpcTransport(endpoint, schemas)
-    const locator = await buildJsonRpcProviderLocator({ transportFactory })
-
-    // Additional dependencies to get working viewer
-    locator.register(SimpleTransactionViewer.factory<SimpleTransactionViewer>(SimpleTransactionViewer.dependencies, {}))
-    locator.register(JsonRpcAccountBalanceViewer.factory<JsonRpcAccountBalanceViewer>(
-      JsonRpcAccountBalanceViewer.dependencies,
-      { transport: await transportFactory(AccountBalanceViewerRpcSchemas) },
-    ))
+    const locator = await basicRemoteViewerLocator(endpoint, { rpc: { protocol: 'http', url: endpoint } })
 
     const viewer = await locator.getInstance<JsonRpcXyoViewer>(XyoViewerMoniker)
     return viewer

package/src/hooks/viewer/useHttpRpcViewer.ts

@@ -55,6 +55,7 @@ const buildLocator = async (transportFactory: TransportFactory, dataLakeViewerPa
   return locator
 }
 
+/** @deprecated - use useViewerFromGateway */
 export const useHttpRpcViewer = (urlOrNetwork?: string | NetworkBootstrap): XyoViewer | undefined => {
   const [resolvedViewer] = usePromise(async () => {
     if (isUndefined(urlOrNetwork)) {

package/src/hooks/viewer/useViewerFromWallet.ts

@@ -4,7 +4,7 @@ import {
 } from '@xylabs/sdk-js'
 import type { GatewayName } from '@xyo-network/xl1-sdk'
 
-import { useGateway } from '../client/index.ts'
+import { useGatewayFromWallet } from '../client/index.ts'
 
 /**
  * Creates a JsonRpcXyoViewer instance based on the provided networkId.
@@ -18,7 +18,7 @@ export const useViewerFromWallet = (
 ) => {
   const {
     gateway, error, isLoading, timedout,
-  } = useGateway(networkId, timeout)
+  } = useGatewayFromWallet(networkId, timeout)
 
   const result = usePromise(async () => {
     await Promise.resolve() // ensure async

package/src/index.ts

@@ -2,3 +2,4 @@ export * from './components/index.ts'
 export * from './contexts/index.ts'
 export * from './hooks/index.ts'
 export * from './lib/index.ts'
+export * from './types/index.ts'