@moontra/moonui-pro 2.36.0 → 2.36.2

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { Loader2, Play, ExternalLink, ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Minus, Clock, ChevronUp, Search, Mic, MicOff, Settings, RefreshCw, Zap, ChevronRight, Crown, Circle, ChevronLeft, Plus, Lock, Sparkles, ZoomOut, ZoomIn, Pause, VolumeX, Volume2, Download, Maximize2, Filter, Image as Image$1, Video, RotateCw, Minimize2, BarChart3, Menu, Bell, CheckCheck, CheckCircle, Palette, User, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, Phone, Globe, Eye, CheckCircle2, RotateCcw, Copy, Share, Trash2, CreditCard, XCircle, HelpCircle, Flame, Gem, Award, Shield, Heart, Star, TrendingUp, Target, Calendar as Calendar$1, Map as Map$1, Table as Table$1, Activity, DollarSign, Users, CalendarIcon, MoreVertical, BellOff, ArrowUpRight, ArrowDownRight, MapPin, Navigation, ArrowUp, ArrowDown, ArrowUpDown, Music, FileText, Archive, File, Grip, Unlock, GripVertical, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Highlighter, Link2, Undo, Redo, Edit, Wand2, Maximize, Briefcase, MessageSquare, GraduationCap, Languages, Lightbulb, FileSpreadsheet, FileJson, FileDown, ChevronsLeft, ChevronsRight, TrendingDown, Grid, MousePointer, Layers, Waves as Waves$1, Cpu, Focus, Monitor, Wind, Blend, Droplets, CircleDot, Shapes, Move3D, Repeat, Move, EyeOff, Timer, Square, GitBranch, ArrowRight, Trash, MessageCircle, Paperclip, Printer, Github, Server, MemoryStick, HardDrive, Network, PlusCircle, Columns, Pin, Sun, Moon, Home, Trophy, ShoppingBag, Wifi, WifiOff, Flag, Send, Tag, PoundSterling, Euro, Database, GitFork, Package, ShoppingCart, Thermometer } from 'lucide-react';
+import { Loader2, Play, ExternalLink, ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Minus, Clock, ChevronUp, Search, Mic, MicOff, Settings, RefreshCw, Zap, ChevronRight, Crown, Circle, ChevronLeft, Plus, Lock, Sparkles, ZoomOut, ZoomIn, Pause, VolumeX, Volume2, Download, Maximize2, Filter, Image as Image$1, Video, RotateCw, Minimize2, BarChart3, Menu, Bell, CheckCheck, CheckCircle, Palette, User, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, Phone, Globe, Eye, CheckCircle2, RotateCcw, Copy, Share, Trash2, CreditCard, XCircle, HelpCircle, Flame, Gem, Award, Shield, Heart, Star, TrendingUp, Target, Calendar as Calendar$1, Map as Map$1, Table as Table$1, Activity, DollarSign, Users, CalendarIcon, MoreVertical, BellOff, ArrowUpRight, ArrowDownRight, MapPin, Navigation, ArrowUp, ArrowDown, ArrowUpDown, Music, FileText, Archive, File, Grip, Unlock, GripVertical, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Highlighter, Link2, Undo, Redo, Edit, Wand2, Maximize, Briefcase, MessageSquare, GraduationCap, Languages, Lightbulb, FileSpreadsheet, FileJson, FileDown, ChevronsLeft, ChevronsRight, TrendingDown, Grid, MousePointer, Layers, Waves as Waves$1, Cpu, Focus, Monitor, Wind, Blend, Droplets, CircleDot, Shapes, Move3D, Repeat, Move, EyeOff, Timer, Square, GitBranch, Package, Trash, ArrowRight, MessageCircle, Paperclip, Printer, Github, Server, MemoryStick, HardDrive, Network, PlusCircle, Columns, Pin, Sun, Moon, Home, Trophy, ShoppingBag, Wifi, WifiOff, Flag, Send, Tag, PoundSterling, Euro, Database, GitFork, ShoppingCart, Thermometer } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { endOfDay, startOfDay, endOfWeek, startOfWeek, endOfMonth, startOfMonth, subDays, format, addMonths, formatDistanceToNow, subMonths, eachDayOfInterval, getDay, isSameMonth, isToday, isSameDay } from 'date-fns';
@@ -63422,6 +63422,9 @@ var SwipeableCard = React61__default.forwardRef(
 );
 SwipeableCard.displayName = "SwipeableCard";
 init_use_subscription();
