@ngenux/ngage-whiteboarding 1.0.6 → 1.0.8

package/dist/index.js

@@ -34777,12 +34777,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,
@@ -34790,10 +34793,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);
@@ -34987,11 +34991,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
@@ -35285,9 +35291,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;
     };
@@ -35317,10 +35330,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
@@ -35338,7 +35356,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 });
@@ -35392,6 +35411,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
@@ -35405,6 +35429,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) {
@@ -35419,6 +35448,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) {
@@ -35923,7 +35958,7 @@ const Arrow = React.memo(({ shapeProps, isSelected, onSelect, onUpdate, }) => {
 });
 
 const ErasedShape = ({ shapeProps, isSelected, onSelect, onUpdate, }) => {
-    const [imageElement, setImageElement] = React.useState(null);
+    const [bitmap, setBitmap] = React.useState(null);
     const canvasRef = React.useRef(null);
     // Memoize bounds calculation to avoid unnecessary recalculations
     const bounds = React.useMemo(() => calculateShapeBounds(shapeProps), [shapeProps.points, shapeProps.strokeWidth, shapeProps.erasePaths]);
@@ -35953,22 +35988,24 @@ const ErasedShape = ({ shapeProps, isSelected, onSelect, onUpdate, }) => {
             });
         }
         ctx.restore();
-        // Convert canvas to image
-        const img = new window.Image();
-        img.onload = () => {
-            setImageElement(img);
-        };
-        img.onerror = () => {
-            console.error('[ErasedShape] Failed to create image from canvas');
-            setImageElement(null);
-        };
-        img.src = canvas.toDataURL();
+        // Use canvas directly as Konva image - no async
+        setBitmap(canvas);
         return () => {
             if (canvasRef.current) {
                 canvasRef.current.remove();
+                canvasRef.current = null;
             }
         };
-    }, [shapeProps, bounds]); // Re-render when shape or bounds change
+    }, [
+        bounds,
+        shapeProps.points,
+        shapeProps.erasePaths,
+        shapeProps.stroke,
+        shapeProps.strokeWidth,
+        shapeProps.opacity,
+        shapeProps.strokeStyle,
+        shapeProps.type
+    ]);
     // Calculate bounds of the shape including erase paths
     function calculateShapeBounds(shape) {
         let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
@@ -36087,11 +36124,48 @@ const ErasedShape = ({ shapeProps, isSelected, onSelect, onUpdate, }) => {
             ctx.stroke();
         }
     };
-    if (!imageElement) {
-        return null; // Still rendering
-    }
     const padding = 50;
