@conference-kit/react 0.0.1

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@conference-kit/react",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@conference-kit/core": "^0.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.27",
+    "typescript": "^5.9.3"
+  }
+}

package/src/components/AudioPlayer.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+
+export type AudioPlayerProps = React.AudioHTMLAttributes<HTMLAudioElement> & {
+  stream?: MediaStream | null;
+};
+
+export function AudioPlayer({
+  stream,
+  autoPlay = true,
+  ...props
+}: AudioPlayerProps) {
+  const ref = useRef<HTMLAudioElement | null>(null);
+
+  useEffect(() => {
+    if (!ref.current || !stream) return;
+    ref.current.srcObject = stream;
+    return () => {
+      if (ref.current) ref.current.srcObject = null;
+    };
+  }, [stream]);
+
+  return <audio ref={ref} autoPlay={autoPlay} {...props} />;
+}

package/src/components/ErrorBanner.tsx

@@ -0,0 +1,20 @@
+type ErrorBannerProps = {
+  message: string;
+};
+
+export function ErrorBanner({ message }: ErrorBannerProps) {
+  return (
+    <div
+      style={{
+        background: "#fef2f2",
+        color: "#991b1b",
+        padding: "8px 12px",
+        borderRadius: 8,
+        border: "1px solid #fecdd3",
+        fontSize: 14,
+      }}
+    >
+      {message}
+    </div>
+  );
+}

package/src/components/StatusBadge.tsx

@@ -0,0 +1,41 @@
+type StatusBadgeProps = {
+  label: string;
+  tone?: "neutral" | "success" | "warn" | "error";
+};
+
+const toneStyles: Record<NonNullable<StatusBadgeProps["tone"]>, string> = {
+  neutral: "#e5e7eb",
+  success: "#d1fae5",
+  warn: "#fef3c7",
+  error: "#fee2e2",
+};
+
+const toneText: Record<NonNullable<StatusBadgeProps["tone"]>, string> = {
+  neutral: "#111827",
+  success: "#065f46",
+  warn: "#92400e",
+  error: "#991b1b",
+};
+
+export function StatusBadge({ label, tone = "neutral" }: StatusBadgeProps) {
+  const bg = toneStyles[tone];
+  const color = toneText[tone];
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "4px 8px",
+        borderRadius: 999,
+        background: bg,
+        color,
+        fontSize: 12,
+        fontWeight: 600,
+        textTransform: "uppercase",
+        letterSpacing: 0.3,
+      }}
+    >
+      {label}
+    </span>
+  );
+}

package/src/components/VideoPlayer.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+
+export type VideoPlayerProps = React.VideoHTMLAttributes<HTMLVideoElement> & {
+  stream?: MediaStream | null;
+};
+
+export function VideoPlayer({
+  stream,
+  autoPlay = true,
+  playsInline = true,
+  muted,
+  ...props
+}: VideoPlayerProps) {
+  const ref = useRef<HTMLVideoElement | null>(null);
+
+  useEffect(() => {
+    if (!ref.current || !stream) return;
+    ref.current.srcObject = stream;
+    return () => {
+      if (ref.current) ref.current.srcObject = null;
+    };
+  }, [stream]);
+
+  return (
+    <video
+      ref={ref}
+      autoPlay={autoPlay}
+      playsInline={playsInline}
+      muted={muted ?? stream == null}
+      {...props}
+    />
+  );
+}

package/src/config/features.ts

@@ -0,0 +1,15 @@
+export type FeatureConfig = {
+  enableDataChannel?: boolean;
+  enableScreenShare?: boolean;
+};
+
+export const defaultFeatures: Required<FeatureConfig> = {
+  enableDataChannel: true,
+  enableScreenShare: true,
+};
+
+export function mergeFeatures(
+  features?: FeatureConfig
+): Required<FeatureConfig> {
+  return { ...defaultFeatures, ...(features ?? {}) };
+}

package/src/context/WebRTCProvider.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext } from "react";
+import type { SignalData } from "@conference-kit/core";
+
+export type WebRTCContextValue = {
+  onSignal?: (data: SignalData) => void;
+  config?: RTCConfiguration;
+  trickle?: boolean;
+};
+
+const WebRTCContext = createContext<WebRTCContextValue | undefined>(undefined);
+
+export type WebRTCProviderProps = WebRTCContextValue & {
+  children: React.ReactNode;
+};
+
+export function WebRTCProvider({
+  children,
+  onSignal,
+  config,
+  trickle,
+}: WebRTCProviderProps) {
+  return (
+    <WebRTCContext.Provider value={{ onSignal, config, trickle }}>
+      {children}
+    </WebRTCContext.Provider>
+  );
+}
+
+export function useWebRTCContext() {
+  const value = useContext(WebRTCContext);
+  if (!value)
+    throw new Error("useWebRTCContext must be used within a WebRTCProvider");
+  return value;
+}