+
+// src/components/timeline/timeline.css
+styleInject("@keyframes gradient {\n  0% {\n    background-position: 0% 50%;\n  }\n  50% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0% 50%;\n  }\n}\n@keyframes gradient-vertical {\n  0% {\n    background-position: 50% 0%;\n  }\n  50% {\n    background-position: 50% 100%;\n  }\n  100% {\n    background-position: 50% 0%;\n  }\n}\n.animate-gradient {\n  animation: gradient 3s ease infinite;\n}\n.animate-gradient-vertical {\n  animation: gradient-vertical 3s ease infinite;\n}\n");
 var timelineVariants = cva("w-full", {
   variants: {
     theme: {
@@ -63511,6 +63514,14 @@ function TimelineInternal({
   parallaxEffect = false,
   gradientConnectors = false,
   animatedProgress = false,
+  nodeSize: nodeSize2 = "md",
+  nodeStyle = "simple",
+  cardStyle = "minimal",
+  connectorStyle = "line",
+  showPhaseNumbers = false,
+  pulseAnimation = false,
+  cardGradient = false,
+  enhancedMetadata = false,
   ariaLabel = "Timeline of events",
   keyboardNavigation = true,
   ...props
@@ -63724,8 +63735,12 @@ function TimelineInternal({
         "div",
         {
           className: cn(
-            "absolute h-1 bg-border",
-            gradientConnectors ? "bg-gradient-to-r from-primary/60 via-primary/30 to-transparent" : "bg-border"
+            "absolute h-1",
+            connectorStyle === "line" && "bg-border",
+            connectorStyle === "dots" && "border-t-2 border-dotted border-border",
+            connectorStyle === "gradient" && "bg-gradient-to-r from-primary/60 via-primary/30 to-transparent",
+            connectorStyle === "animated" && "animate-gradient-vertical bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 bg-[length:200%_200%]",
+            gradientConnectors && "bg-gradient-to-r from-primary/60 via-primary/30 to-transparent"
           ),
           style: {
             width: "100%",
@@ -63737,8 +63752,12 @@ function TimelineInternal({
       );
     }
     const baseClasses = cn(
-      "absolute w-1 left-1/2 -ml-0.5 transform -translate-x-1/2",
-      gradientConnectors ? "bg-gradient-to-b from-primary/60 via-primary/30 to-transparent" : "bg-border"
+      "absolute left-1/2 -ml-0.5 transform -translate-x-1/2",
+      connectorStyle === "line" && "w-1 bg-border",
+      connectorStyle === "dots" && "w-0 border-l-2 border-dotted border-border",
+      connectorStyle === "gradient" && "w-1 bg-gradient-to-b from-primary/60 via-primary/30 to-transparent",
+      connectorStyle === "animated" && "w-1 animate-gradient-vertical bg-gradient-to-b from-purple-500 via-pink-500 to-orange-500 bg-[length:200%_200%]",
+      gradientConnectors && "w-1 bg-gradient-to-b from-primary/60 via-primary/30 to-transparent"
     );
     return /* @__PURE__ */ jsx(
       "div",
@@ -63753,9 +63772,12 @@ function TimelineInternal({
         }
       }
     );
-  }, [connectorRenderer, layout, gradientConnectors]);
+  }, [connectorRenderer, layout, connectorStyle, gradientConnectors]);
   const renderEvent = useCallback((event, index2, isLast = false) => {
-    const eventColor = event.color || colorScheme[event.type] || DEFAULT_COLORS[event.type];
+    const customMeta = event.metadata?.custom;
+    const eventColor = customMeta?.color ? `bg-gradient-to-br ${customMeta.color}` : event.color || colorScheme[event.type] || DEFAULT_COLORS[event.type];
+    const borderColor = customMeta?.borderColor || "";
+    const phaseNumber = customMeta?.phase || (showPhaseNumbers ? String(index2 + 1).padStart(2, "0") : null);
     TEXT_COLORS[event.type] || TEXT_COLORS.custom;
     const isSelected = selectedEvents.has(event.id);
     const isExpanded = expandedEvents.has(event.id);
@@ -63766,6 +63788,217 @@ function TimelineInternal({
     const isRangeEvent = "endDate" in event;
     const isNestedEvent = "subEvents" in event;
     const isMilestoneEvent = "milestone" in event;
+    if (layout === "alternating" || layout === "centered") {
+      const isLeft = index2 % 2 === 0;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: (el) => {
+            if (el) eventRefs.current.set(event.id, el);
+          },
+          className: "relative",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "hidden lg:flex absolute left-1/2 transform -translate-x-1/2 z-20 items-center justify-center", children: /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                initial: { scale: 0 },
+                whileInView: { scale: 1 },
+                viewport: { once: true },
+                transition: {
+                  delay: index2 * 0.15,
+                  type: "spring",
+                  stiffness: 200
+                },
+                className: cn(
+                  "relative rounded-full shadow-2xl border-4 border-background flex items-center justify-center group hover:scale-110 transition-transform duration-300",
+                  customMeta?.color ? "w-20 h-20" : nodeSize2 === "sm" ? "w-8 h-8" : nodeSize2 === "md" ? isMilestoneEvent ? "w-12 h-12" : "w-10 h-10" : nodeSize2 === "lg" ? "w-14 h-14" : nodeSize2 === "xl" ? "w-16 h-16" : "w-20 h-20",
+                  customMeta?.color ? `bg-gradient-to-br ${customMeta.color}` : nodeStyle === "gradient" ? "bg-gradient-to-br from-primary/90 to-primary/60" : nodeStyle === "glassmorphic" ? "backdrop-blur-xl bg-white/20 dark:bg-white/10" : nodeStyle === "animated" ? "animate-gradient bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 bg-[length:200%_200%]" : nodeStyle === "simple" ? eventColor : "bg-gradient-to-br from-primary to-primary/80"
+                ),
+                children: [
+                  phaseNumber && /* @__PURE__ */ jsx("span", { className: "absolute -top-3 -right-3 bg-background text-xs font-bold w-10 h-10 rounded-full border-2 border-primary flex items-center justify-center shadow-lg", children: phaseNumber }),
+                  /* @__PURE__ */ jsx("div", { className: "group-hover:scale-110 transition-transform duration-300", children: renderEventIcon(event) }),
+                  customMeta?.color && /* @__PURE__ */ jsx("div", { className: cn(
+                    "absolute inset-0 rounded-full animate-ping opacity-20",
+                    `bg-gradient-to-br ${customMeta.color}`
+                  ) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: cn(
+              "lg:flex lg:items-center",
+              isLeft ? "lg:justify-start" : "lg:justify-end"
+            ), children: /* @__PURE__ */ jsx("div", { className: "w-full lg:w-[calc(50%-6rem)]", children: /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0, y: 50 },
+                whileInView: { opacity: 1, y: 0 },
+                viewport: { once: true },
+                transition: { delay: index2 * 0.15 },
+                children: /* @__PURE__ */ jsxs(
+                  MoonUICardPro,
+                  {
+                    className: cn(
+                      "relative overflow-hidden transition-all duration-300 cursor-pointer",
+                      isSelected && "ring-2 ring-primary",
+                      borderColor ? `${borderColor} border-2` : "",
+                      customMeta?.color ? "bg-gradient-to-br from-card/95 to-card/80 backdrop-blur-lg shadow-xl hover:shadow-2xl" : cardStyle === "minimal" ? "shadow-none border-0 bg-transparent" : cardStyle === "bordered" ? "shadow-sm hover:shadow-md border-2" : cardStyle === "elevated" ? "shadow-lg hover:shadow-xl bg-card/90" : cardStyle === "glassmorphic" ? "backdrop-blur-xl bg-white/10 dark:bg-black/10 border border-white/20 shadow-2xl" : "shadow-sm",
+                      cardGradient && "bg-gradient-to-br from-card via-card/90 to-card/80 dark:from-card dark:via-card/95 dark:to-card/90"
+                    ),
+                    onClick: () => handleEventClick(event),
+                    tabIndex: keyboardNavigation ? 0 : -1,
+                    onFocus: () => setFocusedEventId(event.id),
+                    role: "button",
+                    "aria-label": `Event: ${event.title}`,
+                    "aria-expanded": isNestedEvent ? isExpanded : void 0,
+                    children: [
+                      customMeta?.color && /* @__PURE__ */ jsx("div", { className: cn(
+                        "h-2 bg-gradient-to-r",
+                        customMeta.color
+                      ) }),
+                      /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: cn(
+                        "p-6",
+                        customMeta?.color && "pt-4"
+                      ), children: [
+                        /* @__PURE__ */ jsxs("div", { className: "lg:hidden flex items-center gap-3 mb-4", children: [
+                          /* @__PURE__ */ jsx("div", { className: cn(
+                            "w-14 h-14 rounded-2xl shadow-lg flex items-center justify-center",
+                            customMeta?.color ? `bg-gradient-to-br ${customMeta.color}` : "bg-gradient-to-br from-primary to-primary/80"
+                          ), children: renderEventIcon(event) }),
+                          phaseNumber && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "outline", className: "text-xs font-bold", children: [
+                            "Phase ",
+                            phaseNumber
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                          /* @__PURE__ */ jsxs("h3", { className: "text-2xl font-bold mb-2 bg-gradient-to-r from-foreground to-foreground/70 bg-clip-text text-transparent", children: [
+                            event.title,
+                            isMilestoneEvent && /* @__PURE__ */ jsx(
+                              MoonUIBadgePro,
+                              {
+                                variant: "secondary",
+                                className: "ml-2 text-xs",
+                                leftIcon: /* @__PURE__ */ jsx(Target, { className: "h-3 w-3" }),
+                                children: "Milestone"
+                              }
+                            )
+                          ] }),
+                          event.description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: event.description })
+                        ] }),
+                        (customMeta?.duration || event.metadata?.tags) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 mb-4", children: [
+                          customMeta?.duration && /* @__PURE__ */ jsx(
+                            MoonUIBadgePro,
+                            {
+                              variant: "secondary",
+                              leftIcon: /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3" }),
+                              children: customMeta.duration
+                            }
+                          ),
+                          event.metadata?.tags?.map((tag) => /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "outline", children: tag }, tag))
+                        ] }),
+                        event.metadata?.progress !== void 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground mb-1", children: [
+                            /* @__PURE__ */ jsx("span", { children: "Progress" }),
+                            /* @__PURE__ */ jsxs("span", { children: [
+                              event.metadata.progress,
+                              "%"
+                            ] })
+                          ] }),
+                          /* @__PURE__ */ jsx("div", { className: "h-2 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+                            motion.div,
+                            {
+                              initial: { width: 0 },
+                              whileInView: { width: `${event.metadata.progress}%` },
+                              viewport: { once: true },
+                              transition: { duration: 1, delay: index2 * 0.2 },
+                              className: cn(
+                                "h-full",
+                                customMeta?.color ? `bg-gradient-to-r ${customMeta.color}` : "bg-gradient-to-r from-primary to-primary/80"
+                              )
+                            }
+                          ) })
+                        ] }),
+                        customMeta?.activities && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                          /* @__PURE__ */ jsxs("h4", { className: "text-sm font-semibold mb-2 flex items-center gap-1", children: [
+                            /* @__PURE__ */ jsx(CheckCircle2, { className: "w-4 h-4 text-primary" }),
+                            "Key Activities"
+                          ] }),
+                          /* @__PURE__ */ jsxs("ul", { className: "space-y-1", children: [
+                            customMeta.activities.slice(0, 3).map((activity, i) => /* @__PURE__ */ jsxs(
+                              motion.li,
+                              {
+                                initial: { opacity: 0, x: -10 },
+                                whileInView: { opacity: 1, x: 0 },
+                                viewport: { once: true },
+                                transition: { delay: index2 * 0.1 + i * 0.05 },
+                                className: "flex items-start gap-2 text-sm text-muted-foreground",
+                                children: [
+                                  /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3 mt-0.5 text-primary/60 flex-shrink-0" }),
+                                  /* @__PURE__ */ jsx("span", { children: activity })
+                                ]
+                              },
+                              i
+                            )),
+                            customMeta.activities.length > 3 && /* @__PURE__ */ jsxs("li", { className: "text-sm text-muted-foreground/60 pl-5", children: [
+                              "+",
+                              customMeta.activities.length - 3,
+                              " more..."
+                            ] })
+                          ] })
+                        ] }),
+                        customMeta?.deliverables && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                          /* @__PURE__ */ jsxs("h4", { className: "text-sm font-semibold mb-2 flex items-center gap-1", children: [
+                            /* @__PURE__ */ jsx(Package, { className: "w-4 h-4 text-primary" }),
+                            "Deliverables"
+                          ] }),
+                          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: customMeta.deliverables.map((deliverable, i) => /* @__PURE__ */ jsx(
+                            MoonUIBadgePro,
+                            {
+                              variant: "secondary",
+                              className: "bg-primary/10 hover:bg-primary/20 transition-colors",
+                              children: deliverable
+                            },
+                            i
+                          )) })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-4 pt-4 border-t", children: [
+                          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 text-sm text-muted-foreground", children: showRelativeTime && event.date ? /* @__PURE__ */ jsx("span", { children: getRelativeTime(event.date) }) : /* @__PURE__ */ jsx("span", { children: event.date?.toLocaleDateString() }) }),
+                          (editable || onEventEdit || onEventDelete) && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                            onEventEdit && /* @__PURE__ */ jsx(
+                              MoonUIButtonPro,
+                              {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  onEventEdit(event);
+                                },
+                                children: /* @__PURE__ */ jsx(Edit, { className: "h-3 w-3" })
+                              }
+                            ),
+                            onEventDelete && /* @__PURE__ */ jsx(
+                              MoonUIButtonPro,
+                              {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  onEventDelete(event);
+                                },
+                                children: /* @__PURE__ */ jsx(Trash, { className: "h-3 w-3" })
+                              }
+                            )
+                          ] })
+                        ] })
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ) }) })
+          ]
+        }
+      );
+    }
     const eventContent = /* @__PURE__ */ jsxs(
       "div",
       {
@@ -63776,7 +64009,6 @@ function TimelineInternal({
         className: cn(
           "relative flex gap-6",
           compactMode ? "pb-4" : "pb-10",
-          layout === "alternating" && index2 % 2 === 0 && "flex-row-reverse",
           layout === "horizontal" && "flex-col items-center pb-0 mr-8",
           "transition-all duration-200",
           isFocused && "scale-[1.02]",
@@ -63795,15 +64027,25 @@ function TimelineInternal({
               motion.div,
               {
                 className: cn(
-                  "flex items-center justify-center rounded-full border-4 bg-background z-10 shadow-lg relative",
-                  isMilestoneEvent ? "w-12 h-12" : "w-10 h-10",
-                  eventColor,
-                  isSelected && "ring-4 ring-ring ring-offset-2"
+                  "flex items-center justify-center rounded-full border-4 z-10 shadow-2xl relative",
+                  // Node size variants with custom meta override
+                  customMeta?.color ? "w-20 h-20" : nodeSize2 === "sm" ? "w-8 h-8" : nodeSize2 === "md" ? isMilestoneEvent ? "w-12 h-12" : "w-10 h-10" : nodeSize2 === "lg" ? "w-14 h-14" : nodeSize2 === "xl" ? "w-16 h-16" : "w-10 h-10",
+                  // Node style variants with custom override
+                  customMeta?.color ? `bg-gradient-to-br ${customMeta.color} border-background` : nodeStyle === "gradient" ? "bg-gradient-to-br from-primary/90 to-primary/60 border-primary/20" : nodeStyle === "glassmorphic" ? "backdrop-blur-xl bg-white/20 dark:bg-white/10 border-white/20" : nodeStyle === "animated" ? "animate-gradient bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 bg-[length:200%_200%]" : nodeStyle === "simple" ? eventColor : eventColor,
+                  // Pulse animation
+                  pulseAnimation && !customMeta?.color && "animate-pulse",
+                  isSelected && "ring-4 ring-ring ring-offset-2",
+                  "group hover:scale-110 transition-transform duration-300"
                 ),
                 whileHover: { scale: 1.15 },
                 whileTap: { scale: 0.95 },
                 children: [
-                  renderEventIcon(event),
+                  phaseNumber && /* @__PURE__ */ jsx("span", { className: "absolute -top-3 -right-3 bg-background text-xs font-bold w-10 h-10 rounded-full border-2 border-primary flex items-center justify-center shadow-lg", children: phaseNumber }),
+                  /* @__PURE__ */ jsx("div", { className: "group-hover:scale-110 transition-transform duration-300", children: renderEventIcon(event) }),
+                  customMeta?.color && /* @__PURE__ */ jsx("div", { className: cn(
+                    "absolute inset-0 rounded-full animate-ping opacity-20",
+                    `bg-gradient-to-br ${customMeta.color}`
+                  ) }),
                   !isLast && layout === "horizontal" && /* @__PURE__ */ jsx(
                     "div",
                     {
@@ -63827,180 +64069,253 @@ function TimelineInternal({
             ),
             !isLast && layout !== "horizontal" && renderConnector(event, events[index2 + 1], isLast)
           ] }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             MoonUICardPro,
             {
               className: cn(
                 layout === "horizontal" ? "w-64" : "flex-1 min-w-0",
-                "shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer",
-                layout === "alternating" && index2 % 2 === 0 && "text-right",
+                "transition-all duration-300 cursor-pointer overflow-hidden",
                 isSelected && "ring-2 ring-primary",
-                "bg-card/50 backdrop-blur-sm"
+                // Card style variants with custom border
+                borderColor ? `${borderColor} border-2` : "",
+                customMeta?.color ? "bg-gradient-to-br from-card/95 to-card/80 backdrop-blur-lg shadow-xl hover:shadow-2xl" : cardStyle === "minimal" ? "shadow-none border-0 bg-transparent" : cardStyle === "bordered" ? "shadow-sm hover:shadow-md border-2" : cardStyle === "elevated" ? "shadow-lg hover:shadow-xl bg-card/90" : cardStyle === "glassmorphic" ? "backdrop-blur-xl bg-white/10 dark:bg-black/10 border border-white/20 shadow-2xl" : "shadow-sm",
+                // Card gradient
+                cardGradient && "bg-gradient-to-br from-card via-card/90 to-card/80 dark:from-card dark:via-card/95 dark:to-card/90"
               ),
               onClick: () => handleEventClick(event),
-              children: /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "p-4", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 mb-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                    /* @__PURE__ */ jsxs("h4", { className: cn(
-                      "font-semibold",
-                      compactMode ? "text-sm" : "text-base",
-                      isMilestoneEvent && "text-lg"
-                    ), children: [
-                      event.title,
-                      isMilestoneEvent && /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "ml-2 bg-purple-500", children: "Milestone" })
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-muted-foreground", children: [
-                      /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
-                      showRelativeTime ? /* @__PURE__ */ jsx("span", { children: getRelativeTime(event.date) }) : /* @__PURE__ */ jsx("span", { children: formatTime2(event.date) }),
-                      isRangeEvent && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3" }),
-                        /* @__PURE__ */ jsx("span", { children: formatTime2(event.endDate) })
+              children: [
+                customMeta?.color && /* @__PURE__ */ jsx("div", { className: cn(
+                  "h-2 bg-gradient-to-r",
+                  customMeta.color
+                ) }),
+                /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: cn(
+                  "p-6",
+                  customMeta?.color && "pt-4"
+                ), children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2 mb-2", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                      /* @__PURE__ */ jsxs("h4", { className: cn(
+                        "font-semibold",
+                        compactMode ? "text-sm" : "text-base",
+                        isMilestoneEvent && "text-lg"
+                      ), children: [
+                        event.title,
+                        isMilestoneEvent && /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "ml-2 bg-purple-500", children: "Milestone" })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 text-xs text-muted-foreground", children: [
+                        /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+                        showRelativeTime ? /* @__PURE__ */ jsx("span", { children: getRelativeTime(event.date) }) : /* @__PURE__ */ jsx("span", { children: formatTime2(event.date) }),
+                        isRangeEvent && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3" }),
+                          /* @__PURE__ */ jsx("span", { children: formatTime2(event.endDate) })
+                        ] })
                       ] })
-                    ] })
-                  ] }),
-                  (editable || event.metadata?.externalLink) && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
-                    /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" }) }) }),
-                    /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
-                      editable && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onEventEdit?.(event), children: [
-                          /* @__PURE__ */ jsx(Edit, { className: "mr-2 h-4 w-4" }),
-                          "Edit"
+                    ] }),
+                    (editable || event.metadata?.externalLink) && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                      /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" }) }) }),
+                      /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+                        editable && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onEventEdit?.(event), children: [
+                            /* @__PURE__ */ jsx(Edit, { className: "mr-2 h-4 w-4" }),
+                            "Edit"
+                          ] }),
+                          /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onEventDelete?.(event), children: [
+                            /* @__PURE__ */ jsx(Trash, { className: "mr-2 h-4 w-4" }),
+                            "Delete"
+                          ] }),
+                          /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {})
                         ] }),