-    return (jsxRuntime.jsx(Image$1, { image: imageElement, x: bounds.minX - padding, y: bounds.minY - padding, draggable: isSelected, onClick: onSelect, onTap: onSelect, onDragEnd: (e) => {
+    // Render original shape as fallback while bitmap is being created
+    if (!bitmap) {
+        const commonProps = {
+            onClick: onSelect,
+            onTap: onSelect,
+            listening: true,
+            stroke: shapeProps.stroke,
+            strokeWidth: shapeProps.strokeWidth,
+            opacity: shapeProps.opacity,
+            dash: shapeProps.strokeStyle === 'dashed' ? [5, 5] : shapeProps.strokeStyle === 'dotted' ? [2, 3] : undefined,
+        };
+        switch (shapeProps.type) {
+            case 'pencil':
+                return (jsxRuntime.jsx(Line$1, { points: shapeProps.points.flatMap(p => [p.x, p.y]), lineCap: "round", lineJoin: "round", ...commonProps }));
+            case 'line':
+                if (shapeProps.points.length >= 2) {
+                    return (jsxRuntime.jsx(Line$1, { points: [
+                            shapeProps.points[0].x,
+                            shapeProps.points[0].y,
+                            shapeProps.points[1].x,
+                            shapeProps.points[1].y,
+                        ], ...commonProps }));
+                }
+                return null;
+            case 'rectangle':
+                if (shapeProps.points.length >= 2) {
+                    const [start, end] = shapeProps.points;
+                    return (jsxRuntime.jsx(Rect, { x: start.x, y: start.y, width: end.x - start.x, height: end.y - start.y, ...commonProps }));
+                }
+                return null;
+            case 'ellipse':
+                if (shapeProps.points.length >= 2) {
+                    const [start, end] = shapeProps.points;
+                    return (jsxRuntime.jsx(Ellipse$1, { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2, radiusX: Math.abs(end.x - start.x) / 2, radiusY: Math.abs(end.y - start.y) / 2, ...commonProps }));
+                }
+                return null;
+            default:
+                return null;
+        }
+    }
+    return (jsxRuntime.jsx(Image$1, { image: bitmap, x: bounds.minX - padding, y: bounds.minY - padding, draggable: isSelected, onClick: onSelect, onTap: onSelect, onDragEnd: (e) => {
             const newX = e.target.x();
             const newY = e.target.y();
             const deltaX = newX - (bounds.minX - padding);
@@ -36131,6 +36205,10 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
     const containerRef = React.useRef(null);
     const lastPointerPosition = React.useRef(null);
     const mouseMoveThrottleRef = React.useRef(null);
+    // NEW: Eraser preview state for real-time visual feedback
+    const [eraserPreviewPoints, setEraserPreviewPoints] = React.useState([]);
+    const [keepPreviewVisible, setKeepPreviewVisible] = React.useState(false);
+    const [justErasedIds, setJustErasedIds] = React.useState(new Set());
     // Find shapes that intersect with the erase path
     const findIntersectingShapes = (erasePath, shapes) => {
         const eraseRadius = 10; // Half of eraser width
@@ -36221,8 +36299,20 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
             setCurrentShapeId(null);
             setCurrentDrawingSessionId(null);
             lastPointerPosition.current = null;
+            setEraserPreviewPoints([]); // Clear eraser preview
+            setKeepPreviewVisible(false);
+            setJustErasedIds(new Set());
         }
     }, [hasToolAccess, state.isDrawing, dispatch]);
+    // Clear justErasedIds after one frame to complete transition
+    React.useEffect(() => {
+        if (justErasedIds.size > 0) {
+            const id = requestAnimationFrame(() => {
+                setJustErasedIds(new Set());
+            });
+            return () => cancelAnimationFrame(id);
+        }
+    }, [justErasedIds]);
     // Memoized export functionality for performance
     const exportAsImage = React.useCallback((format = 'png') => {
         if (!stageRef.current) {
@@ -36385,12 +36475,14 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
         if (state.tool === 'eraser') {
             dispatch({ type: 'SET_DRAWING', payload: true });
             setCurrentPoints([pos]);
+            setEraserPreviewPoints([pos]); // NEW: start preview stroke
             setCurrentShapeId('erasing'); // Special ID for erasing mode
             return;
         }
         // 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
@@ -36407,6 +36499,7 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
             strokeStyle: state.strokeStyle,
             opacity: state.opacity,
             drawingSessionId: newDrawingSessionId,
+            timestamp,
             // Initialize transformation properties
             x: 0,
             y: 0,
@@ -36433,6 +36526,9 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
                 setCurrentShapeId(null);
                 setCurrentDrawingSessionId(null);
                 lastPointerPosition.current = null;
+                setEraserPreviewPoints([]); // Clear eraser preview
+                setKeepPreviewVisible(false);
+                setJustErasedIds(new Set());
             }
             return;
         }
@@ -36450,10 +36546,41 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
                 return; // Ultra-sensitive for maximum smoothness
         }
         lastPointerPosition.current = pos;
-        // Handle eraser tool - just collect points
+        // Handle eraser tool - collect points and stream erase in real-time
         if (state.tool === 'eraser') {
             const newPoints = [...currentPoints, pos];
             setCurrentPoints(newPoints);
+            setEraserPreviewPoints(newPoints); // Live preview
+            // Create segment from last point to current point for real-time streaming
+            const segment = currentPoints.length > 0
+                ? [currentPoints[currentPoints.length - 1], pos]
+                : [pos];
+            // Apply segment to intersecting shapes in real-time
+            const intersectingShapes = findIntersectingShapes(segment, state.shapes);
+            if (intersectingShapes.length > 0) {
+                const timestamp = Date.now();
+                intersectingShapes.forEach((shape, index) => {
+                    const updatedShape = {
+                        ...shape,
+                        erasePaths: [...(shape.erasePaths || []), segment],
+                    };
+                    // Update the shape locally
+                    dispatch({ type: 'UPDATE_SHAPE', payload: updatedShape });
+                    // Queue erase action for real-time collaboration
+                    if (queueAction) {
+                        const erasePayload = {
+                            shapeId: shape.id,
+                            erasePath: segment,
+                            timestamp: timestamp + index,
+                        };
+                        queueAction({
+                            type: 'erase',
+                            payload: erasePayload,
+                            timestamp: timestamp + index,
+                        });
+                    }
+                });
+            }
             return;
         }
         let newPoints;
@@ -36485,6 +36612,7 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
             strokeStyle: state.strokeStyle,
             opacity: state.opacity,
             drawingSessionId: currentDrawingSessionId,
+            timestamp: Date.now(),
             // Initialize transformation properties
             x: 0,
             y: 0,
@@ -36503,7 +36631,7 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
                 };
                 queueAction(continueAction);
                 mouseMoveThrottleRef.current = null;
-            }, 8); // Optimized to ~120fps for ultra-smooth real-time collaboration
+            }, 1); // Maximum frequency for ultra-smooth real-time collaboration
         }
     }, [hasToolAccess, state.isDrawing, state.tool, state.userId, state.color, state.strokeWidth, state.strokeStyle, state.opacity, currentShapeId, currentDrawingSessionId, currentPoints, queueAction, dispatch]);
     const handleMouseUp = React.useCallback(() => {
@@ -36516,6 +36644,9 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
                 setCurrentShapeId(null);
                 setCurrentDrawingSessionId(null);
                 lastPointerPosition.current = null;
+                setEraserPreviewPoints([]); // Clear eraser preview
+                setKeepPreviewVisible(false);
+                setJustErasedIds(new Set());
             }
             return;
         }
