@conference-kit/ui-react 0.0.1

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@conference-kit/ui-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"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "tailwindcss": ">=3.4.0"
+  },
+  "dependencies": {
+    "@conference-kit/react": "^0.0.1",
+    "@conference-kit/core": "^0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "typescript": "^5.9.3"
+  }
+}

package/src/ChatPanel.tsx

@@ -0,0 +1,86 @@
+import type { ChangeEvent, FC, FormEvent } from "react";
+import { useState } from "react";
+import { ChatIcon } from "./icons";
+
+export type ChatMessage = {
+  id: string;
+  direction: "in" | "out";
+  text: string;
+};
+
+export type ChatPanelProps = {
+  messages: ChatMessage[];
+  ready: boolean;
+  onSend: (text: string) => void;
+};
+
+export const ChatPanel: FC<ChatPanelProps> = ({
+  messages,
+  ready,
+  onSend,
+}: ChatPanelProps) => {
+  const [text, setText] = useState("ping");
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    if (!text.trim()) return;
+    onSend(text.trim());
+    setText("");
+  };
+
+  return (
+    <div className="bg-slate-900 border border-slate-800 rounded-xl p-4 grid gap-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-slate-100 font-semibold">
+          <ChatIcon className="h-5 w-5" /> Data Channel
+        </div>
+        <span
+          className={`text-xs px-2 py-1 rounded-full ${
+            ready
+              ? "bg-emerald-100 text-emerald-800"
+              : "bg-slate-200 text-slate-700"
+          }`}
+        >
+          {ready ? "Open" : "Closed"}
+        </span>
+      </div>
+      <form className="flex gap-2" onSubmit={submit}>
+        <input
+          className="flex-1 rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 text-slate-100"
+          value={text}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            setText(e.target.value)
+          }
+          placeholder="Message"
+        />
+        <button
+          type="submit"
+          disabled={!ready}
+          className="px-3 py-2 rounded-lg bg-emerald-600 text-slate-50 font-semibold disabled:opacity-50"
+        >
+          Send
+        </button>
+      </form>
+      <div className="max-h-64 overflow-auto grid gap-2">
+        {messages.length === 0 && (
+          <div className="text-slate-400 text-sm">No messages yet</div>
+        )}
+        {messages.map((msg) => (
+          <div
+            key={msg.id}
+            className={`flex items-center justify-between rounded-lg px-3 py-2 border ${
+              msg.direction === "in"
+                ? "bg-slate-800 border-slate-700"
+                : "bg-emerald-50 border-emerald-200"
+            }`}
+          >
+            <span className="text-sm text-slate-100">{msg.text}</span>
+            <span className="text-xs text-slate-500">
+              {msg.direction === "in" ? "In" : "Out"}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/ConnectionBadge.tsx

@@ -0,0 +1,45 @@
+import type { FC } from "react";
+import { SignalIcon, WifiOffIcon } from "./icons";
+import type { ConnectionStatus } from "./types";
+
+export const ConnectionBadge: FC<{ status: ConnectionStatus }> = ({
+  status,
+}) => {
+  const signalTone =
+    status.signaling === "open"
+      ? "bg-emerald-100 text-emerald-800"
+      : "bg-amber-100 text-amber-800";
+  const mediaTone =
+    status.media === "ready"
+      ? "bg-emerald-100 text-emerald-800"
+      : status.media === "requesting"
+      ? "bg-amber-100 text-amber-800"
+      : "bg-slate-200 text-slate-700";
+  const dataTone =
+    status.data === "ready"
+      ? "bg-emerald-100 text-emerald-800"
+      : "bg-slate-200 text-slate-700";
+
+  return (
+    <div className="flex flex-wrap gap-2 text-sm">
+      <span
+        className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 ${signalTone}`}
+      >
+        <SignalIcon className="h-4 w-4" />
+        Signal {status.signaling ?? "idle"}
+      </span>
+      <span
+        className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 ${mediaTone}`}
+      >
+        <WifiOffIcon className="h-4 w-4" />
+        Media {status.media ?? "off"}
+      </span>
+      <span
+        className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 ${dataTone}`}
+      >
+        <SignalIcon className="h-4 w-4" />
+        Data {status.data ?? "idle"}
+      </span>
+    </div>
+  );
+};

package/src/ControlBar.tsx

@@ -0,0 +1,88 @@
+import type { FC, ReactNode } from "react";
+import { ChatIcon, MicIcon, PhoneIcon, ScreenIcon, VideoIcon } from "./icons";
+
+export type ControlBarProps = {
+  joined?: boolean;
+  mediaReady?: boolean;
+  audioMuted?: boolean;
+  videoMuted?: boolean;
+  screenSharing?: boolean;
+  onJoin?: () => void;
+  onLeave?: () => void;
+  onToggleAudio?: () => void;
+  onToggleVideo?: () => void;
+  onToggleScreen?: () => void;
+  onReset?: () => void;
+  extraRight?: ReactNode;
+};
+
+const buttonBase =
+  "inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold border transition";
+
+export const ControlBar: FC<ControlBarProps> = ({
+  joined,
+  mediaReady,
+  audioMuted,
+  videoMuted,
+  screenSharing,
+  onJoin,
+  onLeave,
+  onToggleAudio,
+  onToggleVideo,
+  onToggleScreen,
+  onReset,
+  extraRight,
+}: ControlBarProps) => {
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-3 bg-slate-900 border border-slate-800 rounded-xl px-4 py-3">
+      <div className="flex flex-wrap gap-2">
+        <button
+          className={`${buttonBase} border-emerald-500 text-emerald-100 bg-emerald-600/80 hover:bg-emerald-600`}
+          disabled={joined}
+          onClick={onJoin}
+        >
+          <VideoIcon className="h-4 w-4" /> Join
+        </button>
+        <button
+          className={`${buttonBase} border-slate-700 text-slate-100 bg-slate-800 hover:bg-slate-700`}
+          disabled={!joined}
+          onClick={onLeave}
+        >
+          <PhoneIcon className="h-4 w-4" /> Leave
+        </button>
+        <button
+          className={`${buttonBase} border-slate-700 text-slate-100 bg-slate-800 hover:bg-slate-700`}
+          disabled={!joined || !mediaReady}
+          onClick={onToggleAudio}
+        >
+          <MicIcon className="h-4 w-4" /> {audioMuted ? "Unmute" : "Mute"}
+        </button>
+        <button
+          className={`${buttonBase} border-slate-700 text-slate-100 bg-slate-800 hover:bg-slate-700`}
+          disabled={!joined || !mediaReady}
+          onClick={onToggleVideo}
+        >
+          <VideoIcon className="h-4 w-4" />{" "}
+          {videoMuted ? "Start video" : "Stop video"}
+        </button>
+        <button
+          className={`${buttonBase} border-slate-700 text-slate-100 bg-slate-800 hover:bg-slate-700`}
+          disabled={!joined}
+          onClick={onToggleScreen}
+        >
+          <ScreenIcon className="h-4 w-4" />{" "}
+          {screenSharing ? "Stop share" : "Share screen"}
+        </button>
+        <button
+          className={`${buttonBase} border-slate-700 text-slate-300 hover:bg-slate-800`}
+          onClick={onReset}
+        >
+          <ChatIcon className="h-4 w-4" /> Reset
+        </button>
+      </div>
+      {extraRight ? (
+        <div className="flex items-center gap-2">{extraRight}</div>
+      ) : null}
+    </div>
+  );
+};

package/src/ParticipantGrid.tsx

@@ -0,0 +1,18 @@
+import type { FC } from "react";
+import type { ParticipantView } from "./types";
+import { ParticipantTile } from "./ParticipantTile";
+
+export const ParticipantGrid: FC<{ participants: ParticipantView[] }> = ({
+  participants,
+}) => {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+      {participants.map((p) => (
+        <ParticipantTile key={p.id} participant={p} />
+      ))}
+      {participants.length === 0 && (
+        <div className="text-slate-400 text-sm">Waiting for participants…</div>
+      )}
+    </div>
+  );
+};

package/src/ParticipantTile.tsx

@@ -0,0 +1,50 @@
+import type { FC } from "react";
+import type { ParticipantView } from "./types";
+
+export const ParticipantTile: FC<{ participant: ParticipantView }> = ({
+  participant,
+}) => {
+  return (
+    <div className="bg-slate-900 border border-slate-800 rounded-xl p-3 grid gap-2">
+      <div className="flex items-center justify-between gap-2 text-sm text-slate-200">
+        <div className="font-semibold truncate">
+          {participant.label ?? participant.id}
+        </div>
+        <span className="text-xs text-slate-400">
+          {participant.connectionState ?? "new"}
+        </span>
+      </div>
+      <video
+        className="w-full aspect-video rounded-lg bg-slate-950"
+        muted={participant.isLocal}
+        autoPlay
+        playsInline
+        ref={(el) => {
+          if (!el) return;
+          if (participant.stream && el.srcObject !== participant.stream) {
+            el.srcObject = participant.stream;
+          }
+          if (!participant.stream && el.srcObject) {
+            el.srcObject = null;
+          }
+        }}
+      />
+      <div className="flex items-center gap-3 text-xs text-slate-400">
+        <span
+          className={
+            participant.mutedAudio ? "text-amber-400" : "text-emerald-300"
+          }
+        >
+          {participant.mutedAudio ? "Audio muted" : "Audio on"}
+        </span>
+        <span
+          className={
+            participant.mutedVideo ? "text-amber-400" : "text-emerald-300"
+          }
+        >
+          {participant.mutedVideo ? "Video muted" : "Video on"}
+        </span>
+      </div>
+    </div>
+  );
+};

package/src/RosterList.tsx

@@ -0,0 +1,34 @@
+import type { FC } from "react";
+import type { RosterEntry } from "./types";
+
+export const RosterList: FC<{ roster: RosterEntry[]; selfId?: string }> = ({
+  roster,
+  selfId,
+}) => {
+  return (
+    <div className="grid gap-2">
+      {roster.length === 0 && (
+        <div className="text-slate-400 text-sm">No peers joined yet</div>
+      )}
+      {roster.map((entry) => {
+        const tone =
+          entry.id === selfId
+            ? "bg-emerald-100 text-emerald-900"
+            : "bg-slate-800 text-slate-200";
+        return (
+          <div
+            key={entry.id}
+            className={`flex items-center justify-between rounded-lg border border-slate-800 px-3 py-2 ${tone}`}
+          >
+            <span className="font-semibold truncate">
+              {entry.label ?? entry.id}
+            </span>
+            <span className="text-xs opacity-80">
+              {entry.id === selfId ? "You" : entry.status ?? "Peer"}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/icons.tsx

@@ -0,0 +1,89 @@
+import type { SVGProps } from "react";
+
+export const VideoIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.6"
+    {...props}
+  >
+    <path d="M3 7.5A2.5 2.5 0 0 1 5.5 5h7A2.5 2.5 0 0 1 15 7.5v9A2.5 2.5 0 0 1 12.5 19h-7A2.5 2.5 0 0 1 3 16.5v-9Z" />
+    <path d="M15 10.5 20.5 7v10l-5.5-3V10.5Z" />
+  </svg>
+);
+
+export const MicIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.6"
+    {...props}
+  >
+    <rect x="7" y="4" width="10" height="12" rx="3" />
+    <path d="M5 11v1a7 7 0 0 0 14 0v-1" />
+    <path d="M12 19v2" />
+  </svg>
+);
+
+export const PhoneIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.6"
+    {...props}
+  >
+    <path d="M5 4h4l1.5 4-2 1a10 10 0 0 0 5.5 5.5l1-2L19 15v4a2 2 0 0 1-2 2 14 14 0 0 1-14-14 2 2 0 0 1 2-2Z" />
+  </svg>
+);
+
+export const ScreenIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.6"
+    {...props}
+  >
+    <rect x="3" y="5" width="18" height="12" rx="2" />
+    <path d="M8 19h8" />
+  </svg>
+);
+
+export const ChatIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.6"
+    {...props}
+  >
+    <path d="M5 5h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H9l-4 3v-5H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z" />
+  </svg>
+);
+
+export const SignalIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.6"
+    {...props}
+  >
+    <path d="M4 18h2v-4H4v4Zm5 0h2V8H9v10Zm5 0h2V4h-2v14Zm5 0h2v-7h-2v7Z" />
+  </svg>
+);
+
+export const WifiOffIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.6"
+    {...props}
+  >
+    <path d="m3 3 18 18M7.5 7.1A13 13 0 0 1 12 6c1.9 0 3.7.4 5.4 1.2M5 10.2A10 10 0 0 1 12 8c1.6 0 3.2.3 4.6 1M7 13.3A7 7 0 0 1 12 12c1.4 0 2.6.3 3.8.9M9.5 16.4A3.5 3.5 0 0 1 12 16c.5 0 1 .1 1.5.3" />
+  </svg>
+);

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./types";
+export * from "./ConnectionBadge";
+export * from "./ParticipantTile";
+export * from "./ParticipantGrid";
+export * from "./RosterList";
+export * from "./ControlBar";
+export * from "./ChatPanel";
+export * from "./icons";

package/src/types.ts

@@ -0,0 +1,31 @@
+export type ParticipantView = {
+  id: string;
+  label?: string;
+  stream?: MediaStream | null;
+  connectionState?: RTCPeerConnectionState;
+  iceState?: RTCIceConnectionState;
+  mutedAudio?: boolean;
+  mutedVideo?: boolean;
+  isLocal?: boolean;
+};
+
+export type RosterEntry = {
+  id: string;
+  label?: string;
+  status?: "self" | "peer" | "connecting";
+};
+
+export type ControlHandlers = {
+  onJoin?: () => void;
+  onLeave?: () => void;
+  onMuteAudio?: (mute: boolean) => void;
+  onMuteVideo?: (mute: boolean) => void;
+  onScreenShare?: (enable: boolean) => void;
+  onReset?: () => void;
+};
+
+export type ConnectionStatus = {
+  signaling?: "idle" | "connecting" | "open" | "closed";
+  media?: "off" | "requesting" | "ready";
+  data?: "idle" | "ready";
+};

package/tsconfig.json

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