@runwayml/avatars-react 0.2.2 → 0.5.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,43 @@ 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-avatar-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();
@@ -330,13 +335,22 @@ function ControlBar({
   ...props
 }) {
   const session = useAvatarSession();
-  const { isMicEnabled, isCameraEnabled, toggleMic, toggleCamera } = useLocalMedia();
+  const {
+    isMicEnabled,
+    isCameraEnabled,
+    isScreenShareEnabled,
+    toggleMic,
+    toggleCamera,
+    toggleScreenShare
+  } = useLocalMedia();
   const isActive = session.state === "active";
   const state = {
     isMicEnabled,
     isCameraEnabled,
+    isScreenShareEnabled,
     toggleMic,
     toggleCamera,
+    toggleScreenShare,
     endCall: session.end,
     isActive
   };
@@ -346,14 +360,14 @@ function ControlBar({
   if (!isActive) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, "data-active": isActive, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, "data-avatar-control-bar": "", "data-avatar-active": isActive, children: [
     showMicrophone && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
         onClick: toggleMic,
-        "data-control": "microphone",
-        "data-enabled": isMicEnabled,
+        "data-avatar-control": "microphone",
+        "data-avatar-enabled": isMicEnabled,
         "aria-label": isMicEnabled ? "Mute microphone" : "Unmute microphone",
         children: microphoneIcon
       }
@@ -363,8 +377,8 @@ function ControlBar({
       {
         type: "button",
         onClick: toggleCamera,
-        "data-control": "camera",
-        "data-enabled": isCameraEnabled,
+        "data-avatar-control": "camera",
+        "data-avatar-enabled": isCameraEnabled,
         "aria-label": isCameraEnabled ? "Turn off camera" : "Turn on camera",
         children: cameraIcon
       }
@@ -374,7 +388,8 @@ function ControlBar({
       {
         source: livekitClient.Track.Source.ScreenShare,
         showIcon: false,
-        "data-control": "screen-share",
+        "data-avatar-control": "screen-share",
+        "data-avatar-enabled": isScreenShareEnabled,
         "aria-label": "Toggle screen share",
         children: screenShareIcon
       }
@@ -384,7 +399,8 @@ function ControlBar({
       {
         type: "button",
         onClick: session.end,
-        "data-control": "end-call",
+        "data-avatar-control": "end-call",
+        "data-avatar-enabled": true,
         "aria-label": "End call",
         children: phoneIcon
       }
@@ -458,7 +474,11 @@ var phoneIcon = /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.8429 22.5693L11.4018 21.0986C11.2675 20.9626 11.1625 20.7995 11.0935 20.6197C11.0245 20.4399 10.9931 20.2474 11.0013 20.0545C11.0094 19.8616 11.0569 19.6726 11.1408 19.4995C11.2247 19.3265 11.343 19.1732 11.4883 19.0495C13.127 17.7049 15.0519 16.7714 17.1083 16.3239C19.0064 15.892 20.9744 15.892 22.8725 16.3239C24.9374 16.7743 26.8693 17.7147 28.5117 19.0691C28.6565 19.1924 28.7746 19.3451 28.8585 19.5176C28.9423 19.69 28.99 19.8784 28.9986 20.0707C29.0072 20.263 28.9764 20.455 28.9083 20.6345C28.8402 20.814 28.7362 20.9771 28.603 21.1133L27.1619 22.584C26.9311 22.8242 26.6226 22.9706 26.2938 22.9959C25.9651 23.0211 25.6385 22.9235 25.3751 22.7212C24.8531 22.3127 24.2875 21.9657 23.689 21.6869C23.4525 21.5774 23.2517 21.4009 23.1103 21.1785C22.969 20.9561 22.8931 20.697 22.8917 20.4319V19.1867C21.0053 18.6573 19.0139 18.6573 17.1275 19.1867V20.4319C17.1261 20.697 17.0502 20.9561 16.9089 21.1785C16.7676 21.4009 16.5667 21.5774 16.3302 21.6869C15.7317 21.9657 15.1661 22.3127 14.6442 22.7212C14.3779 22.9258 14.0473 23.0233 13.7152 22.9953C13.383 22.9673 13.0726 22.8156 12.8429 22.5693Z" })
   }
 );
-function UserVideo({ children, mirror = true, ...props }) {
+function UserVideo({
+  children,
+  mirror = true,
+  ...props
+}) {
   const { localVideoTrackRef, isCameraEnabled } = useLocalMedia();
   const hasVideo = localVideoTrackRef !== null && componentsReact.isTrackReference(localVideoTrackRef);
   const state = {
@@ -473,9 +493,10 @@ function UserVideo({ children, mirror = true, ...props }) {
     "div",
     {
       ...props,
-      "data-has-video": hasVideo,
-      "data-camera-enabled": isCameraEnabled,
-      "data-mirror": mirror,
+      "data-avatar-user-video": "",
+      "data-avatar-has-video": hasVideo,
+      "data-avatar-camera-enabled": isCameraEnabled,
+      "data-avatar-mirror": mirror,
       children: hasVideo && localVideoTrackRef && componentsReact.isTrackReference(localVideoTrackRef) && /* @__PURE__ */ jsxRuntime.jsx(componentsReact.VideoTrack, { trackRef: localVideoTrackRef })
     }
   );
@@ -487,6 +508,7 @@ function AvatarCall({
   credentials: directCredentials,
   connectUrl,
   connect,
+  baseUrl,
   avatarImageUrl,
   onEnd,
   onError,
@@ -495,50 +517,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(
@@ -558,7 +554,10 @@ function AvatarCall({
     }
   );
 }
-function ScreenShareVideo({ children, ...props }) {
+function ScreenShareVideo({
+  children,
+  ...props
+}) {
   const { localParticipant } = componentsReact.useLocalParticipant();
   const tracks = componentsReact.useTracks(
     [{ source: livekitClient.Track.Source.ScreenShare, withPlaceholder: false }],
@@ -579,13 +578,17 @@ function ScreenShareVideo({ children, ...props }) {
   if (!isSharing) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, "data-sharing": isSharing, children: screenShareTrackRef && componentsReact.isTrackReference(screenShareTrackRef) && /* @__PURE__ */ jsxRuntime.jsx(componentsReact.VideoTrack, { trackRef: screenShareTrackRef }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, "data-avatar-screen-share": "", "data-avatar-sharing": isSharing, children: screenShareTrackRef && componentsReact.isTrackReference(screenShareTrackRef) && /* @__PURE__ */ jsxRuntime.jsx(componentsReact.VideoTrack, { trackRef: screenShareTrackRef }) });
 }
 
 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 +597,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