-                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => onEventDelete?.(event), children: [
-                          /* @__PURE__ */ jsx(Trash, { className: "mr-2 h-4 w-4" }),
-                          "Delete"
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => navigator.clipboard.writeText(event.title), children: [
+                          /* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }),
+                          "Copy"
                         ] }),
-                        /* @__PURE__ */ jsx(MoonUIDropdownMenuSeparatorPro, {})
-                      ] }),
-                      /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => navigator.clipboard.writeText(event.title), children: [
-                        /* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }),
-                        "Copy"
-                      ] }),
-                      /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { children: [
-                        /* @__PURE__ */ jsx(Share, { className: "mr-2 h-4 w-4" }),
-                        "Share"
-                      ] }),
-                      event.metadata?.externalLink && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => window.open(event.metadata?.externalLink, "_blank"), children: [
-                        /* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }),
-                        "View Details"
+                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { children: [
+                          /* @__PURE__ */ jsx(Share, { className: "mr-2 h-4 w-4" }),
+                          "Share"
+                        ] }),
+                        event.metadata?.externalLink && /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => window.open(event.metadata?.externalLink, "_blank"), children: [
+                          /* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }),
+                          "View Details"
+                        ] })
                       ] })
                     ] })
-                  ] })
-                ] }),
-                event.description && /* @__PURE__ */ jsx("p", { className: cn(
-                  "text-muted-foreground mb-2",
-                  compactMode ? "text-xs" : "text-sm"
-                ), children: event.description }),
-                isMilestoneEvent && event.milestone && /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 dark:bg-purple-950/20 rounded-md p-3 mb-2", children: [
-                  event.milestone.target && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-                    /* @__PURE__ */ jsx(Target, { className: "h-4 w-4 text-purple-600" }),
-                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Target:" }),
-                    /* @__PURE__ */ jsx("span", { children: event.milestone.target })
                   ] }),
