@ngenux/ngage-whiteboarding 1.0.2 → 1.0.4

package/dist/index.js

@@ -36730,9 +36730,27 @@ const BoardComponent = React.forwardRef(({ roomId = 'default-room', queueAction,
         const activeShapes = Object.values(state.activeDrawings);
         return activeShapes.map(shape => (jsxRuntime.jsx(MemoizedShapeComponent, { shape: shape }, `active-${shape.id}`)));
     }, [state.activeDrawings]);
+    const getStageDataURL = React.useCallback((format = 'png') => {
+        if (!stageRef.current) {
+            return '';
+        }
+        try {
+            const stage = stageRef.current;
+            return stage.toDataURL({
+                mimeType: format === 'png' ? 'image/png' : 'image/jpeg',
+                quality: 1,
+                pixelRatio: 2,
+            });
+        }
+        catch (error) {
+            console.error('Failed to get stage data URL:', error);
+            return '';
+        }
+    }, []);
     React.useImperativeHandle(ref, () => ({
         exportAsImage,
         exportAsPDF,
+        getStageDataURL,
     }));
     // Memoized cursor style for performance
     const cursorStyle = React.useMemo(() => ({
@@ -36740,7 +36758,7 @@ 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 bg-white relative", 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(() => {
+    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 }));
@@ -37050,7 +37068,7 @@ const Undo2 = createLucideIcon("Undo2", [
 ]);
 
 // Top Toolbar Component
-const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockToggle, isAdmin = false, hasToolAccess = false, isGloballyUnlocked = false, shouldBeOpenByDefault = true }) => {
+const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockToggle, isAdmin = false, hasToolAccess = false, isGloballyUnlocked = false, shouldBeOpenByDefault = true, hasVideoBackground = false }) => {
     const { state, dispatch } = useWhiteboard();
     const [isVisible, setIsVisible] = React.useState(shouldBeOpenByDefault);
     const handleToggleVisibility = () => {
@@ -37114,16 +37132,16 @@ const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockTog
             }
         }
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "absolute top-5 left-1/2 transform -translate-x-1/2 flex flex-col items-center z-40", children: [!isVisible && (jsxRuntime.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: jsxRuntime.jsx(ChevronDown, { size: 16, className: "text-current" }) })), isVisible && (jsxRuntime.jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1 p-1", children: [isAdmin && (jsxRuntime.jsx("button", { className: `w-10 h-10 flex items-center justify-center rounded transition-colors ${isGloballyUnlocked
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "absolute top-5 left-1/2 transform -translate-x-1/2 flex flex-col items-center z-10", children: [!isVisible && (jsxRuntime.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: jsxRuntime.jsx(ChevronDown, { size: 16, className: "text-current" }) })), isVisible && (jsxRuntime.jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1 p-1", children: [isAdmin && (jsxRuntime.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 ? jsxRuntime.jsx(LockOpen, { size: 16, className: "text-current" }) : jsxRuntime.jsx(Lock, { size: 16, className: "text-current" }) })), jsxRuntime.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: jsxRuntime.jsx(Undo2, { size: 16, className: "text-current" }) }), jsxRuntime.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: jsxRuntime.jsx(Redo2, { size: 16, className: "text-current" }) }), jsxRuntime.jsx("div", { className: "w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1" }), tools.map((tool) => (jsxRuntime.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'
-                                            : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}`, onClick: () => handleToolSelect(tool.type), disabled: !hasToolAccess, title: hasToolAccess ? tool.label : `${tool.label} - Access restricted`, children: React.cloneElement(tool.icon, { className: 'text-current' }) }, tool.type))), jsxRuntime.jsx("button", { className: "w-10 h-10 flex items-center justify-center rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300", onClick: handleToggleVisibility, title: "Hide Tools", children: jsxRuntime.jsx(ChevronUp, { size: 16, className: "text-current" }) })] }) }))] }), jsxRuntime.jsxs("div", { className: "absolute top-5 right-20 flex items-center gap-2 z-40", children: [isAdmin && (jsxRuntime.jsxs("button", { className: "h-10 px-3 flex items-center gap-2 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg text-sm bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-lg", onClick: handleClear, children: [jsxRuntime.jsx(Eraser, { size: 16, className: "text-current" }), "Clear"] })), jsxRuntime.jsxs("button", { className: "h-10 px-3 flex items-center gap-2 bg-purple-500 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 text-white rounded-lg text-sm shadow-lg", onClick: () => handleExportImage?.('png'), children: [jsxRuntime.jsx(Save, { size: 16, className: "text-current" }), "Save"] })] })] }));
+                                            : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'}`, onClick: () => handleToolSelect(tool.type), disabled: !hasToolAccess, title: hasToolAccess ? tool.label : `${tool.label} - Access restricted`, children: React.cloneElement(tool.icon, { className: 'text-current' }) }, tool.type))), jsxRuntime.jsx("button", { className: "w-10 h-10 flex items-center justify-center rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300", onClick: handleToggleVisibility, title: "Hide Tools", children: jsxRuntime.jsx(ChevronUp, { size: 16, className: "text-current" }) })] }) }))] }), jsxRuntime.jsxs("div", { className: "absolute top-5 right-20 flex items-center gap-2 z-10", children: [isAdmin && (jsxRuntime.jsxs("button", { className: "h-10 px-3 flex items-center gap-2 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg text-sm bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-lg", onClick: handleClear, children: [jsxRuntime.jsx(Eraser, { size: 16, className: "text-current" }), "Clear"] })), jsxRuntime.jsxs("button", { className: "h-10 px-3 flex items-center gap-2 bg-purple-500 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 text-white rounded-lg text-sm shadow-lg", onClick: () => handleExportImage?.('png'), children: [jsxRuntime.jsx(Save, { size: 16, className: "text-current" }), "Save"] })] })] }));
 };
 // Left Sidebar Component  
