@zeroweight/react 0.2.27 → 0.2.28

package/dist/zeroweight-renderer-react.es.js

@@ -1,29 +1,26 @@
-import { useMemo as ve, useRef as A, useState as y, useCallback as w, useEffect as b } from "react";
+import { useMemo as ve, useRef as A, useState as v, useCallback as w, useEffect as y } from "react";
 import { ZeroWeightRenderer as ye, ActionQueue as be, VoiceActivityDetector as Se } from "@zeroweight/renderer";
-import { jsxs as S, jsx as r, Fragment as U } from "react/jsx-runtime";
+import { jsxs as b, jsx as r, Fragment as P } from "react/jsx-runtime";
 import { useVoiceAssistant as xe, useLocalParticipant as we, useIsSpeaking as Ae, useDataChannel as ke, RoomAudioRenderer as Te, LiveKitRoom as Ie } from "@livekit/components-react";
 import "@livekit/components-styles";
-import { Loader2 as W, MicOff as Re, Mic as Ce, Power as Me, Activity as Ee } from "lucide-react";
-const Le = 3e4, De = 120, ze = "wss://prod-project-pazuyq69.livekit.cloud", X = "https://api.zeroweight.ai", Pe = () => {
-  const u = ["Happy", "Swift", "Bright", "Cool", "Smart"], o = ["User", "Guest", "Visitor", "Agent", "Caller"], t = Math.floor(Math.random() * 1e3);
-  return `${u[Math.floor(Math.random() * u.length)]}${o[Math.floor(Math.random() * o.length)]}${t}`;
-};
-function Ue(u) {
+import { Loader2 as V, MicOff as Re, Mic as Ce, Power as Me, Activity as Ee } from "lucide-react";
+const Le = 3e4, De = 120, ze = "wss://prod-project-pazuyq69.livekit.cloud", Y = "https://api.zeroweight.ai";
+function Pe(S) {
   const {
-    avatarId: o,
+    avatarId: a,
     apiKey: t = null,
     api: f,
-    livekitUrl: h = ze,
+    livekitUrl: g = ze,
     sessionDuration: d = De,
     inactivityTimeout: x = Le
-  } = u, M = h, p = ve(() => {
+  } = S, M = g, u = ve(() => {
     if (f) return f;
     const e = t ? { "X-ZW-Api-Key": t } : void 0;
     return {
-      getBundle: async (l) => {
+      getBundle: async (p) => {
         const k = await fetch(
-          `${X}/avatars/bundle/${encodeURIComponent(
-            l
+          `${Y}/avatars/bundle/${encodeURIComponent(
+            p
           )}`,
           { headers: e }
         );
@@ -33,101 +30,101 @@ function Ue(u) {
           );
         return k.json();
       },
-      getLiveKitToken: async (l, k) => {
-        const g = new URLSearchParams({
-          avatar_id: l,
-          name: k
-        }), E = await fetch(
-          `${X}/livekit/token?${g.toString()}`,
+      getLiveKitToken: async (p) => {
+        const k = new URLSearchParams({
+          avatar_id: p,
+          name: "anonymuous"
+        }), l = await fetch(
+          `${Y}/livekit/token?${k.toString()}`,
           { headers: e }
         );
-        if (!E.ok)
+        if (!l.ok)
           throw new Error(
-            `Failed to fetch LiveKit token (${E.status} ${E.statusText})`
+            `Failed to fetch LiveKit token (${l.status} ${l.statusText})`
           );
-        return E.json();
+        return l.json();
       }
     };
-  }, [f, t]), m = A(null), v = A(null), i = A(null), c = A(null), [R, a] = y("idle"), [n, s] = y(null), [L, D] = y(
+  }, [f, t]), h = A(null), m = A(null), i = A(null), c = A(null), [R, o] = v("idle"), [n, s] = v(null), [E, L] = v(
     /* @__PURE__ */ new Set(["listening"])
-  ), [z, $] = y({
+  ), [D, F] = v({
     listening: { kind: "looped" },
     speaking: { kind: "looped" }
-  }), [te, B] = y(!1), [ne, H] = y(null), [j, F] = y(!1), [_, Q] = y(!1), [re, K] = y(d), I = A(null), N = A(() => {
-  }), [ie, oe] = y(!1), [ae, q] = y(0.8), C = A(null), O = R === "ready", J = w(() => {
-    const e = m.current;
+  }), [te, B] = v(!1), [ne, H] = v(null), [_, U] = v(!1), [j, Q] = v(!1), [re, $] = v(d), I = A(null), K = A(() => {
+  }), [ie, oe] = v(!1), [ae, q] = v(0.8), C = A(null), O = R === "ready", J = w(() => {
+    const e = h.current;
     if (!e) return null;
-    let l = e.querySelector("canvas");
-    return l || (l = document.createElement("canvas"), l.style.width = "100%", l.style.height = "100%", l.style.display = "block", e.appendChild(l)), v.current = l, l;
+    let p = e.querySelector("canvas");
+    return p || (p = document.createElement("canvas"), p.style.width = "100%", p.style.height = "100%", p.style.display = "block", e.appendChild(p)), m.current = p, p;
   }, []);
-  b(() => {
+  y(() => {
     let e = !1;
     return (async () => {
       const k = J();
       if (!k) return;
-      const g = new ye();
-      i.current = g;
-      const E = new be((T, P) => {
-        g.play(T, P);
+      const l = new ye();
+      i.current = l;
+      const W = new be((T, z) => {
+        l.play(T, z);
       });
-      c.current = E, g.on("stateChanged", (T) => {
-        e || a(T);
-      }), g.on("dimensions", (T, P) => {
-        e || s({ width: T, height: P });
-      }), g.on("actionLoaded", (T) => {
-        e || D((P) => {
-          const G = new Set(P);
-          return G.add(T), G;
+      c.current = W, l.on("stateChanged", (T) => {
+        e || o(T);
+      }), l.on("dimensions", (T, z) => {
+        e || s({ width: T, height: z });
+      }), l.on("actionLoaded", (T) => {
+        e || L((z) => {
+          const X = new Set(z);
+          return X.add(T), X;
         });
-      }), g.on("allActionsLoaded", () => {
+      }), l.on("allActionsLoaded", () => {
         e || B(!1);
-      }), g.on("ready", () => {
-        e || ($(g.getActionMetadata()), E.setActionMetadata(g.getActionMetadata()));
+      }), l.on("ready", () => {
+        e || (F(l.getActionMetadata()), W.setActionMetadata(l.getActionMetadata()));
       });
       try {
         B(!0);
-        const T = await p.getBundle(o);
-        if (e || (await g.init(k, { payload: T.payload }), e)) return;
-        $(g.getActionMetadata()), E.setActionMetadata(g.getActionMetadata());
+        const T = await u.getBundle(a);
+        if (e || (await l.init(k, { payload: T.payload }), e)) return;
+        F(l.getActionMetadata()), W.setActionMetadata(l.getActionMetadata());
       } catch (T) {
         console.error("[useAvatarSession] Init failed:", T);
       }
     })(), () => {
       e = !0, i.current?.destroy(), i.current = null, c.current = null;
     };
-  }, [o, J, p]);
+  }, [a, J, u]);
   const Z = A(!1);
-  b(() => {
-    O && i.current && L.has("wave_hand") && !Z.current && (i.current.play("wave_hand", "listening"), Z.current = !0);
-  }, [O, L]);
+  y(() => {
+    O && i.current && E.has("wave_hand") && !Z.current && (i.current.play("wave_hand", "listening"), Z.current = !0);
+  }, [O, E]);
   const se = w(async () => {
-    if (!(j || _)) {
-      F(!0);
+    if (!(_ || j)) {
+      U(!0);
       try {
         await navigator.mediaDevices.getUserMedia({ audio: !0 });
-        const e = Pe(), l = await p.getLiveKitToken(o, e);
-        H(l.token);
+        const e = await u.getLiveKitToken(a);
+        H(e.token);
       } catch (e) {
-        console.error("[useAvatarSession] Failed to connect:", e), F(!1);
+        console.error("[useAvatarSession] Failed to connect:", e), U(!1);
       }
     }
-  }, [j, _, o, p]), V = w(() => {
-    I.current && (clearInterval(I.current), I.current = null), K(d), C.current && (clearTimeout(C.current), C.current = null), H(null), Q(!1), F(!1), c.current?.forceListening();
+  }, [_, j, a, u]), N = w(() => {
+    I.current && (clearInterval(I.current), I.current = null), $(d), C.current && (clearTimeout(C.current), C.current = null), H(null), Q(!1), U(!1), c.current?.forceListening();
   }, [d]);
-  b(() => {
-    N.current = V;
-  }, [V]);
+  y(() => {
+    K.current = N;
+  }, [N]);
   const ce = w(() => {
-    Q(!0), F(!1);
+    Q(!0), U(!1);
   }, []), le = w(() => {
-    I.current && clearInterval(I.current), K(d), I.current = setInterval(() => {
-      K((e) => e <= 1 ? (clearInterval(I.current), I.current = null, setTimeout(() => N.current(), 0), 0) : e - 1);
+    I.current && clearInterval(I.current), $(d), I.current = setInterval(() => {
+      $((e) => e <= 1 ? (clearInterval(I.current), I.current = null, setTimeout(() => K.current(), 0), 0) : e - 1);
     }, 1e3);
   }, [d]), de = w((e) => {
-    const l = Math.floor(e / 60).toString().padStart(2, "0"), k = (e % 60).toString().padStart(2, "0");
-    return `${l}:${k}`;
+    const p = Math.floor(e / 60).toString().padStart(2, "0"), k = (e % 60).toString().padStart(2, "0");
+    return `${p}:${k}`;
   }, []);
-  b(() => () => {
+  y(() => () => {
     I.current && clearInterval(I.current);
   }, []);
   const ue = w(
@@ -137,7 +134,7 @@ function Ue(u) {
         return;
       }
       C.current || (C.current = setTimeout(() => {
-        C.current = null, N.current();
+        C.current = null, K.current();
       }, x));
     },
     [x]
@@ -153,25 +150,25 @@ function Ue(u) {
     i.current?.play(e, "listening");
   }, []);
   return {
-    containerRef: m,
+    containerRef: h,
     renderer: i.current,
     actionQueue: c.current,
     rendererState: R,
     avatarDimensions: n,
-    loadedActions: L,
-    actionMetadata: z,
+    loadedActions: E,
+    actionMetadata: D,
     isLoadingActions: te,
     isEngineReady: O,
     token: ne,
-    isConnecting: j,
-    isConnected: _,
+    isConnecting: _,
+    isConnected: j,
     livekitUrl: M,
     timeRemaining: re,
     formatTime: de,
     micMuted: ie,
     volume: ae,
     connect: se,
-    disconnect: V,
+    disconnect: N,
     toggleMic: pe,
     setVolume: fe,
     toggleVolume: ge,
@@ -182,11 +179,11 @@ function Ue(u) {
     setInactivityActive: ue
   };
 }
-const $e = ({
-  session: u,
-  style: o,
+const Fe = ({
+  session: S,
+  style: a,
   loadingContent: t
-}) => /* @__PURE__ */ S(
+}) => /* @__PURE__ */ b(
   "div",
   {
     style: {
@@ -200,7 +197,7 @@ const $e = ({
       justifyContent: "center",
       alignItems: "center",
       overflow: "hidden",
-      ...o
+      ...a
     },
     children: [
       /* @__PURE__ */ r("style", { children: `
@@ -216,14 +213,14 @@ const $e = ({
       /* @__PURE__ */ r(
         "div",
         {
-          ref: u.containerRef,
+          ref: S.containerRef,
           style: {
             position: "relative",
             width: "100%",
             height: "100%",
             transition: "all 0.5s ease-in-out"
           },
-          children: !u.isEngineReady && /* @__PURE__ */ r(
+          children: !S.isEngineReady && /* @__PURE__ */ r(
             "div",
             {
               style: {
@@ -236,7 +233,7 @@ const $e = ({
                 backdropFilter: "blur(4px)",
                 zIndex: 10
               },
-              children: t || /* @__PURE__ */ S(
+              children: t || /* @__PURE__ */ b(
                 "div",
                 {
                   style: {
@@ -247,7 +244,7 @@ const $e = ({
                   },
                   children: [
                     /* @__PURE__ */ r(
-                      W,
+                      V,
                       {
                         style: {
                           width: 40,
@@ -280,7 +277,7 @@ const $e = ({
       )
     ]
   }
-), Y = {
+), G = {
   flexShrink: 0,
   borderRadius: 9999,
   padding: 16,
@@ -305,31 +302,31 @@ const $e = ({
   transition: "all 0.3s",
   border: "none",
   cursor: "pointer"
-}, Fe = ({
-  session: u,
-  style: o
+}, Ue = ({
+  session: S,
+  style: a
 }) => {
   const {
     micMuted: t,
     toggleMic: f,
-    isConnected: h,
+    isConnected: g,
     isConnecting: d,
     isEngineReady: x,
     loadedActions: M,
-    connect: p,
-    disconnect: m
-  } = u, [v, i] = y(!1), [c, R] = y(!1), a = x && M.has("listening") && M.has("speaking"), n = t ? {
-    ...Y,
+    connect: u,
+    disconnect: h
+  } = S, [m, i] = v(!1), [c, R] = v(!1), o = x && M.has("listening") && M.has("speaking"), n = t ? {
+    ...G,
     background: "rgba(239,68,68,0.1)",
     color: "#f87171",
     boxShadow: "inset 0 0 0 1px rgba(239,68,68,0.3)",
-    ...v ? { background: "rgba(239,68,68,0.2)" } : {}
+    ...m ? { background: "rgba(239,68,68,0.2)" } : {}
   } : {
-    ...Y,
-    background: v ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.4)",
+    ...G,
+    background: m ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.4)",
     color: "#fff",
     boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1)"
-  }, s = h ? {
+  }, s = g ? {
     ...ee,
     background: c ? "rgba(239,68,68,0.22)" : "rgba(239,68,68,0.14)",
     boxShadow: "inset 0 0 0 1px rgba(239,68,68,0.5), 0 0 20px rgba(239,68,68,0.2)"
@@ -339,7 +336,7 @@ const $e = ({
     boxShadow: "0 0 30px rgba(236,72,153,0.3)",
     opacity: c ? 0.9 : 1
   };
-  return (d || !a) && (s.opacity = 0.5, s.cursor = "not-allowed"), /* @__PURE__ */ S(
+  return (d || !o) && (s.opacity = 0.5, s.cursor = "not-allowed"), /* @__PURE__ */ b(
     "div",
     {
       style: {
@@ -350,7 +347,7 @@ const $e = ({
         alignItems: "center",
         gap: 16,
         paddingBottom: 16,
-        ...o
+        ...a
       },
       children: [
         /* @__PURE__ */ r("style", { children: `
@@ -359,7 +356,7 @@ const $e = ({
           to { transform: rotate(360deg); }
         }
       ` }),
-        /* @__PURE__ */ S(
+        /* @__PURE__ */ b(
           "div",
           {
             style: {
@@ -388,21 +385,21 @@ const $e = ({
                 "button",
                 {
                   type: "button",
-                  onClick: h ? m : p,
+                  onClick: g ? h : u,
                   onMouseEnter: () => R(!0),
                   onMouseLeave: () => R(!1),
-                  disabled: !h && (d || !a),
+                  disabled: !g && (d || !o),
                   style: s,
-                  children: d ? /* @__PURE__ */ S(U, { children: [
-                    /* @__PURE__ */ r(W, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
+                  children: d ? /* @__PURE__ */ b(P, { children: [
+                    /* @__PURE__ */ r(V, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
                     /* @__PURE__ */ r("span", { children: "Connecting..." })
-                  ] }) : !h && !a ? /* @__PURE__ */ S(U, { children: [
-                    /* @__PURE__ */ r(W, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
+                  ] }) : !g && !o ? /* @__PURE__ */ b(P, { children: [
+                    /* @__PURE__ */ r(V, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
                     /* @__PURE__ */ r("span", { children: "Loading Avatar..." })
-                  ] }) : h ? /* @__PURE__ */ S(U, { children: [
+                  ] }) : g ? /* @__PURE__ */ b(P, { children: [
                     /* @__PURE__ */ r(Me, { size: 20 }),
                     /* @__PURE__ */ r("span", { children: "End Session" })
-                  ] }) : /* @__PURE__ */ S(U, { children: [
+                  ] }) : /* @__PURE__ */ b(P, { children: [
                     /* @__PURE__ */ r(Ee, { size: 20 }),
                     /* @__PURE__ */ r("span", { children: "Start Session" })
                   ] })
@@ -414,10 +411,10 @@ const $e = ({
       ]
     }
   );
-}, je = ({
-  session: u
+}, _e = ({
+  session: S
 }) => {
-  const { isConnected: o, timeRemaining: t, formatTime: f } = u, h = o && t <= 30, d = o && t > 30 && t <= 60, x = {
+  const { isConnected: a, timeRemaining: t, formatTime: f } = S, g = a && t <= 30, d = a && t > 30 && t <= 60, x = {
     display: "flex",
     alignItems: "center",
     gap: 8,
@@ -427,7 +424,7 @@ const $e = ({
     border: "1px solid",
     pointerEvents: "auto",
     transition: "all 0.3s",
-    ...h ? {
+    ...g ? {
       background: "rgba(239,68,68,0.3)",
       borderColor: "rgba(239,68,68,0.4)",
       boxShadow: "0 0 15px rgba(239,68,68,0.3)",
@@ -442,14 +439,14 @@ const $e = ({
       boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
     }
   };
-  return /* @__PURE__ */ S(U, { children: [
+  return /* @__PURE__ */ b(P, { children: [
     /* @__PURE__ */ r("style", { children: `
         @keyframes zwr-pulse {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.5; }
         }
       ` }),
-    /* @__PURE__ */ S("div", { style: x, children: [
+    /* @__PURE__ */ b("div", { style: x, children: [
       /* @__PURE__ */ r(
         "div",
         {
@@ -457,7 +454,7 @@ const $e = ({
             height: 8,
             width: 8,
             borderRadius: "50%",
-            ...o ? {
+            ...a ? {
               background: "#22c55e",
               boxShadow: "0 0 10px rgba(34,197,94,0.5)"
             } : {
@@ -476,35 +473,35 @@ const $e = ({
             color: "rgba(255,255,255,0.7)",
             textTransform: "uppercase"
           },
-          children: o ? `Online ${f(t)}` : "Offline"
+          children: a ? `Online ${f(t)}` : "Offline"
         }
       )
     ] })
   ] });
-}, _e = ({
-  session: u
+}, je = ({
+  session: S
 }) => {
-  const { renderer: o, actionQueue: t, micMuted: f, volume: h, setInactivityActive: d, loadedActions: x } = u, M = A(!1), { state: p, audioTrack: m } = xe(), v = we(), i = Ae(v.localParticipant), c = A(null), R = A(x);
-  b(() => {
+  const { renderer: a, actionQueue: t, micMuted: f, volume: g, setInactivityActive: d, loadedActions: x } = S, M = A(!1), { state: u, audioTrack: h } = xe(), m = we(), i = Ae(m.localParticipant), c = A(null), R = A(x);
+  y(() => {
     R.current = x;
-  }, [x]), b(() => {
-    const n = v.localParticipant;
-    if (!o || !n) return;
+  }, [x]), y(() => {
+    const n = m.localParticipant;
+    if (!a || !n) return;
     const s = new TextEncoder();
-    return o.onOneshotComplete((D) => {
-      const z = s.encode(
+    return a.onOneshotComplete((L) => {
+      const D = s.encode(
         JSON.stringify({
           type: "ACTION_FINISHED",
-          action: D
+          action: L
         })
       );
-      n.publishData(z, {
+      n.publishData(D, {
         reliable: !0
-      }).catch(($) => {
-        console.error("[LiveKitAvatarProvider] Failed to publish action completion:", $);
+      }).catch((F) => {
+        console.error("[LiveKitAvatarProvider] Failed to publish action completion:", F);
       });
     });
-  }, [o, v.localParticipant]), b(() => {
+  }, [a, m.localParticipant]), y(() => {
     if (!t) return;
     const n = new Se({
       threshold: 8e-3,
@@ -520,76 +517,76 @@ const $e = ({
     }), () => {
       n.stop(), c.current = null;
     };
-  }, [t]), b(() => {
+  }, [t]), y(() => {
     const n = c.current;
     if (n)
-      if (m?.publication?.track) {
-        const s = m.publication.track.mediaStreamTrack;
+      if (h?.publication?.track) {
+        const s = h.publication.track.mediaStreamTrack;
         s && n.start(s);
       } else
         n.stop();
-  }, [m?.publication?.track]);
-  const a = A(null);
-  return b(() => {
+  }, [h?.publication?.track]);
+  const o = A(null);
+  return y(() => {
     if (!t) return;
-    const n = p;
-    n === "speaking" ? (a.current && (clearTimeout(a.current), a.current = null), t.setTurnActive(!0), t.setSpeechState("speaking")) : n === "listening" || n === "idle" ? (a.current && (clearTimeout(a.current), a.current = null), c.current?.endTurn(), t.setTurnActive(!1)) : n === "thinking" && (a.current || (a.current = setTimeout(() => {
-      a.current = null, c.current?.endTurn(), t.setTurnActive(!1);
+    const n = u;
+    n === "speaking" ? (o.current && (clearTimeout(o.current), o.current = null), t.setTurnActive(!0), t.setSpeechState("speaking")) : n === "listening" || n === "idle" ? (o.current && (clearTimeout(o.current), o.current = null), c.current?.endTurn(), t.setTurnActive(!1)) : n === "thinking" && (o.current || (o.current = setTimeout(() => {
+      o.current = null, c.current?.endTurn(), t.setTurnActive(!1);
     }, 500)));
-  }, [p, t]), b(() => () => {
-    a.current && clearTimeout(a.current);
+  }, [u, t]), y(() => () => {
+    o.current && clearTimeout(o.current);
   }, []), ke((n) => {
     try {
-      const L = new TextDecoder().decode(n.payload), D = JSON.parse(L);
-      if (D.type === "AVATAR_UPDATE") {
-        const z = D.action;
-        if (!R.current.has(z))
+      const E = new TextDecoder().decode(n.payload), L = JSON.parse(E);
+      if (L.type === "AVATAR_UPDATE") {
+        const D = L.action;
+        if (!R.current.has(D))
           return;
-        t?.dispatch(z);
+        t?.dispatch(D);
       }
     } catch (s) {
       console.error("[LiveKitAvatarProvider] Failed to parse data message:", s);
     }
-  }), b(() => {
-    d(!(p === "speaking") && !i);
-  }, [i, d, p]), b(() => {
+  }), y(() => {
+    d(!(u === "speaking") && !i);
+  }, [i, d, u]), y(() => {
     if (!t) return;
-    const n = !!m;
-    (!n || p === "disconnected") && (c.current?.endTurn(), t.forceListening()), M.current = n;
-  }, [m, p, t]), b(() => {
-    const n = v.localParticipant;
+    const n = !!h;
+    (!n || u === "disconnected") && (c.current?.endTurn(), t.forceListening()), M.current = n;
+  }, [h, u, t]), y(() => {
+    const n = m.localParticipant;
     n && n.setMicrophoneEnabled(!f).catch((s) => {
       console.error("[LiveKitAvatarProvider] Failed to set mic state:", s);
     });
-  }, [f, v.localParticipant]), /* @__PURE__ */ r("div", { style: { position: "absolute", bottom: 80, left: 8, right: 8, display: "flex", flexDirection: "column", gap: 8 }, children: /* @__PURE__ */ r(Te, { volume: h }) });
-}, He = ({
-  avatarId: u,
-  apiKey: o,
+  }, [f, m.localParticipant]), /* @__PURE__ */ r("div", { style: { position: "absolute", bottom: 80, left: 8, right: 8, display: "flex", flexDirection: "column", gap: 8 }, children: /* @__PURE__ */ r(Te, { volume: g }) });
+}, Be = ({
+  avatarId: S,
+  apiKey: a,
   api: t,
   livekitUrl: f,
-  sessionDuration: h,
+  sessionDuration: g,
   inactivityTimeout: d,
   style: x,
   className: M,
-  loadingContent: p,
-  customControls: m,
-  customStatusBadge: v
+  loadingContent: u,
+  customControls: h,
+  customStatusBadge: m
 }) => {
-  const i = Ue({
-    avatarId: u,
-    apiKey: o,
+  const i = Pe({
+    avatarId: S,
+    apiKey: a,
     api: t,
     livekitUrl: f,
-    sessionDuration: h,
+    sessionDuration: g,
     inactivityTimeout: d
   }), {
     token: c,
     isConnected: R,
-    avatarDimensions: a,
+    avatarDimensions: o,
     disconnect: n,
     startSessionTimer: s
   } = i;
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ b(
     "section",
     {
       className: M,
@@ -606,12 +603,12 @@ const $e = ({
         height: "80vh",
         width: "auto",
         maxWidth: "100%",
-        aspectRatio: a ? `${a.width} / ${a.height}` : "3 / 4",
+        aspectRatio: o ? `${o.width} / ${o.height}` : "3 / 4",
         ...x
       },
       children: [
-        /* @__PURE__ */ r($e, { session: i, loadingContent: p }),
-        /* @__PURE__ */ S(
+        /* @__PURE__ */ r(Fe, { session: i, loadingContent: u }),
+        /* @__PURE__ */ b(
           "div",
           {
             style: {
@@ -625,7 +622,7 @@ const $e = ({
               padding: 16
             },
             children: [
-              /* @__PURE__ */ S(
+              /* @__PURE__ */ b(
                 "div",
                 {
                   style: {
@@ -635,12 +632,12 @@ const $e = ({
                     justifyContent: "space-between"
                   },
                   children: [
-                    v ? v(i) : /* @__PURE__ */ r(je, { session: i }),
+                    m ? m(i) : /* @__PURE__ */ r(_e, { session: i }),
                     /* @__PURE__ */ r("div", {})
                   ]
                 }
               ),
-              m ? m(i) : /* @__PURE__ */ r(Fe, { session: i })
+              h ? h(i) : /* @__PURE__ */ r(Ue, { session: i })
             ]
           }
         ),
@@ -656,7 +653,7 @@ const $e = ({
               i.markConnected(), s();
             },
             onDisconnected: n,
-            children: /* @__PURE__ */ r(_e, { session: i })
+            children: /* @__PURE__ */ r(je, { session: i })
           }
         ) })
       ]
@@ -664,11 +661,11 @@ const $e = ({
   );
 };
 export {
-  $e as AvatarCanvas,
-  Fe as AvatarControls,
-  je as AvatarStatusBadge,
-  _e as LiveKitAvatarProvider,
-  He as LiveKitAvatarSession,
-  Ue as useAvatarSession
+  Fe as AvatarCanvas,
+  Ue as AvatarControls,
+  _e as AvatarStatusBadge,
+  je as LiveKitAvatarProvider,
+  Be as LiveKitAvatarSession,
+  Pe as useAvatarSession
 };
 //# sourceMappingURL=zeroweight-renderer-react.es.js.map