@ngenux/ngage-whiteboarding 1.0.4 → 1.0.5

package/dist/index.js

@@ -37071,6 +37071,14 @@ const Undo2 = createLucideIcon("Undo2", [
 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 [isInitialized, setIsInitialized] = React.useState(false);
+    // Wait for context to be fully initialized before rendering
+    // Check that state.userId is set to ensure context is fully ready
+    React.useEffect(() => {
+        if (state && state.userId) {
+            setIsInitialized(true);
+        }
+    }, [state]);
     const handleToggleVisibility = () => {
         setIsVisible(!isVisible);
     };
@@ -37132,6 +37140,10 @@ const TopToolbar = ({ queueAction, handleExportImage, handleClear, handleLockTog
             }
         }
     };
+    // Don't render until fully initialized to prevent race conditions
+    if (!isInitialized) {
+        return null;
+    }
     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
@@ -37149,6 +37161,14 @@ 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);
+    const [isInitialized, setIsInitialized] = React.useState(false);
+    // Wait for context to be fully initialized before rendering
+    // Check that state.userId is set to ensure context is fully ready
+    React.useEffect(() => {
+        if (state && state.userId) {
+            setIsInitialized(true);
+        }
+    }, [state]);
     // Set white as default stroke color when video background is active
     React.useEffect(() => {
         if (hasVideoBackground && state.color === '#000000') {
@@ -37269,6 +37289,10 @@ const LeftSidebar = ({ queueAction, hasToolAccess = false, shouldBeOpenByDefault
         // Only update local state - don't broadcast opacity changes to other users
         dispatch({ type: 'SET_OPACITY', payload: opacity });
     };
+    // Don't render until fully initialized to prevent race conditions
+    if (!isInitialized) {
+        return null;
+    }
     if (!isVisible) {
         // Only show the sidebar toggle button if user has tool access
         if (!hasToolAccess) {