@moontra/moonui-pro 2.14.2 → 2.15.0

package/src/components/timeline/index.tsx

@@ -1,10 +1,28 @@
 "use client"
 
-import React from 'react'
+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, 
@@ -17,104 +35,359 @@ import {
   Paperclip,
   ExternalLink,
   Lock,
-  Sparkles
+  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'
 
-interface TimelineEvent {
+// Event interfaces
+export interface TimelineEventBase {
   id: string
   title: string
   description?: string
   date: Date
-  type: 'success' | 'warning' | 'error' | 'info' | 'pending'
-  user?: {
-    name: string
-    avatar?: string
-    email?: string
-  }
-  metadata?: {
-    location?: string
-    duration?: string
-    tags?: string[]
-    attachments?: number
-    comments?: number
-    externalLink?: string
-  }
+  type: TimelineEventType
   icon?: React.ReactNode
   color?: string
+  metadata?: TimelineEventMetadata
+  user?: TimelineUser
 }
 
-interface TimelineProps {
+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
-  groupByDate?: boolean
-  orientation?: 'vertical' | 'horizontal'
-  compact?: boolean
-  interactive?: 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
 }
 
-const EVENT_COLORS = {
+// 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-gray-400 border-gray-400'
+  pending: 'bg-gray-400 border-gray-400',
+  milestone: 'bg-purple-500 border-purple-500',
+  custom: 'bg-slate-500 border-slate-500'
 }
 
-const EVENT_ICONS = {
+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" />
+  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-gray-700 dark:text-gray-400',
+  milestone: 'text-purple-700 dark:text-purple-400',
+  custom: 'text-slate-700 dark:text-slate-400'
 }
 
-const EVENT_TEXT_COLORS = {
-  success: 'text-green-700',
-  warning: 'text-yellow-700',
-  error: 'text-red-700',
-  info: 'text-blue-700',
-  pending: 'text-gray-700'
+// 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,
+  events: initialEvents,
   onEventClick,
+  onEventEdit,
+  onEventDelete,
+  onEventsReorder,
   className,
+  layout = 'vertical',
+  theme = 'default',
+  animation = 'fade',
+  groupBy = 'none',
   showUserInfo = true,
   showMetadata = true,
   showRelativeTime = true,
-  groupByDate = false,
-  orientation = 'vertical',
-  compact = false,
-  interactive = 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 sortedEvents = [...events].sort((a, b) => b.date.getTime() - a.date.getTime())
+  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
+      }
+    }
 
-  const formatDate = (date: Date) => {
+    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 = (date: Date) => {
+  const formatTime = useCallback((date: Date) => {
     return date.toLocaleTimeString('en-US', {
       hour: '2-digit',
       minute: '2-digit',
       hour12: true
     })
-  }
+  }, [])
 
-  const getRelativeTime = (date: Date) => {
+  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) {
@@ -123,23 +396,42 @@ export function Timeline({
     } else if (diffInSeconds < 86400) {
       const hours = Math.floor(diffInSeconds / 3600)
       return `${hours} hour${hours > 1 ? 's' : ''} ago`
-    } else if (diffInSeconds < 2592000) {
+    } else if (diffInSeconds < 604800) {
       const days = Math.floor(diffInSeconds / 86400)
       return `${days} day${days > 1 ? 's' : ''} ago`
     } else {
       return formatDate(date)
     }
-  }
+  }, [formatDate])
 
-  const getInitials = (name: string) => {
-    return name.split(' ').map(n => n[0]).join('').toUpperCase()
-  }
+  const getInitials = useCallback((name: string) => {
+    return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
+  }, [])
 
-  const groupEventsByDate = (events: TimelineEvent[]) => {
+  // Grouping functions
+  const groupEventsByDate = useCallback((events: TimelineEvent[]) => {
     const groups: { [key: string]: TimelineEvent[] } = {}
     
     events.forEach(event => {
-      const dateKey = formatDate(event.date)
+      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] = []
       }
@@ -147,76 +439,320 @@ export function Timeline({
     })
     
     return groups
-  }
+  }, [groupBy, formatDate])
 
-  const handleEventClick = (event: TimelineEvent) => {
-    if (interactive && onEventClick) {
-      onEventClick(event)
+  // 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])
 
-  const renderEvent = (event: TimelineEvent, index: number, isLast: boolean) => {
-    const eventColor = event.color || EVENT_COLORS[event.type]
-    const eventIcon = event.icon || EVENT_ICONS[event.type]
-    const textColor = EVENT_TEXT_COLORS[event.type]
+  // 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-4 -ml-px",
+      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
-        key={event.id}
+        ref={(el) => {
+          if (el) eventRefs.current.set(event.id, el)
+        }}
+        tabIndex={keyboardNavigation ? 0 : -1}
         className={cn(
           "relative flex gap-4",
-          compact ? "pb-4" : "pb-8",
-          interactive && "cursor-pointer hover:bg-muted/50 rounded-lg p-2 -m-2 transition-colors"
+          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 Line */}
-        {orientation === 'vertical' && (
-          <div className="flex flex-col items-center">
-            <div className={cn(
-              "flex items-center justify-center w-8 h-8 rounded-full border-2 bg-background",
-              eventColor
-            )}>
-              {eventIcon}
-            </div>
-            {!isLast && (
-              <div className="w-0.5 h-full bg-border mt-2" />
+        {/* Timeline Node */}
+        <div className={cn(
+          "flex flex-col items-center",
+          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"
             )}
-          </div>
-        )}
+            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="flex-1 min-w-0">
-          <div className="flex items-start justify-between gap-2">
+        <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-medium text-sm",
-                compact ? "mb-1" : "mb-2"
+                "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>
-              {event.description && (
-                <p className={cn(
-                  "text-muted-foreground text-sm",
-                  compact ? "mb-1" : "mb-2"
-                )}>
-                  {event.description}
-                </p>
-              )}
+              
+              {/* 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>
-            <div className="flex items-center gap-2 text-xs text-muted-foreground">
-              {showRelativeTime ? (
-                <span>{getRelativeTime(event.date)}</span>
-              ) : (
-                <span>{formatTime(event.date)}</span>
+
+            {/* 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>
               )}
-              <Badge variant="outline" className={cn("text-xs", textColor)}>
-                {event.type}
-              </Badge>
             </div>
-          </div>
+          )}
 
-          {/* User Info */}
+          {/* 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">
@@ -225,9 +761,12 @@ export function Timeline({
                   {getInitials(event.user.name)}
                 </MoonUIAvatarFallbackPro>
               </MoonUIAvatarPro>
-              <span className="text-sm text-muted-foreground">
-                {event.user.name}
-              </span>
+              <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>
           )}
 
@@ -246,23 +785,29 @@ export function Timeline({
                   <span>{event.metadata.location}</span>
                 </div>
               )}
-              {event.metadata.comments && event.metadata.comments > 0 && (
+              {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 && event.metadata.attachments > 0 && (
+              {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.externalLink && (
-                <div className="flex items-center gap-1">
-                  <ExternalLink className="h-3 w-3" />
-                  <span>View details</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>
           )}
@@ -271,62 +816,336 @@ export function Timeline({
           {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="secondary" className="text-xs">
+                <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>
     )
-  }
 
-  const renderGroupedEvents = () => {
-    const groups = groupEventsByDate(sortedEvents)
+    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(([date, events], groupIndex) => (
-      <div key={date} className="mb-8">
-        <div className="sticky top-0 bg-background/80 backdrop-blur-sm border-b p-2 mb-4">
-          <h3 className="font-medium text-sm text-muted-foreground">{date}</h3>
-        </div>
-        {events.map((event, index) => renderEvent(event, index, index === events.length - 1))}
-      </div>
-    ))
-  }
+    return Object.entries(groups).map(([dateGroup, groupEvents], groupIndex) => {
+      const displayEvents = maxEventsPerGroup 
+        ? groupEvents.slice(0, maxEventsPerGroup)
+        : groupEvents
+      const remainingCount = groupEvents.length - displayEvents.length
 
-  return (
-    <Card className={cn("w-full", className)}>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Clock className="h-5 w-5" />
-          Timeline
-        </CardTitle>
-        <CardDescription>
-          {sortedEvents.length} event{sortedEvents.length !== 1 ? 's' : ''} tracked
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        {sortedEvents.length > 0 ? (
+      return (
+        <div key={dateGroup} className="mb-8">
           <div className={cn(
-            "space-y-0",
-            orientation === 'horizontal' && "flex overflow-x-auto gap-6"
+            "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"
           )}>
-            {groupByDate 
-              ? renderGroupedEvents()
-              : sortedEvents.map((event, index) => 
-                  renderEvent(event, index, index === sortedEvents.length - 1)
-                )
-            }
+            <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>
-        ) : (
-          <div className="text-center py-8">
-            <Clock className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
-            <p className="text-muted-foreground">No events to display</p>
+          
+          <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
+                <Badge variant="pro" className="ml-2">
+                  <Sparkles className="mr-1 h-3 w-3" />
+                  Pro
+                </Badge>
+              </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>
-        )}
-      </CardContent>
-    </Card>
+          
+          {/* 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-0",
+          "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>
   )
 }