peer-client 1.0.0

package/dist/crypto.js

@@ -0,0 +1,168 @@
+import { Emitter } from './core/emitter';
+export class E2E extends Emitter {
+    keys = new Map();
+    keyPair = null;
+    publicKeyRaw = null;
+    async init() {
+        this.keyPair = await crypto.subtle.generateKey({ name: 'ECDH', namedCurve: 'P-256' }, false, ['deriveBits']);
+        const raw = await crypto.subtle.exportKey('raw', this.keyPair.publicKey);
+        this.publicKeyRaw = new Uint8Array(raw).buffer;
+    }
+    getPublicKeyB64() {
+        if (!this.publicKeyRaw)
+            throw new Error('E2E not initialized');
+        return btoa(String.fromCharCode(...new Uint8Array(this.publicKeyRaw)));
+    }
+    getPublicKeyRaw() {
+        if (!this.publicKeyRaw)
+            throw new Error('E2E not initialized');
+        return this.publicKeyRaw;
+    }
+    async deriveKey(peerFingerprint, remotePublicKeyB64) {
+        if (!this.keyPair)
+            throw new Error('E2E not initialized');
+        const raw = Uint8Array.from(atob(remotePublicKeyB64), (c) => c.charCodeAt(0));
+        const remoteKey = await crypto.subtle.importKey('raw', raw, { name: 'ECDH', namedCurve: 'P-256' }, false, []);
+        const bits = await crypto.subtle.deriveBits({ name: 'ECDH', public: remoteKey }, this.keyPair.privateKey, 256);
+        const aesKey = await crypto.subtle.importKey('raw', bits, { name: 'AES-GCM', length: 256 }, false, ['encrypt', 'decrypt']);
+        this.keys.set(peerFingerprint, aesKey);
+        this.emit('key_exchanged', peerFingerprint);
+    }
+    async encrypt(peerFingerprint, data) {
+        const key = this.keys.get(peerFingerprint);
+        if (!key)
+            throw new Error(`No key for ${peerFingerprint}`);
+        const iv = crypto.getRandomValues(new Uint8Array(12));
+        const encoded = new TextEncoder().encode(data);
+        const encrypted = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, encoded);
+        const combined = new Uint8Array(iv.length + encrypted.byteLength);
+        combined.set(iv);
+        combined.set(new Uint8Array(encrypted), iv.length);
+        return btoa(String.fromCharCode(...combined));
+    }
+    async decrypt(peerFingerprint, data) {
+        const key = this.keys.get(peerFingerprint);
+        if (!key)
+            throw new Error(`No key for ${peerFingerprint}`);
+        const combined = Uint8Array.from(atob(data), (c) => c.charCodeAt(0));
+        const iv = combined.slice(0, 12);
+        const ciphertext = combined.slice(12);
+        const decrypted = await crypto.subtle.decrypt({ name: 'AES-GCM', iv }, key, ciphertext);
+        return new TextDecoder().decode(decrypted);
+    }
+    hasKey(peerFingerprint) {
+        return this.keys.has(peerFingerprint);
+    }
+    removeKey(peerFingerprint) {
+        this.keys.delete(peerFingerprint);
+    }
+    destroy() {
+        this.keys.clear();
+        this.keyPair = null;
+        this.publicKeyRaw = null;
+        this.removeAllListeners();
+    }
+}
+export class GroupKeyManager {
+    e2e;
+    client;
+    constructor(client) {
+        this.client = client;
+        this.e2e = new E2E();
+    }
+    getE2E() {
+        return this.e2e;
+    }
+    async init() {
+        await this.e2e.init();
+    }
+    async exchangeWith(peer) {
+        if (peer.connectionState !== 'connected') {
+            await this.waitForConnection(peer);
+        }
+        const pubKey = this.e2e.getPublicKeyB64();
+        const identity = this.client.getIdentity();
+        let signature;
+        if (identity.getPrivateKey()) {
+            const sigRaw = await identity.sign(this.e2e.getPublicKeyRaw());
+            signature = btoa(String.fromCharCode(...new Uint8Array(sigRaw)));
+        }
+        peer.send({
+            _e2e_key_exchange: true,
+            publicKey: pubKey,
+            signature,
+            fingerprint: this.client.fingerprint,
+        }, 'data');
+        return new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                off();
+                reject(new Error('Key exchange timeout'));
+            }, 10000);
+            const off = peer.on('data', async (data) => {
+                if (data?._e2e_key_exchange && data.publicKey) {
+                    off();
+                    clearTimeout(timeout);
+                    try {
+                        await this.e2e.deriveKey(peer.fingerprint, data.publicKey);
+                        resolve();
+                    }
+                    catch (e) {
+                        reject(e);
+                    }
+                }
+            });
+        });
+    }
+    async handleIncomingKeyExchange(peer, data) {
+        if (data?._e2e_key_exchange && data.publicKey) {
+            await this.e2e.deriveKey(peer.fingerprint, data.publicKey);
+            if (peer.connectionState !== 'connected') {
+                await this.waitForConnection(peer);
+            }
+            const pubKey = this.e2e.getPublicKeyB64();
+            const identity = this.client.getIdentity();
+            let signature;
+            if (identity.getPrivateKey()) {
+                const sigRaw = await identity.sign(this.e2e.getPublicKeyRaw());
+                signature = btoa(String.fromCharCode(...new Uint8Array(sigRaw)));
+            }
+            peer.send({
+                _e2e_key_exchange: true,
+                publicKey: pubKey,
+                signature,
+                fingerprint: this.client.fingerprint,
+            }, 'data');
+        }
+    }
+    async encryptForPeer(fingerprint, data) {
+        const json = typeof data === 'string' ? data : JSON.stringify(data);
+        return this.e2e.encrypt(fingerprint, json);
+    }
+    async decryptFromPeer(fingerprint, data) {
+        const json = await this.e2e.decrypt(fingerprint, data);
+        try {
+            return JSON.parse(json);
+        }
+        catch {
+            return json;
+        }
+    }
+    waitForConnection(peer, timeout = 10000) {
+        if (peer.connectionState === 'connected')
+            return Promise.resolve();
+        return new Promise((resolve, reject) => {
+            const timer = setTimeout(() => {
+                off();
+                reject(new Error('Connection timeout for key exchange'));
+            }, timeout);
+            const off = peer.on('connected', () => {
+                off();
+                clearTimeout(timer);
+                resolve();
+            });
+        });
+    }
+    destroy() {
+        this.e2e.destroy();
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { PeerClient } from './core/client';
+export { Peer } from './core/peer';
+export { Identity } from './core/identity';
+export { Transport } from './core/transport';
+export { Emitter, setEmitterErrorHandler } from './core/emitter';
+export { DirectRoom, GroupRoom } from './room';
+export { DirectMedia, GroupMedia } from './media';
+export { JSONTransfer, FileTransfer, ImageTransfer } from './transfer';
+export { StateSync, CRDTSync } from './sync';
+export { E2E, GroupKeyManager } from './crypto';
+export * from './core/types';

package/dist/index.js

@@ -0,0 +1,11 @@
+export { PeerClient } from './core/client';
+export { Peer } from './core/peer';
+export { Identity } from './core/identity';
+export { Transport } from './core/transport';
+export { Emitter, setEmitterErrorHandler } from './core/emitter';
+export { DirectRoom, GroupRoom } from './room';
+export { DirectMedia, GroupMedia } from './media';
+export { JSONTransfer, FileTransfer, ImageTransfer } from './transfer';
+export { StateSync, CRDTSync } from './sync';
+export { E2E, GroupKeyManager } from './crypto';
+export * from './core/types';

package/dist/media.d.ts

@@ -0,0 +1,63 @@
+import { Emitter } from './core/emitter';
+import type { PeerClient } from './core/client';
+import type { PeerInfo, MediaConfig } from './core/types';
+type MediaEvent = 'local_stream' | 'remote_stream' | 'remote_stream_removed' | 'peer_joined' | 'peer_left' | 'muted' | 'unmuted' | 'error' | 'closed';
+export declare class DirectMedia extends Emitter<MediaEvent> {
+    private client;
+    private roomId;
+    private localStream;
+    private remoteStream;
+    private remotePeer;
+    private remoteFingerprint;
+    private _closed;
+    private cleanups;
+    constructor(client: PeerClient, roomId: string);
+    start(config?: MediaConfig): Promise<MediaStream>;
+    createAndJoin(config?: MediaConfig): Promise<MediaStream>;
+    joinAndStart(config?: MediaConfig): Promise<{
+        stream: MediaStream;
+        peers: PeerInfo[];
+    }>;
+    private listen;
+    private connectTo;
+    muteAudio(): void;
+    unmuteAudio(): void;
+    muteVideo(): void;
+    unmuteVideo(): void;
+    isAudioMuted(): boolean;
+    isVideoMuted(): boolean;
+    getLocalStream(): MediaStream | null;
+    getRemoteStream(): MediaStream | null;
+    close(): void;
+}
+export declare class GroupMedia extends Emitter<MediaEvent> {
+    private client;
+    private roomId;
+    private localStream;
+    private remoteStreams;
+    private mediaPeers;
+    private _closed;
+    private cleanups;
+    constructor(client: PeerClient, roomId: string);
+    start(config?: MediaConfig): Promise<MediaStream>;
+    createAndJoin(config?: MediaConfig): Promise<MediaStream>;
+    joinAndStart(config?: MediaConfig): Promise<{
+        stream: MediaStream;
+        peers: PeerInfo[];
+    }>;
+    private listen;
+    private connectTo;
+    muteAudio(): void;
+    unmuteAudio(): void;
+    muteVideo(): void;
+    unmuteVideo(): void;
+    isAudioMuted(): boolean;
+    isVideoMuted(): boolean;
+    getLocalStream(): MediaStream | null;
+    getRemoteStreams(): Map<string, MediaStream>;
+    getRemoteStream(fingerprint: string): MediaStream | undefined;
+    getPeerCount(): number;
+    kick(fingerprint: string): void;
+    close(): void;
+}
+export {};

package/dist/media.js

@@ -0,0 +1,275 @@
+import { Emitter } from './core/emitter';
+import { LIMITS } from './core/types';
+export class DirectMedia extends Emitter {
+    client;
+    roomId;
+    localStream = null;
+    remoteStream = null;
+    remotePeer = null;
+    remoteFingerprint = '';
+    _closed = false;
+    cleanups = [];
+    constructor(client, roomId) {
+        super();
+        this.client = client;
+        this.roomId = roomId;
+    }
+    async start(config = { audio: true, video: true }) {
+        this.localStream = await navigator.mediaDevices.getUserMedia({
+            audio: config.audio ?? true,
+            video: config.video ?? true,
+        });
+        this.emit('local_stream', this.localStream);
+        return this.localStream;
+    }
+    async createAndJoin(config) {
+        const stream = await this.start(config);
+        try {
+            await this.client.createRoom(this.roomId, { maxSize: 2 });
+        }
+        catch (e) {
+            this.emit('error', e);
+        }
+        this.listen();
+        return stream;
+    }
+    async joinAndStart(config) {
+        const stream = await this.start(config);
+        const peers = await this.client.joinRoom(this.roomId);
+        this.listen();
+        const remote = peers.find((p) => p.fingerprint !== this.client.fingerprint);
+        if (remote) {
+            this.connectTo(remote.fingerprint, remote.alias);
+        }
+        return { stream, peers };
+    }
+    listen() {
+        const offJoined = this.client.on('peer_joined', (info) => {
+            this.emit('peer_joined', info);
+            if (!this.remotePeer) {
+                this.connectTo(info.fingerprint, info.alias);
+            }
+        });
+        const offLeft = this.client.on('peer_left', (fp) => {
+            if (fp === this.remoteFingerprint) {
+                this.remotePeer = null;
+                this.remoteFingerprint = '';
+                this.remoteStream = null;
+                this.emit('remote_stream_removed', fp);
+                this.emit('peer_left', fp);
+            }
+        });
+        const offKicked = this.client.on('kicked', (payload) => {
+            if (payload?.room_id === this.roomId) {
+                this.close();
+            }
+        });
+        this.cleanups.push(offJoined, offLeft, offKicked);
+    }
+    connectTo(fingerprint, alias) {
+        this.remoteFingerprint = fingerprint;
+        const peer = this.client.createPeer(fingerprint, alias);
+        this.remotePeer = peer;
+        if (this.localStream) {
+            peer.addStream(this.localStream);
+        }
+        peer.on('stream', (stream) => {
+            this.remoteStream = stream;
+            this.emit('remote_stream', stream, fingerprint);
+        });
+        peer.on('disconnected', () => {
+            this.remoteStream = null;
+            this.emit('remote_stream_removed', fingerprint);
+            this.emit('peer_left', fingerprint);
+        });
+        peer.createOffer();
+    }
+    muteAudio() {
+        this.localStream?.getAudioTracks().forEach((t) => (t.enabled = false));
+        this.emit('muted', 'audio');
+    }
+    unmuteAudio() {
+        this.localStream?.getAudioTracks().forEach((t) => (t.enabled = true));
+        this.emit('unmuted', 'audio');
+    }
+    muteVideo() {
+        this.localStream?.getVideoTracks().forEach((t) => (t.enabled = false));
+        this.emit('muted', 'video');
+    }
+    unmuteVideo() {
+        this.localStream?.getVideoTracks().forEach((t) => (t.enabled = true));
+        this.emit('unmuted', 'video');
+    }
+    isAudioMuted() {
+        const track = this.localStream?.getAudioTracks()[0];
+        return track ? !track.enabled : true;
+    }
+    isVideoMuted() {
+        const track = this.localStream?.getVideoTracks()[0];
+        return track ? !track.enabled : true;
+    }
+    getLocalStream() {
+        return this.localStream;
+    }
+    getRemoteStream() {
+        return this.remoteStream;
+    }
+    close() {
+        if (this._closed)
+            return;
+        this._closed = true;
+        this.cleanups.forEach((fn) => fn());
+        this.cleanups = [];
+        this.localStream?.getTracks().forEach((t) => t.stop());
+        this.localStream = null;
+        this.remoteStream = null;
+        if (this.remotePeer) {
+            this.remotePeer.close();
+            this.remotePeer = null;
+        }
+        this.client.leave(this.roomId);
+        this.emit('closed');
+        this.removeAllListeners();
+    }
+}
+export class GroupMedia extends Emitter {
+    client;
+    roomId;
+    localStream = null;
+    remoteStreams = new Map();
+    mediaPeers = new Map();
+    _closed = false;
+    cleanups = [];
+    constructor(client, roomId) {
+        super();
+        this.client = client;
+        this.roomId = roomId;
+    }
+    async start(config = { audio: true, video: true }) {
+        this.localStream = await navigator.mediaDevices.getUserMedia({
+            audio: config.audio ?? true,
+            video: config.video ?? true,
+        });
+        this.emit('local_stream', this.localStream);
+        return this.localStream;
+    }
+    async createAndJoin(config) {
+        const stream = await this.start(config);
+        await this.client.createRoom(this.roomId, { maxSize: LIMITS.MAX_MEDIA_PEERS });
+        this.listen();
+        return stream;
+    }
+    async joinAndStart(config) {
+        const stream = await this.start(config);
+        const peers = await this.client.joinRoom(this.roomId);
+        this.listen();
+        const others = peers.filter((p) => p.fingerprint !== this.client.fingerprint);
+        for (const p of others) {
+            if (this.mediaPeers.size < LIMITS.MAX_MEDIA_PEERS - 1) {
+                this.connectTo(p.fingerprint, p.alias);
+            }
+        }
+        return { stream, peers };
+    }
+    listen() {
+        const offJoined = this.client.on('peer_joined', (info) => {
+            this.emit('peer_joined', info);
+            if (this.mediaPeers.size < LIMITS.MAX_MEDIA_PEERS - 1) {
+                this.connectTo(info.fingerprint, info.alias);
+            }
+        });
+        const offLeft = this.client.on('peer_left', (fp) => {
+            const peer = this.mediaPeers.get(fp);
+            if (peer) {
+                peer.close();
+                this.mediaPeers.delete(fp);
+            }
+            if (this.remoteStreams.has(fp)) {
+                this.remoteStreams.delete(fp);
+                this.emit('remote_stream_removed', fp);
+            }
+            this.emit('peer_left', fp);
+        });
+        const offKicked = this.client.on('kicked', (payload) => {
+            if (payload?.room_id === this.roomId) {
+                this.close();
+            }
+        });
+        this.cleanups.push(offJoined, offLeft, offKicked);
+    }
+    connectTo(fingerprint, alias) {
+        if (this.mediaPeers.has(fingerprint))
+            return;
+        const peer = this.client.createPeer(fingerprint, alias);
+        this.mediaPeers.set(fingerprint, peer);
+        if (this.localStream) {
+            peer.addStream(this.localStream);
+        }
+        peer.on('stream', (stream) => {
+            this.remoteStreams.set(fingerprint, stream);
+            this.emit('remote_stream', stream, fingerprint);
+        });
+        peer.on('disconnected', () => {
+            this.mediaPeers.delete(fingerprint);
+            if (this.remoteStreams.has(fingerprint)) {
+                this.remoteStreams.delete(fingerprint);
+                this.emit('remote_stream_removed', fingerprint);
+            }
+        });
+        peer.createOffer();
+    }
+    muteAudio() {
+        this.localStream?.getAudioTracks().forEach((t) => (t.enabled = false));
+        this.emit('muted', 'audio');
+    }
+    unmuteAudio() {
+        this.localStream?.getAudioTracks().forEach((t) => (t.enabled = true));
+        this.emit('unmuted', 'audio');
+    }
+    muteVideo() {
+        this.localStream?.getVideoTracks().forEach((t) => (t.enabled = false));
+        this.emit('muted', 'video');
+    }
+    unmuteVideo() {
+        this.localStream?.getVideoTracks().forEach((t) => (t.enabled = true));
+        this.emit('unmuted', 'video');
+    }
+    isAudioMuted() {
+        const track = this.localStream?.getAudioTracks()[0];
+        return track ? !track.enabled : true;
+    }
+    isVideoMuted() {
+        const track = this.localStream?.getVideoTracks()[0];
+        return track ? !track.enabled : true;
+    }
+    getLocalStream() {
+        return this.localStream;
+    }
+    getRemoteStreams() {
+        return new Map(this.remoteStreams);
+    }
+    getRemoteStream(fingerprint) {
+        return this.remoteStreams.get(fingerprint);
+    }
+    getPeerCount() {
+        return this.mediaPeers.size;
+    }
+    kick(fingerprint) {
+        this.client.kick(this.roomId, fingerprint);
+    }
+    close() {
+        if (this._closed)
+            return;
+        this._closed = true;
+        this.cleanups.forEach((fn) => fn());
+        this.cleanups = [];
+        this.localStream?.getTracks().forEach((t) => t.stop());
+        this.localStream = null;
+        this.mediaPeers.forEach((p) => p.close());
+        this.mediaPeers.clear();
+        this.remoteStreams.clear();
+        this.client.leave(this.roomId);
+        this.emit('closed');
+        this.removeAllListeners();
+    }
+}

package/dist/react/Audio.d.ts

@@ -0,0 +1,6 @@
+import { type AudioHTMLAttributes } from 'react';
+interface AudioProps extends Omit<AudioHTMLAttributes<HTMLAudioElement>, 'ref'> {
+    stream: MediaStream | null;
+}
+export declare function Audio({ stream, ...props }: AudioProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/Audio.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+export function Audio({ stream, ...props }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        ref.current.srcObject = stream;
+        if (stream) {
+            ref.current.play().catch(() => { });
+        }
+        return () => {
+            if (ref.current)
+                ref.current.srcObject = null;
+        };
+    }, [stream]);
+    return _jsx("audio", { ref: ref, autoPlay: true, ...props });
+}