@@ -36531,36 +36662,23 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
             setCurrentDrawingSessionId(null);
             return;
         }
-        // Handle eraser tool - apply erase to intersecting shapes
+        // Handle eraser tool - cleanup on mouse up (erasing already done in mouse move)
         if (state.tool === 'eraser') {
-            // Find shapes that intersect with the erase path
-            const intersectingShapes = findIntersectingShapes(currentPoints, state.shapes);
-            // Apply erase path to each intersecting shape
-            intersectingShapes.forEach(shape => {
-                const updatedShape = {
-                    ...shape,
-                    erasePaths: [...(shape.erasePaths || []), currentPoints],
-                };
-                // Update the shape locally
-                dispatch({ type: 'UPDATE_SHAPE', payload: updatedShape });
-                // Queue erase action for collaboration
-                if (queueAction) {
-                    const erasePayload = {
-                        shapeId: shape.id,
-                        erasePath: currentPoints,
-                        timestamp: Date.now(),
-                    };
-                    queueAction({
-                        type: 'erase',
-                        payload: erasePayload,
-                    });
-                }
-            });
+            // Stop drawing state
+            dispatch({ type: 'SET_DRAWING', payload: false });
             // Reset erasing state
             setCurrentPoints([]);
             setCurrentShapeId(null);
             setCurrentDrawingSessionId(null);
             lastPointerPosition.current = null;
+            // Clear preview after a brief delay to ensure smooth transition
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    setEraserPreviewPoints([]);
+                    setKeepPreviewVisible(false);
+                    setJustErasedIds(new Set());
+                });
+            });
             return;
         }
         // Handle regular drawing tools
@@ -36574,6 +36692,7 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
             strokeStyle: state.strokeStyle,
             opacity: state.opacity,
             drawingSessionId: currentDrawingSessionId,
+            timestamp: Date.now(),
             // Initialize transformation properties
             x: 0,
             y: 0,
@@ -36627,31 +36746,39 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
         if (shape.isEraser) {
             return null;
         }
-        // Use ErasedShape component for shapes that have erase paths applied
-        if (shape.erasePaths && shape.erasePaths.length > 0) {
-            return (jsxRuntime.jsx(ErasedShape, { shapeProps: shape, isSelected: shape.isSelected || false, onSelect: () => handleShapeClick(shape.id), onUpdate: handleShapeUpdate }));
-        }
-        // Use original shape components for shapes without erase operations
         const commonProps = {
             shapeProps: shape,
             isSelected: shape.isSelected || false,
             onSelect: () => handleShapeClick(shape.id),
             onUpdate: handleShapeUpdate,
         };