package/src/hooks/useCall.ts

@@ -0,0 +1,239 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { type PeerSide, type SignalData } from "@conference-kit/core";
+import { useMediaStream } from "./useMediaStream";
+import { useWebRTC } from "./useWebRTC";
+import { SignalingClient } from "../signaling/SignalingClient";
+
+type CallState = "idle" | "calling" | "ringing" | "connected" | "ended";
+
+type UseCallOptions = {
+  peerId: string;
+  signalingUrl: string;
+  room?: string | null;
+  autoReconnect?: boolean;
+  mediaConstraints?: MediaStreamConstraints;
+  rtcConfig?: RTCConfiguration;
+  trickle?: boolean;
+};
+
+type IncomingSignal = { from: string; data: SignalData };
+
+export type ReturnTypeUseCall = ReturnType<typeof useCall>;
+
+export function useCall(options: UseCallOptions) {
+  const {
+    peerId,
+    signalingUrl,
+    room,
+    autoReconnect = true,
+    mediaConstraints,
+    rtcConfig,
+    trickle,
+  } = options;
+
+  const {
+    stream: localStream,
+    ready,
+    requesting,
+    error: mediaError,
+    requestStream,
+    stopStream,
+  } = useMediaStream({ constraints: mediaConstraints });
+
+  const [callState, setCallState] = useState<CallState>("idle");
+  const [targetId, setTargetId] = useState<string | null>(null);
+  const [side, setSide] = useState<PeerSide>("initiator");
+  const [callError, setCallError] = useState<Error | null>(null);
+  const pendingSignals = useRef<SignalData[]>([]);
+  const pendingOutbound = useRef<SignalData[]>([]);
+
+  const shouldEnablePeer = targetId !== null || callState !== "idle";
+
+  const signaling = useMemo(
+    () =>
+      new SignalingClient({
+        url: signalingUrl,
+        peerId,
+        room,
+        autoReconnect,
+      }),
+    [autoReconnect, peerId, room, signalingUrl]
+  );
+
+  useEffect(() => {
+    signaling.connect();
+    return () => signaling.close();
+  }, [signaling]);
+
+  const {
+    peer,
+    remoteStream,
+    connectionState,
+    iceState,
+    error: webrtcError,
+    signal,
+    sendData,
+    destroy,
+  } = useWebRTC({
+    side,
+    stream: localStream ?? undefined,
+    config: rtcConfig,
+    trickle,
+    enabled: shouldEnablePeer,
+    onSignal: (data) => {
+      if (!targetId) {
+        pendingOutbound.current.push(data);
+        return;
+      }
+      signaling.sendSignal(targetId, data);
+    },
+  });
+
+  useEffect(() => {
+    if (!webrtcError) return;
+    destroy();
+    setCallState("idle");
+    setTargetId(null);
+    pendingSignals.current = [];
+    pendingOutbound.current = [];
+    stopStream();
+  }, [destroy, stopStream, webrtcError]);
+
+  useEffect(() => {
+    if (!targetId) return;
+    if (!pendingOutbound.current.length) return;
+    for (const msg of pendingOutbound.current) {
+      signaling.sendSignal(targetId, msg);
+    }
+    pendingOutbound.current = [];
+  }, [signaling, targetId]);
+
+  useEffect(() => {
+    if (!peer) return;
+    if (pendingSignals.current.length === 0) return;
+    for (const msg of pendingSignals.current) {
+      void signal(msg);
+    }
+    pendingSignals.current = [];
+  }, [peer, signal]);
+
+  const handleIncoming = useCallback(
+    ({ from, data }: IncomingSignal) => {
+      setTargetId((prev) => prev ?? from);
+      if (callState === "idle") setCallState("ringing");
+      if (callState === "ended") setCallState("ringing");
+
+      // If peer not ready yet, queue and ensure responder side
+      if (!peer) {
+        pendingSignals.current.push(data);
+        setSide("responder");
+        return;
+      }
+
+      void signal(data);
+    },
+    [callState, peer, signal]
+  );
+
+  useEffect(() => {
+    const onSignal = ({ from, data }: { from: string; data: unknown }) =>
+      handleIncoming({ from, data: data as SignalData });
+    signaling.on("signal", onSignal);
+    return () => signaling.off("signal", onSignal);
+  }, [handleIncoming, signaling]);
+
+  const call = useCallback(
+    async (to: string) => {
+      setTargetId(to);
+      setSide("initiator");
+      setCallState("calling");
+      try {
+        if (!ready && !requesting) {
+          await requestStream();
+        }
+      } catch (error) {
+        setCallError(error as Error);
+      }
+    },
+    [ready, requesting, requestStream]
+  );
+
+  const answer = useCallback(async () => {
+    setSide("responder");
+    setCallState("connected");
+    try {
+      if (!ready && !requesting) {
+        await requestStream();
+      }
+    } catch (error) {
+      setCallError(error as Error);
+    }
+  }, [ready, requesting, requestStream]);
+
+  const hangUp = useCallback(() => {
+    destroy();
+    setCallState("idle");
+    setTargetId(null);
+    stopStream();
+  }, [destroy, stopStream]);
+
+  const reset = useCallback(() => {
+    destroy();
+    pendingSignals.current = [];
+    pendingOutbound.current = [];
+    setCallState("idle");
+    setTargetId(null);
+    setSide("initiator");
+    setCallError(null);
+    stopStream();
+  }, [destroy, stopStream]);
+
+  const muteAudio = useCallback(
+    (muted: boolean) => {
+      localStream?.getAudioTracks().forEach((track) => {
+        track.enabled = !muted;
+      });
+    },
+    [localStream]
+  );
+
+  const muteVideo = useCallback(
+    (muted: boolean) => {
+      localStream?.getVideoTracks().forEach((track) => {
+        track.enabled = !muted;
+      });
+    },
+    [localStream]
+  );
+
+  const currentError = callError ?? webrtcError ?? mediaError ?? null;
+
+  return {
+    peer,
+    callState,
+    connectionState,
+    iceState,
+    localStream,
+    remoteStream,
+    ready,
+    requesting,
+    error: currentError,
+    call,
+    answer,
+    hangUp,
+    reset,
+    muteAudio,
+    muteVideo,
+    sendData: useCallback(
+      (payload: string | ArrayBufferView | ArrayBuffer | Blob) => {
+        try {
+          if (!peer) return;
+          peer.send(payload);
+        } catch (error) {
+          setCallError(error as Error);
+        }
+      },
+      [peer]
+    ),
+  } as const;
+}