package/dist/react/PeerProvider.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import { PeerClient } from '../core/client';
+import type { ClientConfig } from '../core/types';
+interface PeerContextValue {
+    client: PeerClient | null;
+    connected: boolean;
+    fingerprint: string;
+    alias: string;
+    error: Error | null;
+}
+export declare function usePeerContext(): PeerContextValue;
+interface PeerProviderProps {
+    config: ClientConfig;
+    children: ReactNode;
+}
+export declare function PeerProvider({ config, children }: PeerProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/PeerProvider.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState, useRef } from 'react';
+import { PeerClient } from '../core/client';
+const PeerContext = createContext({
+    client: null,
+    connected: false,
+    fingerprint: '',
+    alias: '',
+    error: null,
+});
+export function usePeerContext() {
+    return useContext(PeerContext);
+}
+export function PeerProvider({ config, children }) {
+    const [client, setClient] = useState(null);
+    const [connected, setConnected] = useState(false);
+    const [fingerprint, setFingerprint] = useState('');
+    const [alias, setAlias] = useState('');
+    const [error, setError] = useState(null);
+    const configRef = useRef(config);
+    configRef.current = config;
+    useEffect(() => {
+        const c = new PeerClient(configRef.current);
+        setClient(c);
+        const offRegistered = c.on('registered', (fp, a) => {
+            setFingerprint(fp);
+            setAlias(a);
+        });
+        const offDisconnected = c.on('disconnected', () => setConnected(false));
+        const offReconnected = c.on('reconnected', () => setConnected(true));
+        const offError = c.on('error', (e) => setError(e instanceof Error ? e : new Error(String(e))));
+        c.connect()
+            .then(() => setConnected(true))
+            .catch((e) => setError(e instanceof Error ? e : new Error(String(e))));
+        return () => {
+            offRegistered();
+            offDisconnected();
+            offReconnected();
+            offError();
+            c.disconnect();
+            setClient(null);
+            setConnected(false);
+        };
+    }, [config.url]);
+    return (_jsx(PeerContext.Provider, { value: { client, connected, fingerprint, alias, error }, children: children }));
+}