-        switch (shape.type) {
-            case 'rectangle':
-                return jsxRuntime.jsx(Rectangle, { ...commonProps });
-            case 'ellipse':
-                return jsxRuntime.jsx(Ellipse, { ...commonProps });
-            case 'line':
-                return jsxRuntime.jsx(Line, { ...commonProps });
-            case 'pencil':
-                return jsxRuntime.jsx(FreehandDrawing, { ...commonProps });
-            case 'arrow':
-                return jsxRuntime.jsx(Arrow, { ...commonProps });
-            default:
-                return null;
+        // Render original shape component
+        const OriginalShape = () => {
+            switch (shape.type) {
+                case 'rectangle':
+                    return jsxRuntime.jsx(Rectangle, { ...commonProps });
+                case 'ellipse':
+                    return jsxRuntime.jsx(Ellipse, { ...commonProps });
+                case 'line':
+                    return jsxRuntime.jsx(Line, { ...commonProps });
+                case 'pencil':
+                    return jsxRuntime.jsx(FreehandDrawing, { ...commonProps });
+                case 'arrow':
+                    return jsxRuntime.jsx(Arrow, { ...commonProps });
+                default:
+                    return null;
+            }
+        };
+        // Use ErasedShape component for shapes that have erase paths applied
+        if (shape.erasePaths && shape.erasePaths.length > 0) {
+            // If this shape just got erased, render both to prevent flicker
+            if (justErasedIds.has(shape.id)) {
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OriginalShape, {}), jsxRuntime.jsx(ErasedShape, { shapeProps: shape, isSelected: shape.isSelected || false, onSelect: () => handleShapeClick(shape.id), onUpdate: handleShapeUpdate })] }));
+            }
+            return (jsxRuntime.jsx(ErasedShape, { shapeProps: shape, isSelected: shape.isSelected || false, onSelect: () => handleShapeClick(shape.id), onUpdate: handleShapeUpdate }));
         }
+        // Use original shape components for shapes without erase operations
+        return jsxRuntime.jsx(OriginalShape, {});
     }, (prevProps, nextProps) => {
         // Ultra-precise comparison to prevent unnecessary re-renders during simultaneous drawing
         const prevShape = prevProps.shape;
@@ -36758,11 +36885,11 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
             state.tool === 'select' ? 'default' :
                 state.tool === 'pan' ? 'grab' : 'crosshair'
     }), [hasToolAccess, state.tool]);