package/src/hooks/useCallState.ts

@@ -0,0 +1,55 @@
+import { useMemo } from "react";
+import type { ReturnTypeUseCall } from "./useCall";
+
+type UseCallStateOptions = {
+  hasTarget?: boolean;
+};
+
+type CallStateView = {
+  callLabel: string;
+  connLabel: string;
+  iceLabel: string;
+  canCall: boolean;
+  canAnswer: boolean;
+  canHangUp: boolean;
+  canReset: boolean;
+  inCall: boolean;
+  errorMessage: string | null;
+};
+
+export function useCallState(
+  call: ReturnTypeUseCall,
+  options: UseCallStateOptions = {}
+): CallStateView {
+  const hasTarget = options.hasTarget ?? false;
+
+  return useMemo(() => {
+    const callLabel = call.callState;
+    const connLabel = call.connectionState;
+    const iceLabel = call.iceState;
+    const canCall = hasTarget && call.callState === "idle";
+    const canAnswer = call.callState === "ringing";
+    const canHangUp = call.callState !== "idle";
+    const canReset = true;
+    const inCall = call.callState === "connected";
+    const errorMessage = call.error?.message ?? null;
+
+    return {
+      callLabel,
+      connLabel,
+      iceLabel,
+      canCall,
+      canAnswer,
+      canHangUp,
+      canReset,
+      inCall,
+      errorMessage,
+    };
+  }, [
+    call.callState,
+    call.connectionState,
+    call.error,
+    call.iceState,
+    hasTarget,
+  ]);
+}

package/src/hooks/useDataChannel.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from "react";
+import type { Peer } from "@conference-kit/core";
+
+export type UseDataChannelState = {
+  ready: boolean;
+  lastMessage: unknown;
+  error: Error | null;
+};
+
+export function useDataChannel(peer: Peer | null) {
+  const [state, setState] = useState<UseDataChannelState>({
+    ready: false,
+    lastMessage: null,
+    error: null,
+  });
+
+  useEffect(() => {
+    if (!peer) return;
+
+    const handleConnect = () => setState((prev) => ({ ...prev, ready: true }));
+    const handleData = (data: unknown) =>
+      setState((prev) => ({ ...prev, lastMessage: data }));
+    const handleError = (error: Error) =>
+      setState((prev) => ({ ...prev, error }));
+    const handleClose = () => setState((prev) => ({ ...prev, ready: false }));
+
+    peer.on("connect", handleConnect);
+    peer.on("data", handleData as any);
+    peer.on("error", handleError);
+    peer.on("close", handleClose);
+
+    return () => {
+      peer.off("connect", handleConnect);
+      peer.off("data", handleData as any);
+      peer.off("error", handleError);
+      peer.off("close", handleClose);
+    };
+  }, [peer]);
+
+  const send = useCallback(
+    (payload: string | ArrayBufferView | ArrayBuffer | Blob) => {
+      if (!peer) throw new Error("Peer not ready");
+      peer.send(payload);
+    },
+    [peer]
+  );
+
+  return { ...state, send } as const;
+}

package/src/hooks/useDataChannelMessages.ts

