@livelayer/react 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -1,26 +1,26 @@
 "use client";
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { Component as ze, useState as E, useRef as N, useEffect as C, useCallback as y, useMemo as ae } from "react";
-import { LiveKitSession as Re } from "@livelayer/sdk";
-import { createLocalAudioTrack as Ie } from "livekit-client";
-class Ae extends ze {
+import { jsxs as w, jsx as e, Fragment as Qe } from "react/jsx-runtime";
+import { Component as Ze, useState as x, useRef as S, useEffect as L, useCallback as f, useMemo as Se } from "react";
+import { LiveKitSession as et } from "@livelayer/sdk";
+import { createLocalAudioTrack as tt, Track as Oe, createLocalVideoTrack as nt } from "livekit-client";
+class rt extends Ze {
   constructor() {
     super(...arguments), this.state = { hasError: !1, error: null }, this.reset = () => {
       this.setState({ hasError: !1, error: null });
     };
   }
-  static getDerivedStateFromError(t) {
-    return { hasError: !0, error: t };
+  static getDerivedStateFromError(n) {
+    return { hasError: !0, error: n };
   }
-  componentDidCatch(t, r) {
-    var i, l;
-    (l = (i = this.props).onError) == null || l.call(i, t, r);
+  componentDidCatch(n, i) {
+    var o, r;
+    (r = (o = this.props).onError) == null || r.call(o, n, i);
   }
   render() {
-    var t;
-    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ f("div", { className: "ll-error-boundary", role: "alert", children: [
+    var n;
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ w("div", { className: "ll-error-boundary", role: "alert", children: [
       /* @__PURE__ */ e("p", { className: "ll-error-boundary__title", children: "Widget crashed" }),
-      /* @__PURE__ */ e("p", { className: "ll-error-boundary__message", children: ((t = this.state.error) == null ? void 0 : t.message) || "Something went wrong." }),
+      /* @__PURE__ */ e("p", { className: "ll-error-boundary__message", children: ((n = this.state.error) == null ? void 0 : n.message) || "Something went wrong." }),
       /* @__PURE__ */ e(
         "button",
         {
@@ -33,267 +33,421 @@ class Ae extends ze {
     ] }) : this.props.children;
   }
 }
-function Te(n) {
-  const [t, r] = E("idle"), [i, l] = E("idle"), [a, m] = E([]), [u, p] = E(null), [g, d] = E(null), [c, o] = E(null), [_, b] = E(!1), [M, S] = E(null), I = N(null), A = N(n.onDataMessage);
-  A.current = n.onDataMessage, C(() => {
-    const w = {
-      onConnectionStateChange: (v) => {
-        r(v), v === "connected" && S(null);
+function it(t) {
+  const [n, i] = x("idle"), [o, r] = x("idle"), [a, c] = x([]), [m, d] = x(null), [g, u] = x(null), [s, l] = x(null), [b, _] = x(!1), [N, D] = x(null), E = S(null), R = S(t.onDataMessage);
+  R.current = t.onDataMessage, L(() => {
+    const k = {
+      onConnectionStateChange: (y) => {
+        i(y), y === "connected" && D(null);
       },
-      onAgentStateChange: l,
-      onTranscript: (v) => m([...v]),
-      onAgentConfig: p,
-      onAudioTrack: (v) => o(v),
-      onVideoTrack: (v) => d(v),
-      onVideoTrackRemoved: () => d(null),
-      onError: (v) => S(v),
-      onDataMessage: (v) => {
-        var B;
-        (B = A.current) == null || B.call(A, v);
+      onAgentStateChange: r,
+      onTranscript: (y) => c([...y]),
+      onAgentConfig: d,
+      onAudioTrack: (y) => l(y),
+      onVideoTrack: (y) => u(y),
+      onVideoTrackRemoved: () => u(null),
+      onError: (y) => D(y),
+      onDataMessage: (y) => {
+        var A;
+        (A = R.current) == null || A.call(R, y);
       },
-      onResumabilityChange: b
-    }, L = new Re(
+      onResumabilityChange: _
+    }, C = new et(
       {
-        agentId: n.agentId,
-        baseUrl: n.baseUrl,
-        apiKey: n.apiKey,
-        sessionEndpoint: n.sessionEndpoint,
-        sessionBody: n.sessionBody
+        agentId: t.agentId,
+        baseUrl: t.baseUrl,
+        apiKey: t.apiKey,
+        sessionEndpoint: t.sessionEndpoint,
+        sessionBody: t.sessionBody
       },
-      w
+      k
     );
-    return I.current = L, r("idle"), l("idle"), m([]), p(null), d(null), o(null), b(!1), S(null), () => {
-      var v;
-      (v = L.destroy) == null || v.call(L), I.current = null;
+    return E.current = C, i("idle"), r("idle"), c([]), d(null), u(null), l(null), _(!1), D(null), () => {
+      var y;
+      (y = C.destroy) == null || y.call(C), E.current = null;
     };
   }, [
-    n.agentId,
-    n.baseUrl,
-    n.apiKey,
-    n.sessionEndpoint,
-    JSON.stringify(n.sessionBody ?? {})
+    t.agentId,
+    t.baseUrl,
+    t.apiKey,
+    t.sessionEndpoint,
+    JSON.stringify(t.sessionBody ?? {})
   ]);
-  const P = y(async () => {
-    const w = I.current;
-    if (w)
+  const T = f(async () => {
+    const k = E.current;
+    if (k)
       try {
-        await w.connect();
-      } catch (L) {
-        throw S(L instanceof Error ? L.message : String(L)), L;
+        await k.connect();
+      } catch (C) {
+        throw D(C instanceof Error ? C.message : String(C)), C;
       }
-  }, []), $ = y(() => {
-    const w = I.current;
-    w && w.disconnect();
-  }, []), z = y(() => {
-    var w;
-    return ((w = I.current) == null ? void 0 : w.getRoom()) ?? null;
+  }, []), z = f(() => {
+    const k = E.current;
+    k && k.disconnect();
+  }, []), I = f(() => {
+    var k;
+    return ((k = E.current) == null ? void 0 : k.getRoom()) ?? null;
   }, []);
   return {
-    connectionState: t,
-    agentState: i,
+    connectionState: n,
+    agentState: o,
     transcript: a,
-    agentConfig: u,
+    agentConfig: m,
     videoElement: g,
-    audioElement: c,
-    canResume: _,
-    error: M,
-    connect: P,
-    disconnect: $,
-    getRoom: z,
-    session: I.current
+    audioElement: s,
+    canResume: b,
+    error: N,
+    connect: T,
+    disconnect: z,
+    getRoom: I,
+    session: E.current
   };
 }
-function Be() {
-  const n = N(null), t = N(null), r = N(null), i = N(null), l = N(/* @__PURE__ */ new Set()), a = N(null), m = y(() => {
-    const c = t.current;
-    if (!c) {
-      i.current = null;
+function ot() {
+  const t = S(null), n = S(null), i = S(null), o = S(null), r = S(/* @__PURE__ */ new Set()), a = S(null), c = f(() => {
+    const s = n.current;
+    if (!s) {
+      o.current = null;
       return;
     }
-    (!a.current || a.current.length !== c.frequencyBinCount) && (a.current = new Uint8Array(
-      new ArrayBuffer(c.frequencyBinCount)
+    (!a.current || a.current.length !== s.frequencyBinCount) && (a.current = new Uint8Array(
+      new ArrayBuffer(s.frequencyBinCount)
     ));
-    const o = a.current;
-    c.getByteFrequencyData(o);
-    let _ = 0;
-    for (let M = 0; M < o.length; M++) _ += o[M];
-    const b = _ / o.length / 255;
-    for (const M of l.current)
+    const l = a.current;
+    s.getByteFrequencyData(l);
+    let b = 0;
+    for (let N = 0; N < l.length; N++) b += l[N];
+    const _ = b / l.length / 255;
+    for (const N of r.current)
       try {
-        M(b);
-      } catch (S) {
-        console.error("[useAudioLevel] subscriber threw:", S);
+        N(_);
+      } catch (D) {
+        console.error("[useAudioLevel] subscriber threw:", D);
       }
-    i.current = requestAnimationFrame(m);
-  }, []), u = y(() => {
-    if (n.current || typeof window > "u" || typeof AudioContext > "u") return;
-    const c = new AudioContext(), o = c.createAnalyser();
-    o.fftSize = 64, o.connect(c.destination), n.current = c, t.current = o;
-  }, []), p = y(
-    (c) => {
-      if (u(), !(!n.current || !t.current)) {
-        if (r.current) {
+    o.current = requestAnimationFrame(c);
+  }, []), m = f(() => {
+    if (t.current || typeof window > "u" || typeof AudioContext > "u") return;
+    const s = new AudioContext(), l = s.createAnalyser();
+    l.fftSize = 64, l.connect(s.destination), t.current = s, n.current = l;
+  }, []), d = f(
+    (s) => {
+      if (m(), !(!t.current || !n.current)) {
+        if (i.current) {
           try {
-            r.current.disconnect();
+            i.current.disconnect();
           } catch {
           }
-          r.current = null;
+          i.current = null;
         }
         try {
-          const o = n.current.createMediaElementSource(c);
-          o.connect(t.current), r.current = o;
-        } catch (o) {
-          console.warn("[useAudioLevel] createMediaElementSource failed:", o);
+          const l = t.current.createMediaElementSource(s);
+          l.connect(n.current), i.current = l;
+        } catch (l) {
+          console.warn("[useAudioLevel] createMediaElementSource failed:", l);
           return;
         }
-        i.current === null && (i.current = requestAnimationFrame(m));
+        o.current === null && (o.current = requestAnimationFrame(c));
       }
     },
-    [u, m]
-  ), g = y(() => {
-    if (i.current !== null && (cancelAnimationFrame(i.current), i.current = null), r.current) {
+    [m, c]
+  ), g = f(() => {
+    if (o.current !== null && (cancelAnimationFrame(o.current), o.current = null), i.current) {
       try {
-        r.current.disconnect();
+        i.current.disconnect();
       } catch {
       }
-      r.current = null;
+      i.current = null;
     }
-  }, []), d = y((c) => (l.current.add(c), () => {
-    l.current.delete(c);
+  }, []), u = f((s) => (r.current.add(s), () => {
+    r.current.delete(s);
   }), []);
-  return C(() => () => {
-    if (g(), t.current) {
+  return L(() => () => {
+    if (g(), n.current) {
       try {
-        t.current.disconnect();
+        n.current.disconnect();
       } catch {
       }
-      t.current = null;
+      n.current = null;
     }
-    if (n.current) {
+    if (t.current) {
       try {
-        n.current.close();
+        t.current.close();
       } catch {
       }
-      n.current = null;
+      t.current = null;
     }
-    l.current.clear(), a.current = null;
-  }, [g]), { attach: p, detach: g, subscribe: d };
+    r.current.clear(), a.current = null;
+  }, [g]), { attach: d, detach: g, subscribe: u };
 }
-function De() {
-  const [n, t] = E(!1), [r, i] = E(null), l = N(null), a = N(null), m = y(async (d) => {
-    if (l.current && a.current) {
+function lt() {
+  const [t, n] = x(!1), [i, o] = x(null), r = S(null), a = S(null), c = f(async (u) => {
+    if (r.current && a.current) {
       try {
-        await a.current.localParticipant.unpublishTrack(l.current);
+        await a.current.localParticipant.unpublishTrack(r.current);
       } catch {
       }
-      l.current.stop(), l.current = null;
+      r.current.stop(), r.current = null;
     }
-    a.current = d, i(null);
+    a.current = u, o(null);
     try {
-      const c = await Ie({
+      const s = await tt({
         echoCancellation: !0,
         noiseSuppression: !0
       });
-      await d.localParticipant.publishTrack(c), l.current = c, t(c.isMuted);
-    } catch (c) {
-      const o = c instanceof Error && c.name === "NotAllowedError" ? "Enable your microphone to talk with the agent." : "Microphone unavailable. Check browser permissions and try again.";
-      throw i(o), c;
+      await u.localParticipant.publishTrack(s), r.current = s, n(s.isMuted);
+    } catch (s) {
+      const l = s instanceof Error && s.name === "NotAllowedError" ? "Enable your microphone to talk with the agent." : "Microphone unavailable. Check browser permissions and try again.";
+      throw o(l), s;
     }
-  }, []), u = y(() => {
-    const d = l.current;
-    d && (d.isMuted ? (d.unmute(), t(!1)) : (d.mute(), t(!0)));
-  }, []), p = y(() => {
-    const d = l.current, c = a.current;
-    if (d && c) {
+  }, []), m = f(() => {
+    const u = r.current;
+    u && (u.isMuted ? (u.unmute(), n(!1)) : (u.mute(), n(!0)));
+  }, []), d = f(() => {
+    const u = r.current, s = a.current;
+    if (u && s) {
       try {
-        c.localParticipant.unpublishTrack(d);
+        s.localParticipant.unpublishTrack(u);
       } catch {
       }
-      d.stop();
+      u.stop();
     }
-    l.current = null, a.current = null, t(!1);
-  }, []), g = y(() => i(null), []);
+    r.current = null, a.current = null, n(!1);
+  }, []), g = f(() => o(null), []);
   return {
-    isMuted: n,
-    micError: r,
-    toggleMute: u,
-    setupMic: m,
-    teardownMic: p,
+    isMuted: t,
+    micError: i,
+    toggleMute: m,
+    setupMic: c,
+    teardownMic: d,
     clearError: g
   };
 }
-function je(n) {
+const at = { resolution: { width: 640, height: 480, frameRate: 24 } };
+function st() {
+  const [t, n] = x(!1), [i, o] = x(null), [r, a] = x(null), [c, m] = x(""), d = S(null), g = S(null), u = f((E) => {
+    d.current = E;
+  }, []), s = f(() => {
+    const E = d.current, R = g.current;
+    if (R && E) {
+      const T = E.localParticipant.getTrackPublication(Oe.Source.Camera);
+      if (T != null && T.track) {
+        try {
+          E.localParticipant.unpublishTrack(T.track);
+        } catch {
+        }
+        T.track.stop();
+      } else
+        R.stop();
+    }
+    g.current = null, a(null), n(!1);
+  }, []), l = f(async (E) => {
+    const R = d.current;
+    if (R) {
+      o(null);
+      try {
+        const T = { ...at };
+        E && (T.deviceId = E);
+        const z = await nt(T);
+        await R.localParticipant.publishTrack(z), g.current = z;
+        const I = z.attach();
+        a(I), n(!0), E && m(E);
+        try {
+          R.localParticipant.publishData(
+            new TextEncoder().encode(JSON.stringify({ type: "user_camera_on" })),
+            { reliable: !0 }
+          );
+        } catch {
+        }
+      } catch (T) {
+        const z = T instanceof Error && T.name === "NotAllowedError" ? "Enable your camera in the browser to share video." : "Camera unavailable. Check permissions and try again.";
+        o(z);
+      }
+    }
+  }, []), b = f(async () => {
+    t ? s() : await l(c || void 0);
+  }, [t, c, s, l]), _ = f(async (E) => {
+    s(), await l(E);
+  }, [s, l]), N = f(() => {
+    s(), d.current = null, o(null), m("");
+  }, [s]), D = f(() => o(null), []);
+  return L(() => () => {
+    g.current && g.current.stop();
+  }, []), {
+    isEnabled: t,
+    error: i,
+    previewEl: r,
+    activeDeviceId: c,
+    toggle: b,
+    switchDevice: _,
+    attachRoom: u,
+    teardown: N,
+    clearError: D
+  };
+}
+function ct() {
+  const [t, n] = x(!1), [i, o] = x(null), [r, a] = x(null), c = S(null), m = f((l) => {
+    c.current = l;
+  }, []), d = f(() => a(null), []), g = f(async () => {
+    const l = c.current;
+    if (l) {
+      if (t) {
+        try {
+          await l.localParticipant.setScreenShareEnabled(!1);
+        } catch {
+        }
+        d(), n(!1);
+        return;
+      }
+      o(null);
+      try {
+        await l.localParticipant.setScreenShareEnabled(!0);
+        let b = 0;
+        const _ = () => {
+          const N = l.localParticipant.getTrackPublication(Oe.Source.ScreenShare);
+          if (N != null && N.track) {
+            const D = N.track.attach();
+            a(D), n(!0);
+            try {
+              l.localParticipant.publishData(
+                new TextEncoder().encode(JSON.stringify({ type: "user_screen_share_on" })),
+                { reliable: !0 }
+              );
+            } catch {
+            }
+            return;
+          }
+          b++ < 10 ? setTimeout(_, 100) : n(!0);
+        };
+        _();
+      } catch (b) {
+        const _ = b instanceof Error ? b.name : "";
+        _ !== "NotAllowedError" && _ !== "AbortError" && o("Screen share unavailable. Try again."), n(!1);
+      }
+    }
+  }, [t, d]), u = f(() => {
+    const l = c.current;
+    if (l && t)
+      try {
+        l.localParticipant.setScreenShareEnabled(!1);
+      } catch {
+      }
+    d(), n(!1), o(null), c.current = null;
+  }, [t, d]), s = f(() => o(null), []);
+  return { isEnabled: t, error: i, previewEl: r, toggle: g, attachRoom: m, teardown: u, clearError: s };
+}
+function dt() {
+  const [t, n] = x([]), [i, o] = x([]), r = f(async () => {
+    if (!(typeof navigator > "u" || !navigator.mediaDevices))
+      try {
+        const a = await navigator.mediaDevices.enumerateDevices();
+        n(a.filter((c) => c.kind === "audioinput")), o(a.filter((c) => c.kind === "videoinput"));
+      } catch {
+      }
+  }, []);
+  return L(() => {
+    if (r(), typeof navigator > "u" || !navigator.mediaDevices) return;
+    const a = () => void r();
+    return navigator.mediaDevices.addEventListener("devicechange", a), () => navigator.mediaDevices.removeEventListener("devicechange", a);
+  }, [r]), { mics: t, cameras: i, refresh: r };
+}
+function ut(t, n, i = !1) {
+  const [o, r] = x(null), [a, c] = x(null), [m, d] = x(!i && !!t), g = S("");
+  return L(() => {
+    if (i || !t) {
+      d(!1);
+      return;
+    }
+    const u = `${n || ""}::${t}`;
+    if (g.current === u) return;
+    g.current = u;
+    const s = new AbortController(), l = n || "https://app.livelayer.studio";
+    return d(!0), c(null), fetch(`${l}/api/widget/agent/${encodeURIComponent(t)}`, {
+      signal: s.signal
+    }).then(async (b) => {
+      if (!b.ok) {
+        const _ = await b.json().catch(() => ({}));
+        throw new Error(_.error || `HTTP ${b.status}`);
+      }
+      return b.json();
+    }).then((b) => {
+      r(b), d(!1);
+    }).catch((b) => {
+      s.signal.aborted || (c(b instanceof Error ? b.message : "Agent lookup failed"), d(!1));
+    }), () => s.abort();
+  }, [t, n, i]), { info: o, error: a, loading: m };
+}
+function ht(t) {
   if (typeof window > "u") return null;
   try {
-    return window.localStorage.getItem(n);
+    return window.localStorage.getItem(t);
   } catch {
     return null;
   }
 }
-function Ue(n, t) {
+function pt(t, n) {
   if (!(typeof window > "u"))
     try {
-      window.localStorage.setItem(n, t);
+      window.localStorage.setItem(t, n);
     } catch {
     }
 }
-function Pe({
-  value: n,
-  defaultValue: t = "expanded",
-  onChange: r
+function mt({
+  value: t,
+  defaultValue: n = "expanded",
+  onChange: i
 } = {}) {
-  const i = n !== void 0, [l, a] = E(t), m = i ? n : l, u = y(
-    (p) => {
-      p !== m && (i || a(p), r == null || r(p));
+  const o = t !== void 0, [r, a] = x(n), c = o ? t : r, m = f(
+    (d) => {
+      d !== c && (o || a(d), i == null || i(d));
     },
-    [m, i, r]
+    [c, o, i]
   );
-  return [m, u];
+  return [c, m];
 }
-const $e = ["hidden", "minimized", "expanded"];
-function Ve(n) {
-  return n && $e.includes(n) ? n : null;
+const ft = ["hidden", "minimized", "expanded"];
+function gt(t) {
+  return t && ft.includes(t) ? t : null;
 }
-function We({
-  value: n,
-  defaultValue: t = "expanded",
-  onChange: r,
-  persistKey: i = "ll-widget",
-  disablePersistence: l = !1
+function vt({
+  value: t,
+  defaultValue: n = "expanded",
+  onChange: i,
+  persistKey: o = "ll-widget",
+  disablePersistence: r = !1
 } = {}) {
-  const a = `${i}:display-mode`, m = N(!1), [u, p] = Pe({
-    value: n,
-    defaultValue: t,
+  const a = `${o}:display-mode`, c = S(!1), [m, d] = mt({
+    value: t,
+    defaultValue: n,
     onChange: (g) => {
-      n === void 0 && !l && Ue(a, g), r == null || r(g);
+      t === void 0 && !r && pt(a, g), i == null || i(g);
     }
   });
-  return C(() => {
-    if (m.current || (m.current = !0, l || n !== void 0)) return;
-    const g = Ve(je(a));
-    g && g !== u && p(g);
-  }, []), [u, p];
+  return L(() => {
+    if (c.current || (c.current = !0, r || t !== void 0)) return;
+    const g = gt(ht(a));
+    g && g !== m && d(g);
+  }, []), [m, d];
 }
-const Ke = 640;
-function qe(n = Ke) {
-  const [t, r] = E(!1);
-  return C(() => {
-    if (n === !1) {
-      r(!1);
+const yt = 640;
+function _t(t = yt) {
+  const [n, i] = x(!1);
+  return L(() => {
+    if (t === !1) {
+      i(!1);
       return;
     }
     if (typeof window > "u" || typeof window.matchMedia > "u")
       return;
-    const i = `(max-width: ${n - 1}px)`, l = window.matchMedia(i), a = () => r(l.matches);
-    return a(), typeof l.addEventListener == "function" ? (l.addEventListener("change", a), () => l.removeEventListener("change", a)) : (l.addListener(a), () => {
-      l.removeListener(a);
+    const o = `(max-width: ${t - 1}px)`, r = window.matchMedia(o), a = () => i(r.matches);
+    return a(), typeof r.addEventListener == "function" ? (r.addEventListener("change", a), () => r.removeEventListener("change", a)) : (r.addListener(a), () => {
+      r.removeListener(a);
     });
-  }, [n]), t;
+  }, [t]), n;
 }
-const oe = ({ muted: n = !1, className: t }) => n ? /* @__PURE__ */ f(
+const Pe = ({ muted: t = !1, className: n }) => t ? /* @__PURE__ */ w(
   "svg",
   {
-    className: t,
+    className: n,
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor",
@@ -321,7 +475,7 @@ const oe = ({ muted: n = !1, className: t }) => n ? /* @__PURE__ */ f(
 ) : /* @__PURE__ */ e(
   "svg",
   {
-    className: t,
+    className: n,
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor",
@@ -336,10 +490,10 @@ const oe = ({ muted: n = !1, className: t }) => n ? /* @__PURE__ */ f(
       }
     )
   }
-), _e = ({ className: n }) => /* @__PURE__ */ e(
+), $e = ({ className: t }) => /* @__PURE__ */ e(
   "svg",
   {
-    className: n,
+    className: t,
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor",
@@ -354,21 +508,10 @@ const oe = ({ muted: n = !1, className: t }) => n ? /* @__PURE__ */ f(
       }
     )
   }
-), ge = ({ className: n }) => /* @__PURE__ */ e(
-  "svg",
-  {
-    className: n,
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
-  }
-), ve = ({ className: n }) => /* @__PURE__ */ e(
+), bt = ({ className: t }) => /* @__PURE__ */ e(
   "svg",
   {
-    className: n,
+    className: t,
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor",
@@ -376,45 +519,12 @@ const oe = ({ muted: n = !1, className: t }) => n ? /* @__PURE__ */ f(
     "aria-hidden": "true",
     children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
   }
-), Fe = {
+), wt = {
   left: 180,
   right: 0,
   up: -90,
   down: 90
-}, Oe = ({ direction: n = "right", className: t }) => /* @__PURE__ */ e(
-  "svg",
-  {
-    className: t,
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    style: { transform: `rotate(${Fe[n]}deg)` },
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
-  }
-), He = ({ muted: n = !1, className: t }) => /* @__PURE__ */ f(
-  "svg",
-  {
-    className: t,
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ e(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          d: "M15 9v6m3-9v12M9 5l-3 4H3v6h3l3 4V5z"
-        }
-      ),
-      n && /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 20L20 4" })
-    ]
-  }
-), Ye = ({ className: n }) => /* @__PURE__ */ e(
+}, kt = ({ direction: t = "right", className: n }) => /* @__PURE__ */ e(
   "svg",
   {
     className: n,
@@ -422,140 +532,230 @@ const oe = ({ muted: n = !1, className: t }) => n ? /* @__PURE__ */ f(
     viewBox: "0 0 24 24",
     stroke: "currentColor",
     strokeWidth: 2,
+    style: { transform: `rotate(${wt[t]}deg)` },
     "aria-hidden": "true",
-    children: /* @__PURE__ */ e(
-      "path",
-      {
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
-      }
-    )
+    children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 6l6 6-6 6" })
   }
 );
-function Ge(n) {
-  return n === "top-left" || n === "bottom-left" ? "left" : "right";
+function xt(t) {
+  return t === "top-left" || t === "bottom-left" ? "left" : "right";
 }
-const Je = ({
-  position: n,
-  isMobile: t,
-  isSpeaking: r,
-  onExpand: i,
-  label: l = "Open widget"
+const We = "ll-hidden-tab-center-y", Ct = 5, Be = 16;
+function Nt() {
+  if (typeof window > "u") return null;
+  try {
+    const t = window.localStorage.getItem(We);
+    if (!t) return null;
+    const n = Number.parseFloat(t);
+    return Number.isFinite(n) ? n : null;
+  } catch {
+    return null;
+  }
+}
+function Ue(t) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(We, String(t));
+    } catch {
+    }
+}
+const Et = ({
+  position: t,
+  isMobile: n,
+  isSpeaking: i,
+  onExpand: o,
+  label: r = "Open widget"
 }) => {
-  const a = Ge(n), m = a === "right" ? "left" : "right", u = [
+  const a = xt(t), c = a === "right" ? "left" : "right", m = n ? 80 : 72, [d, g] = x(null), [u, s] = x(!1), l = S(null), b = S(!1), _ = f(
+    (k) => {
+      if (typeof window > "u") return k;
+      const C = m / 2, y = Be + C, A = window.innerHeight - Be - C;
+      return A < y ? Math.max(y, k) : Math.max(y, Math.min(A, k));
+    },
+    [m]
+  );
+  L(() => {
+    const k = Nt();
+    g(_(k ?? window.innerHeight / 2));
+    const C = () => {
+      g((y) => y === null ? null : _(y));
+    };
+    return window.addEventListener("resize", C), () => window.removeEventListener("resize", C);
+  }, [_]);
+  const N = f(
+    (k) => {
+      if (!(k.pointerType === "mouse" && k.button !== 0) && d !== null) {
+        try {
+          k.currentTarget.setPointerCapture(k.pointerId);
+        } catch {
+        }
+        l.current = {
+          startClientY: k.clientY,
+          startCenterY: d,
+          moved: !1
+        };
+      }
+    },
+    [d]
+  ), D = f(
+    (k) => {
+      const C = l.current;
+      if (!C) return;
+      const y = k.clientY - C.startClientY;
+      !C.moved && Math.abs(y) > Ct && (C.moved = !0, s(!0)), C.moved && g(_(C.startCenterY + y));
+    },
+    [_]
+  ), E = f(
+    (k) => {
+      const C = l.current;
+      if (C) {
+        try {
+          k.currentTarget.releasePointerCapture(k.pointerId);
+        } catch {
+        }
+        l.current = null, C.moved && (s(!1), b.current = !0, g((y) => (y !== null && Ue(y), y)));
+      }
+    },
+    []
+  ), R = f(() => {
+    if (b.current) {
+      b.current = !1;
+      return;
+    }
+    o();
+  }, [o]), T = f(
+    (k) => {
+      if (k.key === "ArrowUp" || k.key === "ArrowDown") {
+        k.preventDefault();
+        const C = k.key === "ArrowUp" ? -8 : 8;
+        g((y) => {
+          if (y === null) return y;
+          const A = _(y + C);
+          return Ue(A), A;
+        });
+      }
+    },
+    [_]
+  ), z = [
     "ll-hidden",
     `ll-hidden--${a}`,
-    t ? "ll-hidden--mobile" : "ll-hidden--desktop",
-    r ? "ll-hidden--speaking" : null
-  ].filter(Boolean).join(" ");
+    n ? "ll-hidden--mobile" : "ll-hidden--desktop",
+    i ? "ll-hidden--speaking" : null,
+    u ? "is-dragging" : null
+  ].filter(Boolean).join(" "), I = d === null ? void 0 : { top: `${d - m / 2}px`, transform: "none" };
   return /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      className: u,
-      onClick: i,
-      "aria-label": l,
-      "data-position": n,
-      children: /* @__PURE__ */ e(Oe, { direction: m, className: "ll-hidden__chevron" })
+      className: z,
+      onPointerDown: N,
+      onPointerMove: D,
+      onPointerUp: E,
+      onPointerCancel: E,
+      onClick: R,
+      onKeyDown: T,
+      "aria-label": r,
+      "data-position": t,
+      style: I,
+      children: /* @__PURE__ */ e(kt, { direction: c, className: "ll-hidden__chevron" })
     }
   );
-}, Qe = ({
-  audioLevel: n,
-  bars: t = 20,
-  maxHeight: r = 20,
-  minHeight: i = 4,
-  className: l,
+}, St = ({
+  audioLevel: t,
+  bars: n = 20,
+  maxHeight: i = 20,
+  minHeight: o = 4,
+  className: r,
   barClassName: a
 }) => {
-  const m = N(null), u = N([]), p = ae(() => {
-    const d = (Math.sqrt(5) - 1) / 2;
-    return Array.from({ length: t }, (c, o) => 0.5 + o * d % 1 * 0.5);
-  }, [t]);
-  C(() => n.subscribe((c) => {
-    for (let o = 0; o < t; o++) {
-      const _ = u.current[o];
-      if (!_) continue;
-      const b = Math.max(i, c * r * p[o]);
-      _.style.height = `${b}px`;
+  const c = S(null), m = S([]), d = Se(() => {
+    const u = (Math.sqrt(5) - 1) / 2;
+    return Array.from({ length: n }, (s, l) => 0.5 + l * u % 1 * 0.5);
+  }, [n]);
+  L(() => t.subscribe((s) => {
+    for (let l = 0; l < n; l++) {
+      const b = m.current[l];
+      if (!b) continue;
+      const _ = Math.max(o, s * i * d[l]);
+      b.style.height = `${_}px`;
     }
-  }), [n, t, r, i, p]);
-  const g = ["ll-waveform", l].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("div", { ref: m, className: g, "aria-hidden": "true", children: Array.from({ length: t }, (d, c) => /* @__PURE__ */ e(
+  }), [t, n, i, o, d]);
+  const g = ["ll-waveform", r].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("div", { ref: c, className: g, "aria-hidden": "true", children: Array.from({ length: n }, (u, s) => /* @__PURE__ */ e(
     "div",
     {
-      ref: (o) => {
-        u.current[c] = o;
+      ref: (l) => {
+        m.current[s] = l;
       },
       className: ["ll-waveform__bar", a].filter(Boolean).join(" "),
-      style: { height: `${i}px` }
+      style: { height: `${o}px` }
     },
-    c
+    s
   )) });
-}, Xe = ({
-  position: n,
-  isMobile: t,
-  agentName: r,
-  avatarImageUrl: i,
-  agentState: l,
+}, Lt = ({
+  position: t,
+  isMobile: n,
+  agentName: i,
+  avatarImageUrl: o,
+  agentState: r,
   isMuted: a,
-  audioLevel: m,
-  onExpand: u,
-  onToggleMute: p,
+  audioLevel: c,
+  onExpand: m,
+  onToggleMute: d,
   onClose: g
-}) => t ? /* @__PURE__ */ e(
+}) => n ? /* @__PURE__ */ e(
   "div",
   {
     className: "ll-minimized ll-minimized--mobile",
     role: "region",
-    "aria-label": `${r} widget`,
-    children: /* @__PURE__ */ f(
+    "aria-label": `${i} widget`,
+    children: /* @__PURE__ */ w(
       "button",
       {
         type: "button",
         className: "ll-minimized__surface",
-        onClick: u,
-        "aria-label": `Expand ${r} widget`,
+        onClick: m,
+        "aria-label": `Expand ${i} widget`,
         children: [
-          i ? (
+          o ? (
             // eslint-disable-next-line @next/next/no-img-element
             /* @__PURE__ */ e(
               "img",
               {
-                src: i,
-                alt: r,
+                src: o,
+                alt: i,
                 className: "ll-minimized__avatar"
               }
             )
           ) : /* @__PURE__ */ e("div", { className: "ll-minimized__avatar ll-minimized__avatar--placeholder" }),
           /* @__PURE__ */ e(
-            Qe,
+            St,
             {
-              audioLevel: m,
+              audioLevel: c,
               bars: 16,
               maxHeight: 18,
               className: "ll-minimized__waveform"
             }
           ),
-          /* @__PURE__ */ e("span", { className: "ll-minimized__name", children: r }),
-          /* @__PURE__ */ f("div", { className: "ll-minimized__controls", children: [
+          /* @__PURE__ */ e("span", { className: "ll-minimized__name", children: i }),
+          /* @__PURE__ */ w("div", { className: "ll-minimized__controls", children: [
             /* @__PURE__ */ e(
               "span",
               {
                 className: "ll-minimized__btn",
                 role: "button",
                 tabIndex: 0,
-                onClick: (d) => {
-                  d.stopPropagation(), p();
+                onClick: (u) => {
+                  u.stopPropagation(), d();
                 },
-                onKeyDown: (d) => {
-                  (d.key === "Enter" || d.key === " ") && (d.stopPropagation(), d.preventDefault(), p());
+                onKeyDown: (u) => {
+                  (u.key === "Enter" || u.key === " ") && (u.stopPropagation(), u.preventDefault(), d());
                 },
                 "aria-label": a ? "Unmute microphone" : "Mute microphone",
-                children: /* @__PURE__ */ e(oe, { muted: a, className: "ll-minimized__icon" })
+                children: /* @__PURE__ */ e(Pe, { muted: a, className: "ll-minimized__icon" })
               }
             ),
-            /* @__PURE__ */ e(_e, { className: "ll-minimized__icon ll-minimized__icon--expand" })
+            /* @__PURE__ */ e($e, { className: "ll-minimized__icon ll-minimized__icon--expand" })
           ] })
         ]
       }
@@ -565,34 +765,34 @@ const Je = ({
   "div",
   {
     className: "ll-minimized ll-minimized--desktop",
-    "data-position": n,
+    "data-position": t,
     role: "region",
-    "aria-label": `${r} widget`,
-    children: /* @__PURE__ */ f("div", { className: "ll-minimized__surface", children: [
-      i ? (
+    "aria-label": `${i} widget`,
+    children: /* @__PURE__ */ w("div", { className: "ll-minimized__surface", children: [
+      o ? (
         // eslint-disable-next-line @next/next/no-img-element
         /* @__PURE__ */ e(
           "img",
           {
-            src: i,
-            alt: r,
+            src: o,
+            alt: i,
             className: "ll-minimized__avatar"
           }
         )
       ) : /* @__PURE__ */ e("div", { className: "ll-minimized__avatar ll-minimized__avatar--placeholder" }),
-      /* @__PURE__ */ f("div", { className: "ll-minimized__meta", children: [
-        /* @__PURE__ */ e("span", { className: "ll-minimized__name", children: r }),
-        /* @__PURE__ */ e("span", { className: "ll-minimized__state", children: l === "speaking" ? "Speaking" : l === "thinking" ? "Thinking" : "Listening" })
+      /* @__PURE__ */ w("div", { className: "ll-minimized__meta", children: [
+        /* @__PURE__ */ e("span", { className: "ll-minimized__name", children: i }),
+        /* @__PURE__ */ e("span", { className: "ll-minimized__state", children: r === "speaking" ? "Speaking" : r === "thinking" ? "Thinking" : "Listening" })
       ] }),
-      /* @__PURE__ */ f("div", { className: "ll-minimized__controls", children: [
+      /* @__PURE__ */ w("div", { className: "ll-minimized__controls", children: [
         /* @__PURE__ */ e(
           "button",
           {
             type: "button",
             className: "ll-minimized__btn",
-            onClick: p,
+            onClick: d,
             "aria-label": a ? "Unmute microphone" : "Mute microphone",
-            children: /* @__PURE__ */ e(oe, { muted: a, className: "ll-minimized__icon" })
+            children: /* @__PURE__ */ e(Pe, { muted: a, className: "ll-minimized__icon" })
           }
         ),
         /* @__PURE__ */ e(
@@ -600,9 +800,9 @@ const Je = ({
           {
             type: "button",
             className: "ll-minimized__btn",
-            onClick: u,
-            "aria-label": `Expand ${r} widget`,
-            children: /* @__PURE__ */ e(_e, { className: "ll-minimized__icon" })
+            onClick: m,
+            "aria-label": `Expand ${i} widget`,
+            children: /* @__PURE__ */ e($e, { className: "ll-minimized__icon" })
           }
         ),
         /* @__PURE__ */ e(
@@ -612,24 +812,24 @@ const Je = ({
             className: "ll-minimized__btn ll-minimized__btn--close",
             onClick: g,
             "aria-label": "Close widget",
-            children: /* @__PURE__ */ e(ve, { className: "ll-minimized__icon" })
+            children: /* @__PURE__ */ e(bt, { className: "ll-minimized__icon" })
           }
         )
       ] })
     ] })
   }
-), Ze = ({
-  src: n,
-  alt: t,
-  preCannedPlaying: r = !1,
-  className: i,
-  style: l
+), Mt = ({
+  src: t,
+  alt: n,
+  preCannedPlaying: i = !1,
+  className: o,
+  style: r
 }) => {
-  const [a, m] = E(!1), u = N(n);
-  if (C(() => {
-    u.current !== n && (u.current = n, m(!1));
-  }, [n]), !n) return null;
-  const p = {
+  const [a, c] = x(!1), m = S(t);
+  if (L(() => {
+    m.current !== t && (m.current = t, c(!1));
+  }, [t]), !t) return null;
+  const d = {
     position: "absolute",
     inset: 0,
     width: "100%",
@@ -637,302 +837,573 @@ const Je = ({
     objectFit: "cover",
     objectPosition: "top",
     transition: "opacity 500ms ease, transform 500ms ease",
-    transform: r ? "scale(1.02)" : "scale(1)",
+    transform: i ? "scale(1.02)" : "scale(1)",
     opacity: a ? 1 : 0,
-    ...l
+    ...r
   };
   return (
     // eslint-disable-next-line @next/next/no-img-element
     /* @__PURE__ */ e(
       "img",
       {
-        src: n,
-        alt: t,
-        className: i,
-        style: p,
+        src: t,
+        alt: n,
+        className: o,
+        style: d,
         loading: "eager",
         fetchpriority: "high",
-        onLoad: () => m(!0)
+        onLoad: () => c(!0)
       }
     )
   );
-}, en = {
-  idle: "Idle",
-  listening: "Listening",
-  thinking: "Thinking",
-  speaking: "Speaking"
-}, nn = ({ state: n, className: t }) => {
-  const r = ["ll-pill", `ll-pill--${n}`, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ f("div", { className: r, "data-agent-state": n, children: [
-    /* @__PURE__ */ e("span", { className: "ll-pill__dot" }),
-    /* @__PURE__ */ e("span", { className: "ll-pill__label", children: en[n] })
-  ] });
-}, tn = ({
-  position: n,
-  isMobile: t,
-  agentName: r,
-  avatarImageUrl: i,
-  idleLoopUrl: l,
+}, It = ({
+  position: t,
+  isMobile: n,
+  agentName: i,
+  avatarImageUrl: o,
+  idleLoopUrl: r,
   greeting: a,
-  branding: m,
-  teamMembers: u,
-  currentTeamMemberId: p,
+  branding: c,
+  teamMembers: m,
+  currentTeamMemberId: d,
   isSwitchingTeamMember: g,
-  teamSwitcherOpen: d,
-  onToggleTeamSwitcher: c,
-  onSelectTeamMember: o,
-  connectionState: _,
-  agentState: b,
-  transcript: M,
-  isMuted: S,
-  needsUserGesture: I,
-  canResume: A,
-  micError: P,
-  error: $,
-  avatarVideoContainerRef: z,
-  onConnect: w,
-  onDisconnect: L,
-  onRetry: v,
-  onResumeAudio: B,
-  onToggleMute: V,
-  onMinimize: W,
-  onClose: K,
-  onClearMicError: x
+  teamSwitcherOpen: u,
+  onToggleTeamSwitcher: s,
+  onSelectTeamMember: l,
+  languageMenuOpen: b,
+  onToggleLanguageMenu: _,
+  connectionState: N,
+  agentState: D,
+  transcript: E,
+  canResume: R,
+  needsUserGesture: T,
+  error: z,
+  isMuted: I,
+  micError: k,
+  micDevices: C,
+  isCameraEnabled: y,
+  cameraPreviewEl: A,
+  cameraDevices: X,
+  activeCameraId: ne,
+  isScreenShareEnabled: U,
+  screenPreviewEl: j,
+  isSpeakerMuted: F,
+  allowCamera: re,
+  allowScreenShare: P,
+  allowTyping: be,
+  avatarVideoContainerRef: we,
+  onConnect: ge,
+  onDisconnect: de,
+  onRetry: ke,
+  onResumeAudio: xe,
+  onToggleMute: Q,
+  onToggleCamera: B,
+  onSwitchCameraDevice: ve,
+  onToggleScreenShare: Z,
+  onToggleSpeaker: G,
+  onSendMessage: ee,
+  onMinimize: ue,
+  onClose: V,
+  onClearMicError: K
 }) => {
-  const G = M.length > 0 ? M[M.length - 1] : null, J = ((u == null ? void 0 : u.length) ?? 0) > 1, X = m.productName || "Live Layer", q = [
+  var ye;
+  const O = E.length > 0 ? E[E.length - 1] : null, Y = ((m == null ? void 0 : m.length) ?? 0) > 1, ie = N === "connecting" || N === "connected", H = N === "connected", he = N === "idle" || N === "disconnected" || N === "error", pe = S(null), oe = S(null);
+  L(() => {
+    const h = pe.current;
+    h && (h.innerHTML = "", A && (A.style.width = "100%", A.style.height = "100%", A.style.objectFit = "cover", A.style.transform = "scaleX(-1)", h.appendChild(A)));
+  }, [A]), L(() => {
+    const h = oe.current;
+    h && (h.innerHTML = "", j && (j.style.width = "100%", j.style.height = "100%", j.style.objectFit = "contain", h.appendChild(j)));
+  }, [j]);
+  const [q, le] = x(!1), [ae, J] = x(!1);
+  L(() => {
+    if (!q && !ae && !b && !u) return;
+    const h = () => {
+      le(!1), J(!1), b && _(), u && s();
+    };
+    return document.addEventListener("click", h), () => document.removeEventListener("click", h);
+  }, [
+    q,
+    ae,
+    b,
+    u,
+    _,
+    s
+  ]);
+  const [se, ce] = x(""), $ = f(
+    (h) => {
+      h.preventDefault();
+      const W = se.trim();
+      W && (ee(W), ce(""));
+    },
+    [se, ee]
+  ), p = c.productName || "Live Layer", me = H && (O != null && O.text) ? O.text : a || "", Ce = [
     "ll-expanded",
-    t ? "ll-expanded--mobile" : "ll-expanded--desktop"
+    n ? "ll-expanded--mobile" : "ll-expanded--desktop"
   ].join(" ");
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ w(
     "div",
     {
-      className: q,
-      "data-position": n,
+      className: Ce,
+      "data-position": t,
+      "data-state": H ? "connected" : ie ? "connecting" : "idle",
       role: "dialog",
-      "aria-label": `${r} widget`,
+      "aria-label": `${i} widget`,
       children: [
-        /* @__PURE__ */ f("div", { className: "ll-expanded__header", children: [
-          /* @__PURE__ */ f("div", { className: "ll-expanded__header-left", children: [
-            m.logoUrl && // eslint-disable-next-line @next/next/no-img-element
-            /* @__PURE__ */ e(
-              "img",
-              {
-                src: m.logoUrl,
-                alt: X,
-                className: "ll-expanded__logo"
-              }
-            ),
-            J ? /* @__PURE__ */ f(
-              "button",
-              {
-                type: "button",
-                className: "ll-expanded__team-trigger",
-                onClick: c,
-                "aria-expanded": d,
-                "aria-label": "Change team member",
-                children: [
-                  /* @__PURE__ */ e("span", { children: r }),
-                  /* @__PURE__ */ e(
-                    ge,
+        /* @__PURE__ */ w("div", { className: "ll-expanded__bg", children: [
+          o ? /* @__PURE__ */ e(
+            Mt,
+            {
+              src: o,
+              alt: i,
+              className: "ll-expanded__bg-img"
+            }
+          ) : /* @__PURE__ */ e("div", { className: "ll-expanded__bg-fallback", children: /* @__PURE__ */ e("span", { className: "ll-expanded__bg-initial", children: ((ye = i == null ? void 0 : i.charAt(0)) == null ? void 0 : ye.toUpperCase()) || "A" }) }),
+          r && !H && /* @__PURE__ */ e(
+            "video",
+            {
+              className: "ll-expanded__bg-idle",
+              src: r,
+              autoPlay: !0,
+              loop: !0,
+              muted: !0,
+              playsInline: !0
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("div", { ref: we, className: "ll-expanded__video" }),
+        N === "connecting" && /* @__PURE__ */ w("div", { className: "ll-expanded__overlay ll-expanded__overlay--connecting", children: [
+          /* @__PURE__ */ e("div", { className: "ll-expanded__spinner" }),
+          /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-text", children: g ? "Switching..." : "Connecting..." })
+        ] }),
+        T && H && /* @__PURE__ */ w(
+          "button",
+          {
+            type: "button",
+            className: "ll-expanded__overlay ll-expanded__overlay--gesture",
+            onClick: xe,
+            children: [
+              /* @__PURE__ */ e("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": !0, children: /* @__PURE__ */ e("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.54.12a5 5 0 0 1 0 5.76l-1.41-1.41a3 3 0 0 0 0-2.94L16.54 9.12z" }) }),
+              /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-text", children: "Tap to enable audio" })
+            ]
+          }
+        ),
+        ie ? /* @__PURE__ */ w("div", { className: "ll-expanded__topbar", children: [
+          /* @__PURE__ */ w("div", { className: "ll-expanded__topbar-left", children: [
+            /* @__PURE__ */ w("div", { className: "ll-expanded__pill-wrap", children: [
+              /* @__PURE__ */ w(
+                "button",
+                {
+                  type: "button",
+                  className: "ll-hpill",
+                  onClick: (h) => {
+                    Y && (h.stopPropagation(), s());
+                  },
+                  "aria-haspopup": Y ? "listbox" : void 0,
+                  "aria-expanded": Y ? u : void 0,
+                  children: [
+                    /* @__PURE__ */ e("span", { className: "ll-hpill__label", children: i }),
+                    Y && /* @__PURE__ */ e(_e, {})
+                  ]
+                }
+              ),
+              Y && u && /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "ll-hmenu",
+                  onClick: (h) => h.stopPropagation(),
+                  role: "listbox",
+                  children: m == null ? void 0 : m.map((h) => /* @__PURE__ */ w(
+                    "button",
                     {
-                      className: `ll-expanded__team-chevron ${d ? "ll-expanded__team-chevron--open" : ""}`
+                      type: "button",
+                      className: `ll-hmenu__item ${h.id === d ? "is-active" : ""}`,
+                      onClick: () => l(h.id),
+                      role: "option",
+                      "aria-selected": h.id === d,
+                      children: [
+                        h.avatarImageUrl && /* @__PURE__ */ e(
+                          "img",
+                          {
+                            src: h.avatarImageUrl,
+                            alt: "",
+                            className: "ll-hmenu__avatar"
+                          }
+                        ),
+                        /* @__PURE__ */ e("span", { className: "ll-hmenu__name", children: h.name }),
+                        h.role && /* @__PURE__ */ e("span", { className: "ll-hmenu__role", children: h.role })
+                      ]
+                    },
+                    h.id
+                  ))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ w("div", { className: "ll-expanded__pill-wrap", children: [
+              /* @__PURE__ */ w(
+                "button",
+                {
+                  type: "button",
+                  className: "ll-hpill",
+                  onClick: (h) => {
+                    h.stopPropagation(), _();
+                  },
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": b,
+                  children: [
+                    /* @__PURE__ */ e("span", { className: "ll-hpill__label", children: "English" }),
+                    /* @__PURE__ */ e(_e, {})
+                  ]
+                }
+              ),
+              b && /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "ll-hmenu",
+                  onClick: (h) => h.stopPropagation(),
+                  role: "listbox",
+                  children: /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ll-hmenu__item is-active",
+                      role: "option",
+                      "aria-selected": !0,
+                      children: /* @__PURE__ */ e("span", { className: "ll-hmenu__name", children: "English" })
                     }
                   )
-                ]
-              }
-            ) : /* @__PURE__ */ e("span", { className: "ll-expanded__name", children: r })
-          ] }),
-          /* @__PURE__ */ f("div", { className: "ll-expanded__header-right", children: [
-            /* @__PURE__ */ e(
-              "button",
-              {
-                type: "button",
-                className: "ll-expanded__icon-btn",
-                onClick: V,
-                "aria-label": S ? "Unmute microphone" : "Mute microphone",
-                title: S ? "Unmute" : "Mute",
-                children: /* @__PURE__ */ e(He, { muted: S, className: "ll-expanded__icon" })
-              }
-            ),
-            t ? null : /* @__PURE__ */ e(
-              "button",
-              {
-                type: "button",
-                className: "ll-expanded__icon-btn",
-                onClick: W,
-                "aria-label": "Minimize widget",
-                title: "Minimize",
-                children: /* @__PURE__ */ e(ge, { className: "ll-expanded__icon" })
-              }
-            ),
+                }
+              )
+            ] }),
             /* @__PURE__ */ e(
-              "button",
+              "span",
               {
-                type: "button",
-                className: "ll-expanded__icon-btn",
-                onClick: K,
-                "aria-label": "Close widget",
-                title: "Close",
-                children: /* @__PURE__ */ e(ve, { className: "ll-expanded__icon" })
+                className: `ll-expanded__state ll-expanded__state--${D}`,
+                children: D
               }
             )
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              className: "ll-hbtn",
+              onClick: V,
+              "aria-label": "Close widget",
+              title: "Close",
+              children: /* @__PURE__ */ e(je, {})
+            }
+          )
+        ] }) : (
+          // Idle-state header with Live Layer product name + minimize/close
+          /* @__PURE__ */ w("div", { className: "ll-expanded__header ll-expanded__header--idle", children: [
+            /* @__PURE__ */ e("span", { className: "ll-expanded__brand", children: p }),
+            /* @__PURE__ */ w("div", { className: "ll-expanded__header-actions", children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "ll-hbtn ll-hbtn--ghost",
+                  onClick: ue,
+                  "aria-label": "Minimize widget",
+                  children: /* @__PURE__ */ e(At, {})
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "ll-hbtn ll-hbtn--ghost",
+                  onClick: V,
+                  "aria-label": "Close widget",
+                  children: /* @__PURE__ */ e(je, {})
+                }
+              )
+            ] })
           ] })
-        ] }),
-        J && d && /* @__PURE__ */ e("div", { className: "ll-expanded__team-menu", role: "menu", children: u.map((T) => /* @__PURE__ */ f(
+        ),
+        he && /* @__PURE__ */ w(
           "button",
           {
             type: "button",
-            role: "menuitem",
-            className: `ll-expanded__team-item ${T.id === p ? "ll-expanded__team-item--active" : ""}`,
-            onClick: () => o(T.id),
+            className: "ll-expanded__play",
+            onClick: ge,
+            "aria-label": R ? "Resume session" : "Start video call",
+            children: [
+              /* @__PURE__ */ e("div", { className: "ll-expanded__play-circle", children: /* @__PURE__ */ e("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": !0, children: /* @__PURE__ */ e("polygon", { points: "6 3 20 12 6 21 6 3" }) }) }),
+              /* @__PURE__ */ e("span", { className: "ll-expanded__play-label", children: R ? "Restart session" : "Start video call" }),
+              R && /* @__PURE__ */ e("span", { className: "ll-expanded__play-sublabel", children: "Pick up where you left off" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ w(
+          "div",
+          {
+            className: `ll-expanded__pip ${ie && (y || U) ? "is-visible" : ""}`,
             children: [
-              T.avatarImageUrl && // eslint-disable-next-line @next/next/no-img-element
               /* @__PURE__ */ e(
-                "img",
+                "div",
                 {
-                  src: T.avatarImageUrl,
-                  alt: "",
-                  className: "ll-expanded__team-item-avatar"
+                  ref: oe,
+                  className: U ? "ll-expanded__pip-host" : "ll-expanded__pip-host is-hidden"
                 }
               ),
-              /* @__PURE__ */ f("div", { className: "ll-expanded__team-item-meta", children: [
-                /* @__PURE__ */ e("span", { className: "ll-expanded__team-item-name", children: T.name }),
-                T.role && /* @__PURE__ */ e("span", { className: "ll-expanded__team-item-role", children: T.role })
-              ] })
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  ref: pe,
+                  className: !U && y ? "ll-expanded__pip-host" : "ll-expanded__pip-host is-hidden"
+                }
+              )
             ]
-          },
-          T.id
-        )) }),
-        /* @__PURE__ */ f("div", { className: "ll-expanded__avatar-surface", children: [
-          i && /* @__PURE__ */ e(
-            Ze,
-            {
-              src: i,
-              alt: r,
-              className: "ll-expanded__avatar-image"
-            }
-          ),
-          l && /* @__PURE__ */ e(
-            "video",
-            {
-              className: "ll-expanded__avatar-idle-loop",
-              src: l,
-              loop: !0,
-              muted: !0,
-              playsInline: !0,
-              autoPlay: !0
-            }
-          ),
-          /* @__PURE__ */ e("div", { ref: z, className: "ll-expanded__avatar-live" }),
-          _ === "connecting" && /* @__PURE__ */ f("div", { className: "ll-expanded__overlay ll-expanded__overlay--connecting", children: [
-            /* @__PURE__ */ e("div", { className: "ll-expanded__spinner" }),
-            /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-text", children: "Connecting..." })
-          ] }),
-          I && /* @__PURE__ */ f(
-            "button",
-            {
-              type: "button",
-              className: "ll-expanded__overlay ll-expanded__overlay--gesture",
-              onClick: B,
-              children: [
-                /* @__PURE__ */ e("div", { className: "ll-expanded__play-circle", children: /* @__PURE__ */ e("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("path", { d: "M8 5v14l11-7L8 5z" }) }) }),
-                /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-text", children: "Tap to enable audio" }),
-                /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-subtext", children: "Your agent is ready" })
-              ]
-            }
-          ),
-          !I && (_ === "idle" || _ === "disconnected" || _ === "error") && /* @__PURE__ */ f(
-            "button",
-            {
-              type: "button",
-              className: "ll-expanded__overlay ll-expanded__overlay--play",
-              onClick: w,
-              "aria-label": A ? "Restart paused session" : _ === "disconnected" ? "Reconnect to agent" : "Start video call",
-              children: [
-                /* @__PURE__ */ e("div", { className: "ll-expanded__play-circle", children: /* @__PURE__ */ e("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("polygon", { points: "6 3 20 12 6 21 6 3" }) }) }),
-                /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-text", children: A ? "Restart session" : _ === "disconnected" ? "Click to reconnect" : a || "Start video call" }),
-                A && /* @__PURE__ */ e("p", { className: "ll-expanded__overlay-subtext", children: "Pick up where you left off" })
-              ]
-            }
-          ),
-          g && /* @__PURE__ */ f("div", { className: "ll-expanded__overlay ll-expanded__overlay--switching", children: [
-            /* @__PURE__ */ e("div", { className: "ll-expanded__spinner" }),
-            /* @__PURE__ */ f("p", { className: "ll-expanded__overlay-text", children: [
-              "Connecting to ",
-              r,
-              "..."
-            ] })
-          ] }),
-          _ === "connected" && /* @__PURE__ */ e("div", { className: "ll-expanded__state-pill-wrap", children: /* @__PURE__ */ e(nn, { state: b }) }),
-          P && _ === "connected" && /* @__PURE__ */ f("div", { className: "ll-expanded__mic-error", role: "alert", children: [
-            /* @__PURE__ */ e("p", { children: P }),
+          }
+        ),
+        ie ? /* @__PURE__ */ w("div", { className: "ll-expanded__bottom", children: [
+          me && /* @__PURE__ */ e("div", { className: "ll-expanded__transcript", children: /* @__PURE__ */ e("p", { className: "ll-expanded__transcript-text", children: me }) }),
+          /* @__PURE__ */ w("div", { className: "ll-toolbar", onClick: (h) => h.stopPropagation(), children: [
+            P && /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: `ll-tool ${U ? "is-on" : ""}`,
+                onClick: Z,
+                "aria-label": U ? "Stop sharing screen" : "Share screen",
+                title: U ? "Stop sharing" : "Share screen",
+                children: /* @__PURE__ */ e(Dt, {})
+              }
+            ),
+            re && /* @__PURE__ */ w("div", { className: "ll-tool-split", children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: `ll-tool ll-tool--left ${y ? "is-on" : ""}`,
+                  onClick: B,
+                  "aria-label": y ? "Turn off camera" : "Turn on camera",
+                  title: y ? "Stop camera" : "Start camera",
+                  children: /* @__PURE__ */ e(Rt, {})
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: `ll-tool ll-tool--right ${y ? "is-on" : ""}`,
+                  onClick: (h) => {
+                    h.stopPropagation(), J((W) => !W), le(!1);
+                  },
+                  "aria-label": "Camera devices",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": ae,
+                  children: /* @__PURE__ */ e(_e, {})
+                }
+              ),
+              ae && X.length > 0 && /* @__PURE__ */ e(
+                Ve,
+                {
+                  label: "Camera",
+                  devices: X,
+                  activeId: ne,
+                  onPick: (h) => {
+                    J(!1), ve(h);
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ w("div", { className: "ll-tool-split", children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: `ll-tool ll-tool--left ${I ? "is-muted" : ""}`,
+                  onClick: Q,
+                  "aria-label": I ? "Unmute microphone" : "Mute microphone",
+                  title: I ? "Unmute" : "Mute",
+                  children: /* @__PURE__ */ e(Tt, { muted: I })
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: `ll-tool ll-tool--right ${I ? "is-muted" : ""}`,
+                  onClick: (h) => {
+                    h.stopPropagation(), le((W) => !W), J(!1);
+                  },
+                  "aria-label": "Microphone devices",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": q,
+                  children: /* @__PURE__ */ e(_e, {})
+                }
+              ),
+              q && C.length > 0 && /* @__PURE__ */ e(
+                Ve,
+                {
+                  label: "Microphone",
+                  devices: C,
+                  activeId: "",
+                  onPick: () => le(!1)
+                }
+              )
+            ] }),
             /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                onClick: () => {
-                  x(), v();
-                },
-                children: "Retry"
+                className: `ll-tool ${F ? "is-muted" : ""}`,
+                onClick: G,
+                "aria-label": F ? "Unmute speaker" : "Mute speaker",
+                title: F ? "Unmute speaker" : "Mute speaker",
+                children: /* @__PURE__ */ e(zt, { muted: F })
               }
             )
           ] }),
-          _ === "connected" && G && /* @__PURE__ */ e("div", { className: "ll-expanded__transcript", "aria-live": "polite", children: /* @__PURE__ */ e("p", { children: G.text }) })
-        ] }),
-        /* @__PURE__ */ f("div", { className: "ll-expanded__footer", children: [
-          _ === "idle" && /* @__PURE__ */ f(
-            "button",
-            {
-              type: "button",
-              className: "ll-expanded__cta ll-expanded__cta--primary",
-              onClick: w,
-              children: [
-                /* @__PURE__ */ e(Ye, { className: "ll-expanded__cta-icon" }),
-                /* @__PURE__ */ e("span", { children: "Start Video Call" })
-              ]
-            }
-          ),
-          _ === "connecting" && /* @__PURE__ */ f(
-            "button",
-            {
-              type: "button",
-              className: "ll-expanded__cta ll-expanded__cta--loading",
-              disabled: !0,
-              children: [
-                /* @__PURE__ */ e("div", { className: "ll-expanded__spinner ll-expanded__spinner--small" }),
-                /* @__PURE__ */ e("span", { children: "Connecting..." })
-              ]
-            }
-          ),
-          _ === "connected" && /* @__PURE__ */ e(
+          be && /* @__PURE__ */ w("form", { className: "ll-message-input", onSubmit: $, children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "text",
+                className: "ll-message-input__field",
+                placeholder: "Message...",
+                value: se,
+                onChange: (h) => ce(h.target.value),
+                "aria-label": "Message the agent"
+              }
+            ),
+            se.trim() && /* @__PURE__ */ e(
+              "button",
+              {
+                type: "submit",
+                className: "ll-message-input__send",
+                "aria-label": "Send message",
+                children: /* @__PURE__ */ e(Pt, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              className: "ll-expanded__cta ll-expanded__cta--danger",
-              onClick: L,
+              className: "ll-expanded__end",
+              onClick: de,
               children: "End conversation"
             }
-          ),
-          (_ === "error" || _ === "disconnected") && /* @__PURE__ */ f("div", { className: "ll-expanded__retry", children: [
-            $ && /* @__PURE__ */ e("p", { className: "ll-expanded__error-text", children: $ }),
-            /* @__PURE__ */ f(
+          )
+        ] }) : (
+          // Idle-state footer: start button + greeting
+          a && /* @__PURE__ */ e("div", { className: "ll-expanded__bottom ll-expanded__bottom--idle", children: /* @__PURE__ */ e("div", { className: "ll-expanded__transcript", children: /* @__PURE__ */ e("p", { className: "ll-expanded__transcript-text", children: a }) }) })
+        ),
+        (() => {
+          if (k && N !== "error")
+            return /* @__PURE__ */ w("div", { className: "ll-expanded__banner", role: "alert", children: [
+              /* @__PURE__ */ e("span", { children: k }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  className: "ll-expanded__banner-x",
+                  onClick: K,
+                  "aria-label": "Dismiss",
+                  children: "×"
+                }
+              )
+            ] });
+          if (!z || N !== "error") return null;
+          let h = "Failed to connect", W = "Try again";
+          return z === "MIC_PERMISSION_DENIED" ? h = "Microphone blocked. Allow access to talk." : z === "MIC_NOT_FOUND" ? h = "No microphone found. Plug one in + retry." : z === "MIC_UNAVAILABLE" ? h = "Mic unavailable. Check other apps using it." : z === "AGENT_TIMEOUT" ? h = "Agent didn't pick up. Try again." : z === "CONNECT_FAILED" ? h = "Connection failed. Check your network." : z.length < 80 && (h = z), /* @__PURE__ */ w("div", { className: "ll-expanded__banner ll-expanded__banner--error", role: "alert", children: [
+            /* @__PURE__ */ e("span", { children: h }),
+            /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                className: "ll-expanded__cta ll-expanded__cta--primary",
-                onClick: v,
-                children: [
-                  /* @__PURE__ */ e(oe, { muted: !1, className: "ll-expanded__cta-icon" }),
-                  /* @__PURE__ */ e("span", { children: "Try again" })
-                ]
+                className: "ll-expanded__banner-retry",
+                onClick: ke,
+                children: W
               }
             )
-          ] })
-        ] })
+          ] });
+        })()
       ]
     }
   );
-}, rn = /* @__PURE__ */ new Set([
+};
+function _e() {
+  return /* @__PURE__ */ e("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": !0, children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" }) });
+}
+function je() {
+  return /* @__PURE__ */ w("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", "aria-hidden": !0, children: [
+    /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  ] });
+}
+function At() {
+  return /* @__PURE__ */ e("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", "aria-hidden": !0, children: /* @__PURE__ */ e("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) });
+}
+function Dt() {
+  return /* @__PURE__ */ w("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
+    /* @__PURE__ */ e("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ e("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+    /* @__PURE__ */ e("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+  ] });
+}
+function Rt() {
+  return /* @__PURE__ */ w("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
+    /* @__PURE__ */ e("path", { d: "M23 7l-7 5 7 5V7z" }),
+    /* @__PURE__ */ e("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2" })
+  ] });
+}
+function Tt({ muted: t }) {
+  return /* @__PURE__ */ w("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
+    /* @__PURE__ */ e("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+    /* @__PURE__ */ e("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ e("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+    t && /* @__PURE__ */ e("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+  ] });
+}
+function zt({ muted: t }) {
+  return /* @__PURE__ */ w("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
+    /* @__PURE__ */ e("polygon", { points: "11 5 6 9 2 9 2 15 6 15 11 19 11 5" }),
+    t ? /* @__PURE__ */ e("line", { x1: "23", y1: "9", x2: "17", y2: "15" }) : /* @__PURE__ */ w(Qe, { children: [
+      /* @__PURE__ */ e("path", { d: "M19.07 4.93a10 10 0 0 1 0 14.14" }),
+      /* @__PURE__ */ e("path", { d: "M15.54 8.46a5 5 0 0 1 0 7.07" })
+    ] })
+  ] });
+}
+function Pt() {
+  return /* @__PURE__ */ w("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
+    /* @__PURE__ */ e("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+    /* @__PURE__ */ e("polyline", { points: "12 5 19 12 12 19" })
+  ] });
+}
+const Ve = ({ label: t, devices: n, activeId: i, onPick: o }) => /* @__PURE__ */ w(
+  "div",
+  {
+    className: "ll-device-menu",
+    onClick: (r) => r.stopPropagation(),
+    role: "listbox",
+    children: [
+      /* @__PURE__ */ e("p", { className: "ll-device-menu__label", children: t }),
+      n.map((r, a) => {
+        const c = i === r.deviceId;
+        return /* @__PURE__ */ w(
+          "button",
+          {
+            type: "button",
+            className: `ll-device-menu__item ${c ? "is-active" : ""}`,
+            onClick: () => o(r.deviceId),
+            role: "option",
+            "aria-selected": c,
+            children: [
+              c && /* @__PURE__ */ e("span", { className: "ll-device-menu__dot", children: "●" }),
+              /* @__PURE__ */ e("span", { className: "ll-device-menu__name", children: r.label || `${t} ${a + 1}` })
+            ]
+          },
+          r.deviceId || a
+        );
+      })
+    ]
+  }
+), $t = /* @__PURE__ */ new Set([
   "agent_state",
   "avatar_stream_ready",
   "avatar_active",
@@ -942,309 +1413,351 @@ const Je = ({
   "idle_warning",
   "idle_timeout"
 ]);
-function ln(n) {
-  var pe, he, fe;
+function Bt(t) {
+  var Ie, Ae, De, Re, Te, ze;
   const {
-    agentId: t,
-    apiKey: r,
-    baseUrl: i = "https://app.livelayer.studio",
-    sessionEndpoint: l,
+    agentId: n,
+    apiKey: i,
+    baseUrl: o = "https://app.livelayer.studio",
+    sessionEndpoint: r,
     sessionBody: a,
-    autoConnect: m = !1,
-    displayMode: u,
-    defaultDisplayMode: p = "expanded",
+    autoConnect: c = !1,
+    displayMode: m,
+    defaultDisplayMode: d = "expanded",
     onDisplayModeChange: g,
-    position: d = "bottom-right",
-    mobileBreakpoint: c = 640,
-    persistKey: o = "ll-widget",
-    disablePersistence: _ = !1,
-    teamMembers: b,
-    currentTeamMemberId: M,
-    onTeamMemberChange: S,
-    idleLoopUrl: I,
-    greeting: A,
-    avatarImageUrl: P,
-    agentName: $,
-    branding: z = {},
-    onConnect: w,
-    onDisconnect: L,
-    onTranscript: v,
-    onAgentState: B,
-    onConnectionStateChange: V,
-    onAgentEvent: W,
-    onAgentCommand: K,
-    controlledSession: x,
-    className: G,
-    style: J,
-    zIndex: X = 2147483647
-  } = n, q = M !== void 0, [T, ye] = E(() => {
-    var h;
-    return M ?? ((h = b == null ? void 0 : b[0]) == null ? void 0 : h.id);
-  }), F = q ? M : T, D = ae(
-    () => (b == null ? void 0 : b.find((h) => h.id === F)) ?? null,
-    [b, F]
-  ), be = (D == null ? void 0 : D.agentId) ?? t, [O, U] = We({
-    value: u,
-    defaultValue: p,
+    position: u = "bottom-right",
+    mobileBreakpoint: s = 640,
+    persistKey: l = "ll-widget",
+    disablePersistence: b = !1,
+    teamMembers: _,
+    currentTeamMemberId: N,
+    onTeamMemberChange: D,
+    idleLoopUrl: E,
+    greeting: R,
+    avatarImageUrl: T,
+    agentName: z,
+    branding: I = {},
+    allowCamera: k = !0,
+    allowScreenShare: C = !0,
+    allowTyping: y = !0,
+    onConnect: A,
+    onDisconnect: X,
+    onTranscript: ne,
+    onAgentState: U,
+    onConnectionStateChange: j,
+    onAgentEvent: F,
+    onAgentCommand: re,
+    controlledSession: P,
+    className: be,
+    style: we,
+    zIndex: ge = 2147483647
+  } = t, de = N !== void 0, [ke, xe] = x(() => {
+    var v;
+    return N ?? ((v = _ == null ? void 0 : _[0]) == null ? void 0 : v.id);
+  }), Q = de ? N : ke, B = Se(
+    () => (_ == null ? void 0 : _.find((v) => v.id === Q)) ?? null,
+    [_, Q]
+  ), ve = (B == null ? void 0 : B.agentId) ?? n, [Z, G] = vt({
+    value: m,
+    defaultValue: d,
     onChange: g,
-    persistKey: o,
-    disablePersistence: _
-  }), Q = qe(c), Z = Be(), j = De(), [xe, ee] = E(!1), [ne, ce] = E(!1), [te, re] = E(!1), le = y(
-    (h) => {
-      const k = h;
-      !k.type || typeof k.type != "string" || (W == null || W({ eventName: k.type, data: h }), rn.has(k.type) || K == null || K(k));
+    persistKey: l,
+    disablePersistence: b
+  }), ee = _t(s), ue = ot(), V = lt(), K = st(), O = ct(), Y = dt(), [ie, H] = x(!1), [he, pe] = x(!1), [oe, q] = x(!1), [le, ae] = x(!1), [J, se] = x(!1), ce = f(
+    (v) => {
+      const M = v;
+      !M.type || typeof M.type != "string" || (F == null || F({ eventName: M.type, data: v }), $t.has(M.type) || re == null || re(M));
     },
-    [K, W]
-  ), R = Te({
-    agentId: x ? "__controlled__" : be,
-    baseUrl: i,
-    apiKey: r,
-    sessionEndpoint: l,
+    [re, F]
+  ), $ = it({
+    agentId: P ? "__controlled__" : ve,
+    baseUrl: o,
+    apiKey: i,
+    sessionEndpoint: r,
     sessionBody: a,
-    onDataMessage: x ? void 0 : le
+    onDataMessage: P ? void 0 : ce
   });
-  C(() => {
-    if (x != null && x.subscribeToDataMessages)
-      return x.subscribeToDataMessages(le);
-  }, [x, le]);
-  const s = ae(() => x ? {
-    connectionState: x.connectionState,
-    agentState: x.agentState,
-    transcript: x.transcript,
-    videoElement: x.videoElement,
-    audioElement: x.audioElement,
-    canResume: x.canResume,
-    error: x.error,
+  L(() => {
+    if (P != null && P.subscribeToDataMessages)
+      return P.subscribeToDataMessages(ce);
+  }, [P, ce]);
+  const p = Se(() => P ? {
+    connectionState: P.connectionState,
+    agentState: P.agentState,
+    transcript: P.transcript,
+    videoElement: P.videoElement,
+    audioElement: P.audioElement,
+    canResume: P.canResume,
+    error: P.error,
     agentConfig: null,
     connect: async () => {
-      await x.onConnect();
+      await P.onConnect();
     },
-    disconnect: () => x.onDisconnect(),
+    disconnect: () => P.onDisconnect(),
     // Dummy getRoom for shape compatibility — controlled consumers own the Room.
     // Internal session's getRoom returns null when no real connect has happened,
     // so we reuse its reference for type consistency.
-    getRoom: R.getRoom,
+    getRoom: $.getRoom,
     isControlled: !0
   } : {
-    connectionState: R.connectionState,
-    agentState: R.agentState,
-    transcript: R.transcript,
-    videoElement: R.videoElement,
-    audioElement: R.audioElement,
-    canResume: R.canResume,
-    error: R.error,
-    agentConfig: R.agentConfig,
-    connect: R.connect,
-    disconnect: R.disconnect,
-    getRoom: R.getRoom,
+    connectionState: $.connectionState,
+    agentState: $.agentState,
+    transcript: $.transcript,
+    videoElement: $.videoElement,
+    audioElement: $.audioElement,
+    canResume: $.canResume,
+    error: $.error,
+    agentConfig: $.agentConfig,
+    connect: $.connect,
+    disconnect: $.disconnect,
+    getRoom: $.getRoom,
     isControlled: !1
-  }, [x, R]), se = N(null);
-  C(() => {
-    const h = s.videoElement, k = se.current;
-    if (!(!h || !k))
-      return k.appendChild(h), () => {
-        h.parentNode === k && k.removeChild(h);
+  }, [P, $]), me = S(null);
+  L(() => {
+    const v = p.videoElement, M = me.current;
+    if (!(!v || !M))
+      return M.appendChild(v), () => {
+        v.parentNode === M && M.removeChild(v);
       };
-  }, [s.videoElement]), C(() => {
-    const h = s.audioElement;
-    if (!h) return;
-    Z.attach(h);
-    const k = h.play();
-    return k && typeof k.catch == "function" && k.catch((Y) => {
-      (Y == null ? void 0 : Y.name) === "NotAllowedError" && ee(!0);
+  }, [p.videoElement]), L(() => {
+    const v = p.audioElement;
+    if (!v) return;
+    ue.attach(v);
+    const M = v.play();
+    return M && typeof M.catch == "function" && M.catch((te) => {
+      (te == null ? void 0 : te.name) === "NotAllowedError" && H(!0);
     }), () => {
-      Z.detach();
+      ue.detach();
     };
-  }, [s.audioElement]), C(() => {
-    if (s.isControlled || s.connectionState !== "connected") return;
-    const h = s.getRoom();
-    if (h)
-      return j.setupMic(h).catch(() => {
-      }), () => {
-        j.teardownMic();
+  }, [p.audioElement]), L(() => {
+    if (p.isControlled || p.connectionState !== "connected") return;
+    const v = p.getRoom();
+    if (v)
+      return V.setupMic(v).catch(() => {
+      }), K.attachRoom(v), O.attachRoom(v), Y.refresh(), () => {
+        V.teardownMic(), K.teardown(), O.teardown();
       };
-  }, [s.isControlled, s.connectionState]), C(() => {
-    V == null || V(s.connectionState), s.connectionState === "connected" ? w == null || w() : s.connectionState === "disconnected" && (L == null || L());
-  }, [s.connectionState, w, L, V]), C(() => {
-    v == null || v(s.transcript);
-  }, [s.transcript, v]), C(() => {
-    B == null || B(s.agentState);
-  }, [s.agentState, B]);
-  const de = N(!1);
-  C(() => {
-    s.isControlled || !m || de.current || s.connectionState === "idle" && (de.current = !0, s.connect());
-  }, [m, s.connectionState, s]);
-  const ke = y(
-    (h) => {
-      const k = b == null ? void 0 : b.find((Y) => Y.id === h);
-      k && (re(!1), h !== F && (ce(!0), s.disconnect(), q || ye(h), S == null || S(k)));
+  }, [p.isControlled, p.connectionState]), L(() => {
+    const v = p.audioElement;
+    v && (v.muted = J);
+  }, [p.audioElement, J]);
+  const Ce = f((v) => {
+    const M = p.getRoom();
+    if (M)
+      try {
+        const te = new TextEncoder().encode(
+          JSON.stringify({ type: "user_message", text: v })
+        );
+        M.localParticipant.publishData(te, { reliable: !0 });
+      } catch {
+      }
+  }, [p]), ye = f(() => {
+    se((v) => !v);
+  }, []);
+  L(() => {
+    j == null || j(p.connectionState), p.connectionState === "connected" ? A == null || A() : p.connectionState === "disconnected" && (X == null || X());
+  }, [p.connectionState, A, X, j]), L(() => {
+    ne == null || ne(p.transcript);
+  }, [p.transcript, ne]), L(() => {
+    U == null || U(p.agentState);
+  }, [p.agentState, U]);
+  const h = S(!1);
+  L(() => {
+    p.isControlled || !c || h.current || p.connectionState === "idle" && (h.current = !0, p.connect());
+  }, [c, p.connectionState, p]);
+  const W = f(
+    (v) => {
+      const M = _ == null ? void 0 : _.find((te) => te.id === v);
+      M && (q(!1), v !== Q && (pe(!0), p.disconnect(), de || xe(v), D == null || D(M)));
     },
     [
-      b,
-      F,
-      s,
-      q,
-      S
+      _,
+      Q,
+      p,
+      de,
+      D
     ]
   );
-  C(() => {
-    ne && s.connectionState === "connected" && ce(!1);
-  }, [s.connectionState, ne]), C(() => {
-    if (!te) return;
-    const h = (k) => {
-      k.key === "Escape" && re(!1);
+  L(() => {
+    he && p.connectionState === "connected" && pe(!1);
+  }, [p.connectionState, he]), L(() => {
+    if (!oe) return;
+    const v = (M) => {
+      M.key === "Escape" && q(!1);
     };
-    return window.addEventListener("keydown", h), () => window.removeEventListener("keydown", h);
-  }, [te]);
-  const ie = (D == null ? void 0 : D.name) ?? $ ?? ((pe = s.agentConfig) == null ? void 0 : pe.name) ?? "Live Layer", ue = (D == null ? void 0 : D.avatarImageUrl) ?? P ?? ((he = s.agentConfig) == null ? void 0 : he.avatarImageUrl) ?? null, Ne = I ?? ((fe = s.agentConfig) == null ? void 0 : fe.idleLoopUrl) ?? null, we = A ?? null, Ce = y(() => U("expanded"), [U]), Ee = y(
-    () => U("minimized"),
-    [U]
-  ), me = y(() => U("hidden"), [U]), Le = y(() => {
-    const h = s.audioElement;
-    h && h.play().then(() => ee(!1)).catch(() => {
+    return window.addEventListener("keydown", v), () => window.removeEventListener("keydown", v);
+  }, [oe]);
+  const Fe = !!T || !!(B != null && B.avatarImageUrl) || p.isControlled, Ne = ut(ve, o, Fe), Ee = (B == null ? void 0 : B.name) ?? z ?? ((Ie = p.agentConfig) == null ? void 0 : Ie.name) ?? ((Ae = Ne.info) == null ? void 0 : Ae.name) ?? "Live Layer", Le = (B == null ? void 0 : B.avatarImageUrl) ?? T ?? ((De = p.agentConfig) == null ? void 0 : De.avatarImageUrl) ?? ((Re = Ne.info) == null ? void 0 : Re.avatarImageUrl) ?? null, Ge = E ?? ((Te = p.agentConfig) == null ? void 0 : Te.idleLoopUrl) ?? ((ze = Ne.info) == null ? void 0 : ze.idleLoopUrl) ?? null, Ke = R ?? null, Ye = f(() => G("expanded"), [G]), He = f(
+    () => G("minimized"),
+    [G]
+  ), Me = f(() => G("hidden"), [G]), qe = f(() => {
+    const v = p.audioElement;
+    v && v.play().then(() => H(!1)).catch(() => {
     });
-  }, [s.audioElement]), Me = y(() => {
-    ee(!1), s.connect();
-  }, [s]), H = {
-    ...J,
-    zIndex: X
+  }, [p.audioElement]), Je = f(() => {
+    H(!1), p.connect();
+  }, [p]), fe = {
+    ...we,
+    zIndex: ge
   };
-  z.primaryColor && (H["--ll-color-primary"] = z.primaryColor), z.accentColor && (H["--ll-color-accent"] = z.accentColor), z.backgroundColor && (H["--ll-color-bg"] = z.backgroundColor), z.textColor && (H["--ll-color-fg"] = z.textColor);
-  const Se = [
+  I.primaryColor && (fe["--ll-color-primary"] = I.primaryColor), I.accentColor && (fe["--ll-color-accent"] = I.accentColor), I.backgroundColor && (fe["--ll-color-bg"] = I.backgroundColor), I.textColor && (fe["--ll-color-fg"] = I.textColor);
+  const Xe = [
     "ll-widget",
-    `ll-widget--${O}`,
-    `ll-widget--${Q ? "mobile" : "desktop"}`,
-    G
+    `ll-widget--${Z}`,
+    `ll-widget--${ee ? "mobile" : "desktop"}`,
+    be
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ w(
     "div",
     {
-      className: Se,
-      style: H,
-      "data-display-mode": O,
-      "data-position": d,
+      className: Xe,
+      style: fe,
+      "data-display-mode": Z,
+      "data-position": u,
       children: [
-        O === "hidden" && /* @__PURE__ */ e(
-          Je,
+        Z === "hidden" && /* @__PURE__ */ e(
+          Et,
           {
-            position: d,
-            isMobile: Q,
-            isSpeaking: s.agentState === "speaking",
-            onExpand: () => U("minimized"),
-            label: `Open ${ie} widget`
+            position: u,
+            isMobile: ee,
+            isSpeaking: p.agentState === "speaking",
+            onExpand: () => G("expanded"),
+            label: `Open ${Ee} widget`
           }
         ),
-        O === "minimized" && /* @__PURE__ */ e(
-          Xe,
+        Z === "minimized" && /* @__PURE__ */ e(
+          Lt,
           {
-            position: d,
-            isMobile: Q,
-            agentName: ie,
-            avatarImageUrl: ue,
-            agentState: s.agentState,
-            isMuted: j.isMuted,
-            audioLevel: Z,
-            onExpand: Ce,
-            onToggleMute: j.toggleMute,
-            onClose: me
+            position: u,
+            isMobile: ee,
+            agentName: Ee,
+            avatarImageUrl: Le,
+            agentState: p.agentState,
+            isMuted: V.isMuted,
+            audioLevel: ue,
+            onExpand: Ye,
+            onToggleMute: V.toggleMute,
+            onClose: Me
           }
         ),
-        O === "expanded" && /* @__PURE__ */ e(
-          tn,
+        Z === "expanded" && /* @__PURE__ */ e(
+          It,
           {
-            position: d,
-            isMobile: Q,
-            agentName: ie,
-            avatarImageUrl: ue,
-            idleLoopUrl: Ne,
-            greeting: we,
-            branding: z,
-            teamMembers: b,
-            currentTeamMemberId: F,
-            isSwitchingTeamMember: ne,
-            teamSwitcherOpen: te,
-            onToggleTeamSwitcher: () => re((h) => !h),
-            onSelectTeamMember: ke,
-            connectionState: s.connectionState,
-            agentState: s.agentState,
-            transcript: s.transcript,
-            isMuted: j.isMuted,
-            needsUserGesture: xe,
-            canResume: s.canResume,
-            micError: j.micError,
-            error: s.error,
-            avatarVideoContainerRef: se,
-            onConnect: () => void s.connect(),
-            onDisconnect: () => s.disconnect(),
-            onRetry: Me,
-            onResumeAudio: Le,
-            onToggleMute: j.toggleMute,
-            onMinimize: Ee,
-            onClose: me,
-            onClearMicError: j.clearError
+            position: u,
+            isMobile: ee,
+            agentName: Ee,
+            avatarImageUrl: Le,
+            idleLoopUrl: Ge,
+            greeting: Ke,
+            branding: I,
+            teamMembers: _,
+            currentTeamMemberId: Q,
+            isSwitchingTeamMember: he,
+            teamSwitcherOpen: oe,
+            onToggleTeamSwitcher: () => q((v) => !v),
+            onSelectTeamMember: W,
+            connectionState: p.connectionState,
+            agentState: p.agentState,
+            transcript: p.transcript,
+            isMuted: V.isMuted,
+            micDevices: Y.mics,
+            isCameraEnabled: K.isEnabled,
+            cameraPreviewEl: K.previewEl,
+            cameraDevices: Y.cameras,
+            activeCameraId: K.activeDeviceId,
+            isScreenShareEnabled: O.isEnabled,
+            screenPreviewEl: O.previewEl,
+            isSpeakerMuted: J,
+            allowCamera: k,
+            allowScreenShare: C,
+            allowTyping: y,
+            languageMenuOpen: le,
+            onToggleLanguageMenu: () => ae((v) => !v),
+            needsUserGesture: ie,
+            canResume: p.canResume,
+            micError: V.micError,
+            error: p.error,
+            avatarVideoContainerRef: me,
+            onConnect: () => void p.connect(),
+            onDisconnect: () => p.disconnect(),
+            onRetry: Je,
+            onResumeAudio: qe,
+            onToggleMute: V.toggleMute,
+            onToggleCamera: () => void K.toggle(),
+            onSwitchCameraDevice: (v) => void K.switchDevice(v),
+            onToggleScreenShare: () => void O.toggle(),
+            onToggleSpeaker: ye,
+            onSendMessage: Ce,
+            onMinimize: He,
+            onClose: Me,
+            onClearMicError: V.clearError
           }
         )
       ]
     }
   );
 }
-function un(n) {
-  return /* @__PURE__ */ e(Ae, { children: /* @__PURE__ */ e(ln, { ...n }) });
+function Ft(t) {
+  return /* @__PURE__ */ e(rt, { children: /* @__PURE__ */ e(Bt, { ...t }) });
 }
-const mn = ({
-  agentId: n,
-  baseUrl: t,
-  apiKey: r,
-  mode: i,
-  onAgentEvent: l,
+const Gt = ({
+  agentId: t,
+  baseUrl: n,
+  apiKey: i,
+  mode: o,
+  onAgentEvent: r,
   className: a,
-  style: m
+  style: c
 }) => {
-  const u = N(null), p = N(null), g = N(l);
-  g.current = l;
-  const d = y((c) => {
-    var _;
-    const o = c.detail;
-    (_ = g.current) == null || _.call(g, o);
+  const m = S(null), d = S(null), g = S(r);
+  g.current = r;
+  const u = f((s) => {
+    var b;
+    const l = s.detail;
+    (b = g.current) == null || b.call(g, l);
   }, []);
-  return C(() => {
-    const c = u.current;
-    if (!c) return;
-    const o = document.createElement("livelayer-widget");
-    return o.setAttribute("agent-id", n), t && o.setAttribute("base-url", t), r && o.setAttribute("api-key", r), i && o.setAttribute("mode", i), o.addEventListener("agent-event", d), c.appendChild(o), p.current = o, () => {
-      o.removeEventListener("agent-event", d), c.removeChild(o), p.current = null;
+  return L(() => {
+    const s = m.current;
+    if (!s) return;
+    const l = document.createElement("livelayer-widget");
+    return l.setAttribute("agent-id", t), n && l.setAttribute("base-url", n), i && l.setAttribute("api-key", i), o && l.setAttribute("mode", o), l.addEventListener("agent-event", u), s.appendChild(l), d.current = l, () => {
+      l.removeEventListener("agent-event", u), s.removeChild(l), d.current = null;
     };
-  }, [n]), C(() => {
-    p.current && (i ? p.current.setAttribute("mode", i) : p.current.removeAttribute("mode"));
-  }, [i]), /* @__PURE__ */ e("div", { ref: u, className: a, style: m });
+  }, [t]), L(() => {
+    d.current && (o ? d.current.setAttribute("mode", o) : d.current.removeAttribute("mode"));
+  }, [o]), /* @__PURE__ */ e("div", { ref: m, className: a, style: c });
 };
-function pn() {
-  const [n, t] = E([]), r = y((l) => {
-    t((a) => {
-      const m = a.findIndex((u) => u.id === l.id);
-      if (m >= 0) {
-        const u = a.slice();
-        return u[m] = l, u;
+function Kt() {
+  const [t, n] = x([]), i = f((r) => {
+    n((a) => {
+      const c = a.findIndex((m) => m.id === r.id);
+      if (c >= 0) {
+        const m = a.slice();
+        return m[c] = r, m;
       }
-      return [...a, l];
+      return [...a, r];
     });
-  }, []), i = y(() => t([]), []);
+  }, []), o = f(() => n([]), []);
   return {
-    entries: n,
-    pushSegment: r,
-    clear: i,
-    latest: n.length > 0 ? n[n.length - 1] : null
+    entries: t,
+    pushSegment: i,
+    clear: o,
+    latest: t.length > 0 ? t[t.length - 1] : null
   };
 }
 export {
-  un as AvatarWidget,
-  Ae as ErrorBoundary,
-  mn as LiveLayerWidget,
-  Be as useAudioLevel,
-  Pe as useDisplayMode,
-  We as useDisplayModePersistence,
-  qe as useIsMobile,
-  Te as useLiveKitSession,
-  De as useMicrophoneState,
-  pn as useTranscript
+  Ft as AvatarWidget,
+  rt as ErrorBoundary,
+  Gt as LiveLayerWidget,
+  ut as useAgentInfo,
+  ot as useAudioLevel,
+  st as useCameraState,
+  mt as useDisplayMode,
+  vt as useDisplayModePersistence,
+  _t as useIsMobile,
+  it as useLiveKitSession,
+  dt as useMediaDevices,
+  lt as useMicrophoneState,
+  ct as useScreenShareState,
+  Kt as useTranscript
 };