@ngenux/ngage-whiteboarding 1.0.8 → 1.0.10

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useReducer, useContext, useState, useRef, useMemo, useEffect, forwardRef, useCallback, useImperativeHandle, createElement } from 'react';
+import React__default, { createContext, useRef, useReducer, useEffect, useContext, useState, useMemo, forwardRef, useCallback, useImperativeHandle, createElement } from 'react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -34911,6 +34911,21 @@ const whiteboardReducer = (state, action) => {
                 userUndoStacks: {}, // Clear all user undo stacks as well
             };
         }
+        case 'RESET_EMPTY_ROOM': {
+            // Same visual reset as a fresh board, but lastClearTimestamp stays 0 so shapes from
+            // sync_state (drawn before this client joined) are not rejected as pre-clear stale.
+            return {
+                ...state,
+                shapes: [],
+                history: [[]],
+                historyIndex: 0,
+                selectedShapeId: undefined,
+                currentDrawingShape: undefined,
+                activeDrawings: {},
+                userUndoStacks: {},
+                lastClearTimestamp: 0,
+            };
+        }
         case 'UNDO': {
             if (state.historyIndex > 0) {
                 return {
@@ -35116,8 +35131,120 @@ const whiteboardReducer = (state, action) => {
     }
 };
 const WhiteboardContext = createContext(undefined);
-const WhiteboardProvider = ({ children, webSocketUrl }) => {
-    const [state, dispatch] = useReducer(whiteboardReducer, initialState);
+// Helper function to get storage key for a room
+const getStorageKey = (roomId) => {
+    return roomId ? `whiteboard-state-${roomId}` : 'whiteboard-state-default';
+};
+// Helper function to load persisted state from sessionStorage
+const loadPersistedState = (roomId) => {
+    try {
+        const key = getStorageKey(roomId);
+        const persisted = sessionStorage.getItem(key);
+        if (persisted) {
+            const parsed = JSON.parse(persisted);
+            return parsed;
+        }
+    }
+    catch (error) {
+        console.error('[PERSISTENCE] Failed to load persisted state:', error);
+    }
+    return null;
+};
+// Helper function to save state to sessionStorage
+const savePersistedState = (state, roomId) => {
+    try {
+        const key = getStorageKey(roomId);
+        // Only persist essential state (shapes, history, background, canvas size)
+        const stateToPersist = {
+            shapes: state.shapes,
+            history: state.history,
+            historyIndex: state.historyIndex,
+            backgroundColor: state.backgroundColor,
+            canvasSize: state.canvasSize,
+            lastClearTimestamp: state.lastClearTimestamp,
+            userUndoStacks: state.userUndoStacks,
+        };
+        sessionStorage.setItem(key, JSON.stringify(stateToPersist));
+    }
+    catch (error) {
+        console.error('[PERSISTENCE] Failed to save persisted state:', error);
+    }
+};
+// Helper function to clear persisted state
+const clearPersistedState = (roomId) => {
+    try {
+        const key = getStorageKey(roomId);
+        sessionStorage.removeItem(key);
+    }
+    catch (error) {
+        console.error('[PERSISTENCE] Failed to clear persisted state:', error);
+    }
+};
+const WhiteboardProvider = ({ children, webSocketUrl, roomId: initialRoomId }) => {
+    const [currentRoomId, setCurrentRoomId] = React__default.useState(initialRoomId);
+    // Track if a clear action was performed
+    const clearActionRef = useRef(false);
+    // Load persisted state if available, otherwise use initialState
+    const getInitialState = () => {
+        const persisted = loadPersistedState(currentRoomId);
+        if (persisted) {
+            // Merge persisted state with current initialState to ensure all properties exist
+            return {
+                ...initialState,
+                ...persisted,
+                // Reset transient state
+                isDrawing: false,
+                currentDrawingShape: undefined,
+                selectedShapeId: undefined,
+                activeDrawings: {},
+                captureEnabled: true,
+            };
+        }
+        return initialState;
+    };
+    const [state, dispatch] = useReducer((s, action) => {
+        // Track clear action
+        if (action.type === 'CLEAR_CANVAS') {
+            clearActionRef.current = true;
+        }
+        return whiteboardReducer(s, action);
+    }, getInitialState());
+    const prevRoomIdRef = useRef(currentRoomId);
+    // Save state to sessionStorage whenever it changes (debounced)
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            // Only save empty shapes if a clear action was performed
+            if (state.shapes.length > 0 || clearActionRef.current) {
+                savePersistedState(state, currentRoomId);
+                clearActionRef.current = false;
+            }
+        }, 500); // Debounce to avoid excessive writes
+        return () => clearTimeout(timeoutId);
+    }, [state.shapes, state.history, state.backgroundColor, state.canvasSize, state.lastClearTimestamp, currentRoomId]);
+    // Handle room changes - load new room state or clear if switching rooms
+    useEffect(() => {
+        if (prevRoomIdRef.current !== currentRoomId) {
+            // Save current room state before switching
+            if (prevRoomIdRef.current) {
+                savePersistedState(state, prevRoomIdRef.current);
+            }
+            // Load new room state
+            const newRoomState = loadPersistedState(currentRoomId);
+            if (newRoomState) {
+                dispatch({ type: 'SET_SHAPES', payload: newRoomState.shapes || [] });
+                dispatch({ type: 'SET_BACKGROUND_COLOR', payload: newRoomState.backgroundColor || '#FFFFFF' });
+                if (newRoomState.lastClearTimestamp) {
+                    dispatch({ type: 'SET_CLEAR_TIMESTAMP', payload: newRoomState.lastClearTimestamp });
+                }
+            }
+            else {
+                // No persisted state for new room — empty locally but do not use CLEAR_CANVAS
+                // (that sets lastClearTimestamp = now and breaks applying peer sync_state for pre-join strokes).
+                dispatch({ type: 'RESET_EMPTY_ROOM' });
+            }
+            prevRoomIdRef.current = currentRoomId;
+        }
+    }, [currentRoomId, state]);
     const normalizePoint = (point) => {
         return {
             x: point.x / state.canvasSize.width,
@@ -35198,7 +35325,7 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
         };
     };
     // Store reference to current queue action for state requests