@@ -0,0 +1,73 @@
+import { useEffect, useMemo, useState, useCallback } from "react";
+import type { Peer } from "@conference-kit/core";
+import { useDataChannel } from "./useDataChannel";
+
+const makeId = () => {
+  if (
+    typeof crypto !== "undefined" &&
+    typeof crypto.randomUUID === "function"
+  ) {
+    return crypto.randomUUID();
+  }
+  const rand = Math.random().toString(36).slice(2, 10);
+  const time = Date.now().toString(36);
+  return `${time}-${rand}`;
+};
+
+type Options = {
+  limit?: number;
+};
+
+type MessageEntry = {
+  id: string;
+  direction: "in" | "out";
+  payload: unknown;
+};
+
+export function useDataChannelMessages(peer: Peer | null, options?: Options) {
+  const limit = options?.limit ?? 50;
+  const channel = useDataChannel(peer);
+  const [messages, setMessages] = useState<MessageEntry[]>([]);
+
+  useEffect(() => {
+    if (channel.lastMessage === null || channel.lastMessage === undefined)
+      return;
+    setMessages((prev) => {
+      const next = [
+        {
+          id: makeId(),
+          direction: "in" as const,
+          payload: channel.lastMessage,
+        },
+        ...prev,
+      ];
+      return next.slice(0, limit);
+    });
+  }, [channel.lastMessage, limit]);
+
+  const sendMessage = useCallback(
+    (payload: string | ArrayBufferView | ArrayBuffer | Blob) => {
+      channel.send(payload);
+      setMessages((prev) => {
+        const next = [
+          { id: makeId(), direction: "out" as const, payload },
+          ...prev,
+        ];
+        return next.slice(0, limit);
+      });
+    },
+    [channel, limit]
+  );
+
+  const state = useMemo(
+    () => ({
+      ready: channel.ready,
+      error: channel.error,
+      messages,
+      sendMessage,
+    }),
+    [channel.error, channel.ready, messages, sendMessage]
+  );
+
+  return state;
+}

package/src/hooks/useMediaStream.ts

