@ngenux/ngage-whiteboarding 1.0.7 → 1.0.9

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { WhiteboardProvider } from './src/context/WhiteboardContext';
 import { useCapture } from './src/hooks/useCapture';
 import { cn } from './src/lib/utils';
 export { Whiteboard, WhiteboardProvider, useCapture as useWhiteboardStream, cn };
+export { isSocketConnected, getSocket, onSocketStatusChange, onSend, onReceive, leaveRoom, disconnectSocket, waitForSocket } from './src/utils/socket-utility';
 export type { WhiteboardProps } from './src/components/Whiteboard/index';
 export type { ShapeProps, ToolType, StrokeStyle, WhiteboardState, DrawingAction, CompressedData } from './src/types';
 export interface WhiteboardProviderProps {

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,UAAU,IAAI,mBAAmB,EAAE,EAAE,EAAE,CAAC;AAGjF,YAAY,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,YAAY,EACV,UAAU,EACV,QAAQ,EACR,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACf,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,UAAU,IAAI,mBAAmB,EAAE,EAAE,EAAE,CAAC;AAGjF,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,oBAAoB,EACpB,MAAM,EACN,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,aAAa,EACd,MAAM,4BAA4B,CAAC;AAGpC,YAAY,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,YAAY,EACV,UAAU,EACV,QAAQ,EACR,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACf,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/dist/index.esm.js

@@ -34757,12 +34757,15 @@ const whiteboardReducer = (state, action) => {
             // Prevent duplicate shapes during simultaneous drawing
             const newShape = action.payload;
             const existingShapeIndex = state.shapes.findIndex(shape => shape.id === newShape.id);
+            // Ensure shape has timestamp for proper ordering and stale action filtering
+            const timestamp = newShape.timestamp || Date.now();
             // If shape already exists, update it instead of adding duplicate
             if (existingShapeIndex >= 0) {
                 const updatedShapes = [...state.shapes];
                 updatedShapes[existingShapeIndex] = {
                     ...newShape,
-                    drawingSessionId: newShape.drawingSessionId || `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+                    timestamp,
+                    drawingSessionId: newShape.drawingSessionId || `session-${timestamp}-${Math.random().toString(36).substr(2, 9)}`
                 };
                 return {
                     ...state,
@@ -34770,10 +34773,11 @@ const whiteboardReducer = (state, action) => {
                     currentDrawingShape: undefined,
                 };
             }
-            // Add new shape with session tracking
+            // Add new shape with session tracking and timestamp
             const shapeWithSession = {
                 ...newShape,
-                drawingSessionId: newShape.drawingSessionId || `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+                timestamp,
+                drawingSessionId: newShape.drawingSessionId || `session-${timestamp}-${Math.random().toString(36).substr(2, 9)}`
             };
             const newShapes = [...state.shapes, shapeWithSession];
             const newHistory = state.history.slice(0, state.historyIndex + 1);
@@ -34967,11 +34971,13 @@ const whiteboardReducer = (state, action) => {
                 const userShapes = state.shapes
                     .filter(shape => shape.userId === userId)
                     .sort((a, b) => {
-                    // Sort by id (which contains timestamp) or any timestamp property
-                    return a.id.localeCompare(b.id);
+                    // Sort by timestamp to ensure LIFO (Last In First Out) order
+                    const timestampA = a.timestamp || 0;
+                    const timestampB = b.timestamp || 0;
+                    return timestampA - timestampB;
                 });
                 if (userShapes.length > 0) {
-                    // Get the most recent shape
+                    // Get the most recent shape (last in sorted array)
                     const lastUserShape = userShapes[userShapes.length - 1];
                     // Check if there are multiple shapes that were part of the same drawing session
                     // Use drawingSessionId if available, otherwise fall back to time-based detection
@@ -35249,12 +35255,16 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
     };
     const requestStateFromPeers = () => {
         if (currentQueueAction) {
-            currentQueueAction({
-                type: 'request_state',
-                payload: '',
-                requesterId: state.userId,
-                timestamp: Date.now(),
-            });
+            setTimeout(() => {
+                if (currentQueueAction) {
+                    currentQueueAction({
+                        type: 'request_state',
+                        payload: '',
+                        requesterId: state.userId,
+                        timestamp: Date.now(),
+                    });
+                }
+            }, 2000);
         }
         else {
             console.warn('[STATE_SYNC] No queue action available for state request');
@@ -35265,9 +35275,16 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
         // Drawing actions should be filtered if they're older than the last clear
         if (action.type === 'start_draw' || action.type === 'continue_draw' || action.type === 'end_draw' || action.type === 'add') {
             const actionTimestamp = action.timestamp || 0;
-            if (actionTimestamp <= state.lastClearTimestamp) {
+            if (actionTimestamp > 0 && actionTimestamp <= state.lastClearTimestamp) {
                 return true;
             }
+            // Also check timestamp in the payload if it exists
+            if (typeof action.payload === 'object' && action.payload !== null && !Array.isArray(action.payload)) {
+                const payloadTimestamp = action.payload.timestamp || 0;
+                if (payloadTimestamp > 0 && payloadTimestamp <= state.lastClearTimestamp) {
+                    return true;
+                }
+            }
         }
         return false;
     };
@@ -35297,10 +35314,15 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
                     if (syncState.shapes.length === 0) {
                         return; // Don't apply empty state or keep requesting
                     }
-                    // Only apply if the received state has more shapes or we have no shapes
-                    if (state.shapes.length === 0 || syncState.shapes.length > state.shapes.length) {
+                    // Filter out shapes that are older than our last clear
+                    const validShapes = syncState.shapes.filter(shape => {
+                        const shapeTimestamp = shape.timestamp || 0;
+                        return shapeTimestamp === 0 || shapeTimestamp > state.lastClearTimestamp;
+                    });
+                    // Only apply if the received state has valid shapes
+                    if (validShapes.length > 0 && (state.shapes.length === 0 || validShapes.length > state.shapes.length)) {
                         // All shapes from sync_state should have normalized coordinates, denormalize them
-                        const denormalizedShapes = syncState.shapes.map((shape, index) => {
+                        const denormalizedShapes = validShapes.map((shape, index) => {
                             return denormalizeShape(shape);
                         });
                         // Apply the synchronized state
@@ -35318,7 +35340,8 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
                     const denormalizedShape = denormalizeShape(action.payload);
                     // Additional check to prevent adding shapes from before the last clear
                     const shapeTimestamp = denormalizedShape.timestamp || action.timestamp || 0;
-                    if (shapeTimestamp <= state.lastClearTimestamp) {
+                    if (shapeTimestamp > 0 && shapeTimestamp <= state.lastClearTimestamp) {
+                        console.warn(`[APPLY_ACTION] Skipping stale shape from before clear - shape timestamp: ${shapeTimestamp}, clear timestamp: ${state.lastClearTimestamp}`);
                         break;
                     }
                     dispatch({ type: 'ADD_SHAPE', payload: denormalizedShape });
@@ -35372,6 +35395,11 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
             case 'start_draw':
                 if (typeof action.payload !== 'string' && !Array.isArray(action.payload) && isCompleteShape(action.payload)) {
                     const denormalizedShape = denormalizeShape(action.payload);
+                    // Check if this shape is from before the last clear
+                    const shapeTimestamp = denormalizedShape.timestamp || action.timestamp || 0;
+                    if (shapeTimestamp > 0 && shapeTimestamp <= state.lastClearTimestamp) {
+                        break; // Skip stale shapes
+                    }
                     // Only apply collaborative start_draw if it's from another user
                     if (denormalizedShape.userId !== state.userId) {
                         // Add to active drawings for real-time collaborative visibility
@@ -35385,6 +35413,11 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
             case 'continue_draw':
                 if (typeof action.payload !== 'string' && !Array.isArray(action.payload) && isCompleteShape(action.payload)) {
                     const denormalizedShape = denormalizeShape(action.payload);
+                    // Check if this shape is from before the last clear
+                    const shapeTimestamp = denormalizedShape.timestamp || action.timestamp || 0;
+                    if (shapeTimestamp > 0 && shapeTimestamp <= state.lastClearTimestamp) {
+                        break; // Skip stale shapes
+                    }
                     // Only apply collaborative drawing updates if it's not from the current user
                     // to avoid interfering with local real-time drawing
                     if (denormalizedShape.userId !== state.userId) {
@@ -35399,6 +35432,12 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
             case 'end_draw':
                 if (typeof action.payload !== 'string' && !Array.isArray(action.payload) && isCompleteShape(action.payload)) {
                     const denormalizedShape = denormalizeShape(action.payload);
+                    // Check if this shape is from before the last clear
+                    const shapeTimestamp = denormalizedShape.timestamp || action.timestamp || 0;
+                    if (shapeTimestamp > 0 && shapeTimestamp <= state.lastClearTimestamp) {
+                        console.warn(`[APPLY_ACTION] Skipping stale end_draw from before clear - shape timestamp: ${shapeTimestamp}, clear timestamp: ${state.lastClearTimestamp}`);
+                        break; // Skip stale shapes
+                    }
                     // Only apply collaborative end_draw if it's from another user
                     // Local user's end_draw is handled directly in Board component via ADD_SHAPE
                     if (denormalizedShape.userId !== state.userId) {
@@ -36426,7 +36465,8 @@ const BoardComponent = forwardRef(({ roomId = 'default-room', queueAction, hasTo
         }
         // Create new shape ID for regular drawing tools
         const newShapeId = v4();
-        const newDrawingSessionId = `session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const timestamp = Date.now();
+        const newDrawingSessionId = `session-${timestamp}-${Math.random().toString(36).substr(2, 9)}`;
         setCurrentShapeId(newShapeId);
         setCurrentDrawingSessionId(newDrawingSessionId);
         // Start drawing
@@ -36443,6 +36483,7 @@ const BoardComponent = forwardRef(({ roomId = 'default-room', queueAction, hasTo
             strokeStyle: state.strokeStyle,
             opacity: state.opacity,
             drawingSessionId: newDrawingSessionId,
+            timestamp,
             // Initialize transformation properties
             x: 0,
             y: 0,
@@ -36555,6 +36596,7 @@ const BoardComponent = forwardRef(({ roomId = 'default-room', queueAction, hasTo
             strokeStyle: state.strokeStyle,
             opacity: state.opacity,
             drawingSessionId: currentDrawingSessionId,
+            timestamp: Date.now(),
             // Initialize transformation properties
             x: 0,
             y: 0,
@@ -36634,6 +36676,7 @@ const BoardComponent = forwardRef(({ roomId = 'default-room', queueAction, hasTo
             strokeStyle: state.strokeStyle,
             opacity: state.opacity,
             drawingSessionId: currentDrawingSessionId,
+            timestamp: Date.now(),
             // Initialize transformation properties
             x: 0,
             y: 0,
@@ -37030,32 +37073,6 @@ const Eraser = createLucideIcon("Eraser", [
  */
 
 
-const LockOpen = createLucideIcon("LockOpen", [
-  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
-  ["path", { d: "M7 11V7a5 5 0 0 1 9.9-1", key: "1mm8w8" }]
-]);
-
-/**
- * @license lucide-react v0.460.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const Lock = createLucideIcon("Lock", [
-  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
-  ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4", key: "fwvmzm" }]
-]);
-
-/**
- * @license lucide-react v0.460.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
 const Minus = createLucideIcon("Minus", [["path", { d: "M5 12h14", key: "1ays0h" }]]);
 
 /**
@@ -37136,7 +37153,7 @@ const Undo2 = createLucideIcon("Undo2", [
 ]);
 
 // Top Toolbar Component
-const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockToggle, isAdmin = false, hasToolAccess = false, isGloballyUnlocked = false, shouldBeOpenByDefault = true, hasVideoBackground = false }) => {
+const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockToggle, isAdmin = false, hasToolAccess = false, isGloballyUnlocked = true, shouldBeOpenByDefault = true, hasVideoBackground = false }) => {
     const { state, dispatch } = useWhiteboard();
     const [isVisible, setIsVisible] = useState(shouldBeOpenByDefault);
     const [isInitialized, setIsInitialized] = useState(false);
@@ -37212,9 +37229,7 @@ const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockTog
     if (!isInitialized) {
         return null;
     }
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "absolute top-5 left-1/2 transform -translate-x-1/2 flex flex-col items-center z-10", children: [!isVisible && (jsx("button", { className: "w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300", onClick: handleToggleVisibility, title: "Show Tools", children: jsx(ChevronDown, { size: 16, className: "text-current" }) })), isVisible && (jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: jsxs("div", { className: "flex items-center gap-1 p-1", children: [isAdmin && (jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded transition-colors ${isGloballyUnlocked
-                                        ? 'bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400 hover:bg-green-200 dark:hover:bg-green-900/70'
-                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'}`, onClick: handleLockToggle, title: isGloballyUnlocked ? 'Whiteboard unlocked for all users - Click to lock' : 'Whiteboard locked - Click to unlock for all users', children: isGloballyUnlocked ? jsx(LockOpen, { size: 16, className: "text-current" }) : jsx(Lock, { size: 16, className: "text-current" }) })), jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded ${hasToolAccess ? 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300' : 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'}`, onClick: handleUndo, disabled: !hasToolAccess, title: hasToolAccess ? 'Undo' : 'Access restricted', children: jsx(Undo2, { size: 16, className: "text-current" }) }), jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded ${hasToolAccess ? 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300' : 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'}`, onClick: handleRedo, disabled: !hasToolAccess, title: hasToolAccess ? 'Redo' : 'Access restricted', children: jsx(Redo2, { size: 16, className: "text-current" }) }), jsx("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" }), tools.map((tool) => (jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded transition-colors ${!hasToolAccess
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "absolute top-5 left-1/2 transform -translate-x-1/2 flex flex-col items-center z-10", children: [!isVisible && (jsx("button", { className: "w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300", onClick: handleToggleVisibility, title: "Show Tools", children: jsx(ChevronDown, { size: 16, className: "text-current" }) })), isVisible && (jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: jsxs("div", { className: "flex items-center gap-1 p-1", children: [jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded ${hasToolAccess ? 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300' : 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'}`, onClick: handleUndo, disabled: !hasToolAccess, title: hasToolAccess ? 'Undo' : 'Access restricted', children: jsx(Undo2, { size: 16, className: "text-current" }) }), jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded ${hasToolAccess ? 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300' : 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'}`, onClick: handleRedo, disabled: !hasToolAccess, title: hasToolAccess ? 'Redo' : 'Access restricted', children: jsx(Redo2, { size: 16, className: "text-current" }) }), jsx("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" }), tools.map((tool) => (jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded transition-colors ${!hasToolAccess
                                         ? 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'
                                         : state.tool === tool.type
                                             ? 'bg-purple-100 dark:bg-purple-900/50 text-purple-600 dark:text-purple-300'
@@ -42272,6 +42287,7 @@ Object.assign(lookup, {
 let socket = null;
 const joinedRooms = new Set();
 const setupCallbacks = new Map();
+const statusChangeCallbacks = new Set();
 let currentWebSocketUrl = undefined;
 // Initialize socket connection
 const initializeSocket = (webSocketUrl) => {
@@ -42287,7 +42303,6 @@ const initializeSocket = (webSocketUrl) => {
             setupCallbacks.clear();
         }
         currentWebSocketUrl = webSocketUrl;
-        console.log('[SOCKET] Using socket server URL:', socketServerUrl);
         if (!socketServerUrl) {
             console.error('[SOCKET] No socket server URL provided');
         }
@@ -42298,29 +42313,21 @@ const initializeSocket = (webSocketUrl) => {
             reconnectionDelay: 1000,
         });
         socket.on('connect', () => {
-            console.log('[SOCKET] Connected to server');
-            // Re-join all rooms after reconnection
+            statusChangeCallbacks.forEach(callback => callback(true));
             joinedRooms.forEach(roomId => {
                 socket.emit('join-room', roomId);
-                console.log('[SOCKET] Re-joined room:', roomId);
             });
         });
         socket.on('disconnect', () => {
-            console.log('[SOCKET] Disconnected from server');
+            statusChangeCallbacks.forEach(callback => callback(false));
         });
-        socket.on('connect_error', (error) => {
-            console.error('[SOCKET] Connection error:', error);
+        socket.on('connect_error', () => {
+            // Connection error handled by Socket.IO reconnection logic
         });
         // Set up the global receive-message listener once
         socket.on('receive-message', (message) => {
             const callback = setupCallbacks.get(message.roomId);
             if (callback) {
-                console.log('[SOCKET] Received message from room:', message.roomId, {
-                    compression: message.data.compressionType,
-                    originalSize: message.data.originalSize,
-                    compressedSize: message.data.compressedSize,
-                    from: message.from
-                });
                 callback(message.data);
             }
         });
@@ -42354,18 +42361,23 @@ const onSend = (roomId, data, webSocketUrl) => {
         console.error('[SOCKET] Error sending message:', error);
     }
 };
-const onReceive = (roomId, callback, webSocketUrl) => {
+const onReceive = (roomId, callback, webSocketUrl, onRoomJoined) => {
     const socketInstance = initializeSocket(webSocketUrl);
     // Store the callback for this room
     setupCallbacks.set(roomId, callback);
-    // Only join the room if we haven't already
     if (!joinedRooms.has(roomId)) {
         socketInstance.emit('join-room', roomId);
         joinedRooms.add(roomId);
-        console.log('[SOCKET] Joined room:', roomId);
+        if (onRoomJoined) {
+            setTimeout(() => {
+                onRoomJoined();
+            }, 100);
+        }
     }
     else {
-        console.log('[SOCKET] Already in room:', roomId);
+        if (onRoomJoined) {
+            onRoomJoined();
+        }
     }
 };
 const leaveRoom = (roomId) => {
@@ -42382,20 +42394,66 @@ const disconnectSocket = () => {
         socket = null;
         joinedRooms.clear();
         setupCallbacks.clear();
-        console.log('[SOCKET] Socket disconnected and cleaned up');
     }
 };
+// Get current socket connection status
+const isSocketConnected = () => {
+    return socket?.connected ?? false;
+};
+// Get current socket instance
+const getSocket = () => {
+    return socket;
+};
+// Subscribe to connection status changes
+const onSocketStatusChange = (callback) => {
+    const socketInstance = socket || initializeSocket();
+    statusChangeCallbacks.add(callback);
+    callback(socketInstance.connected);
+    return () => {
+        statusChangeCallbacks.delete(callback);
+    };
+};
+const waitForSocket = (webSocketUrl, timeoutMs = 5000) => {
+    return new Promise((resolve) => {
+        const socketInstance = initializeSocket(webSocketUrl);
+        if (socketInstance.connected) {
+            resolve();
+            return;
+        }
+        const handleConnect = () => {
+            socketInstance.off('connect', handleConnect);
+            clearTimeout(timeoutHandle);
+            resolve();
+        };
+        socketInstance.on('connect', handleConnect);
+        const timeoutHandle = setTimeout(() => {
+            socketInstance.off('connect', handleConnect);
+            resolve();
+        }, timeoutMs);
+    });
+};
 
 const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transparentBackground = false, videoStream }) => {
     const { state, dispatch, setQueueAction, requestStateFromPeers, webSocketUrl } = useWhiteboard();
     const [lastCollaborativeAction, setLastCollaborativeAction] = useState(null);
     const [hasRequestedState, setHasRequestedState] = useState(false);
     const [lastStateRequestTime, setLastStateRequestTime] = useState(0);
-    const [isGloballyUnlocked, setIsGloballyUnlocked] = useState(false); // Global unlock status
+    const [isSocketConnected, setIsSocketConnected] = useState(false);
+    const [isRoomJoined, setIsRoomJoined] = useState(false);
+    const [isGloballyUnlocked, setIsGloballyUnlocked] = useState(true); // Global unlock status
     const [syncedAllowedUsers, setSyncedAllowedUsers] = useState(allowedUsers); // Synced allowed users from collaboration
     const isCollaborativeUpdateRef = useRef(false); // Track if update came from collaboration
     const lastClearTimeRef = useRef(0); // Track when last clear happened
     const boardRef = useRef(null);
+    useEffect(() => {
+        const unsubscribe = onSocketStatusChange((connected) => {
+            setIsSocketConnected(connected);
+        });
+        return () => {
+            console.log('[WHITEBOARD] Unsubscribing from socket status listener');
+            unsubscribe();
+        };
+    }, []); // Empty dependencies - single listener for component lifecycle
     // Set userId in context when component mounts or userId changes
     useEffect(() => {
         dispatch({ type: 'SET_USER_ID', payload: userId });
@@ -42476,7 +42534,9 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
                 setHasRequestedState(false);
             }
             callback(data);
-        }, webSocketUrl);
+        }, webSocketUrl, () => {
+            setIsRoomJoined(true);
+        });
     }, [roomId, webSocketUrl]);
     // Initialize the collaborative whiteboard hook
     const collaborativeConfig = useMemo(() => ({
@@ -42513,48 +42573,42 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
             });
         }
     }, [allowedUsers, queueAction, userId, syncedAllowedUsers]);
-    // Request state from peers when joining/rejoining the room
+    // Request state from peers when room is successfully joined AND socket is connected
+    // Need both conditions to ensure message can actually be sent
     useEffect(() => {
-        if (queueAction && typeof queueAction === 'function' && !hasRequestedState) {
-            const requestTimer = setTimeout(() => {
-                const now = Date.now();
-                if (now - lastClearTimeRef.current < 10000) {
-                    return;
-                }
-                if (now - lastStateRequestTime > 5000) {
-                    requestStateFromPeers();
-                    setHasRequestedState(true);
-                    setLastStateRequestTime(now);
-                }
-            }, 500);
-            return () => clearTimeout(requestTimer);
+        if (!isRoomJoined || !isSocketConnected || hasRequestedState || state.shapes.length > 0 || !queueAction) {
+            return;
+        }
+        const now = Date.now();
+        if (now - lastClearTimeRef.current < 10000) {
+            return;
         }
-    }, [roomId, queueAction, requestStateFromPeers, hasRequestedState, lastStateRequestTime]);
+        requestStateFromPeers();
+        setHasRequestedState(true);
+        setLastStateRequestTime(Date.now());
+    }, [isRoomJoined, isSocketConnected, state.shapes.length, hasRequestedState, queueAction, requestStateFromPeers, userId, roomId]);
     // Reset request flag when room changes
     useEffect(() => {
         setHasRequestedState(false);
         setLastStateRequestTime(0);
+        setIsRoomJoined(false);
     }, [roomId]);
-    // Monitor for empty canvas and request state only if we haven't tried recently
+    // Retry state request if canvas is still empty after 3 seconds
     useEffect(() => {
-        if (queueAction &&
-            typeof queueAction === 'function' &&
-            state.shapes.length === 0 &&
-            !hasRequestedState) {
-            const now = Date.now();
-            if (now - lastClearTimeRef.current < 10000) {
-                return;
-            }
-            if (now - lastStateRequestTime > 10000) {
-                const reconnectTimer = setTimeout(() => {
-                    requestStateFromPeers();
-                    setHasRequestedState(true);
-                    setLastStateRequestTime(now);
-                }, 2000);
-                return () => clearTimeout(reconnectTimer);
-            }
+        if (!isRoomJoined || !isSocketConnected || hasRequestedState || state.shapes.length > 0 || !queueAction) {
+            return;
         }
-    }, [queueAction, state.shapes.length, requestStateFromPeers, hasRequestedState, lastStateRequestTime]);
+        const now = Date.now();
+        // Don't retry if we recently cleared
+        if (now - lastClearTimeRef.current < 10000) {
+            return;
+        }
+        const retryTimer = setTimeout(() => {
+            requestStateFromPeers();
+            setLastStateRequestTime(Date.now());
+        }, 3000);
+        return () => clearTimeout(retryTimer);
+    }, [isRoomJoined, isSocketConnected, state.shapes.length, queueAction, requestStateFromPeers, lastStateRequestTime, userId]);
     // Cleanup stale active drawings periodically
     useEffect(() => {
         const cleanupInterval = setInterval(() => {
@@ -42735,6 +42789,28 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
             leaveRoom(roomId);
         };
     }, [roomId]);
+    // Clear all canvases on component unmount if admin leaves
+    useEffect(() => {
+        return () => {
+            // If admin leaves, clear all users' canvases
+            if (isAdmin && queueAction) {
+                const clearTimestamp = Date.now();
+                // Clear local state immediately
+                dispatch({ type: 'CLEAR_CANVAS' });
+                dispatch({ type: 'CLEAR_ACTIVE_DRAWINGS' });
+                // Send clear action to all users
+                queueAction({
+                    type: 'clear',
+                    payload: {
+                        timestamp: clearTimestamp,
+                        adminId: userId,
+                    },
+                    userId: userId,
+                    timestamp: clearTimestamp,
+                });
+            }
+        };
+    }, [isAdmin, userId, dispatch]);
     // Global cleanup on app unmount
     useEffect(() => {
         const handleBeforeUnload = () => {
@@ -45777,5 +45853,5 @@ function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
-export { Whiteboard, WhiteboardProvider, cn, useCapture as useWhiteboardStream };
+export { Whiteboard, WhiteboardProvider, cn, disconnectSocket, getSocket, isSocketConnected, leaveRoom, onReceive, onSend, onSocketStatusChange, useCapture as useWhiteboardStream, waitForSocket };
 //# sourceMappingURL=index.esm.js.map