-                  event.milestone.achievement && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm mt-1", children: [
-                    /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-purple-600" }),
-                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Achievement:" }),
-                    /* @__PURE__ */ jsx("span", { children: event.milestone.achievement })
-                  ] })
-                ] }),
-                event.metadata?.progress !== void 0 && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs mb-1", children: [
-                    /* @__PURE__ */ jsx("span", { children: "Progress" }),
-                    /* @__PURE__ */ jsxs("span", { children: [
-                      event.metadata.progress,
-                      "%"
+                  event.description && /* @__PURE__ */ jsx("p", { className: cn(
+                    "text-muted-foreground mb-2",
+                    compactMode ? "text-xs" : "text-sm"
+                  ), children: event.description }),
+                  isMilestoneEvent && event.milestone && /* @__PURE__ */ jsxs("div", { className: "bg-purple-50 dark:bg-purple-950/20 rounded-md p-3 mb-2", children: [
+                    event.milestone.target && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+                      /* @__PURE__ */ jsx(Target, { className: "h-4 w-4 text-purple-600" }),
+                      /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Target:" }),
+                      /* @__PURE__ */ jsx("span", { children: event.milestone.target })
+                    ] }),
+                    event.milestone.achievement && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm mt-1", children: [
+                      /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4 text-purple-600" }),
+                      /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Achievement:" }),
+                      /* @__PURE__ */ jsx("span", { children: event.milestone.achievement })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-2 overflow-hidden", children: /* @__PURE__ */ jsx(
-                    motion.div,
-                    {
-                      className: "h-full bg-primary",
-                      initial: { width: 0 },
-                      animate: { width: `${event.metadata.progress}%` },
-                      transition: { duration: 0.5, ease: "easeOut" }
-                    }
-                  ) })
-                ] }),
-                showUserInfo && event.user && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-                  /* @__PURE__ */ jsxs(MoonUIAvatarPro, { className: "h-6 w-6", children: [
-                    /* @__PURE__ */ jsx(MoonUIAvatarImagePro, { src: event.user.avatar }),
-                    /* @__PURE__ */ jsx(MoonUIAvatarFallbackPro, { className: "text-xs", children: getInitials4(event.user.name) })
+                  event.metadata?.progress !== void 0 && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs mb-1", children: [
+                      /* @__PURE__ */ jsx("span", { children: "Progress" }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        event.metadata.progress,
+                        "%"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "w-full bg-muted rounded-full h-2 overflow-hidden", children: /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        className: "h-full bg-primary",
+                        initial: { width: 0 },
+                        animate: { width: `${event.metadata.progress}%` },
+                        transition: { duration: 0.5, ease: "easeOut" }
+                      }
+                    ) })
                   ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: event.user.name }),
