@eventcatalog/core 3.12.7 → 3.12.9-beta.0

package/eventcatalog/src/components/MDX/NodeGraph/VisualiserSearch.tsx

@@ -1,258 +0,0 @@
-import { useState, useCallback, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
-import type { Node } from '@xyflow/react';
-
-// Define interfaces for different node data structures
-interface MessageData {
-  name: string;
-  version?: string;
-}
-
-interface ServiceData {
-  name: string;
-  version?: string;
-}
-
-interface DomainData {
-  name: string;
-  version?: string;
-}
-
-interface EntityData {
-  name: string;
-  version?: string;
-}
-
-interface NodeDataContent extends Record<string, unknown> {
-  message?: {
-    data: MessageData;
-  };
-  service?: {
-    data: ServiceData;
-  };
-  domain?: {
-    data: DomainData;
-  };
-  entity?: {
-    data: EntityData;
-  };
-  name?: string;
-  version?: string;
-}
-
-// Extend the Node type with our custom data structure
-type CustomNode = Node<NodeDataContent>;
-
-interface VisualiserSearchProps {
-  nodes: CustomNode[];
-  onNodeSelect: (node: CustomNode) => void;
-  onClear: () => void;
-  onPaneClick?: () => void;
-}
-
-export interface VisualiserSearchRef {
-  hideSuggestions: () => void;
-}
-
-const VisualiserSearch = forwardRef<VisualiserSearchRef, VisualiserSearchProps>(
-  ({ nodes, onNodeSelect, onClear, onPaneClick }, ref) => {
-    const [searchQuery, setSearchQuery] = useState('');
-    const [filteredSuggestions, setFilteredSuggestions] = useState<CustomNode[]>([]);
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
-    const searchInputRef = useRef<HTMLInputElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    const hideSuggestions = useCallback(() => {
-      setShowSuggestions(false);
-      setSelectedSuggestionIndex(-1);
-    }, []);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        hideSuggestions,
-      }),
-      [hideSuggestions]
-    );
-
-    const getNodeDisplayName = useCallback((node: CustomNode) => {
-      const name =
-        node.data?.message?.data?.name ||
-        node.data?.service?.data?.name ||
-        node.data?.domain?.data?.name ||
-        node.data?.entity?.data?.name ||
-        node.data?.name ||
-        node.id;
-      const version =
-        node.data?.message?.data?.version ||
-        node.data?.service?.data?.version ||
-        node.data?.domain?.data?.version ||
-        node.data?.entity?.data?.version ||
-        node.data?.version;
-      return version ? `${name} (v${version})` : name;
-    }, []);
-
-    const getNodeTypeColorClass = useCallback((nodeType: string) => {
-      const colorClasses: { [key: string]: string } = {
-        events: 'bg-orange-600 text-white',
-        services: 'bg-pink-600 text-white',
-        flows: 'bg-teal-600 text-white',
-        commands: 'bg-blue-600 text-white',
-        queries: 'bg-green-600 text-white',
-        channels: 'bg-gray-600 text-white',
-        domains: 'bg-yellow-500 text-white',
-        externalSystem: 'bg-pink-600 text-white',
-        actor: 'bg-yellow-500 text-white',
-        step: 'bg-gray-700 text-white',
-        user: 'bg-yellow-500 text-white',
-        custom: 'bg-gray-500 text-white',
-      };
-      return colorClasses[nodeType] || 'bg-gray-100 text-gray-700';
-    }, []);
-
-    const handleSearchChange = useCallback(
-      (event: React.ChangeEvent<HTMLInputElement>) => {
-        const query = event.target.value;
-        setSearchQuery(query);
-
-        if (query.length > 0) {
-          const filtered = nodes.filter((node) => {
-            const nodeName = getNodeDisplayName(node);
-            return nodeName.toLowerCase().includes(query.toLowerCase());
-          });
-          setFilteredSuggestions(filtered);
-          setShowSuggestions(true);
-          setSelectedSuggestionIndex(-1);
-        } else {
-          setFilteredSuggestions(nodes);
-          setShowSuggestions(true);
-          setSelectedSuggestionIndex(-1);
-        }
-      },
-      [nodes, getNodeDisplayName]
-    );
-
-    const handleSearchFocus = useCallback(() => {
-      if (searchQuery.length === 0) {
-        setFilteredSuggestions(nodes);
-      }
-      setShowSuggestions(true);
-      setSelectedSuggestionIndex(-1);
-    }, [nodes, searchQuery]);
-
-    const handleSuggestionClick = useCallback(
-      (node: CustomNode) => {
-        setSearchQuery(getNodeDisplayName(node));
-        setShowSuggestions(false);
-        onNodeSelect(node);
-      },
-      [onNodeSelect, getNodeDisplayName]
-    );
-
-    const handleSearchKeyDown = useCallback(
-      (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (!showSuggestions || filteredSuggestions.length === 0) return;
-
-        switch (event.key) {
-          case 'ArrowDown':
-            event.preventDefault();
-            setSelectedSuggestionIndex((prev) => (prev < filteredSuggestions.length - 1 ? prev + 1 : 0));
-            break;
-          case 'ArrowUp':
-            event.preventDefault();
-            setSelectedSuggestionIndex((prev) => (prev > 0 ? prev - 1 : filteredSuggestions.length - 1));
-            break;
-          case 'Enter':
-            event.preventDefault();
-            if (selectedSuggestionIndex >= 0) {
-              handleSuggestionClick(filteredSuggestions[selectedSuggestionIndex]);
-            }
-            break;
-          case 'Escape':
-            setShowSuggestions(false);
-            setSelectedSuggestionIndex(-1);
-            break;
-        }
-      },
-      [showSuggestions, filteredSuggestions, selectedSuggestionIndex, handleSuggestionClick]
-    );
-
-    const clearSearch = useCallback(() => {
-      setSearchQuery('');
-      setShowSuggestions(false);
-      setFilteredSuggestions([]);
-      setSelectedSuggestionIndex(-1);
-      onClear();
-      if (searchInputRef.current) {
-        searchInputRef.current.focus();
-      }
-    }, [onClear]);
-
-    // Close suggestions when clicking outside
-    useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (containerRef.current && !containerRef.current.contains(event.target as any)) {
-          setShowSuggestions(false);
-          setSelectedSuggestionIndex(-1);
-        }
-      };
-
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }, []);
-
-    return (
-      <div ref={containerRef} className="w-full max-w-md mx-auto relative">
-        <div className="relative">
-          <input
-            ref={searchInputRef}
-            type="text"
-            placeholder="Search nodes..."
-            value={searchQuery}
-            onChange={handleSearchChange}
-            onKeyDown={handleSearchKeyDown}
-            onFocus={handleSearchFocus}
-            className="w-full px-4 py-2 pr-10 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-transparent"
-          />
-          {searchQuery && (
-            <button
-              onClick={clearSearch}
-              className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
-              aria-label="Clear search"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          )}
-        </div>
-        {showSuggestions && filteredSuggestions.length > 0 && (
-          <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-300 rounded-md shadow-lg z-50 max-h-60 overflow-y-auto">
-            {filteredSuggestions.map((node, index) => {
-              const nodeName = getNodeDisplayName(node);
-              const nodeType = node.type || 'unknown';
-              return (
-                <div
-                  key={node.id}
-                  onClick={() => handleSuggestionClick(node)}
-                  className={`px-4 py-2 cursor-pointer flex items-center justify-between hover:bg-gray-100 ${
-                    index === selectedSuggestionIndex ? 'bg-[rgb(var(--ec-accent-subtle))]' : ''
-                  }`}
-                >
-                  <span className="text-sm font-medium text-gray-900">{nodeName}</span>
-                  <span className={`text-xs capitalize px-2 py-1 rounded ${getNodeTypeColorClass(nodeType)}`}>{nodeType}</span>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-VisualiserSearch.displayName = 'VisualiserSearch';
-
-export default VisualiserSearch;

package/eventcatalog/src/components/MDX/NodeGraph/VisualizerDropdownContent.tsx

@@ -1,313 +0,0 @@
-import React, { type RefObject, useState } from 'react';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import {
-  Code,
-  Share2,
-  Search,
-  Grid3x3,
-  Maximize2,
-  Map,
-  Sparkles,
-  Zap,
-  EyeOff,
-  ExternalLink,
-  Save,
-  RotateCcw,
-  Loader2,
-} from 'lucide-react';
-import { DocumentArrowDownIcon, PresentationChartLineIcon } from '@heroicons/react/24/outline';
-import type { VisualiserSearchRef } from './VisualiserSearch';
-
-interface VisualizerDropdownContentProps {
-  isMermaidView: boolean;
-  setIsMermaidView: (value: boolean) => void;
-  animateMessages: boolean;
-  toggleAnimateMessages: () => void;
-  hideChannels: boolean;
-  toggleChannelsVisibility: () => void;
-  hasChannels: boolean;
-  showMinimap: boolean;
-  setShowMinimap: (value: boolean) => void;
-  handleFitView: () => void;
-  searchRef: RefObject<VisualiserSearchRef | null>;
-  isChatEnabled: boolean;
-  openChat: () => void;
-  handleCopyArchitectureCode: () => void;
-  handleExportVisual: () => void;
-  setIsShareModalOpen: (value: boolean) => void;
-  toggleFullScreen: () => void;
-  openStudioModal: () => void;
-  isDevMode?: boolean;
-  onSaveLayout?: () => Promise<boolean>;
-  onResetLayout?: () => Promise<boolean>;
-}
-
-const VisualizerDropdownContent: React.FC<VisualizerDropdownContentProps> = ({
-  isMermaidView,
-  setIsMermaidView,
-  animateMessages,
-  toggleAnimateMessages,
-  hideChannels,
-  toggleChannelsVisibility,
-  hasChannels,
-  showMinimap,
-  setShowMinimap,
-  handleFitView,
-  searchRef,
-  isChatEnabled,
-  openChat,
-  handleCopyArchitectureCode,
-  handleExportVisual,
-  setIsShareModalOpen,
-  toggleFullScreen,
-  openStudioModal,
-  isDevMode = false,
-  onSaveLayout,
-  onResetLayout,
-}) => {
-  const [layoutStatus, setLayoutStatus] = useState<'idle' | 'saving' | 'resetting'>('idle');
-
-  const handleSaveLayout = async () => {
-    if (!onSaveLayout) return;
-    setLayoutStatus('saving');
-    await onSaveLayout();
-    setLayoutStatus('idle');
-  };
-
-  const handleResetLayout = async () => {
-    if (!onResetLayout) return;
-    if (!window.confirm('Reset layout to auto-positioning? This will delete your saved layout.')) {
-      return;
-    }
-    setLayoutStatus('resetting');
-    const success = await onResetLayout();
-    if (success) {
-      window.location.reload();
-    } else {
-      setLayoutStatus('idle');
-    }
-  };
-
-  return (
-    <>
-      {/* Canvas Settings Submenu */}
-      <DropdownMenu.Sub>
-        <DropdownMenu.SubTrigger className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2 outline-none">
-          <Grid3x3 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-          <span className="flex-1 font-normal">Canvas</span>
-          <svg className="w-3 h-3 text-[rgb(var(--ec-page-text-muted))]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-          </svg>
-        </DropdownMenu.SubTrigger>
-        <DropdownMenu.Portal>
-          <DropdownMenu.SubContent
-            className="min-w-[200px] bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-xl border border-[rgb(var(--ec-page-border))] py-1.5 z-[60]"
-            sideOffset={8}
-            alignOffset={-8}
-          >
-            <DropdownMenu.CheckboxItem
-              checked={isMermaidView}
-              onCheckedChange={setIsMermaidView}
-              className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2"
-            >
-              <Code className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-              <span className="flex-1 font-normal">Render as mermaid</span>
-              <div
-                className={`w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${isMermaidView ? 'bg-[rgb(var(--ec-accent))]' : 'bg-[rgb(var(--ec-page-border))]'}`}
-              >
-                <div
-                  className={`absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${isMermaidView ? 'left-3.5' : 'left-0.5'}`}
-                />
-              </div>
-            </DropdownMenu.CheckboxItem>
-
-            <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
-
-            <DropdownMenu.CheckboxItem
-              checked={animateMessages}
-              onCheckedChange={toggleAnimateMessages}
-              className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2"
-            >
-              <Zap className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-              <span className="flex-1 font-normal">Simulate Messages</span>
-              <div
-                className={`w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${animateMessages ? 'bg-[rgb(var(--ec-accent))]' : 'bg-[rgb(var(--ec-page-border))]'}`}
-              >
-                <div
-                  className={`absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${animateMessages ? 'left-3.5' : 'left-0.5'}`}
-                />
-              </div>
-            </DropdownMenu.CheckboxItem>
-
-            {hasChannels && (
-              <DropdownMenu.CheckboxItem
-                checked={hideChannels}
-                onCheckedChange={toggleChannelsVisibility}
-                className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2"
-              >
-                <EyeOff className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-                <span className="flex-1 font-normal">Hide channels</span>
-                <div
-                  className={`w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${hideChannels ? 'bg-[rgb(var(--ec-accent))]' : 'bg-[rgb(var(--ec-page-border))]'}`}
-                >
-                  <div
-                    className={`absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${hideChannels ? 'left-3.5' : 'left-0.5'}`}
-                  />
-                </div>
-              </DropdownMenu.CheckboxItem>
-            )}
-
-            <DropdownMenu.CheckboxItem
-              checked={showMinimap}
-              onCheckedChange={setShowMinimap}
-              className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2"
-            >
-              <Map className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-              <span className="flex-1 font-normal">Show minimap</span>
-              <div
-                className={`w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${showMinimap ? 'bg-[rgb(var(--ec-accent))]' : 'bg-[rgb(var(--ec-page-border))]'}`}
-              >
-                <div
-                  className={`absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${showMinimap ? 'left-3.5' : 'left-0.5'}`}
-                />
-              </div>
-            </DropdownMenu.CheckboxItem>
-
-            <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
-
-            <DropdownMenu.Item
-              onClick={handleFitView}
-              className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
-            >
-              <Maximize2 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-              <span className="flex-1 font-normal">Fit to view</span>
-            </DropdownMenu.Item>
-
-            <DropdownMenu.Item
-              onClick={() => {
-                searchRef.current?.hideSuggestions();
-                setTimeout(() => {
-                  const searchInput = document.querySelector('input[placeholder="Search nodes..."]') as HTMLInputElement;
-                  searchInput?.focus();
-                }, 50);
-              }}
-              className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
-            >
-              <Search className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-              <span className="flex-1 font-normal">Find on canvas</span>
-            </DropdownMenu.Item>
-          </DropdownMenu.SubContent>
-        </DropdownMenu.Portal>
-      </DropdownMenu.Sub>
-
-      {/* Dev Mode: Layout Submenu */}
-      {isDevMode && onSaveLayout && (
-        <DropdownMenu.Sub>
-          <DropdownMenu.SubTrigger className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2 outline-none">
-            <Save className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-            <span className="flex-1 font-normal">Layout</span>
-            <span className="text-[10px] text-amber-600 font-medium">DEV</span>
-            <svg className="w-3 h-3 text-[rgb(var(--ec-page-text-muted))]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
-          </DropdownMenu.SubTrigger>
-          <DropdownMenu.Portal>
-            <DropdownMenu.SubContent
-              className="min-w-[180px] bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-xl border border-[rgb(var(--ec-page-border))] py-1.5 z-[60]"
-              sideOffset={8}
-              alignOffset={-8}
-            >
-              <DropdownMenu.Item
-                onClick={handleSaveLayout}
-                disabled={layoutStatus !== 'idle'}
-                className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {layoutStatus === 'saving' ? (
-                  <Loader2 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" />
-                ) : (
-                  <Save className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-                )}
-                <span className="flex-1 font-normal">{layoutStatus === 'saving' ? 'Saving...' : 'Save Layout'}</span>
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                onClick={handleResetLayout}
-                disabled={layoutStatus !== 'idle'}
-                className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {layoutStatus === 'resetting' ? (
-                  <Loader2 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" />
-                ) : (
-                  <RotateCcw className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-                )}
-                <span className="flex-1 font-normal">{layoutStatus === 'resetting' ? 'Resetting...' : 'Reset Layout'}</span>
-              </DropdownMenu.Item>
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Portal>
-        </DropdownMenu.Sub>
-      )}
-
-      {/* Ask AI */}
-      {isChatEnabled && (
-        <>
-          <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
-          <DropdownMenu.Item
-            onClick={openChat}
-            className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
-          >
-            <Sparkles className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-            <span className="flex-1 font-normal">Ask a question</span>
-          </DropdownMenu.Item>
-        </>
-      )}
-
-      {/* Export Items */}
-      <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
-      <DropdownMenu.Item
-        onClick={handleCopyArchitectureCode}
-        className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
-      >
-        <Code className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-        <span className="flex-1 font-normal">Copy as mermaid</span>
-      </DropdownMenu.Item>
-
-      <DropdownMenu.Item
-        onClick={handleExportVisual}
-        className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
-      >
-        <DocumentArrowDownIcon className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-        <span className="flex-1 font-normal">Export image</span>
-      </DropdownMenu.Item>
-
-      {/* Share Link */}
-      <DropdownMenu.Item
-        onClick={() => setIsShareModalOpen(true)}
-        className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
-      >
-        <Share2 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-        <span className="flex-1 font-normal">Share Link</span>
-      </DropdownMenu.Item>
-
-      {/* Start Presentation */}
-      <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
-      <DropdownMenu.Item
-        onClick={toggleFullScreen}
-        className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
-      >
-        <PresentationChartLineIcon className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-        <span className="flex-1 font-normal">Start Presentation</span>
-      </DropdownMenu.Item>
-
-      {/* Open in EventCatalog Studio */}
-      <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
-      <DropdownMenu.Item
-        onClick={openStudioModal}
-        className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
-      >
-        <ExternalLink className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
-        <span className="flex-1 font-normal">Open in EventCatalog Studio</span>
-      </DropdownMenu.Item>
-    </>
-  );
-};
-
-export default VisualizerDropdownContent;