@@ -0,0 +1,103 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type UseMediaStreamState = {
+  stream: MediaStream | null;
+  ready: boolean;
+  requesting: boolean;
+  error: Error | null;
+};
+
+type UseMediaStreamOptions = {
+  constraints?: MediaStreamConstraints;
+};
+
+export function useMediaStream(options?: UseMediaStreamOptions) {
+  const { constraints = { audio: true, video: true } } = options || {};
+  const [state, setState] = useState<UseMediaStreamState>({
+    stream: null,
+    ready: false,
+    requesting: false,
+    error: null,
+  });
+  const mounted = useRef(true);
+
+  useEffect(() => {
+    return () => {
+      mounted.current = false;
+      if (state.stream) {
+        state.stream.getTracks().forEach((track) => track.stop());
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const stopStream = useCallback(() => {
+    setState((prev) => {
+      prev.stream?.getTracks().forEach((t) => t.stop());
+      return { ...prev, stream: null, ready: false };
+    });
+  }, []);
+
+  const requestStream = useCallback(async () => {
+    const wantsAudio = Boolean(constraints && constraints.audio);
+    const wantsVideo = Boolean(constraints && constraints.video);
+
+    if (!wantsAudio && !wantsVideo) {
+      setState((prev) => ({
+        ...prev,
+        stream: null,
+        ready: true,
+        requesting: false,
+        error: null,
+      }));
+      return null;
+    }
+
+    if (typeof window !== "undefined") {
+      const host = window.location.hostname;
+      const isLocal =
+        host === "localhost" || host === "127.0.0.1" || host === "::1";
+      const isSecure = window.isSecureContext;
+      if (!isSecure && !isLocal) {
+        setState((prev) => ({
+          ...prev,
+          error: new Error(
+            "Media devices require a secure origin (https) or localhost. Use https or the Chrome flag --unsafely-treat-insecure-origin-as-secure."
+          ),
+        }));
+        return null;
+      }
+    }
+
+    if (
+      typeof navigator === "undefined" ||
+      !navigator.mediaDevices?.getUserMedia
+    ) {
+      setState((prev) => ({
+        ...prev,
+        error: new Error("Media devices are not available in this environment"),
+      }));
+      return null;
+    }
+
+    setState((prev) => ({ ...prev, requesting: true, error: null }));
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+      if (!mounted.current) return null;
+      setState({ stream, ready: true, requesting: false, error: null });
+      return stream;
+    } catch (error) {
+      if (!mounted.current) return null;
+      setState({
+        stream: null,
+        ready: false,
+        requesting: false,
+        error: error as Error,
+      });
+      return null;
+    }
+  }, [constraints]);
+
+  return { ...state, requestStream, stopStream } as const;
+}

package/src/hooks/useMeshRoom.ts

@@ -0,0 +1,247 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Peer, type PeerSide, type SignalData } from "@conference-kit/core";
+import { mergeFeatures, type FeatureConfig } from "../config/features";
+import { useMediaStream } from "./useMediaStream";
+import { SignalingClient } from "../signaling/SignalingClient";
+
+export type MeshParticipant = {
+  id: string;
+  peer: Peer;
+  remoteStream: MediaStream | null;
+  connectionState: RTCPeerConnectionState;
+  iceState: RTCIceConnectionState;
+};
+
+export type UseMeshRoomOptions = {
+  peerId: string;
+  room: string;
+  signalingUrl: string;
+  mediaConstraints?: MediaStreamConstraints;
+  rtcConfig?: RTCConfiguration;
+  trickle?: boolean;
+  autoReconnect?: boolean;
+  features?: FeatureConfig;
+};
+
+export function useMeshRoom(options: UseMeshRoomOptions) {
+  const {
+    peerId,
+    room,
+    signalingUrl,
+    mediaConstraints,
+    rtcConfig,
+    trickle,
+    autoReconnect,
+  } = options;
+
+  const features = useMemo(
+    () => mergeFeatures(options.features),
+    [options.features]
+  );
+
+  const {
+    stream: localStream,
+    ready,
+    requesting,
+    error: mediaError,
+    requestStream,
+    stopStream,
+  } = useMediaStream({ constraints: mediaConstraints });
+
+  const signaling = useMemo(
+    () =>
+      new SignalingClient({
+        url: signalingUrl,
+        peerId,
+        room,
+        autoReconnect,
+      }),
+    [autoReconnect, peerId, room, signalingUrl]
+  );
+
+  const peers = useRef<Map<string, Peer>>(new Map());
+  const previousStream = useRef<MediaStream | null>(null);
+  const [roster, setRoster] = useState<string[]>([]);
+  const [participants, setParticipants] = useState<MeshParticipant[]>([]);
+  const [error, setError] = useState<Error | null>(null);
+  const [signalingStatus, setSignalingStatus] = useState<
+    "idle" | "connecting" | "open" | "closed"
+  >("idle");
+
+  const sideForPeer = useCallback(
+    (otherId: string): PeerSide => {
+      return peerId > otherId ? "initiator" : "responder";
+    },
+    [peerId]
+  );
+
+  const destroyPeer = useCallback((id: string) => {
+    const peer = peers.current.get(id);
+    if (peer) {
+      peer.destroy();
+      peers.current.delete(id);
+    }
+    setParticipants((prev) => prev.filter((p) => p.id !== id));
+  }, []);
+
+  const upsertParticipant = useCallback(
+    (id: string, patch: Partial<MeshParticipant>) => {
+      setParticipants((prev) => {
+        const existing = prev.find((p) => p.id === id);
+        if (!existing) {
+          return [
+            ...prev,
+            {
+              id,
+              peer: patch.peer as MeshParticipant["peer"],
+              remoteStream: patch.remoteStream ?? null,
+              connectionState: patch.connectionState ?? "new",
+              iceState: patch.iceState ?? "new",
+            },
+          ];
+        }
+        return prev.map((p) => (p.id === id ? { ...p, ...patch } : p));
+      });
+    },
+    []
+  );
+
+  const ensurePeer = useCallback(
+    (id: string, side?: PeerSide) => {
+      if (id === peerId) return null;
+      const existing = peers.current.get(id);
+      if (existing) return existing;
+      // enableDataChannel is supported in the runtime PeerConfig but may lag in published typings; cast to satisfy TS.
+      const peerConfig: any = {
+        side: side ?? sideForPeer(id),
+        stream: localStream ?? undefined,
+        config: rtcConfig,
+        trickle,
+        enableDataChannel: features.enableDataChannel,
+      };
+      const peer = new Peer(peerConfig);
+      peers.current.set(id, peer);
+      upsertParticipant(id, {
+        peer,
+        remoteStream: null,
+        connectionState: "new",
+        iceState: "new",
+      });
+
+      const handlers = {
+        signal: (data: SignalData) => signaling.sendSignal(id, data),
+        stream: (remote: MediaStream) =>
+          upsertParticipant(id, { remoteStream: remote }),
+        error: (err: Error) => setError(err),
+        connectionStateChange: (state: RTCPeerConnectionState) =>
+          upsertParticipant(id, { connectionState: state }),
+        iceStateChange: (state: RTCIceConnectionState) =>
+          upsertParticipant(id, { iceState: state }),
+        close: () => destroyPeer(id),
+      };
+
+      peer.on("signal", handlers.signal);
+      peer.on("stream", handlers.stream);
+      peer.on("error", handlers.error);
+      peer.on("connectionStateChange", handlers.connectionStateChange);
+      peer.on("iceStateChange", handlers.iceStateChange);
+      peer.on("close", handlers.close);
+
+      return peer;
+    },
+    [
+      destroyPeer,
+      localStream,
+      peerId,
+      rtcConfig,
+      sideForPeer,
+      signaling,
+      trickle,
+      upsertParticipant,
+    ]
+  );
+
+  useEffect(() => {
+    setSignalingStatus("connecting");
+    signaling.connect();
+    return () => signaling.close();
+  }, [signaling]);
+
+  useEffect(() => {
+    const handleOpen = () => setSignalingStatus("open");
+    const handleClose = () => setSignalingStatus("closed");
+    const handleError = (err: Error) => setError(err);
+
+    signaling.on("open", handleOpen as any);
+    signaling.on("close", handleClose as any);
+    signaling.on("error", handleError as any);
+
+    return () => {
+      signaling.off("open", handleOpen as any);
+      signaling.off("close", handleClose as any);
+      signaling.off("error", handleError as any);
+    };
+  }, [signaling]);
+
+  useEffect(() => {
+    const onPresence = (payload: {
+      peers: string[];
+      peerId: string;
+      room?: string | null;
+      action: "join" | "leave";
+    }) => {
+      const ids = payload.peers;
+      setRoster(ids);
+      ids.filter((id) => id !== peerId).forEach((id) => ensurePeer(id));
+      // Remove peers no longer present
+      setParticipants((prev) => prev.filter((p) => ids.includes(p.id)));
+      Array.from(peers.current.keys()).forEach((id) => {
+        if (!ids.includes(id)) destroyPeer(id);
+      });
+    };
+    signaling.on("presence", onPresence as any);
+    return () => signaling.off("presence", onPresence as any);
+  }, [destroyPeer, ensurePeer, peerId, signaling]);
+
+  useEffect(() => {
+    const onSignal = ({ from, data }: { from: string; data: unknown }) => {
+      const peer = ensurePeer(from, sideForPeer(from));
+      void peer?.signal(data as SignalData);
+    };
+    signaling.on("signal", onSignal as any);
+    return () => signaling.off("signal", onSignal as any);
+  }, [ensurePeer, signaling, sideForPeer]);
+
+  const leave = useCallback(() => {
+    Array.from(peers.current.values()).forEach((p) => p.destroy());
+    peers.current.clear();
+    setParticipants([]);
+    setRoster([]);
+    stopStream();
+    signaling.close();
+  }, [signaling, stopStream]);
+
+  useEffect(() => {
+    if (previousStream.current === localStream) return;
+    const prev = previousStream.current;
+    peers.current.forEach((peer) => {
+      if (prev) peer.removeStream(prev);
+      if (localStream) peer.addStream(localStream);
+    });
+    previousStream.current = localStream ?? null;
+  }, [localStream]);
+
+  return {
+    localStream,
+    ready,
+    requesting,
+    mediaError,
+    participants,
+    roster,
+    signalingStatus,
+    requestStream,
+    stopStream,
+    leave,
+    error,
+  } as const;
+}

package/src/hooks/useScreenShare.ts

@@ -0,0 +1,46 @@
+import { useCallback, useState, useRef, useEffect } from "react";
+import { mergeFeatures, type FeatureConfig } from "../config/features";
+
+export function useScreenShare(options?: FeatureConfig) {
+  const features = mergeFeatures(options);
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const active = useRef<MediaStream | null>(null);
+
+  const start = useCallback(async () => {
+    if (!features.enableScreenShare) {
+      setError(new Error("Screen share is disabled by configuration"));
+      return null;
+    }
+    if (
+      typeof navigator === "undefined" ||
+      !navigator.mediaDevices?.getDisplayMedia
+    ) {
+      setError(new Error("Screen share is not supported in this environment"));
+      return null;
+    }
+    try {
+      const displayStream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        audio: false,
+      });
+      active.current = displayStream;
+      setStream(displayStream);
+      setError(null);
+      return displayStream;
+    } catch (err) {
+      setError(err as Error);
+      return null;
+    }
+  }, [features.enableScreenShare]);
+
+  const stop = useCallback(() => {
+    active.current?.getTracks().forEach((t) => t.stop());
+    active.current = null;
+    setStream(null);
+  }, []);
+
+  useEffect(() => () => stop(), [stop]);
+
+  return { stream, start, stop, error } as const;
+}