-                    event.user.role && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: event.user.role })
-                  ] })
-                ] }),
-                showMetadata && event.metadata && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 text-xs text-muted-foreground", children: [
-                  event.metadata.duration && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ jsx("span", { children: event.metadata.duration })
+                  showUserInfo && event.user && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+                    /* @__PURE__ */ jsxs(MoonUIAvatarPro, { className: "h-6 w-6", children: [
+                      /* @__PURE__ */ jsx(MoonUIAvatarImagePro, { src: event.user.avatar }),
+                      /* @__PURE__ */ jsx(MoonUIAvatarFallbackPro, { className: "text-xs", children: getInitials4(event.user.name) })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: event.user.name }),
+                      event.user.role && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: event.user.role })
+                    ] })
                   ] }),
-                  event.metadata.location && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx(Calendar$1, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ jsx("span", { children: event.metadata.location })
+                  customMeta?.activities && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsxs("h4", { className: "text-sm font-semibold mb-2 flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx(CheckCircle2, { className: "w-4 h-4 text-primary" }),
+                      "Key Activities"
+                    ] }),
+                    /* @__PURE__ */ jsxs("ul", { className: "space-y-1", children: [
+                      customMeta.activities.slice(0, 3).map((activity, i) => /* @__PURE__ */ jsxs(
+                        motion.li,
+                        {
+                          initial: { opacity: 0, x: -10 },
+                          whileInView: { opacity: 1, x: 0 },
+                          viewport: { once: true },
+                          transition: { delay: index2 * 0.1 + i * 0.05 },
+                          className: "flex items-start gap-2 text-sm text-muted-foreground",
+                          children: [
+                            /* @__PURE__ */ jsx(ChevronRight, { className: "w-3 h-3 mt-0.5 text-primary/60 flex-shrink-0" }),
+                            /* @__PURE__ */ jsx("span", { children: activity })
+                          ]
+                        },
+                        i
+                      )),
+                      customMeta.activities.length > 3 && /* @__PURE__ */ jsxs("li", { className: "text-sm text-muted-foreground/60 pl-5", children: [
+                        "+",
+                        customMeta.activities.length - 3,
+                        " more..."
+                      ] })
+                    ] })
                   ] }),
