@scalemule/conference 0.0.1

package/dist/react.js

@@ -0,0 +1,990 @@
+import { createContext, useState, useRef, useCallback, useEffect, createElement, useContext, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/react/useConference.ts
+var ConferenceContext = createContext(null);
+function ConferenceProvider({ client, children }) {
+  const [activeSession, setActiveSession] = useState(null);
+  const [callState, setCallState] = useState("idle");
+  const refreshTimerRef = useRef(null);
+  const activeCallIdRef = useRef(null);
+  const clearRefreshTimer = useCallback(() => {
+    if (refreshTimerRef.current) {
+      clearTimeout(refreshTimerRef.current);
+      refreshTimerRef.current = null;
+    }
+  }, []);
+  const scheduleTokenRefresh = useCallback(
+    (session) => {
+      clearRefreshTimer();
+      const msUntilExpiry = session.tokenExpiresAt - Date.now();
+      const refreshIn = Math.max(msUntilExpiry - 3e4, 5e3);
+      refreshTimerRef.current = setTimeout(async () => {
+        if (!activeCallIdRef.current) return;
+        try {
+          const refreshed = await client.joinCall(activeCallIdRef.current);
+          setActiveSession(refreshed);
+          scheduleTokenRefresh(refreshed);
+        } catch {
+          setCallState("reconnecting");
+        }
+      }, refreshIn);
+    },
+    [client, clearRefreshTimer]
+  );
+  const join = useCallback(
+    async (callId) => {
+      setCallState("joining");
+      try {
+        const session = await client.joinCall(callId);
+        activeCallIdRef.current = callId;
+        setActiveSession(session);
+        setCallState("connected");
+        scheduleTokenRefresh(session);
+      } catch (err) {
+        setCallState("idle");
+        throw err;
+      }
+    },
+    [client, scheduleTokenRefresh]
+  );
+  const leave = useCallback(async () => {
+    clearRefreshTimer();
+    const callId = activeCallIdRef.current;
+    activeCallIdRef.current = null;
+    setActiveSession(null);
+    setCallState("idle");
+    if (callId) {
+      try {
+        await client.leaveCall(callId);
+      } catch {
+      }
+    }
+  }, [client, clearRefreshTimer]);
+  const end = useCallback(async () => {
+    clearRefreshTimer();
+    const callId = activeCallIdRef.current;
+    activeCallIdRef.current = null;
+    setActiveSession(null);
+    setCallState("ended");
+    if (callId) {
+      try {
+        await client.endCall(callId);
+      } catch {
+      }
+    }
+  }, [client, clearRefreshTimer]);
+  useEffect(() => {
+    return () => {
+      clearRefreshTimer();
+    };
+  }, [clearRefreshTimer]);
+  const value = {
+    client,
+    activeSession,
+    callState,
+    join,
+    leave,
+    end
+  };
+  return createElement(ConferenceContext.Provider, { value }, children);
+}
+function useConference() {
+  const ctx = useContext(ConferenceContext);
+  if (!ctx) {
+    throw new Error("useConference must be used within a <ConferenceProvider>");
+  }
+  return ctx;
+}
+function toDeviceInfo(d) {
+  return { deviceId: d.deviceId, label: d.label || `Device ${d.deviceId.slice(0, 8)}`, kind: d.kind };
+}
+function useDevices() {
+  const [audioInputs, setAudioInputs] = useState([]);
+  const [audioOutputs, setAudioOutputs] = useState([]);
+  const [videoInputs, setVideoInputs] = useState([]);
+  const [selectedAudioInput, setSelectedAudioInput] = useState(null);
+  const [selectedVideoInput, setSelectedVideoInput] = useState(null);
+  const [permissionState, setPermissionState] = useState("unknown");
+  const mountedRef = useRef(true);
+  const enumerate = useCallback(async () => {
+    if (typeof navigator === "undefined" || !navigator.mediaDevices) return;
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      if (!mountedRef.current) return;
+      const ai = devices.filter((d) => d.kind === "audioinput").map(toDeviceInfo);
+      const ao = devices.filter((d) => d.kind === "audiooutput").map(toDeviceInfo);
+      const vi = devices.filter((d) => d.kind === "videoinput").map(toDeviceInfo);
+      setAudioInputs(ai);
+      setAudioOutputs(ao);
+      setVideoInputs(vi);
+      const hasLabels = devices.some((d) => d.label !== "");
+      if (hasLabels) {
+        setPermissionState("granted");
+      }
+    } catch {
+    }
+  }, []);
+  useEffect(() => {
+    mountedRef.current = true;
+    enumerate();
+    if (typeof navigator !== "undefined" && navigator.permissions) {
+      navigator.permissions.query({ name: "microphone" }).then((result) => {
+        if (!mountedRef.current) return;
+        if (result.state === "granted") setPermissionState("granted");
+        else if (result.state === "denied") setPermissionState("denied");
+        else setPermissionState("prompt");
+      }).catch(() => {
+        if (mountedRef.current) setPermissionState("prompt");
+      });
+    }
+    const md = typeof navigator !== "undefined" ? navigator.mediaDevices : null;
+    if (md) {
+      md.addEventListener("devicechange", enumerate);
+    }
+    return () => {
+      mountedRef.current = false;
+      if (md) {
+        md.removeEventListener("devicechange", enumerate);
+      }
+    };
+  }, [enumerate]);
+  const requestPermission = useCallback(
+    async (constraints) => {
+      const stream = await navigator.mediaDevices.getUserMedia(
+        constraints ?? { audio: true, video: true }
+      );
+      if (mountedRef.current) {
+        setPermissionState("granted");
+        await enumerate();
+      }
+      return stream;
+    },
+    [enumerate]
+  );
+  return {
+    audioInputs,
+    audioOutputs,
+    videoInputs,
+    selectedAudioInput,
+    selectedVideoInput,
+    selectAudioInput: setSelectedAudioInput,
+    selectVideoInput: setSelectedVideoInput,
+    permissionState,
+    requestPermission
+  };
+}
+function useIncomingCalls(options) {
+  const {
+    client,
+    pollInterval = 5e3,
+    conversationIds,
+    currentUserId,
+    onNewCall,
+    disabled = false
+  } = options;
+  const [activeCalls, setActiveCalls] = useState([]);
+  const [isPolling, setIsPolling] = useState(false);
+  const seenCallIdsRef = useRef(/* @__PURE__ */ new Set());
+  const onNewCallRef = useRef(onNewCall);
+  onNewCallRef.current = onNewCall;
+  const poll = useCallback(async () => {
+    try {
+      const calls = await client.listCalls({ status: "active" });
+      let filtered = calls;
+      if (conversationIds && conversationIds.length > 0) {
+        const idSet = new Set(conversationIds);
+        filtered = calls.filter((c) => c.conversationId && idSet.has(c.conversationId));
+      }
+      if (currentUserId) {
+        filtered = filtered.filter((c) => c.createdBy !== currentUserId);
+      }
+      setActiveCalls(filtered);
+      for (const call of filtered) {
+        if (!seenCallIdsRef.current.has(call.id)) {
+          seenCallIdsRef.current.add(call.id);
+          onNewCallRef.current?.(call);
+        }
+      }
+      const activeIds = new Set(filtered.map((c) => c.id));
+      for (const id of seenCallIdsRef.current) {
+        if (!activeIds.has(id)) {
+          seenCallIdsRef.current.delete(id);
+        }
+      }
+    } catch {
+    }
+  }, [client, conversationIds, currentUserId]);
+  useEffect(() => {
+    if (disabled) {
+      setIsPolling(false);
+      return;
+    }
+    setIsPolling(true);
+    poll();
+    const interval = setInterval(() => {
+      if (typeof document !== "undefined" && document.hidden) return;
+      poll();
+    }, pollInterval);
+    return () => {
+      clearInterval(interval);
+      setIsPolling(false);
+    };
+  }, [poll, pollInterval, disabled]);
+  return { activeCalls, isPolling };
+}
+function CallButton({
+  conversationId,
+  callType = "video",
+  className,
+  style,
+  onCallStarted,
+  onError,
+  disabled = false,
+  children
+}) {
+  const [isStarting, setIsStarting] = useState(false);
+  const handleClick = useCallback(async () => {
+    if (isStarting || disabled) return;
+    setIsStarting(true);
+    try {
+      const constraints = {
+        audio: true,
+        video: callType === "video"
+      };
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      stream.getTracks().forEach((t) => t.stop());
+      onCallStarted?.(conversationId);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to access media devices";
+      onError?.(message);
+    } finally {
+      setIsStarting(false);
+    }
+  }, [conversationId, callType, isStarting, disabled, onCallStarted, onError]);
+  const defaultStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    padding: "6px 12px",
+    borderRadius: 8,
+    border: "none",
+    backgroundColor: "var(--sm-primary, #3b82f6)",
+    color: "#fff",
+    fontSize: 13,
+    fontWeight: 500,
+    cursor: disabled || isStarting ? "not-allowed" : "pointer",
+    opacity: disabled || isStarting ? 0.6 : 1,
+    transition: "opacity 0.15s",
+    ...style
+  };
+  const icon = callType === "audio" ? "\u{1F4DE}" : "\u{1F4F9}";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className,
+      style: defaultStyle,
+      onClick: handleClick,
+      disabled: disabled || isStarting,
+      "aria-label": `Start ${callType} call`,
+      children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { children: icon }),
+        /* @__PURE__ */ jsx("span", { children: isStarting ? "Starting..." : callType === "audio" ? "Call" : "Video" })
+      ] })
+    }
+  );
+}
+function CallControls({
+  isMuted = false,
+  isVideoOff = false,
+  isScreenSharing = false,
+  onToggleMute,
+  onToggleVideo,
+  onToggleScreenShare,
+  onEndCall,
+  style
+}) {
+  const barStyle = {
+    display: "flex",
+    gap: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 12,
+    ...style
+  };
+  const btnBase = {
+    width: 48,
+    height: 48,
+    borderRadius: "50%",
+    border: "none",
+    cursor: "pointer",
+    fontSize: 18,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background-color 0.15s"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: barStyle, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onToggleMute,
+        style: { ...btnBase, backgroundColor: isMuted ? "#ef4444" : "#374151", color: "#fff" },
+        "aria-label": isMuted ? "Unmute" : "Mute",
+        title: isMuted ? "Unmute" : "Mute",
+        children: isMuted ? "\u{1F507}" : "\u{1F50A}"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onToggleVideo,
+        style: { ...btnBase, backgroundColor: isVideoOff ? "#ef4444" : "#374151", color: "#fff" },
+        "aria-label": isVideoOff ? "Turn on camera" : "Turn off camera",
+        title: isVideoOff ? "Turn on camera" : "Turn off camera",
+        children: isVideoOff ? "\u{1F6AB}" : "\u{1F4F7}"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onToggleScreenShare,
+        style: {
+          ...btnBase,
+          backgroundColor: isScreenSharing ? "#3b82f6" : "#374151",
+          color: "#fff"
+        },
+        "aria-label": isScreenSharing ? "Stop sharing" : "Share screen",
+        title: isScreenSharing ? "Stop sharing" : "Share screen",
+        children: "\u{1F5A5}"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onEndCall,
+        style: { ...btnBase, backgroundColor: "#ef4444", color: "#fff", width: 56 },
+        "aria-label": "End call",
+        title: "End call",
+        children: "\u{1F4F5}"
+      }
+    )
+  ] });
+}
+var cachedComponents = null;
+var importAttempted = false;
+var importPromise = null;
+function loadVideoBackendComponents() {
+  if (importPromise) return importPromise;
+  importPromise = import('@livekit/components-react').then((mod) => {
+    cachedComponents = {
+      Room: mod.LiveKitRoom,
+      VideoConference: mod.VideoConference,
+      RoomAudioRenderer: mod.RoomAudioRenderer
+    };
+    importAttempted = true;
+    return cachedComponents;
+  }).catch(() => {
+    importAttempted = true;
+    return null;
+  });
+  return importPromise;
+}
+function CallOverlay({
+  session,
+  onTokenRefresh,
+  onClose,
+  onError,
+  style
+}) {
+  const [, setIsConnected] = useState(false);
+  const [backend, setBackend] = useState(cachedComponents);
+  const [backendLoaded, setBackendLoaded] = useState(importAttempted);
+  const [currentToken, setCurrentToken] = useState(session.accessToken);
+  const [currentServerUrl, setCurrentServerUrl] = useState(session.serverUrl);
+  useEffect(() => {
+    if (cachedComponents) {
+      setBackend(cachedComponents);
+      setBackendLoaded(true);
+      return;
+    }
+    let cancelled = false;
+    loadVideoBackendComponents().then((result) => {
+      if (!cancelled) {
+        setBackend(result);
+        setBackendLoaded(true);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    if (!onTokenRefresh) return;
+    const msUntilRefresh = Math.max(
+      5e3,
+      session.tokenExpiresAt - Date.now() - 3e4
+    );
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      const backoffWindows = [
+        [1e3, 3e3],
+        [3e3, 1e4],
+        [1e4, 3e4]
+      ];
+      let lastError;
+      for (let attempt = 0; attempt <= backoffWindows.length; attempt++) {
+        if (cancelled) return;
+        try {
+          const next = await onTokenRefresh();
+          if (cancelled) return;
+          setCurrentToken(next.accessToken);
+          setCurrentServerUrl(next.serverUrl);
+          return;
+        } catch (err) {
+          lastError = err;
+          if (attempt >= backoffWindows.length) break;
+          const [minMs, maxMs] = backoffWindows[attempt];
+          const delayMs = minMs + Math.floor(Math.random() * (maxMs - minMs));
+          console.warn(
+            `[CallOverlay] Token refresh attempt ${attempt + 1} failed, retrying in ${delayMs}ms`,
+            err
+          );
+          await new Promise((resolve) => setTimeout(resolve, delayMs));
+        }
+      }
+      if (cancelled) return;
+      const finalErr = lastError instanceof Error ? lastError : new Error("Token refresh failed after 4 attempts");
+      onError?.(finalErr);
+    }, msUntilRefresh);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [session.tokenExpiresAt, onTokenRefresh, onError]);
+  const overlayStyle = {
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "#000",
+    display: "flex",
+    flexDirection: "column",
+    zIndex: 9999,
+    ...style
+  };
+  if (backend && currentToken && currentServerUrl) {
+    const Room = backend.Room;
+    const VideoConference = backend.VideoConference;
+    const RoomAudioRenderer = backend.RoomAudioRenderer;
+    return /* @__PURE__ */ jsx("div", { style: overlayStyle, role: "dialog", "aria-label": "Video call", children: /* @__PURE__ */ jsxs(
+      Room,
+      {
+        serverUrl: currentServerUrl,
+        token: currentToken,
+        connect: true,
+        onConnected: () => setIsConnected(true),
+        onDisconnected: () => setIsConnected(false),
+        onError: (err) => {
+          onError?.(err);
+        },
+        options: {
+          adaptiveStream: true,
+          dynacast: true
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, position: "relative" }, children: [
+            /* @__PURE__ */ jsx(VideoConference, {}),
+            /* @__PURE__ */ jsx(RoomAudioRenderer, {})
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 12,
+                right: 12,
+                zIndex: 1e4
+              },
+              children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  style: {
+                    padding: "8px 20px",
+                    borderRadius: 20,
+                    border: "none",
+                    backgroundColor: "#ef4444",
+                    color: "#fff",
+                    fontSize: 13,
+                    fontWeight: 600,
+                    cursor: "pointer"
+                  },
+                  children: "End Call"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { style: overlayStyle, role: "dialog", "aria-label": "Video call", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "#fff"
+      },
+      children: [
+        /* @__PURE__ */ jsx("p", { style: { fontSize: 18, marginBottom: 8 }, children: !backendLoaded ? "Loading..." : currentServerUrl ? "Connecting..." : "Video conferencing not configured" }),
+        /* @__PURE__ */ jsxs("p", { style: { fontSize: 12, color: "#9ca3af", marginBottom: 24 }, children: [
+          "Call ID: ",
+          session.callId
+        ] }),
+        backendLoaded && !backend && /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, color: "#d1d5db", maxWidth: 400, textAlign: "center" }, children: [
+          "Video backend failed to load. Reinstall ",
+          /* @__PURE__ */ jsx("code", { children: "@scalemule/conference" }),
+          " to repair."
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            style: {
+              padding: "10px 24px",
+              borderRadius: 24,
+              border: "none",
+              backgroundColor: "#ef4444",
+              color: "#fff",
+              fontSize: 14,
+              fontWeight: 600,
+              cursor: "pointer",
+              marginTop: 16
+            },
+            children: "End Call"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function PreCallLobby({
+  callType = "video",
+  onJoin,
+  onCancel,
+  style,
+  className
+}) {
+  const [state, setState] = useState("checking");
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [stream, setStream] = useState(null);
+  const videoRef = useRef(null);
+  const {
+    audioInputs,
+    videoInputs,
+    selectedAudioInput,
+    selectedVideoInput,
+    selectAudioInput,
+    selectVideoInput,
+    permissionState,
+    requestPermission
+  } = useDevices();
+  useEffect(() => {
+    if (permissionState === "granted") {
+      setState("prompt");
+    } else if (permissionState === "denied") {
+      setState("denied");
+    } else if (permissionState !== "unknown") {
+      setState("prompt");
+    }
+  }, [permissionState]);
+  useEffect(() => {
+    if (videoRef.current && stream) {
+      videoRef.current.srcObject = stream;
+    }
+  }, [stream]);
+  useEffect(() => {
+    return () => {
+      if (stream) {
+        stream.getTracks().forEach((t) => t.stop());
+      }
+    };
+  }, [stream]);
+  const acquireMedia = useCallback(async () => {
+    setState("acquiring");
+    try {
+      const constraints = {
+        audio: selectedAudioInput ? { deviceId: { exact: selectedAudioInput } } : true,
+        video: callType === "video" ? selectedVideoInput ? { deviceId: { exact: selectedVideoInput } } : true : false
+      };
+      const s = await requestPermission(constraints);
+      setStream(s);
+      setState("preview");
+    } catch (err) {
+      const e = err;
+      if (e.name === "NotAllowedError") {
+        setState("denied");
+      } else if (e.name === "NotFoundError") {
+        setErrorMessage("No camera or microphone found");
+        setState("error");
+      } else if (e.name === "NotReadableError") {
+        setErrorMessage("Device is in use by another application");
+        setState("error");
+      } else {
+        setErrorMessage(e.message || "Failed to access media devices");
+        setState("error");
+      }
+    }
+  }, [callType, selectedAudioInput, selectedVideoInput, requestPermission]);
+  const handleJoin = useCallback(() => {
+    if (stream) {
+      stream.getTracks().forEach((t) => t.stop());
+      setStream(null);
+    }
+    onJoin({
+      audio: true,
+      video: callType === "video",
+      audioDeviceId: selectedAudioInput ?? void 0,
+      videoDeviceId: selectedVideoInput ?? void 0
+    });
+  }, [stream, onJoin, callType, selectedAudioInput, selectedVideoInput]);
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "16px",
+    padding: "24px",
+    background: "#1a1a2e",
+    borderRadius: "12px",
+    color: "#fff",
+    maxWidth: "400px",
+    margin: "0 auto",
+    ...style
+  };
+  const buttonStyle = {
+    padding: "10px 24px",
+    borderRadius: "8px",
+    border: "none",
+    cursor: "pointer",
+    fontSize: "14px",
+    fontWeight: 600
+  };
+  const primaryButton = {
+    ...buttonStyle,
+    background: "#4CAF50",
+    color: "#fff"
+  };
+  const secondaryButton = {
+    ...buttonStyle,
+    background: "transparent",
+    color: "#aaa",
+    border: "1px solid #444"
+  };
+  const selectStyle = {
+    width: "100%",
+    padding: "8px",
+    borderRadius: "6px",
+    background: "#2a2a4a",
+    color: "#fff",
+    border: "1px solid #444",
+    fontSize: "13px"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle, className, children: [
+    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "18px" }, children: callType === "video" ? "Video Call" : "Audio Call" }),
+    state === "checking" && /* @__PURE__ */ jsx("p", { style: { color: "#888" }, children: "Checking permissions..." }),
+    state === "prompt" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("p", { style: { color: "#ccc", textAlign: "center", fontSize: "14px" }, children: [
+        "Allow access to your ",
+        callType === "video" ? "camera and microphone" : "microphone",
+        " to join the call."
+      ] }),
+      /* @__PURE__ */ jsx("button", { style: primaryButton, onClick: acquireMedia, children: "Allow & Preview" })
+    ] }),
+    state === "acquiring" && /* @__PURE__ */ jsx("p", { style: { color: "#888" }, children: "Requesting access..." }),
+    state === "preview" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      callType === "video" && /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: videoRef,
+          autoPlay: true,
+          playsInline: true,
+          muted: true,
+          style: {
+            width: "100%",
+            maxHeight: "240px",
+            borderRadius: "8px",
+            background: "#000",
+            objectFit: "cover"
+          }
+        }
+      ),
+      callType === "audio" && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "16px",
+            background: "#2a2a4a",
+            borderRadius: "8px",
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "20px" }, children: "\u{1F3A4}" }),
+            /* @__PURE__ */ jsx("span", { style: { color: "#4CAF50", fontSize: "14px" }, children: "Microphone ready" })
+          ]
+        }
+      ),
+      audioInputs.length > 1 && /* @__PURE__ */ jsx(
+        "select",
+        {
+          style: selectStyle,
+          value: selectedAudioInput ?? "",
+          onChange: (e) => selectAudioInput(e.target.value),
+          "aria-label": "Select microphone",
+          children: audioInputs.map((d) => /* @__PURE__ */ jsx("option", { value: d.deviceId, children: d.label }, d.deviceId))
+        }
+      ),
+      callType === "video" && videoInputs.length > 1 && /* @__PURE__ */ jsx(
+        "select",
+        {
+          style: selectStyle,
+          value: selectedVideoInput ?? "",
+          onChange: (e) => selectVideoInput(e.target.value),
+          "aria-label": "Select camera",
+          children: videoInputs.map((d) => /* @__PURE__ */ jsx("option", { value: d.deviceId, children: d.label }, d.deviceId))
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "12px" }, children: [
+        /* @__PURE__ */ jsx("button", { style: primaryButton, onClick: handleJoin, children: callType === "video" ? "Join with Video" : "Join with Audio" }),
+        onCancel && /* @__PURE__ */ jsx("button", { style: secondaryButton, onClick: onCancel, children: "Cancel" })
+      ] })
+    ] }),
+    state === "denied" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { style: { color: "#ff6b6b", textAlign: "center", fontSize: "14px" }, children: "Permission denied. Please allow access in your browser settings." }),
+      onCancel && /* @__PURE__ */ jsx("button", { style: secondaryButton, onClick: onCancel, children: "Cancel" })
+    ] }),
+    state === "error" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { style: { color: "#ff6b6b", textAlign: "center", fontSize: "14px" }, children: errorMessage || "An error occurred" }),
+      /* @__PURE__ */ jsx("button", { style: secondaryButton, onClick: acquireMedia, children: "Retry" }),
+      onCancel && /* @__PURE__ */ jsx("button", { style: secondaryButton, onClick: onCancel, children: "Cancel" })
+    ] })
+  ] });
+}
+var lkComponents = null;
+var lkPromise = null;
+function loadLiveKit() {
+  if (lkPromise) return lkPromise;
+  lkPromise = import('@livekit/components-react').then((mod) => {
+    lkComponents = {
+      LiveKitRoom: mod.LiveKitRoom,
+      RoomAudioRenderer: mod.RoomAudioRenderer,
+      TrackToggle: mod.TrackToggle,
+      DisconnectButton: mod.DisconnectButton
+    };
+    return lkComponents;
+  }).catch(() => null);
+  return lkPromise;
+}
+function formatDuration(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function HuddleBar({
+  session,
+  onClose,
+  onError,
+  onTokenRefresh,
+  callType = "audio",
+  participantNames,
+  style,
+  className
+}) {
+  const [components, setComponents] = useState(lkComponents);
+  const [connectionState, setConnectionState] = useState("connecting");
+  const [elapsed, setElapsed] = useState(0);
+  const [token, setToken] = useState(session.accessToken);
+  const startTimeRef = useRef(Date.now());
+  const refreshTimerRef = useRef(null);
+  useEffect(() => {
+    if (!lkComponents) {
+      loadLiveKit().then((c) => {
+        if (c) setComponents(c);
+      });
+    }
+  }, []);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setElapsed(Math.floor((Date.now() - startTimeRef.current) / 1e3));
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, []);
+  useEffect(() => {
+    if (!onTokenRefresh) return;
+    const msUntilExpiry = session.tokenExpiresAt - Date.now();
+    const refreshIn = Math.max(msUntilExpiry - 3e4, 5e3);
+    refreshTimerRef.current = setTimeout(async () => {
+      try {
+        const refreshed = await onTokenRefresh();
+        setToken(refreshed.accessToken);
+      } catch {
+        setConnectionState("reconnecting");
+      }
+    }, refreshIn);
+    return () => {
+      if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
+    };
+  }, [session.tokenExpiresAt, onTokenRefresh]);
+  useEffect(() => {
+    const t = setTimeout(() => setConnectionState("connected"), 1500);
+    return () => clearTimeout(t);
+  }, []);
+  const barStyle = useMemo(
+    () => ({
+      position: "fixed",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: "56px",
+      background: "linear-gradient(180deg, #2a2a3e 0%, #1e1e30 100%)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "0 16px",
+      zIndex: 9998,
+      color: "#fff",
+      fontSize: "13px",
+      borderTop: "1px solid #3a3a5a",
+      ...style
+    }),
+    [style]
+  );
+  const statusDotStyle = {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    background: connectionState === "connected" ? "#4CAF50" : "#FFC107",
+    animation: connectionState === "connecting" ? "pulse 1.5s infinite" : void 0
+  };
+  const controlButtonStyle = {
+    background: "rgba(255,255,255,0.1)",
+    border: "none",
+    borderRadius: "50%",
+    width: "36px",
+    height: "36px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    color: "#fff",
+    fontSize: "16px"
+  };
+  const leaveButtonStyle = {
+    ...controlButtonStyle,
+    background: "#e53935",
+    borderRadius: "18px",
+    width: "auto",
+    padding: "0 16px",
+    fontSize: "13px",
+    fontWeight: 600
+  };
+  if (!components) {
+    return /* @__PURE__ */ jsx("div", { style: barStyle, className, role: "toolbar", "aria-label": "Call controls", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+      /* @__PURE__ */ jsx("div", { style: statusDotStyle }),
+      /* @__PURE__ */ jsx("span", { children: "Connecting..." })
+    ] }) });
+  }
+  const { LiveKitRoom, RoomAudioRenderer, TrackToggle, DisconnectButton } = components;
+  return /* @__PURE__ */ jsxs(
+    LiveKitRoom,
+    {
+      serverUrl: session.serverUrl,
+      token,
+      connect: true,
+      audio: callType === "audio" || callType === "video",
+      video: callType === "video",
+      onDisconnected: () => onClose?.(),
+      onError: (err) => onError?.(err),
+      children: [
+        /* @__PURE__ */ jsx(RoomAudioRenderer, {}),
+        /* @__PURE__ */ jsxs("div", { style: barStyle, className, role: "toolbar", "aria-label": "Call controls", children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx("div", { style: statusDotStyle }),
+            /* @__PURE__ */ jsx("span", { children: callType === "video" ? "Video call" : "Audio call" }),
+            /* @__PURE__ */ jsx("span", { style: { color: "#888" }, children: formatDuration(elapsed) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx(TrackToggle, { source: "microphone", style: controlButtonStyle }),
+            callType === "video" && /* @__PURE__ */ jsx(TrackToggle, { source: "camera", style: controlButtonStyle }),
+            /* @__PURE__ */ jsx(DisconnectButton, { style: leaveButtonStyle, children: "Leave" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/CallWindow.tsx
+function CallWindow() {
+  return null;
+}
+
+// src/assets/sounds.ts
+function generateTone(frequency, durationMs, sampleRate = 8e3) {
+  const numSamples = Math.floor(sampleRate * (durationMs / 1e3));
+  const dataSize = numSamples;
+  const fileSize = 44 + dataSize;
+  const buffer = new ArrayBuffer(fileSize);
+  const view = new DataView(buffer);
+  const writeString = (offset, str) => {
+    for (let i = 0; i < str.length; i++) view.setUint8(offset + i, str.charCodeAt(i));
+  };
+  writeString(0, "RIFF");
+  view.setUint32(4, fileSize - 8, true);
+  writeString(8, "WAVE");
+  writeString(12, "fmt ");
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, 1, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate, true);
+  view.setUint16(32, 1, true);
+  view.setUint16(34, 8, true);
+  writeString(36, "data");
+  view.setUint32(40, dataSize, true);
+  const fadeLength = Math.floor(numSamples * 0.1);
+  for (let i = 0; i < numSamples; i++) {
+    let amplitude = Math.sin(2 * Math.PI * frequency * i / sampleRate);
+    if (i < fadeLength) amplitude *= i / fadeLength;
+    if (i > numSamples - fadeLength) amplitude *= (numSamples - i) / fadeLength;
+    view.setUint8(44 + i, Math.floor(128 + amplitude * 64));
+  }
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+  return "data:audio/wav;base64," + btoa(binary);
+}
+var JOIN_SOUND = generateTone(880, 200);
+var RING_SOUND = generateTone(587, 400);
+function playSound(sound) {
+  const src = sound === "join" ? JOIN_SOUND : RING_SOUND;
+  const audio = new Audio(src);
+  audio.volume = 0.5;
+  return audio.play().catch(() => {
+  });
+}
+
+export { CallButton, CallControls, CallOverlay, CallWindow, ConferenceProvider, HuddleBar, JOIN_SOUND, PreCallLobby, RING_SOUND, playSound, useConference, useDevices, useIncomingCalls };