@moontra/moonui-pro 2.20.1 → 2.20.3

package/src/components/timeline/index.tsx

@@ -1,1148 +0,0 @@
-"use client"
-
-import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react'
-import { motion, AnimatePresence, Reorder } from 'framer-motion'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/card'
-import { MoonUIBadgePro as Badge } from '../ui/badge'
-import { MoonUIAvatarPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro } from '../ui/avatar'
-import { Button } from '../ui/button'
-import { Input } from '../ui/input'
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
-import { 
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../ui/select'
-import { 
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../ui/dropdown-menu'
-import { 
-  Clock, 
-  CheckCircle2, 
-  AlertCircle, 
-  XCircle,
-  Circle,
-  Calendar,
-  User,
-  MessageCircle,
-  Paperclip,
-  ExternalLink,
-  Lock,
-  Sparkles,
-  Filter,
-  Search,
-  Download,
-  Printer,
-  ChevronRight,
-  ChevronDown,
-  MoreVertical,
-  Edit,
-  Trash,
-  Copy,
-  Share,
-  Flag,
-  Zap,
-  Target,
-  TrendingUp,
-  Repeat,
-  GitBranch,
-  Layers,
-  ArrowRight,
-  ArrowLeft,
-  Maximize2,
-  Minimize2
-} from 'lucide-react'
-import { cn } from '../../lib/utils'
-import { VariantProps, cva } from 'class-variance-authority'
-
-// Enhanced Event Types
-export type TimelineEventType = 'success' | 'warning' | 'error' | 'info' | 'pending' | 'milestone' | 'custom'
-export type TimelineLayout = 'vertical' | 'vertical-left' | 'vertical-right' | 'horizontal' | 'alternating' | 'grouped'
-export type TimelineTheme = 'default' | 'minimal' | 'detailed' | 'compact'
-export type TimelineAnimation = 'fade' | 'slide' | 'scale' | 'none'
-export type TimelineGroupBy = 'none' | 'date' | 'week' | 'month' | 'year'
-
-// Event interfaces
-export interface TimelineEventBase {
-  id: string
-  title: string
-  description?: string
-  date: Date
-  type: TimelineEventType
-  icon?: React.ReactNode
-  color?: string
-  metadata?: TimelineEventMetadata
-  user?: TimelineUser
-}
-
-export interface TimelineEventMetadata {
-  location?: string
-  duration?: string
-  tags?: string[]
-  attachments?: number
-  comments?: number
-  externalLink?: string
-  priority?: 'low' | 'medium' | 'high'
-  progress?: number
-  custom?: Record<string, any>
-}
-
-export interface TimelineUser {
-  name: string
-  avatar?: string
-  email?: string
-  role?: string
-}
-
-// Extended event types
-export interface MilestoneEvent extends TimelineEventBase {
-  type: 'milestone'
-  milestone: {
-    target?: string
-    achievement?: string
-    impact?: string
-  }
-}
-
-export interface RangeEvent extends TimelineEventBase {
-  endDate: Date
-  isActive?: boolean
-}
-
-export interface RecurringEvent extends TimelineEventBase {
-  recurrence: {
-    frequency: 'daily' | 'weekly' | 'monthly' | 'yearly'
-    interval?: number
-    endDate?: Date
-    occurrences?: number
-  }
-}
-
-export interface NestedEvent extends TimelineEventBase {
-  subEvents?: TimelineEvent[]
-  expanded?: boolean
-}
-
-export type TimelineEvent = TimelineEventBase | MilestoneEvent | RangeEvent | RecurringEvent | NestedEvent
-
-// Render function types
-export type EventRenderer = (event: TimelineEvent, index: number) => React.ReactNode
-export type ConnectorRenderer = (fromEvent: TimelineEvent, toEvent: TimelineEvent) => React.ReactNode
-export type IconRenderer = (event: TimelineEvent) => React.ReactNode
-
-// Timeline Props
-export interface TimelineProps extends VariantProps<typeof timelineVariants> {
-  events: TimelineEvent[]
-  onEventClick?: (event: TimelineEvent) => void
-  onEventEdit?: (event: TimelineEvent) => void
-  onEventDelete?: (event: TimelineEvent) => void
-  onEventsReorder?: (events: TimelineEvent[]) => void
-  className?: string
-  
-  // Layout options
-  layout?: TimelineLayout
-  theme?: TimelineTheme
-  animation?: TimelineAnimation
-  groupBy?: TimelineGroupBy
-  
-  // Display options
-  showUserInfo?: boolean
-  showMetadata?: boolean
-  showRelativeTime?: boolean
-  showSearch?: boolean
-  showFilter?: boolean
-  showExport?: boolean
-  
-  // Customization
-  eventRenderer?: EventRenderer
-  connectorRenderer?: ConnectorRenderer
-  iconRenderer?: IconRenderer
-  colorScheme?: Record<TimelineEventType, string>
-  
-  // Interactive features
-  draggable?: boolean
-  expandable?: boolean
-  editable?: boolean
-  selectable?: boolean
-  virtualScroll?: boolean
-  
-  // Advanced features
-  maxEventsPerGroup?: number
-  printMode?: boolean
-  compactMode?: boolean
-  parallaxEffect?: boolean
-  gradientConnectors?: boolean
-  animatedProgress?: boolean
-  
-  // Accessibility
-  ariaLabel?: string
-  keyboardNavigation?: boolean
-}
-
-// Timeline variants
-const timelineVariants = cva("w-full", {
-  variants: {
-    theme: {
-      default: "",
-      minimal: "border-0 shadow-none",
-      detailed: "border-2",
-      compact: "p-0"
-    }
-  },
-  defaultVariants: {
-    theme: "default"
-  }
-})
-
-// Default color schemes
-const DEFAULT_COLORS: Record<TimelineEventType, string> = {
-  success: 'bg-green-500 border-green-500',
-  warning: 'bg-yellow-500 border-yellow-500',
-  error: 'bg-red-500 border-red-500',
-  info: 'bg-blue-500 border-blue-500',
-  pending: 'bg-muted-foreground/40 border-muted-foreground/40',
-  milestone: 'bg-purple-500 border-purple-500',
-  custom: 'bg-slate-500 border-slate-500'
-}
-
-const DEFAULT_ICONS: Record<TimelineEventType, React.ReactNode> = {
-  success: <CheckCircle2 className="h-4 w-4 text-white" />,
-  warning: <AlertCircle className="h-4 w-4 text-white" />,
-  error: <XCircle className="h-4 w-4 text-white" />,
-  info: <Circle className="h-4 w-4 text-white" />,
-  pending: <Clock className="h-4 w-4 text-white" />,
-  milestone: <Flag className="h-4 w-4 text-white" />,
-  custom: <Sparkles className="h-4 w-4 text-white" />
-}
-
-const TEXT_COLORS: Record<TimelineEventType, string> = {
-  success: 'text-green-700 dark:text-green-400',
-  warning: 'text-yellow-700 dark:text-yellow-400',
-  error: 'text-red-700 dark:text-red-400',
-  info: 'text-blue-700 dark:text-blue-400',
-  pending: 'text-muted-foreground',
-  milestone: 'text-purple-700 dark:text-purple-400',
-  custom: 'text-slate-700 dark:text-slate-400'
-}
-
-// Animation variants
-const animationVariants = {
-  fade: {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 }
-  },
-  slide: {
-    initial: { opacity: 0, x: -20 },
-    animate: { opacity: 1, x: 0 },
-    exit: { opacity: 0, x: 20 }
-  },
-  scale: {
-    initial: { opacity: 0, scale: 0.8 },
-    animate: { opacity: 1, scale: 1 },
-    exit: { opacity: 0, scale: 0.8 }
-  }
-}
-
-export function Timeline({
-  events: initialEvents,
-  onEventClick,
-  onEventEdit,
-  onEventDelete,
-  onEventsReorder,
-  className,
-  layout = 'vertical',
-  theme = 'default',
-  animation = 'fade',
-  groupBy = 'none',
-  showUserInfo = true,
-  showMetadata = true,
-  showRelativeTime = true,
-  showSearch = true,
-  showFilter = true,
-  showExport = true,
-  eventRenderer,
-  connectorRenderer,
-  iconRenderer,
-  colorScheme = DEFAULT_COLORS,
-  draggable = false,
-  expandable = true,
-  editable = false,
-  selectable = false,
-  virtualScroll = false,
-  maxEventsPerGroup = 20,
-  printMode = false,
-  compactMode = false,
-  parallaxEffect = false,
-  gradientConnectors = false,
-  animatedProgress = false,
-  ariaLabel = "Timeline of events",
-  keyboardNavigation = true,
-  ...props
-}: TimelineProps) {
-  const [events, setEvents] = useState<TimelineEvent[]>(initialEvents)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [filterType, setFilterType] = useState<TimelineEventType | 'all'>('all')
-  const [selectedEvents, setSelectedEvents] = useState<Set<string>>(new Set())
-  const [expandedEvents, setExpandedEvents] = useState<Set<string>>(new Set())
-  const [focusedEventId, setFocusedEventId] = useState<string | null>(null)
-  
-  const timelineRef = useRef<HTMLDivElement>(null)
-  const eventRefs = useRef<Map<string, HTMLDivElement>>(new Map())
-
-  // Update events when prop changes
-  useEffect(() => {
-    setEvents(initialEvents)
-  }, [initialEvents])
-
-  // Keyboard navigation
-  useEffect(() => {
-    if (!keyboardNavigation) return
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      const currentIndex = events.findIndex(event => event.id === focusedEventId)
-      
-      switch (e.key) {
-        case 'ArrowDown':
-        case 'ArrowRight':
-          e.preventDefault()
-          if (currentIndex < events.length - 1) {
-            const nextEvent = events[currentIndex + 1]
-            setFocusedEventId(nextEvent.id)
-            eventRefs.current.get(nextEvent.id)?.focus()
-          }
-          break
-        case 'ArrowUp':
-        case 'ArrowLeft':
-          e.preventDefault()
-          if (currentIndex > 0) {
-            const prevEvent = events[currentIndex - 1]
-            setFocusedEventId(prevEvent.id)
-            eventRefs.current.get(prevEvent.id)?.focus()
-          }
-          break
-        case 'Enter':
-        case ' ':
-          e.preventDefault()
-          if (focusedEventId) {
-            const event = events.find(e => e.id === focusedEventId)
-            if (event && onEventClick) {
-              onEventClick(event)
-            }
-          }
-          break
-        case 'Delete':
-          if (editable && focusedEventId && onEventDelete) {
-            const event = events.find(e => e.id === focusedEventId)
-            if (event) {
-              onEventDelete(event)
-            }
-          }
-          break
-      }
-    }
-
-    timelineRef.current?.addEventListener('keydown', handleKeyDown)
-    return () => timelineRef.current?.removeEventListener('keydown', handleKeyDown)
-  }, [keyboardNavigation, events, focusedEventId, onEventClick, onEventDelete, editable])
-
-  // Utility functions
-  const formatDate = useCallback((date: Date) => {
-    return date.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric'
-    })
-  }, [])
-
-  const formatTime = useCallback((date: Date) => {
-    return date.toLocaleTimeString('en-US', {
-      hour: '2-digit',
-      minute: '2-digit',
-      hour12: true
-    })
-  }, [])
-
-  const getRelativeTime = useCallback((date: Date) => {
-    const now = new Date()
-    const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
-    
-    if (diffInSeconds < 0) {
-      const futureDiff = Math.abs(diffInSeconds)
-      if (futureDiff < 3600) {
-        const minutes = Math.floor(futureDiff / 60)
-        return `In ${minutes} minute${minutes !== 1 ? 's' : ''}`
-      } else if (futureDiff < 86400) {
-        const hours = Math.floor(futureDiff / 3600)
-        return `In ${hours} hour${hours !== 1 ? 's' : ''}`
-      } else {
-        const days = Math.floor(futureDiff / 86400)
-        return `In ${days} day${days !== 1 ? 's' : ''}`
-      }
-    }
-    
-    if (diffInSeconds < 60) {
-      return 'Just now'
-    } else if (diffInSeconds < 3600) {
-      const minutes = Math.floor(diffInSeconds / 60)
-      return `${minutes} minute${minutes > 1 ? 's' : ''} ago`
-    } else if (diffInSeconds < 86400) {
-      const hours = Math.floor(diffInSeconds / 3600)
-      return `${hours} hour${hours > 1 ? 's' : ''} ago`
-    } else if (diffInSeconds < 604800) {
-      const days = Math.floor(diffInSeconds / 86400)
-      return `${days} day${days > 1 ? 's' : ''} ago`
-    } else {
-      return formatDate(date)
-    }
-  }, [formatDate])
-
-  const getInitials = useCallback((name: string) => {
-    return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
-  }, [])
-
-  // Grouping functions
-  const groupEventsByDate = useCallback((events: TimelineEvent[]) => {
-    const groups: { [key: string]: TimelineEvent[] } = {}
-    
-    events.forEach(event => {
-      let dateKey: string
-      
-      switch (groupBy) {
-        case 'week':
-          const weekStart = new Date(event.date)
-          weekStart.setDate(weekStart.getDate() - weekStart.getDay())
-          dateKey = `Week of ${formatDate(weekStart)}`
-          break
-        case 'month':
-          dateKey = event.date.toLocaleDateString('en-US', { year: 'numeric', month: 'long' })
-          break
-        case 'year':
-          dateKey = event.date.getFullYear().toString()
-          break
-        case 'date':
-        default:
-          dateKey = formatDate(event.date)
-      }
-      
-      if (!groups[dateKey]) {
-        groups[dateKey] = []
-      }
-      groups[dateKey].push(event)
-    })
-    
-    return groups
-  }, [groupBy, formatDate])
-
-  // Filtering and sorting
-  const filteredAndSortedEvents = useMemo(() => {
-    let filtered = [...events]
-    
-    // Apply search filter
-    if (searchQuery) {
-      filtered = filtered.filter(event => 
-        event.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        event.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        event.metadata?.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
-      )
-    }
-    
-    // Apply type filter
-    if (filterType !== 'all') {
-      filtered = filtered.filter(event => event.type === filterType)
-    }
-    
-    // Sort by date
-    return filtered.sort((a, b) => b.date.getTime() - a.date.getTime())
-  }, [events, searchQuery, filterType])
-
-  // Event handlers
-  const handleEventClick = useCallback((event: TimelineEvent) => {
-    if (selectable) {
-      setSelectedEvents(prev => {
-        const newSet = new Set(prev)
-        if (newSet.has(event.id)) {
-          newSet.delete(event.id)
-        } else {
-          newSet.add(event.id)
-        }
-        return newSet
-      })
-    }
-    
-    if (expandable && 'subEvents' in event) {
-      setExpandedEvents(prev => {
-        const newSet = new Set(prev)
-        if (newSet.has(event.id)) {
-          newSet.delete(event.id)
-        } else {
-          newSet.add(event.id)
-        }
-        return newSet
-      })
-    }
-    
-    onEventClick?.(event)
-  }, [selectable, expandable, onEventClick])
-
-  const handleExport = useCallback(() => {
-    const dataStr = JSON.stringify(filteredAndSortedEvents, null, 2)
-    const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr)
-    
-    const exportFileDefaultName = `timeline-export-${new Date().toISOString()}.json`
-    
-    const linkElement = document.createElement('a')
-    linkElement.setAttribute('href', dataUri)
-    linkElement.setAttribute('download', exportFileDefaultName)
-    linkElement.click()
-  }, [filteredAndSortedEvents])
-
-  const handlePrint = useCallback(() => {
-    window.print()
-  }, [])
-
-  // Render helpers
-  const renderEventIcon = useCallback((event: TimelineEvent) => {
-    if (iconRenderer) {
-      return iconRenderer(event)
-    }
-    
-    if (event.icon) {
-      return event.icon
-    }
-    
-    if ('milestone' in event) {
-      return <Target className="h-4 w-4 text-white" />
-    }
-    
-    if ('recurrence' in event) {
-      return <Repeat className="h-4 w-4 text-white" />
-    }
-    
-    if ('subEvents' in event) {
-      return <GitBranch className="h-4 w-4 text-white" />
-    }
-    
-    return DEFAULT_ICONS[event.type] || DEFAULT_ICONS.custom
-  }, [iconRenderer])
-
-  const renderConnector = useCallback((fromEvent: TimelineEvent, toEvent: TimelineEvent, isLast: boolean) => {
-    if (connectorRenderer) {
-      return connectorRenderer(fromEvent, toEvent)
-    }
-    
-    if (isLast) return null
-    
-    const baseClasses = cn(
-      "absolute",
-      layout === 'horizontal' ? "h-0.5 top-4" : "w-0.5 left-1/2 -ml-px transform -translate-x-1/2",
-      gradientConnectors && "bg-gradient-to-b from-border to-transparent"
-    )
-    
-    if (layout === 'horizontal') {
-      return <div className={cn(baseClasses, "bg-border")} style={{ width: '100px' }} />
-    }
-    
-    return (
-      <div className={cn(
-        baseClasses,
-        "bg-border",
-        layout === 'alternating' && "hidden"
-      )} 
-      style={{ 
-        height: 'calc(100% + 2rem)',
-        top: '2rem'
-      }} />
-    )
-  }, [connectorRenderer, layout, gradientConnectors])
-
-  const renderEvent = useCallback((event: TimelineEvent, index: number, isLast: boolean = false) => {
-    const eventColor = event.color || colorScheme[event.type] || DEFAULT_COLORS[event.type]
-    const textColor = TEXT_COLORS[event.type] || TEXT_COLORS.custom
-    const isSelected = selectedEvents.has(event.id)
-    const isExpanded = expandedEvents.has(event.id)
-    const isFocused = focusedEventId === event.id
-    
-    // Custom renderer
-    if (eventRenderer) {
-      return eventRenderer(event, index)
-    }
-    
-    // Check if event is a range event
-    const isRangeEvent = 'endDate' in event
-    const isNestedEvent = 'subEvents' in event
-    const isMilestoneEvent = 'milestone' in event
-    
-    const eventContent = (
-      <div
-        ref={(el) => {
-          if (el) eventRefs.current.set(event.id, el)
-        }}
-        tabIndex={keyboardNavigation ? 0 : -1}
-        className={cn(
-          "relative flex gap-4",
-          compactMode ? "pb-2" : "pb-8",
-          layout === 'alternating' && index % 2 === 0 && "flex-row-reverse",
-          layout === 'horizontal' && "flex-col items-center",
-          "cursor-pointer rounded-lg p-3 -m-1 transition-all duration-200",
-          "hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-ring",
-          isSelected && "bg-muted/70",
-          isFocused && "ring-2 ring-ring",
-          printMode && "print:break-inside-avoid"
-        )}
-        onClick={() => handleEventClick(event)}
-        onFocus={() => setFocusedEventId(event.id)}
-        role="button"
-        aria-label={`Event: ${event.title}`}
-        aria-expanded={isNestedEvent ? isExpanded : undefined}
-      >
-        {/* Timeline Node */}
-        <div className={cn(
-          "flex flex-col items-center relative",
-          layout === 'horizontal' && "flex-row"
-        )}>
-          <motion.div
-            className={cn(
-              "flex items-center justify-center rounded-full border-2 bg-background z-10",
-              isMilestoneEvent ? "w-10 h-10" : "w-8 h-8",
-              eventColor,
-              isSelected && "ring-2 ring-ring ring-offset-2"
-            )}
-            whileHover={{ scale: 1.1 }}
-            whileTap={{ scale: 0.95 }}
-          >
-            {renderEventIcon(event)}
-          </motion.div>
-          
-          {/* Connector */}
-          {!isLast && renderConnector(event, events[index + 1], isLast)}
-        </div>
-
-        {/* Event Content */}
-        <div className={cn(
-          "flex-1 min-w-0",
-          layout === 'alternating' && index % 2 === 0 && "text-right"
-        )}>
-          {/* Header */}
-          <div className="flex items-start justify-between gap-2 mb-2">
-            <div className="flex-1">
-              <h4 className={cn(
-                "font-semibold",
-                compactMode ? "text-sm" : "text-base",
-                isMilestoneEvent && "text-lg"
-              )}>
-                {event.title}
-                {isMilestoneEvent && (
-                  <Badge variant="secondary" className="ml-2 bg-purple-500">
-                    Milestone
-                  </Badge>
-                )}
-              </h4>
-              
-              {/* Date/Time display */}
-              <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
-                <Clock className="h-3 w-3" />
-                {showRelativeTime ? (
-                  <span>{getRelativeTime(event.date)}</span>
-                ) : (
-                  <span>{formatTime(event.date)}</span>
-                )}
-                {isRangeEvent && (
-                  <>
-                    <ArrowRight className="h-3 w-3" />
-                    <span>{formatTime((event as RangeEvent).endDate)}</span>
-                  </>
-                )}
-              </div>
-            </div>
-
-            {/* Actions */}
-            {(editable || event.metadata?.externalLink) && (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                    <MoreVertical className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  {editable && (
-                    <>
-                      <DropdownMenuItem onClick={() => onEventEdit?.(event)}>
-                        <Edit className="mr-2 h-4 w-4" />
-                        Edit
-                      </DropdownMenuItem>
-                      <DropdownMenuItem onClick={() => onEventDelete?.(event)}>
-                        <Trash className="mr-2 h-4 w-4" />
-                        Delete
-                      </DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                    </>
-                  )}
-                  <DropdownMenuItem onClick={() => navigator.clipboard.writeText(event.title)}>
-                    <Copy className="mr-2 h-4 w-4" />
-                    Copy
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <Share className="mr-2 h-4 w-4" />
-                    Share
-                  </DropdownMenuItem>
-                  {event.metadata?.externalLink && (
-                    <DropdownMenuItem onClick={() => window.open(event.metadata?.externalLink, '_blank')}>
-                      <ExternalLink className="mr-2 h-4 w-4" />
-                      View Details
-                    </DropdownMenuItem>
-                  )}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            )}
-          </div>
-
-          {/* Description */}
-          {event.description && (
-            <p className={cn(
-              "text-muted-foreground mb-2",
-              compactMode ? "text-xs" : "text-sm"
-            )}>
-              {event.description}
-            </p>
-          )}
-
-          {/* Milestone details */}
-          {isMilestoneEvent && (event as MilestoneEvent).milestone && (
-            <div className="bg-purple-50 dark:bg-purple-950/20 rounded-md p-3 mb-2">
-              {(event as MilestoneEvent).milestone.target && (
-                <div className="flex items-center gap-2 text-sm">
-                  <Target className="h-4 w-4 text-purple-600" />
-                  <span className="font-medium">Target:</span>
-                  <span>{(event as MilestoneEvent).milestone.target}</span>
-                </div>
-              )}
-              {(event as MilestoneEvent).milestone.achievement && (
-                <div className="flex items-center gap-2 text-sm mt-1">
-                  <TrendingUp className="h-4 w-4 text-purple-600" />
-                  <span className="font-medium">Achievement:</span>
-                  <span>{(event as MilestoneEvent).milestone.achievement}</span>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Progress bar for events with progress */}
-          {event.metadata?.progress !== undefined && (
-            <div className="mb-2">
-              <div className="flex justify-between text-xs mb-1">
-                <span>Progress</span>
-                <span>{event.metadata.progress}%</span>
-              </div>
-              <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
-                <motion.div
-                  className="h-full bg-primary"
-                  initial={{ width: 0 }}
-                  animate={{ width: `${event.metadata.progress}%` }}
-                  transition={{ duration: 0.5, ease: "easeOut" }}
-                />
-              </div>
-            </div>
-          )}
-
-          {/* User info */}
-          {showUserInfo && event.user && (
-            <div className="flex items-center gap-2 mb-2">
-              <MoonUIAvatarPro className="h-6 w-6">
-                <MoonUIAvatarImagePro src={event.user.avatar} />
-                <MoonUIAvatarFallbackPro className="text-xs">
-                  {getInitials(event.user.name)}
-                </MoonUIAvatarFallbackPro>
-              </MoonUIAvatarPro>
-              <div className="flex flex-col">
-                <span className="text-sm font-medium">{event.user.name}</span>
-                {event.user.role && (
-                  <span className="text-xs text-muted-foreground">{event.user.role}</span>
-                )}
-              </div>
-            </div>
-          )}
-
-          {/* Metadata */}
-          {showMetadata && event.metadata && (
-            <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
-              {event.metadata.duration && (
-                <div className="flex items-center gap-1">
-                  <Clock className="h-3 w-3" />
-                  <span>{event.metadata.duration}</span>
-                </div>
-              )}
-              {event.metadata.location && (
-                <div className="flex items-center gap-1">
-                  <Calendar className="h-3 w-3" />
-                  <span>{event.metadata.location}</span>
-                </div>
-              )}
-              {event.metadata.comments !== undefined && event.metadata.comments > 0 && (
-                <div className="flex items-center gap-1">
-                  <MessageCircle className="h-3 w-3" />
-                  <span>{event.metadata.comments}</span>
-                </div>
-              )}
-              {event.metadata.attachments !== undefined && event.metadata.attachments > 0 && (
-                <div className="flex items-center gap-1">
-                  <Paperclip className="h-3 w-3" />
-                  <span>{event.metadata.attachments}</span>
-                </div>
-              )}
-              {event.metadata.priority && (
-                <Badge 
-                  variant={
-                    event.metadata.priority === 'high' ? 'destructive' : 
-                    event.metadata.priority === 'medium' ? 'outline' : 
-                    'secondary'
-                  }
-                  className="text-xs"
-                >
-                  {event.metadata.priority}
-                </Badge>
-              )}
-            </div>
-          )}
-
-          {/* Tags */}
-          {event.metadata?.tags && event.metadata.tags.length > 0 && (
-            <div className="flex flex-wrap gap-1 mt-2">
-              {event.metadata.tags.map((tag, tagIndex) => (
-                <Badge key={tagIndex} variant="outline" className="text-xs">
-                  {tag}
-                </Badge>
-              ))}
-            </div>
-          )}
-
-          {/* Nested events */}
-          {isNestedEvent && isExpanded && (event as NestedEvent).subEvents && (
-            <div className="mt-3 ml-4 pl-4 border-l-2 border-muted">
-              {(event as NestedEvent).subEvents!.map((subEvent, subIndex) => (
-                <div key={subEvent.id} className="mb-2 last:mb-0">
-                  <div className="flex items-start gap-2">
-                    <div className={cn(
-                      "w-2 h-2 rounded-full mt-1.5",
-                      colorScheme[subEvent.type] || DEFAULT_COLORS[subEvent.type]
-                    )} />
-                    <div className="flex-1">
-                      <h5 className="text-sm font-medium">{subEvent.title}</h5>
-                      {subEvent.description && (
-                        <p className="text-xs text-muted-foreground">{subEvent.description}</p>
-                      )}
-                      <span className="text-xs text-muted-foreground">
-                        {getRelativeTime(subEvent.date)}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Expand/Collapse button for nested events */}
-          {isNestedEvent && (event as NestedEvent).subEvents && (event as NestedEvent).subEvents!.length > 0 && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="mt-2 h-6 text-xs"
-              onClick={(e) => {
-                e.stopPropagation()
-                setExpandedEvents(prev => {
-                  const newSet = new Set(prev)
-                  if (newSet.has(event.id)) {
-                    newSet.delete(event.id)
-                  } else {
-                    newSet.add(event.id)
-                  }
-                  return newSet
-                })
-              }}
-            >
-              {isExpanded ? (
-                <>
-                  <ChevronDown className="mr-1 h-3 w-3" />
-                  Hide {(event as NestedEvent).subEvents!.length} sub-events
-                </>
-              ) : (
-                <>
-                  <ChevronRight className="mr-1 h-3 w-3" />
-                  Show {(event as NestedEvent).subEvents!.length} sub-events
-                </>
-              )}
-            </Button>
-          )}
-        </div>
-      </div>
-    )
-
-    if (draggable && onEventsReorder) {
-      return (
-        <Reorder.Item
-          key={event.id}
-          value={event}
-          dragListener={false}
-          dragControls={undefined}
-        >
-          {eventContent}
-        </Reorder.Item>
-      )
-    }
-
-    const variants = animation !== 'none' ? animationVariants[animation] : undefined
-
-    return (
-      <motion.div
-        key={event.id}
-        variants={variants}
-        initial={variants?.initial}
-        animate={variants?.animate}
-        exit={variants?.exit}
-        transition={{ duration: 0.3, delay: index * 0.05 }}
-      >
-        {eventContent}
-      </motion.div>
-    )
-  }, [
-    eventRenderer,
-    colorScheme,
-    selectedEvents,
-    expandedEvents,
-    focusedEventId,
-    keyboardNavigation,
-    layout,
-    compactMode,
-    printMode,
-    handleEventClick,
-    renderEventIcon,
-    renderConnector,
-    events,
-    showRelativeTime,
-    getRelativeTime,
-    formatTime,
-    editable,
-    onEventEdit,
-    onEventDelete,
-    showUserInfo,
-    getInitials,
-    showMetadata,
-    draggable,
-    onEventsReorder,
-    animation
-  ])
-
-  const renderGroupedEvents = useCallback(() => {
-    const groups = groupEventsByDate(filteredAndSortedEvents)
-    
-    return Object.entries(groups).map(([dateGroup, groupEvents], groupIndex) => {
-      const displayEvents = maxEventsPerGroup 
-        ? groupEvents.slice(0, maxEventsPerGroup)
-        : groupEvents
-      const remainingCount = groupEvents.length - displayEvents.length
-
-      return (
-        <div key={dateGroup} className="mb-8">
-          <div className={cn(
-            "sticky top-0 z-20 bg-background/80 backdrop-blur-sm border-b p-3 mb-4 -mx-6 px-6",
-            printMode && "print:relative print:bg-transparent"
-          )}>
-            <h3 className="font-semibold text-sm text-muted-foreground flex items-center justify-between">
-              <span>{dateGroup}</span>
-              <Badge variant="secondary" className="text-xs">
-                {groupEvents.length} event{groupEvents.length !== 1 ? 's' : ''}
-              </Badge>
-            </h3>
-          </div>
-          
-          <AnimatePresence mode="popLayout">
-            {displayEvents.map((event, index) => 
-              renderEvent(event, index, index === displayEvents.length - 1)
-            )}
-          </AnimatePresence>
-          
-          {remainingCount > 0 && (
-            <Button
-              variant="ghost"
-              size="sm"
-              className="w-full mt-2"
-              onClick={() => {
-                // In a real implementation, this would expand the group
-                console.log(`Show ${remainingCount} more events`)
-              }}
-            >
-              Show {remainingCount} more event{remainingCount !== 1 ? 's' : ''}
-            </Button>
-          )}
-        </div>
-      )
-    })
-  }, [groupEventsByDate, filteredAndSortedEvents, maxEventsPerGroup, printMode, renderEvent])
-
-  const renderTimeline = () => {
-    const content = groupBy !== 'none' 
-      ? renderGroupedEvents()
-      : (
-        <AnimatePresence mode="popLayout">
-          {draggable && onEventsReorder ? (
-            <Reorder.Group
-              axis={layout === 'horizontal' ? 'x' : 'y'}
-              values={filteredAndSortedEvents}
-              onReorder={(newOrder) => {
-                setEvents(newOrder)
-                onEventsReorder(newOrder)
-              }}
-              className={cn(
-                "space-y-0",
-                layout === 'horizontal' && "flex overflow-x-auto gap-6 pb-4"
-              )}
-            >
-              {filteredAndSortedEvents.map((event, index) => 
-                renderEvent(event, index, index === filteredAndSortedEvents.length - 1)
-              )}
-            </Reorder.Group>
-          ) : (
-            <div className={cn(
-              "space-y-0",
-              layout === 'horizontal' && "flex overflow-x-auto gap-6 pb-4",
-              layout === 'alternating' && "relative"
-            )}>
-              {filteredAndSortedEvents.map((event, index) => 
-                renderEvent(event, index, index === filteredAndSortedEvents.length - 1)
-              )}
-            </div>
-          )}
-        </AnimatePresence>
-      )
-
-    if (virtualScroll && filteredAndSortedEvents.length > 50) {
-      // In a real implementation, use a virtual scrolling library
-      return (
-        <div className="h-[600px] overflow-y-auto">
-          {content}
-        </div>
-      )
-    }
-
-    return content
-  }
-
-  return (
-    <Card 
-      className={cn(
-        timelineVariants({ theme }),
-        "relative",
-        printMode && "print:shadow-none print:border-0",
-        className
-      )}
-      ref={timelineRef}
-      role="region"
-      aria-label={ariaLabel}
-      {...props}
-    >
-        <CardHeader className={cn(
-          compactMode && "pb-3",
-          printMode && "print:pb-2"
-        )}>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="flex items-center gap-2">
-                <Clock className="h-5 w-5" />
-                Timeline
-              </CardTitle>
-              <CardDescription>
-                {filteredAndSortedEvents.length} event{filteredAndSortedEvents.length !== 1 ? 's' : ''} 
-                {searchQuery && ` matching "${searchQuery}"`}
-                {filterType !== 'all' && ` of type ${filterType}`}
-              </CardDescription>
-            </div>
-            
-            {/* Actions */}
-            <div className="flex items-center gap-2">
-              {showExport && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={handleExport}
-                  className="print:hidden"
-                >
-                  <Download className="h-4 w-4" />
-                </Button>
-              )}
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={handlePrint}
-                className="print:hidden"
-              >
-                <Printer className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
-          
-          {/* Search and Filter */}
-          {(showSearch || showFilter) && (
-            <div className="flex gap-2 mt-4 print:hidden">
-              {showSearch && (
-                <div className="relative flex-1">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                  <Input
-                    type="search"
-                    placeholder="Search events..."
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    className="pl-9"
-                  />
-                </div>
-              )}
-              
-              {showFilter && (
-                <Select value={filterType} onValueChange={(value: any) => setFilterType(value)}>
-                  <SelectTrigger className="w-[150px]">
-                    <Filter className="mr-2 h-4 w-4" />
-                    <SelectValue placeholder="Filter by type" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Types</SelectItem>
-                    <SelectItem value="success">Success</SelectItem>
-                    <SelectItem value="warning">Warning</SelectItem>
-                    <SelectItem value="error">Error</SelectItem>
-                    <SelectItem value="info">Info</SelectItem>
-                    <SelectItem value="pending">Pending</SelectItem>
-                    <SelectItem value="milestone">Milestone</SelectItem>
-                  </SelectContent>
-                </Select>
-              )}
-            </div>
-          )}
-        </CardHeader>
-        
-        <CardContent className={cn(
-          compactMode ? "pt-2" : "pt-6",
-          "relative"
-        )}>
-          {filteredAndSortedEvents.length > 0 ? (
-            renderTimeline()
-          ) : (
-            <div className="text-center py-12">
-              <Clock className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
-              <p className="text-muted-foreground">
-                {searchQuery || filterType !== 'all' 
-                  ? "No events match your filters" 
-                  : "No events to display"}
-              </p>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-  )
-}
-
-export default Timeline