@nice2dev/ui-communication 1.0.2

package/README.md

@@ -0,0 +1,44 @@
+# @nice2dev/ui-communication
+
+> Full-featured communication suite for React — chat, DMs, channels, audio/video calls, whiteboard, recordings, E2E encryption.
+
+## Features
+
+### NiceCommunication
+
+Main entry-point with 7 modes:
+
+| Mode | Description |
+|------|-------------|
+| **bubble** | Floating chat bubble (customer support style) |
+| **chat** | Standalone chat panel |
+| **messenger** | Full messenger with contact list |
+| **workspace** | Teams-style workspace with rail navigation |
+| **call** | Audio/video call UI |
+| **conference** | Multi-participant conference |
+| **whiteboard** | Collaborative whiteboard |
+
+### Components
+
+- **NiceTeamsWorkspace** — Teams-style workspace with rail navigation + whiteboard integration
+- **NiceWhiteboard** — Collaborative whiteboard with 15 tools, multi-user cursors, CRDT, layers, zoom/pan, export PNG/SVG
+- **NiceCollaborativeEditor** — Overlay for any editor: cursors, avatars, follow-user, conflict banner, read-only mode
+- **NiceStorageSettings** — Data retention configuration (8 data types) + per-scope encryption + usage bar
+- **NiceRecordingPanel** — Recording management + live timer + audio player + transcript preview (Web Speech API)
+
+### Services
+
+- **EncryptionService** — Web Crypto API: AES-GCM-128/256, E2E-ECDH-P384, ECDSA signatures
+- **StorageService** — IndexedDB/localStorage + retention rules (8 data types) + export/import
+- **RecordingService** — MediaRecorder + Web Speech API transcription + export/delete
+- **useWhiteboard** — CRDT hook (undo/redo, auto-save, remote op dedup with vector clock)
+
+## Installation
+
+```bash
+npm install @nice2dev/ui-communication
+```
+
+## License
+
+MIT © NiceToDev

package/dist/components/NiceCallScreen.d.ts

@@ -0,0 +1,4 @@
+import { NiceCallScreenProps } from '../types/communicationTypes';
+
+export declare function NiceCallScreen({ session, currentUser, localStream, enableScreenSharing, enableRecording, onEndCall, onMuteAudio, onMuteVideo, onStartScreenShare, onStopScreenShare, onRaiseHand, className, style, id, 'data-testid': testId, }: NiceCallScreenProps): import("react/jsx-runtime").JSX.Element;
+export default NiceCallScreen;

package/dist/components/NiceChannelView.d.ts

@@ -0,0 +1,4 @@
+import { NiceChannelViewProps } from '../types/communicationTypes';
+
+export declare function NiceChannelView({ channel, messages, users, currentUser, team, isLoading, hasMore, enableThreads, enableReactions, enableAttachments, onSendMessage, onEditMessage, onDeleteMessage, onReactToMessage, onPinMessage, onLoadMoreMessages, onStartCall, className, style, id, 'data-testid': testId, }: NiceChannelViewProps): import("react/jsx-runtime").JSX.Element;
+export default NiceChannelView;

package/dist/components/NiceChatWindow.d.ts

@@ -0,0 +1,4 @@
+import { NiceChatWindowProps } from '../types/communicationTypes';
+
+export declare function NiceChatWindow({ conversation, messages, users, currentUser, isLoading, hasMore, showHeader, showUserAvatars, enableReactions, enableThreads, enableAttachments, placeholder, maxMessageLength, onSendMessage, onEditMessage, onDeleteMessage, onReactToMessage, onPinMessage, onLoadMoreMessages, onStartCall, className, style, id, 'data-testid': testId, }: NiceChatWindowProps): import("react/jsx-runtime").JSX.Element;
+export default NiceChatWindow;

package/dist/components/NiceCollaborativeEditor.d.ts