-    let currentQueueAction = null;
+    const currentQueueActionRef = useRef(null);
     // Type guard and shape normalizer to ensure we have a complete ShapeProps object
     const isCompleteShape = (obj) => {
         if (!obj) {
@@ -35254,13 +35381,17 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
         return true;
     };
     const requestStateFromPeers = () => {
-        if (currentQueueAction) {
-            currentQueueAction({
-                type: 'request_state',
-                payload: '',
-                requesterId: state.userId,
-                timestamp: Date.now(),
-            });
+        if (currentQueueActionRef.current) {
+            setTimeout(() => {
+                if (currentQueueActionRef.current) {
+                    currentQueueActionRef.current({
+                        type: 'request_state',
+                        payload: '',
+                        requesterId: state.userId,
+                        timestamp: Date.now(),
+                    });
+                }
+            }, 2000);
         }
         else {
             console.warn('[STATE_SYNC] No queue action available for state request');
@@ -35292,9 +35423,9 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
         switch (action.type) {
             case 'request_state':
                 // Another user is requesting current state, send our state to them
-                if (typeof action.payload === 'string' && action.requesterId && currentQueueAction) {
+                if (typeof action.payload === 'string' && action.requesterId && currentQueueActionRef.current) {
                     const currentState = getCurrentSyncState();
-                    currentQueueAction({
+                    currentQueueActionRef.current({
                         type: 'sync_state',
                         payload: currentState,
                         requesterId: action.requesterId, // Send specifically to the requester
@@ -35368,16 +35499,19 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
                     console.warn(`[APPLY_ACTION] Failed to delete shape - payload not string:`, action.payload);
                 }
                 break;
-            case 'clear':
-                // Clear all canvas content including active drawings
+            case 'clear': {
+                // All users (not just host) must clear their local state when a collaborative clear is received
                 dispatch({ type: 'CLEAR_CANVAS' });
                 dispatch({ type: 'CLEAR_ACTIVE_DRAWINGS' });
+                // Clear persisted state in sessionStorage
+                clearPersistedState(currentRoomId);
                 // Update last clear time to prevent conflicting actions
                 if (typeof action.payload === 'object' && action.payload !== null && 'timestamp' in action.payload) {
                     const clearTimestamp = action.payload.timestamp;
                     dispatch({ type: 'SET_CLEAR_TIMESTAMP', payload: clearTimestamp });
                 }
                 break;
+            }
             case 'undo':
             case 'redo':
                 if (Array.isArray(action.payload)) {
@@ -35553,8 +35687,9 @@ const WhiteboardProvider = ({ children, webSocketUrl }) => {
             getCurrentSyncState,
             requestStateFromPeers,
             setQueueAction: (queueAction) => {
-                currentQueueAction = queueAction;
+                currentQueueActionRef.current = queueAction;
             },
+            setCurrentRoomId,
             normalizePoint,
             denormalizePoint,
             webSocketUrl,
@@ -37069,32 +37204,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" }]]);
 
 /**
@@ -37175,7 +37284,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);
@@ -37251,9 +37360,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'
@@ -42311,6 +42418,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) => {
@@ -42326,7 +42434,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');
         }
@@ -42337,29 +42444,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);
             }
         });
@@ -42393,18 +42492,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) => {
@@ -42421,24 +42525,74 @@ 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 Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transparentBackground = false, videoStream, externalApiRef }) => {
+    const { state, dispatch, setQueueAction, requestStateFromPeers, setCurrentRoomId, 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 });
     }, [userId, dispatch]);
+    // Set current roomId in context for persistence
+    useEffect(() => {
+        setCurrentRoomId(roomId);
+    }, [roomId, setCurrentRoomId]);
     // Set background color based on transparentBackground prop or videoStream presence
     useEffect(() => {
         if (transparentBackground || videoStream) {
@@ -42515,7 +42669,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(() => ({
@@ -42552,48 +42708,43 @@ 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 (e.g. first request raced before host had queueAction).
+    // Intentionally does NOT gate on hasRequestedState — the initial effect sets that immediately while send is delayed 2s.
     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 || state.shapes.length > 0 || !queueAction) {
+            return;
+        }
+        const now = Date.now();
+        // Don't retry if we recently cleared
+        if (now - lastClearTimeRef.current < 10000) {
+            return;
         }
-    }, [queueAction, state.shapes.length, requestStateFromPeers, hasRequestedState, lastStateRequestTime]);
+        const retryTimer = setTimeout(() => {
+            requestStateFromPeers();
+            setLastStateRequestTime(Date.now());
+        }, 4500);
+        return () => clearTimeout(retryTimer);
+    }, [isRoomJoined, isSocketConnected, state.shapes.length, queueAction, requestStateFromPeers, roomId]);
     // Cleanup stale active drawings periodically
     useEffect(() => {
         const cleanupInterval = setInterval(() => {
@@ -42692,6 +42843,22 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
             });
         }
     }, [isAdmin, dispatch, queueAction, userId]);
+    // Expose a minimal imperative API for host apps that need to perform the same
+    // collaborative clear as the toolbar button (e.g., on "stop screenshare with annotations").
+    useEffect(() => {
+        if (!externalApiRef) {
+            return;
+        }
+        externalApiRef.current = {
+            clear: handleClear,
+            getRoomId: () => roomId,
+        };
+        return () => {
+            if (externalApiRef.current?.getRoomId?.() === roomId) {
+                externalApiRef.current = null;
+            }
+        };
+    }, [externalApiRef, handleClear, roomId]);
     const handleLockToggle = useCallback(() => {
         if (!isAdmin) {
             return;
@@ -42774,28 +42941,6 @@ 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, queueAction, userId, dispatch]);
     // Global cleanup on app unmount
     useEffect(() => {
         const handleBeforeUnload = () => {
@@ -45838,5 +45983,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