-                  event.metadata.comments !== void 0 && event.metadata.comments > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx(MessageCircle, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ jsx("span", { children: event.metadata.comments })
+                  customMeta?.deliverables && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+                    /* @__PURE__ */ jsxs("h4", { className: "text-sm font-semibold mb-2 flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx(Package, { className: "w-4 h-4 text-primary" }),
+                      "Deliverables"
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: customMeta.deliverables.map((deliverable, i) => /* @__PURE__ */ jsx(
+                      MoonUIBadgePro,
+                      {
+                        variant: "secondary",
+                        className: "bg-primary/10 hover:bg-primary/20 transition-colors",
+                        children: deliverable
+                      },
+                      i
+                    )) })
                   ] }),
-                  event.metadata.attachments !== void 0 && event.metadata.attachments > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx(Paperclip, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ jsx("span", { children: event.metadata.attachments })
+                  showMetadata && event.metadata && !customMeta && /* @__PURE__ */ jsxs("div", { className: cn(
+                    "flex flex-wrap items-center gap-3 text-xs",
+                    enhancedMetadata ? "text-foreground" : "text-muted-foreground"
+                  ), children: [
+                    event.metadata.duration && /* @__PURE__ */ jsxs("div", { className: cn(
+                      "flex items-center gap-1",
+                      enhancedMetadata && "px-2 py-1 rounded-md bg-muted/50"
+                    ), children: [
+                      /* @__PURE__ */ jsx(Clock, { className: cn("h-3 w-3", enhancedMetadata && "text-primary") }),
+                      /* @__PURE__ */ jsx("span", { children: event.metadata.duration })
+                    ] }),
+                    event.metadata.location && /* @__PURE__ */ jsxs("div", { className: cn(
+                      "flex items-center gap-1",
+                      enhancedMetadata && "px-2 py-1 rounded-md bg-muted/50"
+                    ), children: [
+                      /* @__PURE__ */ jsx(Calendar$1, { className: cn("h-3 w-3", enhancedMetadata && "text-primary") }),
+                      /* @__PURE__ */ jsx("span", { children: event.metadata.location })
+                    ] }),
+                    event.metadata.comments !== void 0 && event.metadata.comments > 0 && /* @__PURE__ */ jsxs("div", { className: cn(
+                      "flex items-center gap-1",
+                      enhancedMetadata && "px-2 py-1 rounded-md bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400"
+                    ), children: [
+                      /* @__PURE__ */ jsx(MessageCircle, { className: "h-3 w-3" }),
+                      /* @__PURE__ */ jsx("span", { children: event.metadata.comments })
+                    ] }),
+                    event.metadata.attachments !== void 0 && event.metadata.attachments > 0 && /* @__PURE__ */ jsxs("div", { className: cn(
+                      "flex items-center gap-1",
+                      enhancedMetadata && "px-2 py-1 rounded-md bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400"
+                    ), children: [
+                      /* @__PURE__ */ jsx(Paperclip, { className: "h-3 w-3" }),
+                      /* @__PURE__ */ jsx("span", { children: event.metadata.attachments })
+                    ] }),
+                    event.metadata.priority && /* @__PURE__ */ jsx(
+                      MoonUIBadgePro,
+                      {
+                        variant: event.metadata.priority === "high" ? "destructive" : event.metadata.priority === "medium" ? "outline" : "secondary",
+                        className: cn(
+                          "text-xs",
+                          enhancedMetadata && "font-semibold"
+                        ),
+                        children: event.metadata.priority
+                      }
+                    )
                   ] }),
-                  event.metadata.priority && /* @__PURE__ */ jsx(
-                    MoonUIBadgePro,
+                  event.metadata?.tags && event.metadata.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2", children: event.metadata.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "outline", className: "text-xs", children: tag }, tagIndex)) }),
+                  isNestedEvent && isExpanded && event.subEvents && /* @__PURE__ */ jsx("div", { className: "mt-3 ml-4 pl-4 border-l-2 border-muted", children: event.subEvents.map((subEvent, subIndex) => /* @__PURE__ */ jsx("div", { className: "mb-2 last:mb-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: cn(
+                      "w-2 h-2 rounded-full mt-1.5",
+                      colorScheme[subEvent.type] || DEFAULT_COLORS[subEvent.type]
+                    ) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                      /* @__PURE__ */ jsx("h5", { className: "text-sm font-medium", children: subEvent.title }),
+                      subEvent.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subEvent.description }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: getRelativeTime(subEvent.date) })
+                    ] })
+                  ] }) }, subEvent.id)) }),
+                  isNestedEvent && event.subEvents && event.subEvents.length > 0 && /* @__PURE__ */ jsx(
+                    MoonUIButtonPro,
                     {
-                      variant: event.metadata.priority === "high" ? "destructive" : event.metadata.priority === "medium" ? "outline" : "secondary",
-                      className: "text-xs",
-                      children: event.metadata.priority
+                      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;
+                        });
+                      },
+                      children: isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(ChevronDown, { className: "mr-1 h-3 w-3" }),
+                        "Hide ",
+                        event.subEvents.length,
+                        " sub-events"
+                      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx(ChevronRight, { className: "mr-1 h-3 w-3" }),
+                        "Show ",
+                        event.subEvents.length,
+                        " sub-events"
+                      ] })
                     }
                   )