@@ -0,0 +1,3 @@
+import { NiceCollaborativeEditorProps } from '../types/communicationTypes';
+
+export declare function NiceCollaborativeEditor({ editorType, sessionId, currentUser, participants: propParticipants, onOperation, onParticipantJoin, onParticipantLeave, onCursorMove, isReadOnly, showParticipants, showCursors, pendingOperations, conflictCount, className, style, children, 'data-testid': testId, }: NiceCollaborativeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NiceCommunication.d.ts

@@ -0,0 +1,24 @@
+import { NiceCommunicationProps } from '../types/communicationTypes';
+
+/**
+ * NiceCommunication — the single entry-point component that covers every
+ * communication scenario, from a floating chat bubble to a full
+ * MS Teams–equivalent workspace, including WebRTC audio/video calls
+ * and multi-person video conferences.
+ *
+ * @example — bubble
+ * ```tsx
+ * <NiceCommunication mode="bubble" currentUser={me} users={[]} conversations={[conv]}
+ *   messages={{ [conv.id]: [] }} onSendMessage={handleSend} />
+ * ```
+ *
+ * @example — full workspace
+ * ```tsx
+ * <NiceCommunication mode="workspace" currentUser={me} users={users} teams={teams}
+ *   conversations={dms} messages={messages} transport="webrtc"
+ *   rtcConfig={{ signalingUrl: 'wss://…', iceServers: [{ urls: 'stun:…' }] }}
+ *   onSendMessage={handleSend} onStartCall={handleCall} />
+ * ```
+ */
+export declare function NiceCommunication(props: NiceCommunicationProps): import("react/jsx-runtime").JSX.Element;
+export default NiceCommunication;

package/dist/components/NiceMessenger.d.ts

@@ -0,0 +1,4 @@
+import { NiceMessengerProps } from '../types/communicationTypes';
+
+export declare function NiceMessenger({ conversations, messages, users, currentUser, activeConversationId, teams, enableGroupConversations, showPresence, enableSearch, onSendMessage, onEditMessage, onDeleteMessage, onReactToMessage, onPinMessage, onLoadMoreMessages, onMarkAsRead, onStartCall, onCreateConversation, className, style, id, 'data-testid': testId, }: NiceMessengerProps): import("react/jsx-runtime").JSX.Element;
+export default NiceMessenger;

package/dist/components/NicePresenceIndicator.d.ts

@@ -0,0 +1,4 @@
+import { NicePresenceIndicatorProps } from '../types/communicationTypes';
+
+export declare function NicePresenceIndicator({ status, size, showLabel, showTooltip, className, style, id, 'data-testid': testId, }: NicePresenceIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export default NicePresenceIndicator;

package/dist/components/NiceRecordingPanel.d.ts

@@ -0,0 +1,3 @@
+import { NiceRecordingPanelProps } from '../types/communicationTypes';
+
+export declare function NiceRecordingPanel({ recordings: externalRecordings, onRecordingStart, onRecordingStop, onRecordingPause, onRecordingResume, onRecordingDelete, onRecordingDownload, activeRecordingId, sessionType, className, style, 'data-testid': testId, }: NiceRecordingPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NiceStorageSettings.d.ts

@@ -0,0 +1,3 @@
+import { NiceStorageSettingsProps } from '../types/communicationTypes';
+
+export declare function NiceStorageSettings({ storageConfig, encryptionConfig, onStorageConfigChange, onEncryptionConfigChange, currentUsageBytes, showEncryption, showRetention, showQuota, className, style, 'data-testid': testId, }: NiceStorageSettingsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/NiceTeamsWorkspace.d.ts

@@ -0,0 +1,4 @@
+import { NiceTeamsWorkspaceProps } from '../types/communicationTypes';
+
+export declare function NiceTeamsWorkspace({ currentUser, users, teams, conversations, messages, activeCall, incomingCall, meetings, transport: _transport, rtcConfig: _rtcConfig, enableCalls, enableMeetings, enableScreenSharing, enableWhiteboard, storageConfig, onSendMessage, onEditMessage, onDeleteMessage, onReactToMessage, onPinMessage, onLoadMoreMessages, onMarkAsRead, onStartCall, onAcceptCall, onDeclineCall, onEndCall, onMuteAudio, onMuteVideo, onStartScreenShare, onStopScreenShare, className, style, id, 'data-testid': testId, }: NiceTeamsWorkspaceProps): import("react/jsx-runtime").JSX.Element;
+export default NiceTeamsWorkspace;

package/dist/components/NiceVideoConference.d.ts

@@ -0,0 +1,4 @@
+import { NiceVideoConferenceProps } from '../types/communicationTypes';
+
+export declare function NiceVideoConference({ session, currentUser, localStream, enableScreenSharing, enableRecording, enableTranscription, enableRaiseHand, maxGridCols, onEndCall, onMuteAudio, onMuteVideo, onStartScreenShare, onStopScreenShare, onRaiseHand, className, style, id, 'data-testid': testId, }: NiceVideoConferenceProps): import("react/jsx-runtime").JSX.Element;
+export default NiceVideoConference;

package/dist/components/NiceWhiteboard.d.ts

@@ -0,0 +1,3 @@
+import { NiceWhiteboardProps } from '../types/communicationTypes';
+
+export declare function NiceWhiteboard({ session: initialSession, currentUser, onOperation, remoteOperations, readonly, enableLayers, enableExport, enableLaserPointer, enableVectorEditor, enableDiagramEditor, onExport, onSessionUpdate, storageConfig, className, style, 'data-testid': testId, }: NiceWhiteboardProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useCommunication.d.ts

@@ -0,0 +1,47 @@
+import { CallSession, CallType, ChatMessage, CommunicationMode, CommunicationUser, Conversation, IncomingCall, MessageContentType, RTCTransportConfig, TransportType } from '../types/communicationTypes';
+import { ICommunicationTransport } from '../transport/communicationTransport';
+
+export interface CommunicationState {
+    isConnected: boolean;
+    activeCall: CallSession | null;
+    incomingCall: IncomingCall | null;
+    localStream: MediaStream | null;
+    isMicMuted: boolean;
+    isCameraMuted: boolean;
+    isScreenSharing: boolean;
+    screenStream: MediaStream | null;
+    isHandRaised: boolean;
+    connectionError: string | null;
+}
+export interface UseCommunicationOptions {
+    currentUser: CommunicationUser;
+    transport?: TransportType;
+    rtcConfig?: RTCTransportConfig;
+    signalingUrl?: string;
+    autoConnect?: boolean;
+    onCallEnded?: (callId: string) => void;
+    onIncomingCall?: (call: IncomingCall) => void;
+    onStreamAdded?: (participantId: string, stream: MediaStream) => void;
+    onStreamRemoved?: (participantId: string) => void;
+    onError?: (error: Error) => void;
+}
+export declare function useCommunication(options: UseCommunicationOptions): {
+    readonly state: CommunicationState;
+    readonly connect: (url: string) => Promise<void>;
+    readonly disconnect: () => void;
+    readonly startCall: (participantIds: string[], type?: CallType) => Promise<CallSession>;
+    readonly acceptCall: () => Promise<void>;
+    readonly declineCall: () => void;
+    readonly endCall: () => void;
+    readonly toggleMic: () => void;
+    readonly toggleCamera: () => void;
+    readonly startScreenShare: () => Promise<void>;
+    readonly stopScreenShare: () => void;
+    readonly toggleHand: () => void;
+    readonly transport: import('react').MutableRefObject<ICommunicationTransport | null>;
+};
+export declare function buildOptimisticMessage(conversationId: string, authorId: string, content: string, contentType?: MessageContentType): ChatMessage;
+export declare function findConversationPartner(conversation: Conversation, currentUserId: string, users: CommunicationUser[]): CommunicationUser | undefined;
+export declare function getUnreadCount(conversations: Conversation[]): number;
+export declare function getMentionCount(conversations: Conversation[]): number;
+export declare function getDefaultMode(hasTeams: boolean, hasConversations: boolean): CommunicationMode;

package/dist/hooks/useWhiteboard.d.ts

@@ -0,0 +1,63 @@
+import { WhiteboardSession, WhiteboardObject, WhiteboardLayer, WhiteboardCollaborator, WhiteboardOperation, WhiteboardToolType, WhiteboardViewport, CommunicationUser, StorageConfig } from '../types/communicationTypes';
+
+export interface WhiteboardState {
+    session: WhiteboardSession;
+    activeTool: WhiteboardToolType;
+    selectedObjectIds: string[];
+    undoStack: WhiteboardOperation[][];
+    redoStack: WhiteboardOperation[][];
+    isDrawing: boolean;
+    isPanning: boolean;
+    isDirty: boolean;
+    lastSavedAt?: Date;
+}
+export interface UseWhiteboardOptions {
+    session: WhiteboardSession;
+    currentUser: CommunicationUser;
+    /** Called when a local op should be broadcast to peers */
+    onOperation?: (op: WhiteboardOperation) => void;
+    /** Remote operation queue from parent */
+    remoteOperations?: WhiteboardOperation[];
+    readonly?: boolean;
+    storageConfig?: StorageConfig;
+    /** Auto-save interval in ms (0 = disabled) */
+    autoSaveMs?: number;
+}
+export declare function useWhiteboard(opts: UseWhiteboardOptions): {
+    session: WhiteboardSession;
+    activeTool: WhiteboardToolType;
+    selectedObjectIds: string[];
+    isDrawing: boolean;
+    isPanning: boolean;
+    isDirty: boolean;
+    lastSavedAt: Date | undefined;
+    canUndo: boolean;
+    canRedo: boolean;
+    collaborators: WhiteboardCollaborator[];
+    objects: WhiteboardObject[];
+    layers: WhiteboardLayer[];
+    viewport: WhiteboardViewport;
+    setTool: (tool: WhiteboardToolType) => void;
+    addObject: (obj: WhiteboardObject) => void;
+    updateObject: (obj: WhiteboardObject) => void;
+    deleteObjects: (ids: string[]) => void;
+    moveObjects: (moves: Array<{
+        id: string;
+        x: number;
+        y: number;
+    }>) => void;
+    setSelection: (ids: string[]) => void;
+    undo: () => void;
+    redo: () => void;
+    setViewport: (viewport: WhiteboardViewport) => void;
+    broadcastCursor: (x: number, y: number) => void;
+    addLayer: (name: string) => void;
+    updateLayer: (updates: Partial<WhiteboardLayer> & {
+        id: string;
+    }) => void;
+    deleteLayer: (id: string) => void;
+    registerCollaborator: (user: CommunicationUser) => void;
+    removeCollaborator: (userId: string) => void;
+    saveNow: () => Promise<void>;
+};
+export type UseWhiteboardReturn = ReturnType<typeof useWhiteboard>;