-const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault = false }) => {
+const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault = false, disableBackgroundChange = false, hasVideoBackground = false }) => {
     const { state, dispatch } = useWhiteboard();
     const [isVisible, setIsVisible] = React.useState(shouldBeOpenByDefault);
     const [isDragging, setIsDragging] = React.useState(false);
@@ -37131,6 +37149,13 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
     const [position, setPosition] = React.useState({ x: 20, y: 80 });
     const [hasEverHadAccess, setHasEverHadAccess] = React.useState(hasToolAccess);
     const [wasManuallyClosedAfterAccess, setWasManuallyClosedAfterAccess] = React.useState(false);
+    // Set white as default stroke color when video background is active
+    React.useEffect(() => {
+        if (hasVideoBackground && state.color === '#000000') {
+            // Only change if currently black, to avoid overriding user's choice
+            dispatch({ type: 'SET_COLOR', payload: '#FFFFFF' });
+        }
+    }, [hasVideoBackground, state.color, dispatch]);
     // Track initial access grant
     React.useEffect(() => {
         if (hasToolAccess && !hasEverHadAccess) {
@@ -37159,7 +37184,7 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
         setWasManuallyClosedAfterAccess(false);
     };
     const strokeColors = [
-        '#000000', '#DC2626', '#059669', '#2563EB', '#EA580C', '#7C3AED'
+        '#FFFFFF', '#000000', '#DC2626', '#059669', '#2563EB', '#EA580C', '#7C3AED'
     ];
     const backgroundColors = [
         '#FFFFFF', '#F8FAFC', '#FEF2F2', '#F0FDF4', '#EFF6FF', '#1F2937', 'transparent'
@@ -37208,7 +37233,7 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
         dispatch({ type: 'SET_COLOR', payload: color });
     };
     const handleBackgroundColorChange = (color) => {
-        if (!hasToolAccess) {
+        if (!hasToolAccess || disableBackgroundChange) {
             console.warn('[STYLE_ACCESS] User does not have access to change background');
             return;
         }
@@ -37249,19 +37274,28 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
         if (!hasToolAccess) {
             return null;
         }
-        return (jsxRuntime.jsx("button", { className: "absolute top-20 left-4 w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-lg shadow-lg z-50", onClick: handleManualOpen, title: "Show Style Panel", children: jsxRuntime.jsx(ChevronRight, { size: 16, className: "text-current" }) }));
+        return (jsxRuntime.jsx("button", { className: "absolute top-20 left-4 w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-lg shadow-lg z-10", onClick: handleManualOpen, title: "Show Style Panel", children: jsxRuntime.jsx(ChevronRight, { size: 16, className: "text-current" }) }));
     }
-    return (jsxRuntime.jsxs("div", { className: `absolute bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-40 ${isDragging ? 'shadow-2xl' : ''} ${!hasToolAccess ? 'opacity-75' : ''}`, style: {
+    return (jsxRuntime.jsxs("div", { className: `absolute bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-10 ${isDragging ? 'shadow-2xl' : ''} ${!hasToolAccess ? 'opacity-75' : ''}`, style: {
             left: position.x,
             top: position.y,
             width: '250px',
             maxHeight: '80vh',
             cursor: isDragging ? 'grabbing' : 'grab'
-        }, onMouseDown: handleMouseDown, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-t-lg", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-200", children: "Style Panel" }), !hasToolAccess && (jsxRuntime.jsx("span", { className: "text-xs bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-300 px-2 py-1 rounded", children: "Locked" }))] }), jsxRuntime.jsx("button", { className: "close-button p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded", onClick: handleManualClose, onMouseDown: (e) => e.stopPropagation(), title: "Close Panel", children: jsxRuntime.jsx(ChevronLeft, { size: 14, className: "text-gray-600 dark:text-gray-300" }) })] }), jsxRuntime.jsxs("div", { className: "sidebar-content p-3 overflow-y-auto", style: { maxHeight: 'calc(80vh - 40px)' }, children: [!hasToolAccess && (jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-orange-50 dark:bg-orange-900/30 border border-orange-200 dark:border-orange-800 rounded-lg text-center", children: [jsxRuntime.jsx("div", { className: "text-orange-700 dark:text-orange-300 text-sm font-medium mb-1", children: "\uD83D\uDD12 Tools Locked" }), jsxRuntime.jsx("div", { className: "text-orange-600 dark:text-orange-400 text-xs", children: "Contact admin for access" })] })), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Stroke Color" }), jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-1", children: strokeColors.map((color) => (jsxRuntime.jsx("button", { className: `w-6 h-6 rounded border-2 transition-all ${!hasToolAccess
-                                        ? 'opacity-50 cursor-not-allowed border-gray-200 dark:border-gray-700'
+        }, onMouseDown: handleMouseDown, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-2 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-t-lg", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-200", children: "Style Panel" }), !hasToolAccess && (jsxRuntime.jsx("span", { className: "text-xs bg-orange-100 dark:bg-orange-900 text-orange-600 dark:text-orange-300 px-2 py-1 rounded", children: "Locked" }))] }), jsxRuntime.jsx("button", { className: "close-button p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded", onClick: handleManualClose, onMouseDown: (e) => e.stopPropagation(), title: "Close Panel", children: jsxRuntime.jsx(ChevronLeft, { size: 14, className: "text-gray-600 dark:text-gray-300" }) })] }), jsxRuntime.jsxs("div", { className: "sidebar-content p-3 overflow-y-auto", style: { maxHeight: 'calc(80vh - 40px)' }, children: [!hasToolAccess && (jsxRuntime.jsxs("div", { className: "mb-4 p-3 bg-orange-50 dark:bg-orange-900/30 border border-orange-200 dark:border-orange-800 rounded-lg text-center", children: [jsxRuntime.jsx("div", { className: "text-orange-700 dark:text-orange-300 text-sm font-medium mb-1", children: "\uD83D\uDD12 Tools Locked" }), jsxRuntime.jsx("div", { className: "text-orange-600 dark:text-orange-400 text-xs", children: "Contact admin for access" })] })), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Stroke Color" }), jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-1", children: strokeColors.map((color) => (jsxRuntime.jsx("button", { className: `w-6 h-6 rounded transition-all relative ${!hasToolAccess
+                                        ? 'opacity-50 cursor-not-allowed border-2 border-gray-200 dark:border-gray-700'
                                         : state.color === color
-                                            ? 'border-purple-400 dark:border-purple-500 scale-110'
-                                            : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`, style: { backgroundColor: color }, onClick: () => handleColorChange(color), disabled: !hasToolAccess, title: hasToolAccess ? color : 'Access restricted' }, color))) })] }), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Background" }), jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-1", children: backgroundColors.map((color) => (jsxRuntime.jsx("button", { className: `w-6 h-6 rounded border-2 transition-all relative ${!hasToolAccess
+                                            ? 'border-[3px] border-yellow-400 dark:border-yellow-300 scale-125 shadow-lg'
+                                            : color === '#FFFFFF'
+                                                ? 'border-2 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500'
+                                                : 'border-2 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`, style: {
+                                        backgroundColor: color,
+                                        boxShadow: color === '#FFFFFF'
+                                            ? 'inset 0 0 0 1px rgba(0,0,0,0.15)'
+                                            : state.color === color
+                                                ? '0 4px 12px rgba(234, 179, 8, 0.5), 0 0 0 2px rgba(234, 179, 8, 0.3)'
+                                                : 'none'
+                                    }, onClick: () => handleColorChange(color), disabled: !hasToolAccess, title: hasToolAccess ? (color === '#FFFFFF' ? 'White' : color) : 'Access restricted', children: state.color === color && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: color === '#FFFFFF' || color === '#EA580C' || color === '#DC2626' ? '#000000' : '#FFFFFF', strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) })) }, color))) })] }), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Background" }), disableBackgroundChange && (jsxRuntime.jsx("div", { className: "p-3 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg text-center", children: jsxRuntime.jsx("div", { className: "text-blue-700 dark:text-blue-300 text-xs", title: "Disabled when video background is active", children: "\uD83D\uDD12 Background selection locked" }) })), !disableBackgroundChange && (jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-1", children: backgroundColors.map((color) => (jsxRuntime.jsx("button", { className: `w-6 h-6 rounded border-2 transition-all relative ${!hasToolAccess
                                         ? 'opacity-50 cursor-not-allowed border-gray-200 dark:border-gray-700'
                                         : state.backgroundColor === color
                                             ? 'border-blue-400 dark:border-blue-500 scale-110'
@@ -37269,7 +37303,7 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
                                         backgroundColor: color === 'transparent' ? 'white' : color
                                     }, onClick: () => handleBackgroundColorChange(color), disabled: !hasToolAccess, title: hasToolAccess ? (color === 'transparent' ? 'Transparent' : color) : 'Access restricted', children: color === 'transparent' && (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-red-500 to-red-500 opacity-50 rounded", style: {
                                             background: 'linear-gradient(45deg, transparent 40%, #ef4444 40%, #ef4444 60%, transparent 60%)'
-                                        } })) }, color))) })] }), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Stroke width" }), jsxRuntime.jsx("div", { className: "flex gap-2", children: strokeWidths.map((width) => (jsxRuntime.jsx("button", { className: `flex-1 p-2 rounded flex items-center justify-center ${!hasToolAccess
+                                        } })) }, color))) }))] }), jsxRuntime.jsxs("div", { className: "mb-4", children: [jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-200 mb-2", children: "Stroke width" }), jsxRuntime.jsx("div", { className: "flex gap-2", children: strokeWidths.map((width) => (jsxRuntime.jsx("button", { className: `flex-1 p-2 rounded flex items-center justify-center ${!hasToolAccess
                                         ? 'opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600'
                                         : state.strokeWidth === width
                                             ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300'
@@ -42254,7 +42288,7 @@ const disconnectSocket = () => {
     }
 };
 
-const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId }) => {
+const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId, transparentBackground = false, videoStream }) => {
     const { state, dispatch, setQueueAction, requestStateFromPeers, webSocketUrl } = useWhiteboard();
     const [lastCollaborativeAction, setLastCollaborativeAction] = React.useState(null);
     const [hasRequestedState, setHasRequestedState] = React.useState(false);
@@ -42268,6 +42302,25 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId }) => {
     React.useEffect(() => {
         dispatch({ type: 'SET_USER_ID', payload: userId });
     }, [userId, dispatch]);
+    // Set background color based on transparentBackground prop or videoStream presence
+    React.useEffect(() => {
+        if (transparentBackground || videoStream) {
+            // Force transparent background when transparentBackground flag is set or video is active
+            dispatch({ type: 'SET_BACKGROUND_COLOR', payload: 'transparent' });
+        }
+        else if (!transparentBackground && !videoStream) {
+            // Reset to white when screen share stops and transparentBackground is false
+            dispatch({ type: 'SET_BACKGROUND_COLOR', payload: '#FFFFFF' });
+        }
+    }, [transparentBackground, videoStream, dispatch]);
+    // Video ref for setting srcObject
+    const videoRef = React.useRef(null);
+    // Set video srcObject when videoStream changes
+    React.useEffect(() => {
+        if (videoRef.current && videoStream) {
+            videoRef.current.srcObject = videoStream;
+        }
+    }, [videoStream]);
     // Determine if current user has tool access (using synced allowed users for cross-computer sync)
     const hasToolAccess = React.useMemo(() => {
         return isAdmin || syncedAllowedUsers.includes(userId) || isGloballyUnlocked;
@@ -42424,10 +42477,57 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId }) => {
     }, [state.activeDrawings, state.lastClearTimestamp, dispatch]);
     // Export functions to pass to toolbar
     const handleExportImage = React.useCallback((format) => {
-        if (boardRef.current) {
+        if (!boardRef.current) {
+            return;
+        }
+        // If video is active, capture both video and canvas
+        if (videoStream && videoRef.current) {
+            const video = videoRef.current;
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            // Set canvas size to match the whiteboard
+            canvas.width = video.videoWidth || video.offsetWidth;
+            canvas.height = video.videoHeight || video.offsetHeight;
+            try {
+                // Draw the video frame
+                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                // Get the Konva stage data URL
+                const stageDataURL = boardRef.current.getStageDataURL(format);
+                // Create an image from the stage
+                const stageImage = new Image();
+                stageImage.onload = () => {
+                    // Draw the annotations on top of the video
+                    ctx.drawImage(stageImage, 0, 0, canvas.width, canvas.height);
+                    // Convert to blob and download
+                    canvas.toBlob((blob) => {
+                        if (blob) {
+                            const timestamp = new Date().toISOString().slice(0, 16).replace('T', '_').replace(/:/g, '-');
+                            const filename = `whiteboard_video_annotation_${timestamp}.${format}`;
+                            const link = document.createElement('a');
+                            link.download = filename;
+                            link.href = URL.createObjectURL(blob);
+                            document.body.appendChild(link);
+                            link.click();
+                            document.body.removeChild(link);
+                            URL.revokeObjectURL(link.href);
+                        }
+                    }, format === 'png' ? 'image/png' : 'image/jpeg', 1.0);
+                };
+                stageImage.src = stageDataURL;
+            }
+            catch (error) {
+                console.error('Failed to export video with annotations:', error);
+                // Fallback to regular export
+                boardRef.current.exportAsImage(format);
+            }
+        }
+        else {
+            // No video - regular export
             boardRef.current.exportAsImage(format);
         }
-    }, []);
+    }, [videoStream]);
     const handleExportPDF = React.useCallback(() => {
         if (boardRef.current) {
             boardRef.current.exportAsPDF();
@@ -42548,7 +42648,14 @@ const Whiteboard = ({ roomId, isAdmin = false, allowedUsers = [], userId }) => {
             disconnectSocket();
         };
     }, []);
-    return (jsxRuntime.jsxs("div", { className: "relative h-screen", children: [jsxRuntime.jsx(TopToolbar, { queueAction: queueAction, handleExportImage: handleExportImage, handleExportPDF: handleExportPDF, handleClear: handleClear, handleLockToggle: handleLockToggle, isAdmin: isAdmin, hasToolAccess: hasToolAccess, isGloballyUnlocked: isGloballyUnlocked }), jsxRuntime.jsxs("div", { className: "w-full h-full relative overflow-hidden", children: [jsxRuntime.jsx(Board, { roomId: roomId, queueAction: queueAction, hasToolAccess: hasToolAccess, ref: boardRef }), jsxRuntime.jsx(LeftSidebar, { queueAction: queueAction, hasToolAccess: hasToolAccess, shouldBeOpenByDefault: shouldSidebarBeOpen })] })] }));
+    return (jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden", style: { isolation: 'isolate' }, children: [jsxRuntime.jsx(TopToolbar, { queueAction: queueAction, handleExportImage: handleExportImage, handleExportPDF: handleExportPDF, handleClear: handleClear, handleLockToggle: handleLockToggle, isAdmin: isAdmin, hasToolAccess: hasToolAccess, isGloballyUnlocked: isGloballyUnlocked, hasVideoBackground: !!videoStream }), jsxRuntime.jsxs("div", { className: "w-full h-full relative overflow-hidden", style: { isolation: 'isolate' }, children: [videoStream && (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black", style: { zIndex: 0, pointerEvents: 'none' }, children: jsxRuntime.jsx("video", { ref: videoRef, autoPlay: true, playsInline: true, muted: true, style: {
+                                position: 'absolute',
+                                inset: 0,
+                                width: '100%',
+                                height: '100%',
+                                objectFit: 'contain',
+                                pointerEvents: 'none',
+                            } }) })), jsxRuntime.jsx("div", { className: "relative w-full h-full", style: { zIndex: 1 }, children: jsxRuntime.jsx(Board, { roomId: roomId, queueAction: queueAction, hasToolAccess: hasToolAccess, ref: boardRef }) }), jsxRuntime.jsx(LeftSidebar, { queueAction: queueAction, hasToolAccess: hasToolAccess, shouldBeOpenByDefault: shouldSidebarBeOpen, disableBackgroundChange: transparentBackground || !!videoStream, hasVideoBackground: !!videoStream })] })] }));
 };
 
 const useCapture = () => {