aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/collaboration/CollaborativeGlassWorkspace.js

@@ -0,0 +1,899 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Undo, Redo, Mic, MicOff, Layers, Minimize, Maximize, Wifi, Copy, ClipboardPaste, Trash2, Save, Settings } from 'lucide-react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { createGlassStyle } from '../../core/mixins/glassMixins.js';
+
+function CollaborativeGlassWorkspace(props) {
+  // Wrap the workspace in providers - in real implementation this would use actual providers
+  return jsx(GlassCollaborationProvider, {
+    "data-glass-component": true,
+    workspaceId: props.workspaceId,
+    userId: props.userId,
+    userName: props.userName,
+    userEmail: props.userEmail,
+    userRole: props.userRole,
+    userAvatar: props.userAvatar,
+    autoConnect: true,
+    enableVoice: props.enableVoiceChat,
+    enableCursorTracking: props.showCursors,
+    enableComments: props.enableComments,
+    showDebugInfo: false,
+    children: jsx(WorkspaceContent, {
+      ...props
+    })
+  });
+}
+function WorkspaceContent({
+  className = "",
+  layout = "split",
+  theme = "dark",
+  showMiniMap = true,
+  showOnlineUsers = true,
+  showCursors = true,
+  enableAdvancedEffects = true,
+  canvasWidth = 1200,
+  canvasHeight = 800,
+  gridSize = 20,
+  showGrid = true,
+  showRulers = false,
+  enableSnapping = true,
+  enableVoiceChat = false,
+  enableScreenSharing = false,
+  enableComments = true,
+  enableVersionControl = true,
+  enableRealTimeSync = true,
+  onWorkspaceReady,
+  onUserJoined,
+  onUserLeft,
+  onElementSelected,
+  onError
+}) {
+  // Mock collaboration context - in real implementation this would use actual context
+  const mockCollaborationContext = {
+    isConnected: true,
+    isConnecting: false,
+    workspace: {
+      id: "workspace-1",
+      name: "Collaborative Design Session"
+    },
+    users: [],
+    currentUser: {
+      id: "user-1",
+      name: "Current User",
+      role: "admin"
+    },
+    onlineUsers: [{
+      id: "user-1",
+      name: "Alice Johnson",
+      role: "admin",
+      avatar: "",
+      color: "var(--glass-color-primary)"
+    }, {
+      id: "user-2",
+      name: "Bob Smith",
+      role: "editor",
+      avatar: "",
+      color: "var(--glass-color-success)"
+    }, {
+      id: "user-3",
+      name: "Carol Davis",
+      role: "viewer",
+      avatar: "",
+      color: "var(--glass-color-warning)"
+    }],
+    canEdit: true,
+    isVoiceActive: false,
+    voiceUsers: [],
+    toggleVoice: () => {},
+    addComment: () => {},
+    createSnapshot: () => {},
+    undo: () => {},
+    redo: () => {},
+    canUndo: true,
+    canRedo: false,
+    connect: () => {},
+    disconnect: () => {}
+  };
+  const {
+    isConnected,
+    isConnecting,
+    workspace,
+    currentUser,
+    onlineUsers,
+    canEdit,
+    isVoiceActive,
+    voiceUsers,
+    toggleVoice,
+    createSnapshot,
+    undo,
+    redo,
+    canUndo,
+    canRedo
+  } = mockCollaborationContext;
+  // Local state
+  const [activeLayout, setActiveLayout] = useState(layout);
+  const [selectedElementId, setSelectedElementId] = useState(null);
+  const [showSidebar, setShowSidebar] = useState(true);
+  const [showToolbar, setShowToolbar] = useState(true);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showVoicePanel, setShowVoicePanel] = useState(false);
+  const [showVersionPanel, setShowVersionPanel] = useState(false);
+  // Handle workspace events
+  useEffect(() => {
+    if (workspace) {
+      onWorkspaceReady?.(workspace);
+    }
+  }, [workspace, onWorkspaceReady]);
+  // Handle element selection
+  const handleElementSelect = useCallback(elementId => {
+    setSelectedElementId(elementId);
+    onElementSelected?.(elementId);
+  }, [onElementSelected]);
+  // Layout configurations
+  const layoutConfig = useMemo(() => {
+    switch (activeLayout) {
+      case "canvas-focused":
+        return {
+          canvasSize: "flex-1",
+          editorSize: "w-80",
+          direction: "row",
+          canvasFirst: true
+        };
+      case "editor-focused":
+        return {
+          canvasSize: "w-80",
+          editorSize: "flex-1",
+          direction: "row",
+          canvasFirst: false
+        };
+      case "tabs":
+        return {
+          canvasSize: "w-full",
+          editorSize: "w-full",
+          direction: "col",
+          canvasFirst: true
+        };
+      default:
+        // 'split'
+        return {
+          canvasSize: "flex-1",
+          editorSize: "flex-1",
+          direction: "row",
+          canvasFirst: true
+        };
+    }
+  }, [activeLayout]);
+  // Connection status
+  if (!isConnected && !isConnecting) {
+    return jsx(WorkspaceConnectionError, {
+      onRetry: () => {},
+      error: "Failed to connect to collaboration server"
+    });
+  }
+  if (isConnecting) {
+    return jsx(WorkspaceLoadingState, {});
+  }
+  if (!workspace || !currentUser) {
+    return jsx(WorkspaceLoadingState, {
+      message: "Setting up workspace..."
+    });
+  }
+  return jsxs("div", {
+    className: cn("glass-collaborative-workspace glass-h-screen glass-flex glass-flex-col glass-surface-dark", className),
+    role: "main",
+    "aria-live": "polite",
+    children: [showToolbar && jsx(WorkspaceHeader, {
+      workspace: workspace,
+      currentUser: currentUser,
+      onlineUsers: onlineUsers,
+      canEdit: canEdit,
+      isVoiceActive: isVoiceActive,
+      voiceUsers: voiceUsers,
+      onToggleVoice: toggleVoice,
+      onCreateSnapshot: createSnapshot,
+      onUndo: undo,
+      onRedo: redo,
+      canUndo: canUndo,
+      canRedo: canRedo,
+      onLayoutChange: setActiveLayout,
+      activeLayout: activeLayout,
+      onToggleSidebar: () => setShowSidebar(!showSidebar),
+      onToggleFullscreen: () => setIsFullscreen(!isFullscreen),
+      isFullscreen: isFullscreen,
+      showOnlineUsers: showOnlineUsers,
+      enableVoiceChat: enableVoiceChat,
+      enableVersionControl: enableVersionControl
+    }), jsxs("div", {
+      className: cn("glass-flex-1 glass-flex glass-min-h-0", layoutConfig.direction === "col" ? "glass-flex-col" : "glass-flex-row"),
+      children: [activeLayout === "tabs" ? jsx(WorkspaceTabs, {
+        selectedElementId: selectedElementId,
+        onElementSelect: handleElementSelect,
+        canvasWidth: canvasWidth,
+        canvasHeight: canvasHeight,
+        gridSize: gridSize,
+        showGrid: showGrid,
+        showRulers: showRulers,
+        enableSnapping: enableSnapping,
+        enableComments: enableComments,
+        enableRealTimeSync: enableRealTimeSync
+      }) : jsxs(Fragment, {
+        children: [layoutConfig.canvasFirst && jsx("div", {
+          className: cn(layoutConfig.canvasSize, "glass-min-w-0 glass-p-4"),
+          children: jsx(CollaborativeGlassCanvas, {
+            width: canvasWidth,
+            height: canvasHeight,
+            gridSize: gridSize,
+            showGrid: showGrid,
+            showRulers: showRulers,
+            enableSnapping: enableSnapping,
+            onElementSelect: handleElementSelect,
+            className: cn("glass-h-full")
+          })
+        }), jsx("div", {
+          className: cn(layoutConfig.editorSize, "glass-min-w-0 glass-p-4"),
+          children: jsx(MultiUserGlassEditor, {
+            target: selectedElementId || "global",
+            showPreview: true,
+            showHistory: enableVersionControl,
+            showComments: enableComments,
+            enableRealTimeSync: enableRealTimeSync,
+            layout: "vertical",
+            className: "glass-h-full"
+          })
+        }), !layoutConfig.canvasFirst && jsx("div", {
+          className: cn(layoutConfig.canvasSize, "glass-min-w-0 glass-p-4"),
+          children: jsx(CollaborativeGlassCanvas, {
+            width: canvasWidth,
+            height: canvasHeight,
+            gridSize: gridSize,
+            showGrid: showGrid,
+            showRulers: showRulers,
+            enableSnapping: enableSnapping,
+            onElementSelect: handleElementSelect,
+            className: cn("glass-h-full")
+          })
+        })]
+      }), showSidebar && jsx(WorkspaceSidebar, {
+        selectedElementId: selectedElementId,
+        onElementSelect: handleElementSelect,
+        showMiniMap: showMiniMap,
+        showOnlineUsers: showOnlineUsers,
+        onlineUsers: onlineUsers,
+        currentUser: currentUser,
+        isVoiceActive: isVoiceActive,
+        voiceUsers: voiceUsers,
+        enableComments: enableComments
+      })]
+    }), showCursors && (enableAdvancedEffects ? jsx(GlassTeamCursorsWithEffects, {
+      showNames: true,
+      showVoiceIndicators: enableVoiceChat,
+      cursorSize: "md",
+      glassLevel: "medium",
+      enableRippleEffect: true,
+      enableGlowEffect: true
+    }) : jsx(GlassTeamCursors, {
+      showNames: true,
+      showVoiceIndicators: enableVoiceChat,
+      cursorSize: "md",
+      glassLevel: "medium"
+    })), showVoicePanel && enableVoiceChat && jsx(VoiceChatPanel, {
+      isActive: isVoiceActive,
+      voiceUsers: voiceUsers,
+      onClose: () => setShowVoicePanel(false),
+      onToggleVoice: toggleVoice
+    }), showVersionPanel && enableVersionControl && jsx(VersionControlPanel, {
+      onClose: () => setShowVersionPanel(false),
+      onCreateSnapshot: createSnapshot,
+      canUndo: canUndo,
+      canRedo: canRedo,
+      onUndo: undo,
+      onRedo: redo
+    }), jsx(WorkspaceFloatingActions, {
+      isVoiceActive: isVoiceActive,
+      onToggleVoice: toggleVoice,
+      onShowVoicePanel: () => setShowVoicePanel(true),
+      onShowVersionPanel: () => setShowVersionPanel(true),
+      onToggleFullscreen: () => setIsFullscreen(!isFullscreen),
+      enableVoiceChat: enableVoiceChat,
+      enableVersionControl: enableVersionControl
+    })]
+  });
+}
+// Mock provider components - in real implementation these would be actual providers
+function GlassCollaborationProvider({
+  children,
+  ...props
+}) {
+  return jsx(Fragment, {
+    children: children
+  });
+}
+// Workspace Header Component
+function WorkspaceHeader({
+  workspace,
+  currentUser,
+  onlineUsers,
+  canEdit,
+  isVoiceActive,
+  voiceUsers,
+  onToggleVoice,
+  onCreateSnapshot,
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo,
+  onLayoutChange,
+  activeLayout,
+  onToggleSidebar,
+  onToggleFullscreen,
+  isFullscreen,
+  showOnlineUsers,
+  enableVoiceChat,
+  enableVersionControl
+}) {
+  const [showLayoutMenu, setShowLayoutMenu] = useState(false);
+  return jsxs("div", {
+    className: 'workspace-header glass-flex glass-items-center glass-justify-between glass-px-4 glass-py-3 glass-border-b glass-border-white/10',
+    style: createGlassStyle({
+      intent: "neutral",
+      elevation: "level2"
+    }),
+    children: [jsxs("div", {
+      className: "glass-flex glass-items-center glass-gap-4",
+      children: [jsx("h1", {
+        className: 'glass-text-xl font-bold text-primary',
+        children: workspace.name
+      }), jsx("div", {
+        className: 'glass-text-sm text-primary/60',
+        children: canEdit ? "✏️ Editing" : "👁️ Viewing"
+      })]
+    }), jsxs("div", {
+      className: "glass-flex glass-items-center glass-gap-2",
+      children: [enableVersionControl && jsxs(Fragment, {
+        children: [jsx("button", {
+          onClick: onUndo,
+          disabled: !canUndo,
+          className: 'glass-p-2 glass-radius hover:glass-surface-subtle/10 disabled:opacity-50 text-primary glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
+          title: "Undo",
+          children: jsx(Undo, {
+            className: 'w-4 h-4'
+          })
+        }), jsx("button", {
+          onClick: onRedo,
+          disabled: !canRedo,
+          className: 'glass-p-2 glass-radius hover:glass-surface-subtle/10 disabled:opacity-50 text-primary glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
+          title: "Redo",
+          children: jsx(Redo, {
+            className: 'w-4 h-4'
+          })
+        }), jsx("button", {
+          onClick: () => onCreateSnapshot(`Snapshot ${Date.now()}`),
+          className: 'glass-px-3 glass-py-2 glass-text-sm glass-surface-blue text-primary glass-radius hover:glass-surface-blue',
+          title: "Create Snapshot",
+          children: "\uD83D\uDCF7 Snapshot"
+        })]
+      }), jsxs("div", {
+        className: 'relative',
+        children: [jsx("button", {
+          onClick: () => setShowLayoutMenu(!showLayoutMenu),
+          className: 'glass-p-2 glass-radius hover:glass-surface-subtle/10 text-primary',
+          title: "Change Layout",
+          children: "\uD83D\uDD00"
+        }), showLayoutMenu && jsx("div", {
+          className: 'absolute top-full left-0 mt-2 glass-p-2 bg-slate-800 glass-border glass-border-white/20 glass-radius glass-shadow-lg z-50',
+          children: ["split", "tabs", "canvas-focused", "editor-focused"].map(layout => jsx("button", {
+            onClick: () => {
+              onLayoutChange(layout);
+              setShowLayoutMenu(false);
+            },
+            className: `block w-full text-left px-3 py-2 text-sm rounded hover:bg-white/10 text-white ${activeLayout === layout ? "bg-blue-600" : ""}`,
+            children: layout.charAt(0).toUpperCase() + layout.slice(1).replace("-", " ")
+          }, layout))
+        })]
+      }), enableVoiceChat && jsxs("button", {
+        onClick: onToggleVoice,
+        className: `p-2 rounded ${isVoiceActive ? "bg-green-600 text-white" : "hover:bg-white/10 text-white"}`,
+        title: isVoiceActive ? "Leave Voice Chat" : "Join Voice Chat",
+        children: [isVoiceActive ? jsx(Mic, {
+          className: 'w-4 h-4'
+        }) : jsx(MicOff, {
+          className: 'w-4 h-4'
+        }), voiceUsers.length > 0 && ` (${voiceUsers.length})`]
+      })]
+    }), jsxs("div", {
+      className: "glass-flex glass-items-center glass-gap-2",
+      children: [showOnlineUsers && jsxs("div", {
+        className: "glass-flex glass-items-center glass-gap-2",
+        children: [jsxs("div", {
+          className: 'glass-flex -space-x-2',
+          children: [onlineUsers.slice(0, 5).map(user => jsx("div", {
+            className: 'w-8 h-8 glass-radius-full glass-border-2 glass-border-white glass-flex glass-items-center glass-justify-center glass-text-xs font-bold text-primary',
+            style: {
+              backgroundColor: user.color
+            },
+            title: user.name,
+            children: user.name[0]
+          }, user.id)), onlineUsers.length > 5 && jsxs("div", {
+            className: 'w-8 h-8 glass-radius-full glass-surface-primary glass-border-2 glass-border-white glass-flex glass-items-center glass-justify-center glass-text-xs text-primary',
+            children: ["+", onlineUsers.length - 5]
+          })]
+        }), jsxs("span", {
+          className: 'glass-text-sm text-primary/60',
+          children: [onlineUsers.length, " online"]
+        })]
+      }), jsx("button", {
+        onClick: onToggleSidebar,
+        className: 'glass-p-2 glass-radius hover:glass-surface-subtle/10 text-primary glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
+        title: "Toggle Sidebar",
+        children: jsx(Layers, {
+          className: 'w-4 h-4'
+        })
+      }), jsx("button", {
+        onClick: onToggleFullscreen,
+        className: 'glass-p-2 glass-radius hover:glass-surface-subtle/10 text-primary glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
+        title: "Toggle Fullscreen",
+        children: isFullscreen ? jsx(Minimize, {
+          className: 'w-4 h-4'
+        }) : jsx(Maximize, {
+          className: 'w-4 h-4'
+        })
+      })]
+    })]
+  });
+}
+// Mock sub-components - in real implementation these would be actual components
+function WorkspaceTabs({
+  selectedElementId,
+  onElementSelect,
+  ...props
+}) {
+  const [activeTab, setActiveTab] = useState("canvas");
+  return jsxs("div", {
+    className: "glass-flex glass-flex-col glass-h-full",
+    children: [jsxs("div", {
+      className: 'glass-flex glass-border-b glass-border-white/20 bg-slate-800',
+      children: [jsx("button", {
+        onClick: () => setActiveTab("canvas"),
+        className: `px-6 py-3 font-medium ${activeTab === "canvas" ? "text-white border-b-2 border-blue-400 bg-slate-700" : "text-white/70 hover:text-white"}`,
+        children: "\uD83C\uDFA8 Canvas"
+      }), jsx("button", {
+        onClick: () => setActiveTab("editor"),
+        className: `px-6 py-3 font-medium ${activeTab === "editor" ? "text-white border-b-2 border-blue-400 bg-slate-700" : "text-white/70 hover:text-white"}`,
+        children: "\u2699\uFE0F Properties"
+      })]
+    }), jsx("div", {
+      className: "glass-flex-1 glass-p-4",
+      children: activeTab === "canvas" ? jsx(CollaborativeGlassCanvas, {
+        ...props,
+        onElementSelect: onElementSelect,
+        className: "glass-h-full"
+      }) : jsx(MultiUserGlassEditor, {
+        ...props,
+        className: "glass-h-full"
+      })
+    })]
+  });
+}
+function CollaborativeGlassCanvas({
+  width,
+  height,
+  gridSize,
+  showGrid,
+  showRulers,
+  enableSnapping,
+  onElementSelect,
+  className
+}) {
+  return jsxs("div", {
+    className: `collaborative-canvas relative ${className}`,
+    style: createGlassStyle({
+      intent: "neutral",
+      elevation: "level2"
+    }),
+    children: [showGrid && jsx("div", {
+      className: 'absolute inset-0 opacity-20',
+      style: {
+        backgroundImage: `linear-gradient(var(--glass-bg-default) 1px, transparent 1px), linear-gradient(90deg, var(--glass-bg-default) 1px, transparent 1px)`,
+        backgroundSize: `${gridSize}px ${gridSize}px`
+      }
+    }), jsx("div", {
+      className: 'glass-flex glass-items-center glass-justify-center glass-h-full text-primary/60',
+      children: jsxs("div", {
+        className: 'text-center',
+        children: [jsx("div", {
+          className: 'glass-text-4xl mb-4',
+          children: "\uD83C\uDFA8"
+        }), jsx("p", {
+          className: "glass-text-lg",
+          children: "Collaborative Canvas"
+        }), jsx("p", {
+          className: "glass-text-sm",
+          children: "Click to start designing together"
+        })]
+      })
+    })]
+  });
+}
+function MultiUserGlassEditor({
+  target,
+  showPreview,
+  showHistory,
+  showComments,
+  enableRealTimeSync,
+  layout,
+  className
+}) {
+  return jsx("div", {
+    className: `multi-user-editor ${className}`,
+    style: createGlassStyle({
+      intent: "neutral",
+      elevation: "level2"
+    }),
+    children: jsxs("div", {
+      className: "glass-p-4",
+      children: [jsxs("div", {
+        className: 'glass-flex glass-items-center glass-justify-between mb-4',
+        children: [jsx("h3", {
+          className: 'text-primary font-semibold',
+          children: "Properties Editor"
+        }), jsxs("div", {
+          className: "glass-flex glass-gap-2",
+          children: [showHistory && jsx("button", {
+            className: 'glass-p-2 glass-radius hover:glass-surface-subtle/10 text-primary',
+            children: "\uD83D\uDCDC"
+          }), showComments && jsx("button", {
+            className: 'glass-p-2 glass-radius hover:glass-surface-subtle/10 text-primary',
+            children: "\uD83D\uDCAC"
+          }), enableRealTimeSync && jsxs("div", {
+            className: 'glass-flex glass-items-center glass-gap-1 text-primary glass-text-sm',
+            children: [jsx(Wifi, {
+              className: 'w-3 h-3'
+            }), " Live"]
+          })]
+        })]
+      }), jsxs("div", {
+        className: 'space-y-4',
+        children: [jsxs("div", {
+          children: [jsx("label", {
+            className: 'block glass-text-sm font-medium text-primary/80 mb-2',
+            children: "Target Element"
+          }), jsx("div", {
+            className: 'glass-p-2 glass-surface-subtle/5 glass-radius text-primary glass-text-sm',
+            children: target
+          })]
+        }), jsxs("div", {
+          children: [jsx("label", {
+            className: 'block glass-text-sm font-medium text-primary/80 mb-2',
+            children: "Properties"
+          }), jsxs("div", {
+            className: 'space-y-2',
+            children: [jsxs("div", {
+              className: "glass-flex glass-items-center glass-gap-2",
+              children: [jsx("span", {
+                className: 'text-primary/60 glass-text-sm w-20',
+                children: "Width:"
+              }), jsx("input", {
+                type: "number",
+                className: 'glass-flex-1 glass-p-2 glass-surface-subtle/10 glass-radius text-primary glass-text-sm glass-touch-target glass-contrast-guard',
+                placeholder: "Auto"
+              })]
+            }), jsxs("div", {
+              className: "glass-flex glass-items-center glass-gap-2",
+              children: [jsx("span", {
+                className: 'text-primary/60 glass-text-sm w-20',
+                children: "Height:"
+              }), jsx("input", {
+                type: "number",
+                className: 'glass-flex-1 glass-p-2 glass-surface-subtle/10 glass-radius text-primary glass-text-sm glass-touch-target glass-contrast-guard',
+                placeholder: "Auto"
+              })]
+            }), jsxs("div", {
+              className: "glass-flex glass-items-center glass-gap-2",
+              children: [jsx("span", {
+                className: 'text-primary/60 glass-text-sm w-20',
+                children: "Opacity:"
+              }), jsx("input", {
+                type: "range",
+                min: "0",
+                max: "1",
+                step: "0.1",
+                className: "glass-flex-1 glass-touch-target glass-contrast-guard"
+              })]
+            })]
+          })]
+        })]
+      })]
+    })
+  });
+}
+function WorkspaceSidebar({
+  selectedElementId,
+  onElementSelect,
+  showMiniMap,
+  showOnlineUsers,
+  onlineUsers,
+  currentUser,
+  isVoiceActive,
+  voiceUsers,
+  enableComments
+}) {
+  return jsxs("div", {
+    className: 'workspace-sidebar w-80 glass-border-l glass-border-white/20 glass-p-4 space-y-4',
+    style: createGlassStyle({
+      intent: "neutral",
+      elevation: "level2"
+    }),
+    children: [showMiniMap && jsxs("div", {
+      className: 'space-y-2',
+      children: [jsx("h3", {
+        className: 'glass-text-sm font-semibold text-primary/80 uppercase',
+        children: "Mini Map"
+      }), jsx("div", {
+        className: 'aspect-video bg-slate-800 glass-border glass-border-white/20 glass-radius glass-p-2',
+        children: jsx("div", {
+          className: 'glass-text-xs text-primary/50 text-center mt-8',
+          children: "Canvas overview"
+        })
+      })]
+    }), showOnlineUsers && jsxs("div", {
+      className: 'space-y-2',
+      children: [jsx("h3", {
+        className: 'glass-text-sm font-semibold text-primary/80 uppercase',
+        children: "Online Users"
+      }), jsx("div", {
+        className: 'space-y-2',
+        children: onlineUsers.map(user => jsxs("div", {
+          className: 'glass-flex glass-items-center glass-gap-3 glass-p-2 glass-radius hover:glass-surface-subtle/5',
+          children: [jsx("div", {
+            className: 'w-6 h-6 glass-radius-full glass-flex glass-items-center glass-justify-center glass-text-xs font-bold text-primary',
+            style: {
+              backgroundColor: user.color
+            },
+            children: user.name[0]
+          }), jsxs("div", {
+            className: "glass-flex-1",
+            children: [jsx("div", {
+              className: 'glass-text-sm text-primary',
+              children: user.name
+            }), jsx("div", {
+              className: 'glass-text-xs text-primary/50',
+              children: user.role
+            })]
+          }), voiceUsers.includes(user.id) && jsx("div", {
+            className: 'text-primary glass-text-xs',
+            children: "\uD83C\uDFA4"
+          })]
+        }, user.id))
+      })]
+    }), jsxs("div", {
+      className: 'space-y-2',
+      children: [jsx("h3", {
+        className: 'glass-text-sm font-semibold text-primary/80 uppercase',
+        children: "Quick Actions"
+      }), jsxs("div", {
+        className: 'space-y-2',
+        children: [jsxs("button", {
+          className: 'glass-w-full text-left glass-px-3 glass-py-2 glass-text-sm glass-surface-subtle/5 hover:glass-surface-subtle/10 glass-radius text-primary',
+          children: [jsx(Copy, {
+            className: 'w-4 h-4 inline mr-2'
+          }), "Copy Selected"]
+        }), jsxs("button", {
+          className: 'glass-w-full text-left glass-px-3 glass-py-2 glass-text-sm glass-surface-subtle/5 hover:glass-surface-subtle/10 glass-radius text-primary',
+          children: [jsx(ClipboardPaste, {
+            className: 'w-4 h-4 inline mr-2'
+          }), "Paste"]
+        }), jsxs("button", {
+          className: 'glass-w-full text-left glass-px-3 glass-py-2 glass-text-sm glass-surface-subtle/5 hover:glass-surface-subtle/10 glass-radius text-primary',
+          children: [jsx(Trash2, {
+            className: 'w-4 h-4 inline mr-2'
+          }), "Delete Selected"]
+        })]
+      })]
+    })]
+  });
+}
+function GlassTeamCursors({
+  showNames,
+  showVoiceIndicators,
+  cursorSize,
+  glassLevel
+}) {
+  return null; // Mock component
+}
+function GlassTeamCursorsWithEffects({
+  showNames,
+  showVoiceIndicators,
+  cursorSize,
+  glassLevel,
+  enableRippleEffect,
+  enableGlowEffect
+}) {
+  return null; // Mock component
+}
+function VoiceChatPanel({
+  isActive,
+  voiceUsers,
+  onClose,
+  onToggleVoice
+}) {
+  return jsxs("div", {
+    className: 'fixed bottom-4 right-4 w-80 glass-p-4 glass-radius-lg glass-border glass-border-white/20',
+    style: createGlassStyle({
+      intent: "neutral",
+      elevation: "level2"
+    }),
+    children: [jsxs("div", {
+      className: 'glass-flex glass-items-center glass-justify-between mb-4',
+      children: [jsx("h3", {
+        className: 'text-primary font-semibold',
+        children: "Voice Chat"
+      }), jsx("button", {
+        onClick: onClose,
+        className: 'glass-contrast-guard glass-focus glass-touch-target hover:text-primary text-primary/70',
+        children: "\u2715"
+      })]
+    }), jsx("div", {
+      className: 'space-y-2 mb-4',
+      children: voiceUsers.map(userId => jsxs("div", {
+        className: 'glass-flex glass-items-center glass-gap-2 text-primary glass-text-sm',
+        children: [jsx("div", {
+          className: 'w-2 h-2 glass-surface-green glass-radius-full animate-pulse'
+        }), "User ", userId]
+      }, userId))
+    }), jsxs("button", {
+      onClick: onToggleVoice,
+      className: `w-full py-2 rounded ${isActive ? "bg-red-600 hover:bg-red-700" : "bg-green-600 hover:bg-green-700"} text-white transition-colors`,
+      children: [isActive ? "🔇 Leave" : "🎤 Join", " Voice Chat"]
+    })]
+  });
+}
+function VersionControlPanel({
+  onClose,
+  onCreateSnapshot,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo
+}) {
+  return jsxs("div", {
+    className: 'fixed bottom-4 left-4 w-80 glass-p-4 glass-radius-lg glass-border glass-border-white/20',
+    style: createGlassStyle({
+      intent: "neutral",
+      elevation: "level2"
+    }),
+    children: [jsxs("div", {
+      className: 'glass-flex glass-items-center glass-justify-between mb-4',
+      children: [jsx("h3", {
+        className: 'text-primary font-semibold',
+        children: "Version Control"
+      }), jsx("button", {
+        onClick: onClose,
+        className: 'glass-contrast-guard glass-focus glass-touch-target hover:text-primary text-primary/70',
+        children: "\u2715"
+      })]
+    }), jsxs("div", {
+      className: 'space-y-2',
+      children: [jsxs("div", {
+        className: "glass-flex glass-gap-2",
+        children: [jsxs("button", {
+          onClick: onUndo,
+          disabled: !canUndo,
+          className: 'glass-flex-1 glass-py-2 glass-px-3 glass-radius glass-surface-subtle/10 text-primary disabled:opacity-50 glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
+          children: [jsx(Undo, {
+            className: 'w-4 h-4 inline mr-1'
+          }), "Undo"]
+        }), jsxs("button", {
+          onClick: onRedo,
+          disabled: !canRedo,
+          className: 'glass-flex-1 glass-py-2 glass-px-3 glass-radius glass-surface-subtle/10 text-primary disabled:opacity-50 glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
+          children: [jsx(Redo, {
+            className: 'w-4 h-4 inline mr-1'
+          }), "Redo"]
+        })]
+      }), jsxs("button", {
+        onClick: () => onCreateSnapshot(`Manual snapshot ${Date.now()}`),
+        className: 'glass-w-full glass-py-2 glass-px-3 glass-radius glass-surface-blue text-primary hover:glass-surface-blue',
+        children: [jsx(Save, {
+          className: 'w-4 h-4 inline mr-1'
+        }), "Create Snapshot"]
+      })]
+    })]
+  });
+}
+function WorkspaceFloatingActions({
+  isVoiceActive,
+  onToggleVoice,
+  onShowVoicePanel,
+  onShowVersionPanel,
+  onToggleFullscreen,
+  enableVoiceChat,
+  enableVersionControl
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  return jsxs("div", {
+    className: 'fixed bottom-6 right-6',
+    children: [jsxs("div", {
+      className: `flex flex-col gap-2 ${isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"} transition-opacity`,
+      children: [enableVoiceChat && jsx("button", {
+        onClick: onShowVoicePanel,
+        className: 'w-12 h-12 glass-radius-full glass-surface-green text-primary glass-flex glass-items-center glass-justify-center glass-shadow-lg hover:glass-surface-green glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
+        title: "Voice Chat",
+        children: jsx(Mic, {
+          className: 'w-4 h-4'
+        })
+      }), enableVersionControl && jsx("button", {
+        onClick: onShowVersionPanel,
+        className: 'w-12 h-12 glass-radius-full glass-surface-blue text-primary glass-flex glass-items-center glass-justify-center glass-shadow-lg hover:glass-surface-blue glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
+        title: "Version Control",
+        children: jsx(Settings, {
+          className: 'w-4 h-4'
+        })
+      }), jsx("button", {
+        onClick: onToggleFullscreen,
+        className: 'w-12 h-12 glass-radius-full glass-surface-primary text-primary glass-flex glass-items-center glass-justify-center glass-shadow-lg hover:glass-surface-subtle glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
+        title: "Fullscreen",
+        children: jsx(Maximize, {
+          className: 'w-4 h-4'
+        })
+      })]
+    }), jsx("button", {
+      onClick: () => setIsExpanded(!isExpanded),
+      className: 'w-14 h-14 glass-radius-full bg-slate-700 text-primary glass-flex glass-items-center glass-justify-center glass-shadow-lg hover:bg-slate-600 mt-2',
+      style: createGlassStyle({
+        intent: "neutral",
+        elevation: "level2"
+      }),
+      children: isExpanded ? "✕" : "⚡"
+    })]
+  });
+}
+// Loading and Error Components
+function WorkspaceLoadingState({
+  message = "Connecting to workspace..."
+}) {
+  return jsx("div", {
+    className: 'h-screen glass-flex glass-items-center glass-justify-center bg-slate-900',
+    children: jsxs("div", {
+      className: 'text-center space-y-4',
+      children: [jsx("div", {
+        className: 'w-16 h-16 glass-border-4 glass-border-blue glass-border-t-transparent glass-radius-full animate-spin glass-mx-auto'
+      }), jsx("div", {
+        className: 'text-primary glass-text-lg',
+        children: message
+      }), jsx("div", {
+        className: 'text-primary/60 glass-text-sm',
+        children: "Please wait..."
+      })]
+    })
+  });
+}
+function WorkspaceConnectionError({
+  onRetry,
+  error
+}) {
+  return jsx("div", {
+    className: 'h-screen glass-flex glass-items-center glass-justify-center bg-slate-900',
+    children: jsxs("div", {
+      className: 'text-center space-y-4 max-w-md',
+      children: [jsx("div", {
+        className: 'text-primary text-6xl mb-4',
+        children: "\u26A0\uFE0F"
+      }), jsx("div", {
+        className: 'text-primary glass-text-xl font-semibold',
+        children: "Connection Error"
+      }), jsx("div", {
+        className: 'text-primary/70',
+        children: error
+      }), jsx("button", {
+        onClick: onRetry,
+        className: 'glass-px-6 glass-py-3 glass-surface-blue text-primary glass-radius hover:glass-surface-blue transition-colors glass-focus glass-touch-target glass-contrast-guard glass-focus glass-touch-target glass-contrast-guard',
+        children: "Retry Connection"
+      })]
+    })
+  });
+}
+
+export { CollaborativeGlassWorkspace, GlassCollaborationProvider, GlassTeamCursors, GlassTeamCursorsWithEffects, CollaborativeGlassWorkspace as default };
+//# sourceMappingURL=CollaborativeGlassWorkspace.js.map