-    return (jsxRuntime.jsx("div", { ref: containerRef, className: "w-full h-full relative", style: { backgroundColor: state.backgroundColor }, children: jsxRuntime.jsx(Stage, { ref: stageRef, width: size.width, height: size.height, onMouseDown: handleMouseDown, onMousemove: handleMouseMove, onMouseup: handleMouseUp, onTouchStart: handleMouseDown, onTouchMove: handleMouseMove, onTouchEnd: handleMouseUp, style: cursorStyle, children: jsxRuntime.jsxs(Layer, { children: [React.useMemo(() => {
-                        if (state.backgroundColor === 'transparent')
-                            return null;
-                        return (jsxRuntime.jsx(Rect, { x: 0, y: 0, width: size.width, height: size.height, fill: state.backgroundColor, listening: false }));
-                    }, [state.backgroundColor, size.width, size.height]), renderedShapes, renderedActiveDrawings, renderCurrentShape] }) }) }));
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: "w-full h-full relative", style: { backgroundColor: state.backgroundColor }, children: jsxRuntime.jsxs(Stage, { ref: stageRef, width: size.width, height: size.height, onMouseDown: handleMouseDown, onMousemove: handleMouseMove, onMouseup: handleMouseUp, onTouchStart: handleMouseDown, onTouchMove: handleMouseMove, onTouchEnd: handleMouseUp, style: cursorStyle, children: [jsxRuntime.jsxs(Layer, { children: [React.useMemo(() => {
+                            if (state.backgroundColor === 'transparent')
+                                return null;
+                            return (jsxRuntime.jsx(Rect, { x: 0, y: 0, width: size.width, height: size.height, fill: state.backgroundColor, listening: false }));
+                        }, [state.backgroundColor, size.width, size.height]), renderedShapes, renderedActiveDrawings, renderCurrentShape] }), jsxRuntime.jsx(Layer, { listening: false, children: eraserPreviewPoints.length > 0 && (state.isDrawing || keepPreviewVisible) && state.tool === 'eraser' && (jsxRuntime.jsx(Line$1, { points: eraserPreviewPoints.flatMap(p => [p.x, p.y]), stroke: state.backgroundColor === 'transparent' ? '#FFFFFF' : state.backgroundColor, strokeWidth: 20, lineCap: "round", lineJoin: "round", opacity: 1.0, listening: false, perfectDrawEnabled: false })) })] }) }));
 });
 // Memoize the Board component to prevent unnecessary re-renders
 const Board = React.memo(BoardComponent, (prevProps, nextProps) => {
@@ -37709,15 +37836,15 @@ const useCollaborativeWhiteboard = (roomId, callbacks) => {
         totalActions: 0,
     });
     // Throttling configuration - Ultra-optimized for smooth real-time collaboration
-    const THROTTLE_DELAY = 30; // ms - Reduced delay for faster transmission
-    const MAX_ACTIONS_PER_BATCH = 15; // Smaller batches for faster transmission
+    const THROTTLE_DELAY = 10; // ms - Minimal delay for faster transmission
+    const MAX_ACTIONS_PER_BATCH = 8; // Smaller batches for faster transmission
     const MAX_MESSAGE_SIZE = 500; // characters - matches API constraint
-    const MAX_MESSAGES_PER_SECOND = 15; // Increased rate for smoother collaboration  
+    const MAX_MESSAGES_PER_SECOND = 30; // Maximum rate for smoother collaboration  
     const MAX_PAYLOAD_SIZE = 1024; // bytes (1KB) - matches API constraint
     // Drawing-specific throttling for ultra-smooth real-time collaboration
-    const DRAWING_THROTTLE_DELAY = 8; // ms - 120fps for ultra-smooth drawing actions
-    const DRAWING_BATCH_SIZE = 5; // Much smaller batches for immediate transmission
-    const DRAWING_IMMEDIATE_THRESHOLD = 2; // Send immediately if we have 2+ drawing actions
+    const DRAWING_THROTTLE_DELAY = 1; // ms - Maximum frequency for ultra-smooth drawing actions
+    const DRAWING_BATCH_SIZE = 2; // Minimal batches for immediate transmission
+    const DRAWING_IMMEDIATE_THRESHOLD = 1; // Send immediately if we have 1+ drawing actions
     // Message rate limiting
     const messageTimestampsRef = React.useRef([]);
     const isRateLimited = React.useCallback(() => {
@@ -37881,7 +38008,7 @@ const useCollaborativeWhiteboard = (roomId, callbacks) => {
             let delay = THROTTLE_DELAY;
             if (remainingDrawingActions.length > 0) {
                 delay = remainingDrawingActions.length >= DRAWING_IMMEDIATE_THRESHOLD ?
-                    Math.max(DRAWING_THROTTLE_DELAY / 2, 4) : // Even faster for multiple actions
+                    Math.max(DRAWING_THROTTLE_DELAY / 2, 2) : // Even faster for multiple actions
                     DRAWING_THROTTLE_DELAY;
             }
             throttleTimerRef.current = setTimeout(() => {
@@ -38024,7 +38151,7 @@ const useCollaborativeWhiteboard = (roomId, callbacks) => {
                 clearTimeout(throttleTimerRef.current);
                 throttleTimerRef.current = setTimeout(() => {
                     transmitRef.current?.();
-                }, Math.max(DRAWING_THROTTLE_DELAY / 4, 2)); // Ultra-fast transmission
+                }, 1); // Ultra-fast transmission - 1ms for maximum responsiveness
             }
         }
     }, [state.canvasSize, state.userId, roomId, callbacks, sendWithConstraints]);
@@ -38044,7 +38171,11 @@ const useCollaborativeWhiteboard = (roomId, callbacks) => {
                     // Process each action in the batch with duplicate prevention
                     parsedData.actions.forEach(action => {
                         // Create unique action ID for deduplication
-                        const actionId = `${action.type}-${parsedData.userId}-${action.timestamp || Date.now()}`;
+                        // For erase actions, include shapeId to allow multiple erases in same stroke
+                        let actionId = `${action.type}-${parsedData.userId}-${action.timestamp || Date.now()}`;
+                        if (action.type === 'erase' && action.payload && typeof action.payload === 'object' && 'shapeId' in action.payload) {
+                            actionId = `${action.type}-${parsedData.userId}-${action.payload.shapeId}-${action.timestamp || Date.now()}`;
+                        }
                         // Skip if we've already processed this action (prevents shape loss from duplicate processing)
                         if (processedActionsRef.current.has(actionId)) {
                             return;
@@ -42663,6 +42794,28 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transp
             leaveRoom(roomId);
         };
     }, [roomId]);
+    // Clear all canvases on component unmount if admin leaves
+    React.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
     React.useEffect(() => {
         const handleBeforeUnload = () => {