package/dist/react/PeerStatus.d.ts

@@ -0,0 +1,7 @@
+interface PeerStatusProps {
+    state: string;
+    label?: string;
+    className?: string;
+}
+export declare function PeerStatus({ state, label, className }: PeerStatusProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/PeerStatus.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STATE_COLORS = {
+    connected: '#22c55e',
+    connecting: '#eab308',
+    disconnected: '#ef4444',
+    failed: '#ef4444',
+    closed: '#6b7280',
+    new: '#6b7280',
+};
+export function PeerStatus({ state, label, className }) {
+    const color = STATE_COLORS[state] ?? '#6b7280';
+    return (_jsxs("span", { className: className, "data-state": state, children: [_jsx("span", { "data-part": "dot", style: {
+                    display: 'inline-block',
+                    width: 8,
+                    height: 8,
+                    borderRadius: '50%',
+                    backgroundColor: color,
+                    marginRight: 6,
+                } }), _jsx("span", { "data-part": "label", children: label ?? state })] }));
+}

package/dist/react/TransferProgress.d.ts

@@ -0,0 +1,10 @@
+import type { Transfer } from './useFileTransfer';
+interface TransferProgressProps {
+    transfer: Transfer;
+    onAccept?: () => void;
+    onReject?: () => void;
+    onCancel?: () => void;
+    className?: string;
+}
+export declare function TransferProgress({ transfer, onAccept, onReject, onCancel, className }: TransferProgressProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/TransferProgress.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    if (bytes < 1024 * 1024 * 1024)
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+function formatSpeed(bytesPerSecond) {
+    return `${formatBytes(bytesPerSecond)}/s`;
+}
+export function TransferProgress({ transfer, onAccept, onReject, onCancel, className }) {
+    const { filename, size, progress, bytesPerSecond, status, direction } = transfer;
+    return (_jsxs("div", { className: className, "data-status": status, "data-direction": direction, children: [_jsxs("div", { "data-part": "info", children: [_jsx("span", { "data-part": "filename", children: filename }), _jsx("span", { "data-part": "size", children: formatBytes(size) })] }), status === 'active' && (_jsxs("div", { "data-part": "progress", children: [_jsx("div", { "data-part": "bar", style: { width: `${progress}%` } }), _jsxs("span", { "data-part": "percent", children: [Math.round(progress), "%"] }), _jsx("span", { "data-part": "speed", children: formatSpeed(bytesPerSecond) })] })), status === 'pending' && direction === 'receive' && (_jsxs("div", { "data-part": "actions", children: [onAccept && _jsx("button", { onClick: onAccept, "data-action": "accept", children: "Accept" }), onReject && _jsx("button", { onClick: onReject, "data-action": "reject", children: "Reject" })] })), status === 'active' && onCancel && (_jsx("button", { onClick: onCancel, "data-action": "cancel", children: "Cancel" })), status === 'complete' && _jsx("span", { "data-part": "status", children: "Complete" }), status === 'cancelled' && _jsx("span", { "data-part": "status", children: "Cancelled" }), status === 'error' && _jsx("span", { "data-part": "status", children: "Error" })] }));
+}