-                ] }),
-                event.metadata?.tags && event.metadata.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2", children: event.metadata.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "outline", className: "text-xs", children: tag }, tagIndex)) }),
-                isNestedEvent && isExpanded && event.subEvents && /* @__PURE__ */ jsx("div", { className: "mt-3 ml-4 pl-4 border-l-2 border-muted", children: event.subEvents.map((subEvent, subIndex) => /* @__PURE__ */ jsx("div", { className: "mb-2 last:mb-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: cn(
-                    "w-2 h-2 rounded-full mt-1.5",
-                    colorScheme[subEvent.type] || DEFAULT_COLORS[subEvent.type]
-                  ) }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                    /* @__PURE__ */ jsx("h5", { className: "text-sm font-medium", children: subEvent.title }),
-                    subEvent.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subEvent.description }),
-                    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: getRelativeTime(subEvent.date) })
-                  ] })
-                ] }) }, subEvent.id)) }),
-                isNestedEvent && event.subEvents && event.subEvents.length > 0 && /* @__PURE__ */ jsx(
-                  MoonUIButtonPro,
-                  {
-                    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;
-                      });
-                    },
-                    children: isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(ChevronDown, { className: "mr-1 h-3 w-3" }),
-                      "Hide ",
-                      event.subEvents.length,
-                      " sub-events"
-                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(ChevronRight, { className: "mr-1 h-3 w-3" }),
-                      "Show ",
-                      event.subEvents.length,
-                      " sub-events"
-                    ] })
-                  }
-                )
-              ] })
+                ] })
+              ]
             }
           )
         ]
@@ -64056,7 +64371,15 @@ function TimelineInternal({
     showMetadata,
     draggable,
     onEventsReorder,
-    animation
+    animation,
+    nodeSize2,
+    nodeStyle,
+    cardStyle,
+    connectorStyle,
+    showPhaseNumbers,
+    pulseAnimation,
+    cardGradient,
+    enhancedMetadata
   ]);
   const renderGroupedEvents = useCallback(() => {
     const groups = groupEventsByDate(filteredAndSortedEvents);
@@ -64121,7 +64444,7 @@ function TimelineInternal({
       layout === "horizontal" && "flex flex-row overflow-x-auto gap-0 pb-4 items-start",
       layout === "alternating" && "relative"
     ), children: [
-      layout === "alternating" && /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 -ml-0.5 top-0 bottom-0 w-1 bg-border" }),
+      (layout === "alternating" || layout === "centered") && /* @__PURE__ */ jsx("div", { className: "hidden lg:block absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-primary/60 via-primary/30 to-primary/10" }),
       filteredAndSortedEvents.map(
         (event, index2) => renderEvent(event, index2, index2 === filteredAndSortedEvents.length - 1)
       )