aura-glass/dist/esm/components/collaboration/CollaborativeGlassWorkspace.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'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