package/src/hooks/useWebRTC.ts

@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Peer, type PeerSide, type SignalData } from "@conference-kit/core";
+
+export type UseWebRTCOptions = {
+  side: PeerSide;
+  stream?: MediaStream | null;
+  config?: RTCConfiguration;
+  channelLabel?: string;
+  trickle?: boolean;
+  onSignal?: (data: SignalData) => void;
+  enabled?: boolean;
+};
+
+export function useWebRTC(options: UseWebRTCOptions) {
+  const {
+    side,
+    stream,
+    config,
+    channelLabel,
+    trickle = true,
+    onSignal,
+    enabled = true,
+  } = options;
+  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
+  const [connectionState, setConnectionState] =
+    useState<RTCPeerConnectionState>("new");
+  const [iceState, setIceState] = useState<RTCIceConnectionState>("new");
+  const [error, setError] = useState<Error | null>(null);
+  const [peerInstance, setPeerInstance] = useState<Peer | null>(null);
+  const peerRef = useRef<Peer | null>(null);
+  const creationFailed = useRef(false);
+  const onSignalRef = useRef<typeof onSignal>();
+
+  useEffect(() => {
+    onSignalRef.current = onSignal;
+  }, [onSignal]);
+
+  const isClient = useMemo(() => typeof window !== "undefined", []);
+
+  useEffect(() => {
+    if (!isClient || !enabled) {
+      peerRef.current?.destroy();
+      peerRef.current = null;
+      setPeerInstance(null);
+      creationFailed.current = false;
+      return undefined;
+    }
+
+    if (peerRef.current || creationFailed.current) {
+      return () => undefined;
+    }
+
+    try {
+      const peer = new Peer({
+        side,
+        stream: stream ?? undefined,
+        config,
+        channelLabel,
+        trickle,
+      });
+      peerRef.current = peer;
+      setPeerInstance(peer);
+      setError(null);
+
+      const handlers = {
+        signal: (data: SignalData) => onSignalRef.current?.(data),
+        stream: (remote: MediaStream) => setRemoteStream(remote),
+        error: (err: Error) => setError(err),
+        connectionStateChange: (state: RTCPeerConnectionState) =>
+          setConnectionState(state),
+        iceStateChange: (state: RTCIceConnectionState) => setIceState(state),
+      };
+
+      peer.on("signal", handlers.signal);
+      peer.on("stream", handlers.stream);
+      peer.on("error", handlers.error);
+      peer.on("connectionStateChange", handlers.connectionStateChange);
+      peer.on("iceStateChange", handlers.iceStateChange);
+
+      return () => {
+        peer.off("signal", handlers.signal);
+        peer.off("stream", handlers.stream);
+        peer.off("error", handlers.error);
+        peer.off("connectionStateChange", handlers.connectionStateChange);
+        peer.off("iceStateChange", handlers.iceStateChange);
+        peer.destroy();
+        peerRef.current = null;
+        setPeerInstance(null);
+        creationFailed.current = false;
+      };
+    } catch (err) {
+      creationFailed.current = true;
+      setError(err as Error);
+      return () => undefined;
+    }
+  }, [channelLabel, config, enabled, isClient, side, stream, trickle]);
+
+  const signal = useCallback(async (data: SignalData) => {
+    if (!peerRef.current) return;
+    await peerRef.current.signal(data);
+  }, []);
+
+  const sendData = useCallback(
+    (payload: string | ArrayBufferView | ArrayBuffer | Blob) => {
+      if (!peerRef.current) throw new Error("Peer not ready");
+      peerRef.current.send(payload);
+    },
+    []
+  );
+
+  const destroy = useCallback(() => {
+    peerRef.current?.destroy();
+    peerRef.current = null;
+    creationFailed.current = false;
+    setPeerInstance(null);
+  }, []);
+
+  return {
+    peer: peerInstance,
+    remoteStream,
+    connectionState,
+    iceState,
+    error,
+    signal,
+    sendData,
+    destroy,
+  } as const;
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+export * from "./hooks/useMediaStream";
+export * from "./hooks/useWebRTC";
+export * from "./hooks/useDataChannel";
+export * from "./hooks/useDataChannelMessages";
+export * from "./hooks/useCall";
+export * from "./hooks/useCallState";
+export * from "./hooks/useMeshRoom";
+export * from "./hooks/useScreenShare";
+export * from "./context/WebRTCProvider";
+export * from "./components/VideoPlayer";
+export * from "./components/AudioPlayer";
+export * from "./components/StatusBadge";
+export * from "./components/ErrorBanner";
+export * from "./signaling/SignalingClient";
+export * from "./config/features";

package/src/signaling/SignalingClient.ts

@@ -0,0 +1,178 @@
+export type EventMap = {
+  open: void;
+  close: CloseEvent | undefined;
+  error: Error;
+  signal: { from: string; data: unknown };
+  broadcast: { from: string; room?: string | null; data: unknown };
+  presence: {
+    room?: string | null;
+    peerId: string;
+    peers: string[];
+    action: "join" | "leave";
+  };
+};
+
+type EventKey = keyof EventMap;
+
+type Handler<K extends EventKey> = (payload: EventMap[K]) => void;
+
+function createEmitter() {
+  const listeners = new Map<EventKey, Set<Handler<any>>>();
+  return {
+    on<K extends EventKey>(event: K, handler: Handler<K>) {
+      const set = listeners.get(event) ?? new Set();
+      set.add(handler as Handler<any>);
+      listeners.set(event, set);
+    },
+    off<K extends EventKey>(event: K, handler: Handler<K>) {
+      const set = listeners.get(event);
+      if (!set) return;
+      set.delete(handler as Handler<any>);
+      if (set.size === 0) listeners.delete(event);
+    },
+    emit<K extends EventKey>(event: K, payload: EventMap[K]) {
+      const set = listeners.get(event);
+      if (!set) return;
+      for (const handler of Array.from(set)) handler(payload);
+    },
+  };
+}
+
+export type SignalingClientOptions = {
+  url: string;
+  peerId: string;
+  room?: string | null;
+  autoReconnect?: boolean;
+  reconnectDelayMs?: number;
+};
+
+type IncomingMessage =
+  | { type: "signal"; from: string; data: unknown }
+  | { type: "broadcast"; from: string; room?: string | null; data: unknown }
+  | {
+      type: "presence";
+      room?: string | null;
+      peerId: string;
+      peers: string[];
+      action: "join" | "leave";
+    };
+
+type OutgoingMessage =
+  | { type: "signal"; to: string; data: unknown }
+  | { type: "broadcast"; data: unknown };
+
+export class SignalingClient {
+  private ws: WebSocket | null = null;
+  private options: SignalingClientOptions;
+  private emitter = createEmitter();
+  private reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
+  private shouldReconnect: boolean;
+  private pendingQueue: OutgoingMessage[] = [];
+
+  constructor(options: SignalingClientOptions) {
+    this.options = options;
+    this.shouldReconnect = options.autoReconnect ?? true;
+  }
+
+  connect() {
+    if (typeof window === "undefined") return;
+    if (
+      this.ws &&
+      (this.ws.readyState === WebSocket.OPEN ||
+        this.ws.readyState === WebSocket.CONNECTING)
+    ) {
+      return;
+    }
+
+    const { url, peerId, room } = this.options;
+    const wsUrl = `${url}?peerId=${encodeURIComponent(peerId)}${
+      room ? `&room=${encodeURIComponent(room)}` : ""
+    }`;
+    this.ws = new WebSocket(wsUrl);
+
+    this.ws.addEventListener("open", () => {
+      this.emitter.emit("open", undefined as void);
+      this.flushQueue();
+    });
+
+    this.ws.addEventListener("message", (event) => {
+      const payload = typeof event.data === "string" ? event.data : "";
+      try {
+        const parsed: IncomingMessage = JSON.parse(payload);
+        if (parsed.type === "signal") {
+          this.emitter.emit("signal", { from: parsed.from, data: parsed.data });
+        } else if (parsed.type === "broadcast") {
+          this.emitter.emit("broadcast", {
+            from: parsed.from,
+            room: parsed.room,
+            data: parsed.data,
+          });
+        } else if (parsed.type === "presence") {
+          this.emitter.emit("presence", {
+            room: parsed.room,
+            peerId: parsed.peerId,
+            peers: parsed.peers,
+            action: parsed.action,
+          });
+        }
+      } catch (error) {
+        this.emitter.emit("error", error as Error);
+      }
+    });
+
+    this.ws.addEventListener("close", (event) => {
+      this.emitter.emit("close", event);
+      this.scheduleReconnect();
+    });
+
+    this.ws.addEventListener("error", () => {
+      this.emitter.emit("error", new Error("WebSocket error"));
+    });
+  }
+
+  close() {
+    this.shouldReconnect = false;
+    if (this.reconnectTimeout) clearTimeout(this.reconnectTimeout);
+    this.ws?.close();
+    this.ws = null;
+  }
+
+  sendSignal(to: string, data: unknown) {
+    this.enqueue({ type: "signal", to, data });
+  }
+
+  broadcast(data: unknown) {
+    this.enqueue({ type: "broadcast", data });
+  }
+
+  on<K extends EventKey>(event: K, handler: Handler<K>) {
+    this.emitter.on(event, handler);
+  }
+
+  off<K extends EventKey>(event: K, handler: Handler<K>) {
+    this.emitter.off(event, handler);
+  }
+
+  private enqueue(message: OutgoingMessage) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(message));
+      return;
+    }
+    this.pendingQueue.push(message);
+  }
+
+  private flushQueue() {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
+    while (this.pendingQueue.length) {
+      const msg = this.pendingQueue.shift();
+      if (msg) this.ws.send(JSON.stringify(msg));
+    }
+  }
+
+  private scheduleReconnect() {
+    if (!this.shouldReconnect) return;
+    const delay = this.options.reconnectDelayMs ?? 1000;
+    if (this.reconnectTimeout) clearTimeout(this.reconnectTimeout);
+    this.reconnectTimeout = setTimeout(() => this.connect(), delay);
+  }
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"]
+}