@runwayml/avatars-react 0.2.1 → 0.4.0

package/README.md

@@ -56,9 +56,18 @@ The styles use CSS custom properties for easy customization:
 
 See [`examples/`](./examples) for complete working examples:
 - [`nextjs`](./examples/nextjs) - Next.js App Router
+- [`nextjs-server-actions`](./examples/nextjs-server-actions) - Next.js with Server Actions
 - [`react-router`](./examples/react-router) - React Router v7 framework mode
 - [`express`](./examples/express) - Express + Vite
 
+Scaffold an example with one command:
+
+```bash
+npx degit runwayml/avatars-sdk-react/examples/nextjs my-avatar-app
+cd my-avatar-app
+npm install
+```
+
 ## How It Works
 
 1. **Client** calls your server endpoint with the `avatarId`

package/dist/api.cjs

@@ -2,31 +2,10 @@
 
 // src/api/config.ts
 var DEFAULT_BASE_URL = "https://api.dev.runwayml.com";
-function getBaseUrl() {
-  try {
-    const envUrl = process.env.RUNWAYML_BASE_URL;
-    if (envUrl) return envUrl;
-  } catch {
-  }
-  return DEFAULT_BASE_URL;
-}
-var config = null;
-function configure(options) {
-  config = { ...getConfig(), ...options };
-}
-function getConfig() {
-  if (!config) {
-    config = { baseUrl: getBaseUrl() };
-  }
-  return config;
-}
-function resetConfig() {
-  config = null;
-}
 
 // src/api/consume.ts
 async function consumeSession(options) {
-  const { sessionId, sessionKey, baseUrl = getConfig().baseUrl } = options;
+  const { sessionId, sessionKey, baseUrl = DEFAULT_BASE_URL } = options;
   const url = `${baseUrl}/v1/realtime_sessions/${sessionId}/consume`;
   const response = await fetch(url, {
     method: "POST",
@@ -44,9 +23,6 @@ async function consumeSession(options) {
   return response.json();
 }
 
-exports.configure = configure;
 exports.consumeSession = consumeSession;
-exports.getConfig = getConfig;
-exports.resetConfig = resetConfig;
 //# sourceMappingURL=api.cjs.map
 //# sourceMappingURL=api.cjs.map

package/dist/api.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/api/config.ts","../src/api/consume.ts"],"names":[],"mappings":";;;AAIA,IAAM,gBAAA,GAAmB,8BAAA;AAEzB,SAAS,UAAA,GAAqB;AAC5B,EAAA,IAAI;AACF,IAAA,MAAM,MAAA,GAAS,QAAQ,GAAA,CAAI,iBAAA;AAC3B,IAAA,IAAI,QAAQ,OAAO,MAAA;AAAA,EACrB,CAAA,CAAA,MAAQ;AAAA,EAER;AACA,EAAA,OAAO,gBAAA;AACT;AAEA,IAAI,MAAA,GAA2B,IAAA;AAExB,SAAS,UAAU,OAAA,EAAmC;AAC3D,EAAA,MAAA,GAAS,EAAE,GAAG,SAAA,EAAU,EAAG,GAAG,OAAA,EAAQ;AACxC;AAEO,SAAS,SAAA,GAAuB;AACrC,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,MAAA,GAAS,EAAE,OAAA,EAAS,UAAA,EAAW,EAAE;AAAA,EACnC;AACA,EAAA,OAAO,MAAA;AACT;AAEO,SAAS,WAAA,GAAoB;AAClC,EAAA,MAAA,GAAS,IAAA;AACX;;;AC5BA,eAAsB,eACpB,OAAA,EACiC;AACjC,EAAA,MAAM,EAAE,SAAA,EAAW,UAAA,EAAY,UAAU,SAAA,EAAU,CAAE,SAAQ,GAAI,OAAA;AAEjE,EAAA,MAAM,GAAA,GAAM,CAAA,EAAG,OAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,QAAA,CAAA;AACxD,EAAA,MAAM,QAAA,GAAW,MAAM,KAAA,CAAM,GAAA,EAAK;AAAA,IAChC,MAAA,EAAQ,MAAA;AAAA,IACR,OAAA,EAAS;AAAA,MACP,cAAA,EAAgB,kBAAA;AAAA,MAChB,aAAA,EAAe,UAAU,UAAU,CAAA;AAAA;AACrC,GACD,CAAA;AAED,EAAA,IAAI,CAAC,SAAS,EAAA,EAAI;AAChB,IAAA,MAAM,SAAA,GAAY,MAAM,QAAA,CAAS,IAAA,EAAK;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,2BAAA,EAA8B,QAAA,CAAS,MAAM,CAAA,CAAA,EAAI,SAAS,CAAA;AAAA,KAC5D;AAAA,EACF;AAEA,EAAA,OAAO,SAAS,IAAA,EAAK;AACvB","file":"api.cjs","sourcesContent":["export interface ApiConfig {\n  baseUrl: string;\n}\n\nconst DEFAULT_BASE_URL = 'https://api.dev.runwayml.com';\n\nfunction getBaseUrl(): string {\n  try {\n    const envUrl = process.env.RUNWAYML_BASE_URL;\n    if (envUrl) return envUrl;\n  } catch {\n    // process not available in browser\n  }\n  return DEFAULT_BASE_URL;\n}\n\nlet config: ApiConfig | null = null;\n\nexport function configure(options: Partial<ApiConfig>): void {\n  config = { ...getConfig(), ...options };\n}\n\nexport function getConfig(): ApiConfig {\n  if (!config) {\n    config = { baseUrl: getBaseUrl() };\n  }\n  return config;\n}\n\nexport function resetConfig(): void {\n  config = null;\n}\n","import type { ConsumeSessionOptions, ConsumeSessionResponse } from '../types';\nimport { getConfig } from './config';\n\nexport async function consumeSession(\n  options: ConsumeSessionOptions,\n): Promise<ConsumeSessionResponse> {\n  const { sessionId, sessionKey, baseUrl = getConfig().baseUrl } = options;\n\n  const url = `${baseUrl}/v1/realtime_sessions/${sessionId}/consume`;\n  const response = await fetch(url, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      Authorization: `Bearer ${sessionKey}`,\n    },\n  });\n\n  if (!response.ok) {\n    const errorText = await response.text();\n    throw new Error(\n      `Failed to consume session: ${response.status} ${errorText}`,\n    );\n  }\n\n  return response.json();\n}\n"]}
+{"version":3,"sources":["../src/api/config.ts","../src/api/consume.ts"],"names":[],"mappings":";;;AAAO,IAAM,gBAAA,GAAmB,8BAAA;;;ACGhC,eAAsB,eACpB,OAAA,EACiC;AACjC,EAAA,MAAM,EAAE,SAAA,EAAW,UAAA,EAAY,OAAA,GAAU,kBAAiB,GAAI,OAAA;AAE9D,EAAA,MAAM,GAAA,GAAM,CAAA,EAAG,OAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,QAAA,CAAA;AACxD,EAAA,MAAM,QAAA,GAAW,MAAM,KAAA,CAAM,GAAA,EAAK;AAAA,IAChC,MAAA,EAAQ,MAAA;AAAA,IACR,OAAA,EAAS;AAAA,MACP,cAAA,EAAgB,kBAAA;AAAA,MAChB,aAAA,EAAe,UAAU,UAAU,CAAA;AAAA;AACrC,GACD,CAAA;AAED,EAAA,IAAI,CAAC,SAAS,EAAA,EAAI;AAChB,IAAA,MAAM,SAAA,GAAY,MAAM,QAAA,CAAS,IAAA,EAAK;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,2BAAA,EAA8B,QAAA,CAAS,MAAM,CAAA,CAAA,EAAI,SAAS,CAAA;AAAA,KAC5D;AAAA,EACF;AAEA,EAAA,OAAO,SAAS,IAAA,EAAK;AACvB","file":"api.cjs","sourcesContent":["export const DEFAULT_BASE_URL = 'https://api.dev.runwayml.com';\n","import type { ConsumeSessionOptions, ConsumeSessionResponse } from '../types';\nimport { DEFAULT_BASE_URL } from './config';\n\nexport async function consumeSession(\n  options: ConsumeSessionOptions,\n): Promise<ConsumeSessionResponse> {\n  const { sessionId, sessionKey, baseUrl = DEFAULT_BASE_URL } = options;\n\n  const url = `${baseUrl}/v1/realtime_sessions/${sessionId}/consume`;\n  const response = await fetch(url, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      Authorization: `Bearer ${sessionKey}`,\n    },\n  });\n\n  if (!response.ok) {\n    const errorText = await response.text();\n    throw new Error(\n      `Failed to consume session: ${response.status} ${errorText}`,\n    );\n  }\n\n  return response.json();\n}\n"]}

package/dist/api.d.cts

@@ -21,13 +21,6 @@ interface ConsumeSessionOptions {
     baseUrl?: string;
 }
 
-interface ApiConfig {
-    baseUrl: string;
-}
-declare function configure(options: Partial<ApiConfig>): void;
-declare function getConfig(): ApiConfig;
-declare function resetConfig(): void;
-
 declare function consumeSession(options: ConsumeSessionOptions): Promise<ConsumeSessionResponse>;
 
-export { type ApiConfig, type ConsumeSessionOptions, type ConsumeSessionResponse, configure, consumeSession, getConfig, resetConfig };
+export { type ConsumeSessionOptions, type ConsumeSessionResponse, consumeSession };

package/dist/api.d.ts

@@ -21,13 +21,6 @@ interface ConsumeSessionOptions {
     baseUrl?: string;
 }
 
-interface ApiConfig {
-    baseUrl: string;
-}
-declare function configure(options: Partial<ApiConfig>): void;
-declare function getConfig(): ApiConfig;
-declare function resetConfig(): void;
-
 declare function consumeSession(options: ConsumeSessionOptions): Promise<ConsumeSessionResponse>;
 
-export { type ApiConfig, type ConsumeSessionOptions, type ConsumeSessionResponse, configure, consumeSession, getConfig, resetConfig };
+export { type ConsumeSessionOptions, type ConsumeSessionResponse, consumeSession };

package/dist/api.js

@@ -1,30 +1,9 @@
 // src/api/config.ts
 var DEFAULT_BASE_URL = "https://api.dev.runwayml.com";
-function getBaseUrl() {
-  try {
-    const envUrl = process.env.RUNWAYML_BASE_URL;
-    if (envUrl) return envUrl;
-  } catch {
-  }
-  return DEFAULT_BASE_URL;
-}
-var config = null;
-function configure(options) {
-  config = { ...getConfig(), ...options };
-}
-function getConfig() {
-  if (!config) {
-    config = { baseUrl: getBaseUrl() };
-  }
-  return config;
-}
-function resetConfig() {
-  config = null;
-}
 
 // src/api/consume.ts
 async function consumeSession(options) {
-  const { sessionId, sessionKey, baseUrl = getConfig().baseUrl } = options;
+  const { sessionId, sessionKey, baseUrl = DEFAULT_BASE_URL } = options;
   const url = `${baseUrl}/v1/realtime_sessions/${sessionId}/consume`;
   const response = await fetch(url, {
     method: "POST",
@@ -42,6 +21,6 @@ async function consumeSession(options) {
   return response.json();
 }
 
-export { configure, consumeSession, getConfig, resetConfig };
+export { consumeSession };
 //# sourceMappingURL=api.js.map
 //# sourceMappingURL=api.js.map

package/dist/api.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/api/config.ts","../src/api/consume.ts"],"names":[],"mappings":";AAIA,IAAM,gBAAA,GAAmB,8BAAA;AAEzB,SAAS,UAAA,GAAqB;AAC5B,EAAA,IAAI;AACF,IAAA,MAAM,MAAA,GAAS,QAAQ,GAAA,CAAI,iBAAA;AAC3B,IAAA,IAAI,QAAQ,OAAO,MAAA;AAAA,EACrB,CAAA,CAAA,MAAQ;AAAA,EAER;AACA,EAAA,OAAO,gBAAA;AACT;AAEA,IAAI,MAAA,GAA2B,IAAA;AAExB,SAAS,UAAU,OAAA,EAAmC;AAC3D,EAAA,MAAA,GAAS,EAAE,GAAG,SAAA,EAAU,EAAG,GAAG,OAAA,EAAQ;AACxC;AAEO,SAAS,SAAA,GAAuB;AACrC,EAAA,IAAI,CAAC,MAAA,EAAQ;AACX,IAAA,MAAA,GAAS,EAAE,OAAA,EAAS,UAAA,EAAW,EAAE;AAAA,EACnC;AACA,EAAA,OAAO,MAAA;AACT;AAEO,SAAS,WAAA,GAAoB;AAClC,EAAA,MAAA,GAAS,IAAA;AACX;;;AC5BA,eAAsB,eACpB,OAAA,EACiC;AACjC,EAAA,MAAM,EAAE,SAAA,EAAW,UAAA,EAAY,UAAU,SAAA,EAAU,CAAE,SAAQ,GAAI,OAAA;AAEjE,EAAA,MAAM,GAAA,GAAM,CAAA,EAAG,OAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,QAAA,CAAA;AACxD,EAAA,MAAM,QAAA,GAAW,MAAM,KAAA,CAAM,GAAA,EAAK;AAAA,IAChC,MAAA,EAAQ,MAAA;AAAA,IACR,OAAA,EAAS;AAAA,MACP,cAAA,EAAgB,kBAAA;AAAA,MAChB,aAAA,EAAe,UAAU,UAAU,CAAA;AAAA;AACrC,GACD,CAAA;AAED,EAAA,IAAI,CAAC,SAAS,EAAA,EAAI;AAChB,IAAA,MAAM,SAAA,GAAY,MAAM,QAAA,CAAS,IAAA,EAAK;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,2BAAA,EAA8B,QAAA,CAAS,MAAM,CAAA,CAAA,EAAI,SAAS,CAAA;AAAA,KAC5D;AAAA,EACF;AAEA,EAAA,OAAO,SAAS,IAAA,EAAK;AACvB","file":"api.js","sourcesContent":["export interface ApiConfig {\n  baseUrl: string;\n}\n\nconst DEFAULT_BASE_URL = 'https://api.dev.runwayml.com';\n\nfunction getBaseUrl(): string {\n  try {\n    const envUrl = process.env.RUNWAYML_BASE_URL;\n    if (envUrl) return envUrl;\n  } catch {\n    // process not available in browser\n  }\n  return DEFAULT_BASE_URL;\n}\n\nlet config: ApiConfig | null = null;\n\nexport function configure(options: Partial<ApiConfig>): void {\n  config = { ...getConfig(), ...options };\n}\n\nexport function getConfig(): ApiConfig {\n  if (!config) {\n    config = { baseUrl: getBaseUrl() };\n  }\n  return config;\n}\n\nexport function resetConfig(): void {\n  config = null;\n}\n","import type { ConsumeSessionOptions, ConsumeSessionResponse } from '../types';\nimport { getConfig } from './config';\n\nexport async function consumeSession(\n  options: ConsumeSessionOptions,\n): Promise<ConsumeSessionResponse> {\n  const { sessionId, sessionKey, baseUrl = getConfig().baseUrl } = options;\n\n  const url = `${baseUrl}/v1/realtime_sessions/${sessionId}/consume`;\n  const response = await fetch(url, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      Authorization: `Bearer ${sessionKey}`,\n    },\n  });\n\n  if (!response.ok) {\n    const errorText = await response.text();\n    throw new Error(\n      `Failed to consume session: ${response.status} ${errorText}`,\n    );\n  }\n\n  return response.json();\n}\n"]}
+{"version":3,"sources":["../src/api/config.ts","../src/api/consume.ts"],"names":[],"mappings":";AAAO,IAAM,gBAAA,GAAmB,8BAAA;;;ACGhC,eAAsB,eACpB,OAAA,EACiC;AACjC,EAAA,MAAM,EAAE,SAAA,EAAW,UAAA,EAAY,OAAA,GAAU,kBAAiB,GAAI,OAAA;AAE9D,EAAA,MAAM,GAAA,GAAM,CAAA,EAAG,OAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,QAAA,CAAA;AACxD,EAAA,MAAM,QAAA,GAAW,MAAM,KAAA,CAAM,GAAA,EAAK;AAAA,IAChC,MAAA,EAAQ,MAAA;AAAA,IACR,OAAA,EAAS;AAAA,MACP,cAAA,EAAgB,kBAAA;AAAA,MAChB,aAAA,EAAe,UAAU,UAAU,CAAA;AAAA;AACrC,GACD,CAAA;AAED,EAAA,IAAI,CAAC,SAAS,EAAA,EAAI;AAChB,IAAA,MAAM,SAAA,GAAY,MAAM,QAAA,CAAS,IAAA,EAAK;AACtC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,2BAAA,EAA8B,QAAA,CAAS,MAAM,CAAA,CAAA,EAAI,SAAS,CAAA;AAAA,KAC5D;AAAA,EACF;AAEA,EAAA,OAAO,SAAS,IAAA,EAAK;AACvB","file":"api.js","sourcesContent":["export const DEFAULT_BASE_URL = 'https://api.dev.runwayml.com';\n","import type { ConsumeSessionOptions, ConsumeSessionResponse } from '../types';\nimport { DEFAULT_BASE_URL } from './config';\n\nexport async function consumeSession(\n  options: ConsumeSessionOptions,\n): Promise<ConsumeSessionResponse> {\n  const { sessionId, sessionKey, baseUrl = DEFAULT_BASE_URL } = options;\n\n  const url = `${baseUrl}/v1/realtime_sessions/${sessionId}/consume`;\n  const response = await fetch(url, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json',\n      Authorization: `Bearer ${sessionKey}`,\n    },\n  });\n\n  if (!response.ok) {\n    const errorText = await response.text();\n    throw new Error(\n      `Failed to consume session: ${response.status} ${errorText}`,\n    );\n  }\n\n  return response.json();\n}\n"]}

package/dist/index.cjs

@@ -7,25 +7,10 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/api/config.ts
 var DEFAULT_BASE_URL = "https://api.dev.runwayml.com";
-function getBaseUrl() {
-  try {
-    const envUrl = process.env.RUNWAYML_BASE_URL;
-    if (envUrl) return envUrl;
-  } catch {
-  }
-  return DEFAULT_BASE_URL;
-}
-var config = null;
-function getConfig() {
-  if (!config) {
-    config = { baseUrl: getBaseUrl() };
-  }
-  return config;
-}
 
 // src/api/consume.ts
 async function consumeSession(options) {
-  const { sessionId, sessionKey, baseUrl = getConfig().baseUrl } = options;
+  const { sessionId, sessionKey, baseUrl = DEFAULT_BASE_URL } = options;
   const url = `${baseUrl}/v1/realtime_sessions/${sessionId}/consume`;
   const response = await fetch(url, {
     method: "POST",
@@ -43,92 +28,88 @@ async function consumeSession(options) {
   return response.json();
 }
 
+// src/utils/suspense-resource.ts
+function createSuspenseResource(promise) {
+  let status = "pending";
+  let result;
+  let error;
+  const suspender = promise.then(
+    (value) => {
+      status = "fulfilled";
+      result = value;
+    },
+    (err) => {
+      status = "rejected";
+      error = err;
+    }
+  );
+  return {
+    read() {
+      switch (status) {
+        case "pending":
+          throw suspender;
+        case "rejected":
+          throw error;
+        case "fulfilled":
+          return result;
+      }
+    }
+  };
+}
+
 // src/hooks/useCredentials.ts
-function credentialsReducer(_state, action) {
-  switch (action.type) {
-    case "CONNECT":
-      return { status: "connecting", credentials: null, error: null };
-    case "CONNECTED":
-      return {
-        status: "connected",
-        credentials: action.credentials,
-        error: null
-      };
-    case "ERROR":
-      return { status: "error", credentials: null, error: action.error };
+var resourceCache = /* @__PURE__ */ new Map();
+function computeKey(options) {
+  if (options.credentials) return `direct:${options.credentials.sessionId}`;
+  if (options.sessionId && options.sessionKey)
+    return `session:${options.sessionId}`;
+  return `connect:${options.avatarId}:${options.connectUrl ?? "custom"}`;
+}
+async function fetchCredentials(options) {
+  const { avatarId, sessionId, sessionKey, connectUrl, connect, baseUrl } = options;
+  if (sessionId && sessionKey) {
+    const { url, token, roomName } = await consumeSession({
+      sessionId,
+      sessionKey,
+      baseUrl
+    });
+    return { sessionId, serverUrl: url, token, roomName };
   }
+  if (connect) {
+    return connect(avatarId);
+  }
+  if (connectUrl) {
+    const response = await fetch(connectUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ avatarId })
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to connect: ${response.status} ${errorText}`);
+    }
+    return response.json();
+  }
+  throw new Error(
+    "AvatarCall requires one of: credentials, sessionId+sessionKey, connectUrl, or connect"
+  );
 }
 function useCredentials(options) {
-  const {
-    avatarId,
-    sessionId,
-    sessionKey,
-    credentials: directCredentials,
-    connectUrl,
-    connect,
-    onError
-  } = options;
-  const [state, dispatch] = react.useReducer(credentialsReducer, {
-    status: "idle",
-    credentials: null,
-    error: null
-  });
-  const fetchedForRef = react.useRef(null);
-  const onErrorRef = react.useRef(onError);
-  onErrorRef.current = onError;
-  const mode = directCredentials ? "direct" : sessionId && sessionKey ? "session" : connectUrl || connect ? "connect" : null;
-  react.useEffect(() => {
-    if (mode !== "direct" || !directCredentials) return;
-    dispatch({ type: "CONNECTED", credentials: directCredentials });
-  }, [mode, directCredentials]);
-  react.useEffect(() => {
-    if (mode !== "session" || !sessionId || !sessionKey) return;
-    if (fetchedForRef.current === sessionId) return;
-    fetchedForRef.current = sessionId;
-    dispatch({ type: "CONNECT" });
-    consumeSession({ sessionId, sessionKey }).then(({ url, token, roomName }) => {
-      dispatch({
-        type: "CONNECTED",
-        credentials: { sessionId, serverUrl: url, token, roomName }
-      });
-    }).catch((err) => {
-      const error = err instanceof Error ? err : new Error(String(err));
-      dispatch({ type: "ERROR", error });
-      onErrorRef.current?.(error);
-    });
-  }, [mode, sessionId, sessionKey]);
+  const key = computeKey(options);
   react.useEffect(() => {
-    if (mode !== "connect") return;
-    if (fetchedForRef.current === avatarId) return;
-    fetchedForRef.current = avatarId;
-    dispatch({ type: "CONNECT" });
-    async function fetchCredentials() {
-      if (connect) {
-        return connect(avatarId);
-      }
-      if (connectUrl) {
-        const response = await fetch(connectUrl, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ avatarId })
-        });
-        if (!response.ok) {
-          const errorText = await response.text();
-          throw new Error(`Failed to connect: ${response.status} ${errorText}`);
-        }
-        return response.json();
-      }
-      throw new Error("No connect method available");
-    }
-    fetchCredentials().then((credentials) => {
-      dispatch({ type: "CONNECTED", credentials });
-    }).catch((err) => {
-      const error = err instanceof Error ? err : new Error(String(err));
-      dispatch({ type: "ERROR", error });
-      onErrorRef.current?.(error);
-    });
-  }, [mode, avatarId, connectUrl, connect]);
-  return state;
+    return () => {
+      resourceCache.delete(key);
+    };
+  }, [key]);
+  if (options.credentials) {
+    return options.credentials;
+  }
+  let resource = resourceCache.get(key);
+  if (!resource) {
+    resource = createSuspenseResource(fetchCredentials(options));
+    resourceCache.set(key, resource);
+  }
+  return resource.read();
 }
 function useLatest(value) {
   const ref = react.useRef(value);
@@ -263,19 +244,35 @@ function useAvatarSession() {
   const context = useAvatarSessionContext();
   return context;
 }
-function AvatarVideo({ children, ...props }) {
+
+// src/hooks/useAvatarStatus.ts
+function useAvatarStatus() {
   const session = useAvatarSession();
   const { videoTrackRef, hasVideo } = useAvatar();
-  const isConnecting = session.state === "connecting";
-  const state = {
-    hasVideo,
-    isConnecting,
-    trackRef: videoTrackRef
-  };
+  switch (session.state) {
+    case "connecting":
+    case "idle":
+      return { status: "connecting" };
+    case "active":
+      if (hasVideo && videoTrackRef) {
+        return { status: "ready", videoTrackRef };
+      }
+      return { status: "waiting" };
+    case "ending":
+      return { status: "ending" };
+    case "ended":
+      return { status: "ended" };
+    case "error":
+      return { status: "error", error: session.error };
+  }
+}
+function AvatarVideo({ children, ...props }) {
+  const avatar = useAvatarStatus();
+  const videoStatus = avatar.status === "ready" ? avatar : avatar.status === "connecting" ? { status: "connecting" } : { status: "waiting" };
   if (children) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(state) });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children(videoStatus) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, "data-has-video": hasVideo, "data-connecting": isConnecting, children: hasVideo && videoTrackRef && componentsReact.isTrackReference(videoTrackRef) && /* @__PURE__ */ jsxRuntime.jsx(componentsReact.VideoTrack, { trackRef: videoTrackRef }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, "data-avatar-video": "", "data-status": videoStatus.status, children: videoStatus.status === "ready" && componentsReact.isTrackReference(videoStatus.videoTrackRef) && /* @__PURE__ */ jsxRuntime.jsx(componentsReact.VideoTrack, { trackRef: videoStatus.videoTrackRef }) });
 }
 function useLocalMedia() {
   const { localParticipant } = componentsReact.useLocalParticipant();
@@ -487,6 +484,7 @@ function AvatarCall({
   credentials: directCredentials,
   connectUrl,
   connect,
+  baseUrl,
   avatarImageUrl,
   onEnd,
   onError,
@@ -495,50 +493,24 @@ function AvatarCall({
   ...props
 }) {
   const onErrorRef = useLatest(onError);
-  const { status, credentials, error } = useCredentials({
+  const credentials = useCredentials({
     avatarId,
     sessionId,
     sessionKey,
     credentials: directCredentials,
     connectUrl,
     connect,
-    onError
+    baseUrl
   });
   const handleSessionError = (err) => {
     onErrorRef.current?.(err);
   };
   const backgroundStyle = avatarImageUrl ? { "--avatar-image": `url(${avatarImageUrl})` } : void 0;
-  if (status === "idle" || status === "connecting") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ...props,
-        "data-avatar-call": "",
-        "data-state": "connecting",
-        "data-avatar-id": avatarId,
-        style: { ...props.style, ...backgroundStyle }
-      }
-    );
-  }
-  if (status === "error" || !credentials) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ...props,
-        "data-avatar-call": "",
-        "data-state": "error",
-        "data-avatar-id": avatarId,
-        "data-error": error?.message,
-        style: { ...props.style, ...backgroundStyle }
-      }
-    );
-  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...props,
       "data-avatar-call": "",
-      "data-state": "connected",
       "data-avatar-id": avatarId,
       style: { ...props.style, ...backgroundStyle },
       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -586,6 +558,10 @@ Object.defineProperty(exports, "AudioRenderer", {
   enumerable: true,
   get: function () { return componentsReact.RoomAudioRenderer; }
 });
+Object.defineProperty(exports, "VideoTrack", {
+  enumerable: true,
+  get: function () { return componentsReact.VideoTrack; }
+});
 exports.AvatarCall = AvatarCall;
 exports.AvatarSession = AvatarSession;
 exports.AvatarVideo = AvatarVideo;
@@ -594,6 +570,7 @@ exports.ScreenShareVideo = ScreenShareVideo;
 exports.UserVideo = UserVideo;
 exports.useAvatar = useAvatar;
 exports.useAvatarSession = useAvatarSession;
+exports.useAvatarStatus = useAvatarStatus;
 exports.useLocalMedia = useLocalMedia;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map