@zendir/ui 0.1.0

package/dist/react/astro/UnifiedTimeline.js

@@ -0,0 +1,1768 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { memo, useState, useCallback, useMemo, useRef } from "react";
+import { classNames, safeAccentText } from "../utils/index.js";
+import { Icon } from "../core/Icon.js";
+import { Badge } from "../core/Badge.js";
+import { Tooltip } from "../core/Tooltip.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+function TimelineStatusMarker({
+  status,
+  fillColor,
+  size = 12
+}) {
+  const effectiveStatus = status ?? "normal";
+  const glow = `${fillColor}60`;
+  switch (effectiveStatus) {
+    case "off":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3", fill: fillColor }) });
+    case "standby":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: fillColor, strokeWidth: "2" }) });
+    case "normal":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: fillColor }) });
+    case "caution":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "10", fill: fillColor }) });
+    case "serious":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("polygon", { points: "6,1 11,6 6,11 1,6", fill: fillColor }) });
+    case "critical":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("polygon", { points: "6,11 1,2 11,2", fill: fillColor }) });
+    default:
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: fillColor }) });
+  }
+}
+const EventListItem = memo(function EventListItem2({
+  event,
+  isLast,
+  onEventClick
+}) {
+  const { tokens } = useTheme();
+  const [expanded, setExpanded] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const hasArguments = event.arguments && Object.keys(event.arguments).length > 0;
+  const argumentCount = hasArguments ? Object.keys(event.arguments).length : 0;
+  const timestamps = event.timestamps || [
+    { label: "Time", value: event.start.toLocaleString(), status: event.status }
+  ];
+  const displayStatus = event.badgeVariant && event.badgeVariant !== "default" && event.badgeVariant !== "primary" ? event.badgeVariant : event.status ?? "normal";
+  const markerColor = tokens.colors.status[displayStatus];
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          width: "20px",
+          flexShrink: 0
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { marginTop: "8px" }, children: /* @__PURE__ */ jsx(TimelineStatusMarker, { status: displayStatus, fillColor: markerColor, size: 12 }) }),
+          !isLast && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "2px",
+                flex: 1,
+                backgroundColor: `${tokens.colors.accent.primary}30`,
+                marginTop: "4px"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        onClick: () => onEventClick == null ? void 0 : onEventClick(event),
+        style: {
+          flex: 1,
+          marginBottom: "16px",
+          padding: "16px 20px",
+          backgroundColor: tokens.colors.background.surface,
+          border: `1px solid ${hovered ? tokens.colors.accent.primary : tokens.colors.border.muted}`,
+          borderRadius: tokens.borderRadius.lg,
+          cursor: onEventClick ? "pointer" : "default",
+          transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+          boxShadow: hovered ? `0 4px 20px ${tokens.colors.accent.primary}15, 0 0 0 1px ${tokens.colors.accent.primary}20` : "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                marginBottom: timestamps.length ? "12px" : 0
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "h4",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: "0.875rem",
+                      fontWeight: 500,
+                      // AstroUXDS medium (was 600)
+                      color: tokens.colors.text.primary,
+                      letterSpacing: "0.02em",
+                      textTransform: "uppercase"
+                    },
+                    children: event.title
+                  }
+                ),
+                event.badge && /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    variant: displayStatus === "caution" || displayStatus === "serious" ? "filled" : "outline",
+                    size: "small",
+                    status: displayStatus === "critical" ? "critical" : displayStatus === "serious" ? "serious" : displayStatus === "caution" ? "caution" : displayStatus === "normal" ? "normal" : void 0,
+                    children: event.badge
+                  }
+                )
+              ]
+            }
+          ),
+          event.subtitle && /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                margin: "0 0 12px 0",
+                fontSize: "0.8125rem",
+                color: tokens.colors.text.secondary
+              },
+              children: event.subtitle
+            }
+          ),
+          timestamps.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: timestamps.map((ts, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                fontSize: "0.8125rem"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      color: tokens.colors.text.secondary
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        TimelineStatusMarker,
+                        {
+                          status: ts.status ?? "normal",
+                          fillColor: ts.status ? tokens.colors.status[ts.status] : tokens.colors.accent.primary,
+                          size: 6
+                        }
+                      ),
+                      ts.label
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: tokens.typography.fontFamily.mono,
+                      color: tokens.colors.text.primary,
+                      fontWeight: 500
+                    },
+                    children: ts.value
+                  }
+                )
+              ]
+            },
+            index
+          )) }),
+          hasArguments && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setExpanded(!expanded);
+                },
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                  marginTop: "12px",
+                  padding: 0,
+                  background: "none",
+                  border: "none",
+                  color: tokens.colors.text.secondary,
+                  fontSize: "0.75rem",
+                  cursor: "pointer",
+                  transition: "color 150ms ease"
+                },
+                onMouseEnter: (e) => e.currentTarget.style.color = tokens.colors.accent.primary,
+                onMouseLeave: (e) => e.currentTarget.style.color = tokens.colors.text.secondary,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "10",
+                      height: "10",
+                      viewBox: "0 0 24 24",
+                      fill: "currentColor",
+                      style: {
+                        transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+                        transition: "transform 150ms ease"
+                      },
+                      children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+                    }
+                  ),
+                  expanded ? "Hide" : "Show",
+                  " Arguments (",
+                  argumentCount,
+                  ")"
+                ]
+              }
+            ),
+            expanded && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  marginTop: "12px",
+                  borderTop: `1px solid ${tokens.colors.border.muted}`,
+                  paddingTop: "12px",
+                  animation: "zendir-expand 200ms ease-out"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-expand { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }` }),
+                  Object.entries(event.arguments).map(([key, value]) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        padding: "8px 12px",
+                        marginBottom: "4px",
+                        backgroundColor: tokens.colors.background.elevated,
+                        borderRadius: tokens.borderRadius.md,
+                        fontSize: "0.8125rem"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary }, children: key }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: tokens.typography.fontFamily.mono,
+                              color: typeof value === "boolean" ? value ? tokens.colors.status.normal : tokens.colors.text.tertiary : tokens.colors.text.primary,
+                              fontWeight: 500
+                            },
+                            children: String(value)
+                          }
+                        )
+                      ]
+                    },
+                    key
+                  ))
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+const ChartView = memo(function ChartView2({
+  events,
+  tracks,
+  start,
+  end,
+  trackHeight,
+  onEventClick,
+  zoom,
+  showPlayhead = true,
+  playheadTime,
+  onPlayheadChange: _onPlayheadChange,
+  showDayMarkers = true
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const [hoveredEvent, setHoveredEvent] = useState(null);
+  const [tooltipPos, setTooltipPos] = useState(null);
+  const scrollContainerRef = useRef(null);
+  const totalDuration = end.getTime() - start.getTime();
+  const trackLabelWidth = 130;
+  const timeLabels = useMemo(() => {
+    const labels = [];
+    const baseLabelCount = 6;
+    const labelCount = Math.round(baseLabelCount * zoom);
+    for (let i = 0; i <= labelCount; i++) {
+      const percent = i / labelCount * 100;
+      const time = new Date(start.getTime() + totalDuration * percent / 100);
+      labels.push({ time, percent });
+    }
+    return labels;
+  }, [start, totalDuration, zoom]);
+  const eventsByTrack = useMemo(() => {
+    const grouped = {};
+    tracks.forEach((track) => {
+      grouped[track.id] = events.filter((e) => e.track === track.id);
+    });
+    const unassigned = events.filter((e) => !e.track);
+    if (unassigned.length > 0 && tracks.length > 0) {
+      grouped[tracks[0].id] = [...grouped[tracks[0].id] || [], ...unassigned];
+    }
+    return grouped;
+  }, [events, tracks]);
+  const eventOverlaps = useMemo(() => {
+    const overlaps = {};
+    Object.entries(eventsByTrack).forEach(([_trackId, trackEvents]) => {
+      const sorted = [...trackEvents].sort((a, b) => a.start.getTime() - b.start.getTime());
+      sorted.forEach((event) => {
+        const eventStart = event.start.getTime();
+        const eventEnd = (event.end || new Date(eventStart + 3e5)).getTime();
+        const overlapping = sorted.filter((other) => {
+          if (other.id === event.id) return false;
+          const otherStart = other.start.getTime();
+          const otherEnd = (other.end || new Date(otherStart + 3e5)).getTime();
+          return eventStart < otherEnd && eventEnd > otherStart;
+        });
+        let stackIndex = 0;
+        if (overlapping.length > 0) {
+          const usedIndices = overlapping.filter((o) => overlaps[o.id] !== void 0).map((o) => overlaps[o.id].stackIndex);
+          while (usedIndices.includes(stackIndex)) {
+            stackIndex++;
+          }
+        }
+        overlaps[event.id] = {
+          stackIndex,
+          overlapCount: overlapping.length,
+          overlappingIds: overlapping.map((o) => o.id)
+        };
+      });
+    });
+    return overlaps;
+  }, [eventsByTrack]);
+  const dayMarkers = useMemo(() => {
+    const markers = [];
+    const current = new Date(start);
+    current.setUTCHours(0, 0, 0, 0);
+    if (current.getTime() < start.getTime()) {
+      current.setUTCDate(current.getUTCDate() + 1);
+    }
+    while (current.getTime() <= end.getTime()) {
+      const percent = (current.getTime() - start.getTime()) / totalDuration * 100;
+      if (percent >= 0 && percent <= 100) {
+        markers.push({ time: new Date(current), percent });
+      }
+      current.setUTCDate(current.getUTCDate() + 1);
+    }
+    return markers;
+  }, [start, end, totalDuration]);
+  const formatTime = (date, showSeconds = false) => {
+    const options = {
+      hour: "2-digit",
+      minute: "2-digit",
+      ...showSeconds && { second: "2-digit" }
+    };
+    return date.toLocaleTimeString([], options);
+  };
+  const formatDuration = (ms) => {
+    const totalSeconds = Math.floor(ms / 1e3);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor(totalSeconds % 3600 / 60);
+    const seconds = totalSeconds % 60;
+    if (hours > 0) return `${hours}h ${minutes}m`;
+    if (minutes > 0) return `${minutes}m ${seconds}s`;
+    return `${seconds}s`;
+  };
+  const formatUTC = (date) => {
+    return date.toISOString().replace("T", " ").substring(0, 19) + " UTC";
+  };
+  const getEventPosition = (event) => {
+    const eventStart = event.start.getTime();
+    const eventEnd = (event.end || new Date(eventStart + 3e5)).getTime();
+    const leftPercent = (eventStart - start.getTime()) / totalDuration * 100;
+    const widthPercent = (eventEnd - eventStart) / totalDuration * 100;
+    return {
+      left: `${Math.max(0, Math.min(100, leftPercent))}%`,
+      width: `${Math.max(2, Math.min(100 - leftPercent, widthPercent))}%`
+    };
+  };
+  const getStatusColor = (status) => {
+    if (!status) return tokens.colors.accent.primary;
+    return tokens.colors.status[status] || tokens.colors.accent.primary;
+  };
+  const getStatusLabel = (status) => {
+    const labels = {
+      normal: "Normal",
+      standby: "Standby",
+      caution: "Caution",
+      serious: "Serious",
+      critical: "Critical",
+      off: "Off"
+    };
+    return labels[status || ""] || "Unknown";
+  };
+  const currentPlayheadTime = playheadTime || /* @__PURE__ */ new Date();
+  const now = currentPlayheadTime.getTime();
+  const playheadPercent = showPlayhead && now >= start.getTime() && now <= end.getTime() ? (now - start.getTime()) / totalDuration * 100 : null;
+  const hoveredEventData = hoveredEvent ? events.find((e) => e.id === hoveredEvent) : null;
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollContainerRef,
+        className: "zendir-timeline-scroll",
+        style: {
+          overflowX: "auto",
+          overflowY: "hidden",
+          position: "relative"
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              width: `${zoom * 100}%`,
+              minWidth: "100%",
+              position: "relative"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    height: 32,
+                    borderBottom: `1px solid ${tokens.colors.accent.primary}20`,
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 20,
+                    backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+                    ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          width: trackLabelWidth,
+                          flexShrink: 0,
+                          position: "sticky",
+                          left: 0,
+                          zIndex: 25,
+                          backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+                          ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
+                          borderRight: `1px solid ${tokens.colors.border.muted}30`,
+                          display: "flex",
+                          alignItems: "center",
+                          paddingLeft: 12,
+                          fontSize: "0.625rem",
+                          fontWeight: 500,
+                          // AstroUXDS medium (was 600)
+                          color: tokens.colors.text.tertiary,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.08em"
+                        },
+                        children: "Tracks"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { style: { flex: 1, position: "relative" }, children: [
+                      showDayMarkers && dayMarkers.map((marker, index) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            position: "absolute",
+                            left: `${marker.percent}%`,
+                            top: 0,
+                            height: "100%",
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            zIndex: 5
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "0.5rem",
+                                color: tokens.colors.status.caution,
+                                fontFamily: tokens.typography.fontFamily.mono,
+                                whiteSpace: "nowrap",
+                                backgroundColor: `${tokens.colors.status.caution}20`,
+                                padding: "1px 4px",
+                                borderRadius: 2,
+                                marginTop: 2
+                              },
+                              children: marker.time.toLocaleDateString([], { month: "short", day: "numeric" })
+                            }
+                          )
+                        },
+                        `day-${index}`
+                      )),
+                      timeLabels.map((label, index) => /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            position: "absolute",
+                            left: `${label.percent}%`,
+                            transform: "translateX(-50%)",
+                            top: 8,
+                            fontSize: "0.6875rem",
+                            color: tokens.colors.text.tertiary,
+                            fontFamily: tokens.typography.fontFamily.mono,
+                            whiteSpace: "nowrap"
+                          },
+                          children: formatTime(label.time)
+                        },
+                        index
+                      ))
+                    ] })
+                  ]
+                }
+              ),
+              tracks.map((track) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "aria-label": track.label,
+                  style: {
+                    display: "flex",
+                    height: track.height || trackHeight,
+                    borderBottom: `1px solid ${tokens.colors.accent.primary}10`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          width: trackLabelWidth,
+                          flexShrink: 0,
+                          position: "sticky",
+                          left: 0,
+                          zIndex: 15,
+                          display: "flex",
+                          alignItems: "center",
+                          paddingLeft: 12,
+                          fontSize: "0.6875rem",
+                          fontWeight: 500,
+                          // AstroUXDS medium (was 600)
+                          color: tokens.colors.text.secondary,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.05em",
+                          backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+                          ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
+                          borderRight: `1px solid ${tokens.colors.border.muted}30`,
+                          boxShadow: "2px 0 8px rgba(0,0,0,0.15)"
+                        },
+                        children: track.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          flex: 1,
+                          position: "relative",
+                          height: "100%"
+                        },
+                        children: [
+                          showDayMarkers && dayMarkers.map((marker, index) => /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              style: {
+                                position: "absolute",
+                                left: `${marker.percent}%`,
+                                top: 0,
+                                bottom: 0,
+                                width: 1,
+                                backgroundColor: `${tokens.colors.status.caution}25`,
+                                zIndex: 1,
+                                pointerEvents: "none"
+                              }
+                            },
+                            `day-line-${index}`
+                          )),
+                          (eventsByTrack[track.id] || []).map((event) => {
+                            const { left, width } = getEventPosition(event);
+                            const color = getStatusColor(event.status);
+                            const isHovered = hoveredEvent === event.id;
+                            const overlap = eventOverlaps[event.id];
+                            const hasOverlap = overlap && overlap.overlapCount > 0;
+                            const cardHeight = hasOverlap ? 28 : 36;
+                            const stackOffset = overlap ? overlap.stackIndex * 30 : 0;
+                            const baseTop = ((track.height || trackHeight) - cardHeight) / 2;
+                            return /* @__PURE__ */ jsxs(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => onEventClick == null ? void 0 : onEventClick(event),
+                                onMouseEnter: (e) => {
+                                  setHoveredEvent(event.id);
+                                  const rect = e.currentTarget.getBoundingClientRect();
+                                  setTooltipPos({ x: rect.left + rect.width / 2, y: rect.top - 8 });
+                                },
+                                onMouseLeave: () => {
+                                  setHoveredEvent(null);
+                                  setTooltipPos(null);
+                                },
+                                className: "zendir-timeline-region",
+                                style: {
+                                  position: "absolute",
+                                  left,
+                                  width,
+                                  minWidth: 50,
+                                  height: cardHeight,
+                                  top: Math.min(baseTop + stackOffset, (track.height || trackHeight) - cardHeight - 4),
+                                  backgroundColor: "rgba(11, 26, 40, 0.95)",
+                                  border: `1px solid ${isHovered ? color : `${tokens.colors.accent.primary}30`}`,
+                                  borderRadius: "4px",
+                                  cursor: onEventClick ? "pointer" : "default",
+                                  display: "flex",
+                                  alignItems: "center",
+                                  overflow: "hidden",
+                                  zIndex: isHovered ? 100 : 1,
+                                  boxShadow: isHovered ? `0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px ${color}60` : "0 2px 6px rgba(0, 0, 0, 0.25)",
+                                  transition: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
+                                  transform: isHovered ? "translateY(-3px) scale(1.02)" : "none"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    "div",
+                                    {
+                                      style: {
+                                        width: 4,
+                                        height: "100%",
+                                        backgroundColor: color,
+                                        flexShrink: 0,
+                                        borderRadius: "2px 0 0 2px"
+                                      }
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs(
+                                    "div",
+                                    {
+                                      style: {
+                                        flex: 1,
+                                        padding: "4px 8px",
+                                        overflow: "hidden",
+                                        minWidth: 0
+                                      },
+                                      children: [
+                                        /* @__PURE__ */ jsx(
+                                          "div",
+                                          {
+                                            style: {
+                                              display: "flex",
+                                              alignItems: "center",
+                                              gap: 4
+                                            },
+                                            children: /* @__PURE__ */ jsx(
+                                              "span",
+                                              {
+                                                style: {
+                                                  fontSize: "0.6875rem",
+                                                  fontWeight: 500,
+                                                  // AstroUXDS medium (was 600)
+                                                  color: "#fff",
+                                                  whiteSpace: "nowrap",
+                                                  overflow: "hidden",
+                                                  textOverflow: "ellipsis"
+                                                },
+                                                children: event.title
+                                              }
+                                            )
+                                          }
+                                        ),
+                                        event.subtitle && !hasOverlap && /* @__PURE__ */ jsx(
+                                          "div",
+                                          {
+                                            style: {
+                                              fontSize: "0.5625rem",
+                                              color: "rgba(255, 255, 255, 0.5)",
+                                              whiteSpace: "nowrap",
+                                              overflow: "hidden",
+                                              textOverflow: "ellipsis",
+                                              marginTop: 1
+                                            },
+                                            children: event.subtitle
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  ),
+                                  hasOverlap && overlap.stackIndex === 0 && /* @__PURE__ */ jsxs(
+                                    "div",
+                                    {
+                                      style: {
+                                        position: "absolute",
+                                        top: -6,
+                                        right: -6,
+                                        minWidth: 18,
+                                        height: 18,
+                                        backgroundColor: tokens.colors.status.caution,
+                                        borderRadius: 9,
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        fontSize: "0.625rem",
+                                        fontWeight: 700,
+                                        color: "#000",
+                                        boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
+                                        zIndex: 10
+                                      },
+                                      title: `${overlap.overlapCount + 1} overlapping events`,
+                                      children: [
+                                        "+",
+                                        overlap.overlapCount
+                                      ]
+                                    }
+                                  )
+                                ]
+                              },
+                              event.id
+                            );
+                          })
+                        ]
+                      }
+                    )
+                  ]
+                },
+                track.id
+              )),
+              playheadPercent !== null && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 28,
+                    bottom: 0,
+                    left: `calc(${trackLabelWidth}px + ${playheadPercent}% * (100% - ${trackLabelWidth}px) / 100)`,
+                    width: 2,
+                    backgroundColor: tokens.colors.accent.primary,
+                    boxShadow: `0 0 12px ${tokens.colors.accent.primary}`,
+                    zIndex: 20,
+                    pointerEvents: "none"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          top: -6,
+                          left: -5,
+                          width: 12,
+                          height: 12,
+                          backgroundColor: tokens.colors.accent.primary,
+                          borderRadius: 2,
+                          transform: "rotate(45deg)",
+                          boxShadow: `0 0 8px ${tokens.colors.accent.primary}`
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          top: -22,
+                          left: "50%",
+                          transform: "translateX(-50%)",
+                          backgroundColor: tokens.colors.accent.primary,
+                          color: tokens.colors.background.base,
+                          fontSize: "0.5625rem",
+                          fontWeight: 500,
+                          // AstroUXDS medium (was 600)
+                          fontFamily: tokens.typography.fontFamily.mono,
+                          padding: "2px 6px",
+                          borderRadius: 3,
+                          whiteSpace: "nowrap",
+                          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
+                        },
+                        children: formatTime(currentPlayheadTime, true)
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    hoveredEventData && tooltipPos && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left: tooltipPos.x,
+          top: tooltipPos.y,
+          transform: "translate(-50%, -100%)",
+          zIndex: 1e3,
+          pointerEvents: "none",
+          animation: "zendir-tooltip-appear 150ms ease"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                backgroundColor: "rgba(15, 23, 42, 0.98)",
+                border: `1px solid ${getStatusColor(hoveredEventData.status)}50`,
+                borderRadius: tokens.borderRadius.md,
+                padding: "12px 16px",
+                minWidth: 220,
+                maxWidth: 320,
+                boxShadow: `0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px ${getStatusColor(hoveredEventData.status)}30`,
+                backdropFilter: "blur(12px)"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
+                  /* @__PURE__ */ jsx(
+                    TimelineStatusMarker,
+                    {
+                      status: hoveredEventData.status,
+                      fillColor: getStatusColor(hoveredEventData.status),
+                      size: 10
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "0.75rem",
+                        fontWeight: 500,
+                        // AstroUXDS medium (was 600)
+                        color: getStatusColor(hoveredEventData.status),
+                        textTransform: "uppercase",
+                        letterSpacing: "0.05em"
+                      },
+                      children: getStatusLabel(hoveredEventData.status)
+                    }
+                  ),
+                  hoveredEventData.badge && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        marginLeft: "auto",
+                        fontSize: "0.625rem",
+                        fontWeight: 500,
+                        // AstroUXDS medium (was 600)
+                        padding: "2px 6px",
+                        borderRadius: tokens.borderRadius.sm,
+                        backgroundColor: `${getStatusColor(hoveredEventData.status)}20`,
+                        color: getStatusColor(hoveredEventData.status)
+                      },
+                      children: hoveredEventData.badge
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "0.875rem",
+                      fontWeight: 500,
+                      // AstroUXDS medium (was 600)
+                      color: "#fff",
+                      marginBottom: 4
+                    },
+                    children: hoveredEventData.title
+                  }
+                ),
+                hoveredEventData.subtitle && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "0.75rem",
+                      color: "rgba(255, 255, 255, 0.6)",
+                      marginBottom: 12
+                    },
+                    children: hoveredEventData.subtitle
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "grid",
+                      gridTemplateColumns: "auto 1fr",
+                      gap: "6px 12px",
+                      fontSize: "0.6875rem",
+                      borderTop: `1px solid ${tokens.colors.border.muted}30`,
+                      paddingTop: 10
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Start:" }),
+                      /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.primary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTime(hoveredEventData.start, true) }),
+                      hoveredEventData.end && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "End:" }),
+                        /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.primary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTime(hoveredEventData.end, true) }),
+                        /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Duration:" }),
+                        /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.accent.secondary, fontWeight: 500 }, children: formatDuration(hoveredEventData.end.getTime() - hoveredEventData.start.getTime()) })
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "UTC:" }),
+                      /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono, fontSize: "0.625rem" }, children: formatUTC(hoveredEventData.start) })
+                    ]
+                  }
+                ),
+                onEventClick && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      marginTop: 10,
+                      paddingTop: 8,
+                      borderTop: `1px solid ${tokens.colors.border.muted}20`,
+                      fontSize: "0.625rem",
+                      color: tokens.colors.text.tertiary,
+                      textAlign: "center"
+                    },
+                    children: "Click for details"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                bottom: -6,
+                left: "50%",
+                transform: "translateX(-50%) rotate(45deg)",
+                width: 12,
+                height: 12,
+                backgroundColor: "rgba(15, 23, 42, 0.98)",
+                borderRight: `1px solid ${getStatusColor(hoveredEventData.status)}50`,
+                borderBottom: `1px solid ${getStatusColor(hoveredEventData.status)}50`
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
+        .zendir-timeline-region:hover {
+          z-index: 100 !important;
+        }
+        .zendir-timeline-region:focus {
+          outline: 2px solid ${tokens.colors.accent.primary};
+          outline-offset: 2px;
+        }
+        .zendir-timeline-scroll::-webkit-scrollbar {
+          height: 8px;
+        }
+        .zendir-timeline-scroll::-webkit-scrollbar-track {
+          background: ${tokens.colors.background.elevated};
+          border-radius: 4px;
+        }
+        .zendir-timeline-scroll::-webkit-scrollbar-thumb {
+          background: ${tokens.colors.accent.primary}40;
+          border-radius: 4px;
+        }
+        .zendir-timeline-scroll::-webkit-scrollbar-thumb:hover {
+          background: ${tokens.colors.accent.primary}60;
+        }
+        @keyframes zendir-tooltip-appear {
+          from {
+            opacity: 0;
+            transform: translate(-50%, -100%) translateY(8px);
+          }
+          to {
+            opacity: 1;
+            transform: translate(-50%, -100%) translateY(0);
+          }
+        }
+      ` })
+  ] });
+});
+const ScatterView = memo(function ScatterView2({
+  events,
+  tracks,
+  start,
+  end,
+  trackHeight,
+  onEventClick,
+  timeFormat = "relative",
+  referenceTime,
+  zoom = 1
+}) {
+  const { tokens } = useTheme();
+  const [hoveredEvent, setHoveredEvent] = useState(null);
+  const [tooltipPosition, setTooltipPosition] = useState(null);
+  const totalDuration = end.getTime() - start.getTime();
+  const trackLabelWidth = 140;
+  const refTime = referenceTime || start;
+  const formatTimeLabel = useCallback((date) => {
+    if (timeFormat === "relative") {
+      const diff = date.getTime() - refTime.getTime();
+      const totalSeconds = Math.floor(Math.abs(diff) / 1e3);
+      const hours = Math.floor(totalSeconds / 3600);
+      const minutes = Math.floor(totalSeconds % 3600 / 60);
+      const seconds = totalSeconds % 60;
+      if (hours > 0) {
+        return `${hours}h ${minutes}m`;
+      }
+      return `${minutes}m ${seconds}s`;
+    } else if (timeFormat === "utc") {
+      return date.toISOString().slice(11, 19) + " UTC";
+    }
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  }, [timeFormat, refTime]);
+  const timeLabels = useMemo(() => {
+    const labels = [];
+    const baseLabelCount = 8;
+    const labelCount = Math.round(baseLabelCount * zoom);
+    for (let i = 0; i <= labelCount; i++) {
+      const percent = i / labelCount * 100;
+      const time = new Date(start.getTime() + totalDuration * percent / 100);
+      labels.push({ time, percent });
+    }
+    return labels;
+  }, [start, totalDuration, zoom]);
+  const eventsByTrack = useMemo(() => {
+    const grouped = {};
+    tracks.forEach((track) => {
+      grouped[track.id] = events.filter((e) => e.track === track.id);
+    });
+    const unassigned = events.filter((e) => !e.track);
+    if (unassigned.length > 0 && tracks.length > 0) {
+      grouped[tracks[0].id] = [...grouped[tracks[0].id] || [], ...unassigned];
+    }
+    return grouped;
+  }, [events, tracks]);
+  const getEventPosition = (event) => {
+    const eventTime = event.start.getTime();
+    return (eventTime - start.getTime()) / totalDuration * 100;
+  };
+  const getStatusColor = (status) => {
+    if (!status) return tokens.colors.accent.primary;
+    return tokens.colors.status[status] || tokens.colors.accent.primary;
+  };
+  const hoveredEventData = events.find((e) => e.id === hoveredEvent);
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          width: `${zoom * 100}%`,
+          minWidth: "100%",
+          position: "relative"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "relative",
+                height: 32,
+                marginLeft: trackLabelWidth,
+                borderBottom: `1px solid ${tokens.colors.accent.primary}15`
+              },
+              children: timeLabels.map((label, index) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    left: `${label.percent}%`,
+                    transform: "translateX(-50%)",
+                    top: 8,
+                    fontSize: "0.6875rem",
+                    color: tokens.colors.text.tertiary,
+                    fontFamily: tokens.typography.fontFamily.mono,
+                    whiteSpace: "nowrap",
+                    fontWeight: 500
+                  },
+                  children: formatTimeLabel(label.time)
+                },
+                index
+              ))
+            }
+          ),
+          tracks.map((track, trackIndex) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "relative",
+                display: "flex",
+                alignItems: "center",
+                height: track.height || trackHeight,
+                borderBottom: trackIndex < tracks.length - 1 ? `1px solid ${tokens.colors.border.muted}20` : "none"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      width: trackLabelWidth,
+                      flexShrink: 0,
+                      padding: "0 16px",
+                      fontSize: "0.8125rem",
+                      fontWeight: 500,
+                      // AstroUXDS medium (was 600)
+                      color: tokens.colors.text.primary
+                    },
+                    children: track.label
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      position: "relative",
+                      height: "100%",
+                      display: "flex",
+                      alignItems: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            position: "absolute",
+                            left: 0,
+                            right: 0,
+                            height: 1,
+                            backgroundColor: tokens.colors.border.muted,
+                            opacity: 0.3
+                          }
+                        }
+                      ),
+                      (eventsByTrack[track.id] || []).map((event) => {
+                        const leftPercent = getEventPosition(event);
+                        const color = getStatusColor(event.status);
+                        const isHovered = hoveredEvent === event.id;
+                        const dotSize = isHovered ? 16 : 12;
+                        const effectiveStatus = event.status ?? "normal";
+                        return /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => onEventClick == null ? void 0 : onEventClick(event),
+                            onMouseEnter: (e) => {
+                              setHoveredEvent(event.id);
+                              const rect = e.currentTarget.getBoundingClientRect();
+                              setTooltipPosition({ x: rect.left + rect.width / 2, y: rect.top });
+                            },
+                            onMouseLeave: () => {
+                              setHoveredEvent(null);
+                              setTooltipPosition(null);
+                            },
+                            style: {
+                              position: "absolute",
+                              left: `${leftPercent}%`,
+                              transform: "translateX(-50%)",
+                              width: dotSize,
+                              height: dotSize,
+                              padding: 0,
+                              background: "none",
+                              border: "none",
+                              cursor: "pointer",
+                              transition: "all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+                              zIndex: isHovered ? 20 : 1,
+                              lineHeight: 0
+                            },
+                            "aria-label": event.title,
+                            children: /* @__PURE__ */ jsx(TimelineStatusMarker, { status: effectiveStatus, fillColor: color, size: dotSize })
+                          },
+                          event.id
+                        );
+                      })
+                    ]
+                  }
+                )
+              ]
+            },
+            track.id
+          ))
+        ]
+      }
+    ),
+    hoveredEventData && tooltipPosition && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "zendir-scatter-tooltip",
+        style: {
+          position: "fixed",
+          left: tooltipPosition.x,
+          top: tooltipPosition.y - 12,
+          transform: "translate(-50%, -100%)",
+          backgroundColor: "rgba(11, 26, 40, 0.98)",
+          border: `1px solid ${tokens.colors.accent.primary}40`,
+          borderRadius: tokens.borderRadius.lg,
+          padding: "12px 16px",
+          minWidth: 200,
+          maxWidth: 320,
+          zIndex: 1e3,
+          boxShadow: `0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px ${tokens.colors.accent.primary}20`,
+          backdropFilter: "blur(12px)",
+          animation: "zendir-tooltip-in 150ms cubic-bezier(0.34, 1.56, 0.64, 1)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                bottom: -6,
+                left: "50%",
+                transform: "translateX(-50%) rotate(45deg)",
+                width: 12,
+                height: 12,
+                backgroundColor: "rgba(11, 26, 40, 0.98)",
+                borderRight: `1px solid ${tokens.colors.accent.primary}40`,
+                borderBottom: `1px solid ${tokens.colors.accent.primary}40`
+              }
+            }
+          ),
+          hoveredEventData.status && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
+            /* @__PURE__ */ jsx(
+              TimelineStatusMarker,
+              {
+                status: hoveredEventData.status,
+                fillColor: getStatusColor(hoveredEventData.status),
+                size: 10
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontSize: "0.75rem",
+                  fontWeight: 500,
+                  color: getStatusColor(hoveredEventData.status),
+                  textTransform: "uppercase",
+                  letterSpacing: "0.05em"
+                },
+                children: hoveredEventData.status
+              }
+            ),
+            hoveredEventData.badge && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  marginLeft: "auto",
+                  fontSize: "0.625rem",
+                  fontWeight: 500,
+                  padding: "2px 6px",
+                  borderRadius: tokens.borderRadius.sm,
+                  backgroundColor: `${getStatusColor(hoveredEventData.status)}20`,
+                  color: getStatusColor(hoveredEventData.status)
+                },
+                children: hoveredEventData.badge
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: "0.875rem",
+                fontWeight: 500,
+                color: "#fff",
+                marginBottom: 8
+              },
+              children: hoveredEventData.title
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  fontSize: "0.75rem"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Time:" }),
+                  /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTimeLabel(hoveredEventData.start) })
+                ]
+              }
+            ),
+            hoveredEventData.badge && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  fontSize: "0.75rem"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Trigger:" }),
+                  /* @__PURE__ */ jsx("span", { style: { color: safeAccentText(tokens.colors.accent.primary), fontWeight: 500 }, children: hoveredEventData.badge })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  fontSize: "0.75rem"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "UTC:" }),
+                  /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono }, children: hoveredEventData.start.toISOString().replace("T", " ").slice(0, 19) })
+                ]
+              }
+            ),
+            hoveredEventData.subtitle && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  marginTop: 4,
+                  paddingTop: 8,
+                  borderTop: `1px solid ${tokens.colors.border.muted}`,
+                  fontSize: "0.75rem",
+                  color: tokens.colors.text.secondary
+                },
+                children: hoveredEventData.subtitle
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes zendir-tooltip-in {
+          from {
+            opacity: 0;
+            transform: translate(-50%, -100%) scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: translate(-50%, -100%) scale(1);
+          }
+        }
+        .zendir-scatter-tooltip::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          border-radius: inherit;
+          background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
+          pointer-events: none;
+        }
+      ` })
+  ] });
+});
+const UnifiedTimeline = memo(function UnifiedTimeline2({
+  title = "Timeline",
+  events,
+  tracks = [],
+  start: propStart,
+  end: propEnd,
+  defaultView = "chart",
+  viewMode: controlledViewMode,
+  onViewModeChange,
+  onEventClick,
+  showViewToggle = true,
+  maxHeight,
+  trackHeight = 56,
+  className = "",
+  timeFormat = "absolute",
+  zoomable = false,
+  initialZoom = 1,
+  showFilters: _showFilters = false,
+  filter: _filter,
+  onFilterChange: _onFilterChange,
+  showCount: _showCount = true,
+  loading = false,
+  referenceTime,
+  showPlayhead = true,
+  playheadTime,
+  onPlayheadChange: _onPlayheadChangeTimeline,
+  showDayMarkers = true
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const [internalViewMode, setInternalViewMode] = useState(defaultView);
+  const [zoom, setZoom] = useState(initialZoom);
+  const [_internalFilter, _setInternalFilter] = useState({});
+  const viewMode = controlledViewMode ?? internalViewMode;
+  const handleViewModeChange = useCallback((mode) => {
+    setInternalViewMode(mode);
+    onViewModeChange == null ? void 0 : onViewModeChange(mode);
+  }, [onViewModeChange]);
+  const { start, end } = useMemo(() => {
+    if (propStart && propEnd) {
+      return { start: propStart, end: propEnd };
+    }
+    if (events.length === 0) {
+      const now = /* @__PURE__ */ new Date();
+      return {
+        start: new Date(now.getTime() - 36e5),
+        end: new Date(now.getTime() + 36e5)
+      };
+    }
+    let minTime = events[0].start.getTime();
+    let maxTime = events[0].start.getTime();
+    events.forEach((event) => {
+      minTime = Math.min(minTime, event.start.getTime());
+      maxTime = Math.max(maxTime, (event.end || event.start).getTime());
+    });
+    const duration = maxTime - minTime;
+    const padding = duration * 0.1;
+    return {
+      start: new Date(minTime - padding),
+      end: new Date(maxTime + padding)
+    };
+  }, [events, propStart, propEnd]);
+  const effectiveTracks = useMemo(() => {
+    if (tracks.length > 0) return tracks;
+    const trackSet = /* @__PURE__ */ new Set();
+    events.forEach((event) => {
+      if (event.track) trackSet.add(event.track);
+    });
+    if (trackSet.size === 0) {
+      return [{ id: "default", label: "Events", height: trackHeight }];
+    }
+    return Array.from(trackSet).map((id) => ({
+      id,
+      label: id,
+      height: trackHeight
+    }));
+  }, [events, tracks, trackHeight]);
+  const sortedEvents = useMemo(() => {
+    return [...events].sort((a, b) => b.start.getTime() - a.start.getTime());
+  }, [events]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-unified-timeline", className),
+      style: {
+        backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+        ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
+        ...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
+        borderRadius: tokens.borderRadius.lg,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "16px 20px",
+              borderBottom: `1px solid ${tokens.colors.border.muted}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "h3",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: "1rem",
+                    fontWeight: 500,
+                    // AstroUXDS medium (was 600)
+                    color: tokens.colors.text.primary
+                  },
+                  children: [
+                    title,
+                    " (",
+                    events.length,
+                    ")"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+                zoomable && (viewMode === "chart" || viewMode === "scatter") && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 4,
+                      paddingRight: 12,
+                      borderRight: `1px solid ${tokens.colors.border.muted}`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Tooltip, { content: "Zoom out", children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Zoom out",
+                          onClick: () => setZoom(Math.max(zoom - 0.5, 1)),
+                          disabled: zoom <= 1,
+                          style: {
+                            width: 28,
+                            height: 28,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            backgroundColor: zoom <= 1 ? "transparent" : tokens.colors.background.elevated,
+                            border: `1px solid ${tokens.colors.border.muted}`,
+                            borderRadius: tokens.borderRadius.sm,
+                            color: zoom <= 1 ? tokens.colors.text.tertiary : tokens.colors.text.primary,
+                            cursor: zoom <= 1 ? "not-allowed" : "pointer",
+                            fontSize: "1rem",
+                            fontWeight: 500,
+                            // AstroUXDS medium (was 600)
+                            opacity: zoom <= 1 ? 0.5 : 1
+                          },
+                          children: "−"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          style: {
+                            minWidth: 40,
+                            textAlign: "center",
+                            fontSize: "0.75rem",
+                            fontFamily: tokens.typography.fontFamily.mono,
+                            color: tokens.colors.text.secondary
+                          },
+                          children: [
+                            Math.round(zoom * 100),
+                            "%"
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Tooltip, { content: "Zoom in", children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Zoom in",
+                          onClick: () => setZoom(Math.min(zoom + 0.5, 4)),
+                          disabled: zoom >= 4,
+                          style: {
+                            width: 28,
+                            height: 28,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            backgroundColor: zoom >= 4 ? "transparent" : tokens.colors.background.elevated,
+                            border: `1px solid ${tokens.colors.border.muted}`,
+                            borderRadius: tokens.borderRadius.sm,
+                            color: zoom >= 4 ? tokens.colors.text.tertiary : tokens.colors.text.primary,
+                            cursor: zoom >= 4 ? "not-allowed" : "pointer",
+                            fontSize: "1rem",
+                            fontWeight: 500,
+                            // AstroUXDS medium (was 600)
+                            opacity: zoom >= 4 ? 0.5 : 1
+                          },
+                          children: "+"
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(Tooltip, { content: "Reset zoom", children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Reset zoom",
+                          onClick: () => setZoom(1),
+                          style: {
+                            height: 28,
+                            padding: "0 10px",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            backgroundColor: tokens.colors.background.elevated,
+                            border: `1px solid ${tokens.colors.border.muted}`,
+                            borderRadius: tokens.borderRadius.sm,
+                            color: tokens.colors.text.secondary,
+                            cursor: "pointer",
+                            fontSize: "0.6875rem",
+                            fontWeight: 500
+                          },
+                          children: "FIT"
+                        }
+                      ) })
+                    ]
+                  }
+                ),
+                showViewToggle && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      gap: "2px",
+                      backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.elevated,
+                      ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
+                      padding: "4px",
+                      borderRadius: tokens.borderRadius.lg
+                    },
+                    children: ["chart", "list", "scatter"].map((mode) => {
+                      const isActive = viewMode === mode;
+                      const icons = {
+                        chart: "chart",
+                        list: "list",
+                        scatter: "timeline"
+                      };
+                      const labels = {
+                        chart: "Gantt Chart",
+                        list: "List View",
+                        scatter: "Scatter View"
+                      };
+                      return /* @__PURE__ */ jsx(Tooltip, { content: labels[mode], children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": labels[mode],
+                          onClick: () => handleViewModeChange(mode),
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "32px",
+                            height: "32px",
+                            backgroundColor: isActive ? tokens.colors.accent.primary : "transparent",
+                            border: "none",
+                            borderRadius: tokens.borderRadius.md,
+                            color: isActive ? "#ffffff" : tokens.colors.text.secondary,
+                            cursor: "pointer",
+                            transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+                            transform: isActive ? "scale(1)" : "scale(0.95)",
+                            boxShadow: isActive ? `0 2px 8px ${tokens.colors.accent.primary}40` : "none"
+                          },
+                          onMouseEnter: (e) => {
+                            if (!isActive) {
+                              e.currentTarget.style.backgroundColor = `${tokens.colors.accent.primary}20`;
+                              e.currentTarget.style.transform = "scale(1)";
+                            }
+                          },
+                          onMouseLeave: (e) => {
+                            if (!isActive) {
+                              e.currentTarget.style.backgroundColor = "transparent";
+                              e.currentTarget.style.transform = "scale(0.95)";
+                            }
+                          },
+                          children: /* @__PURE__ */ jsx(Icon, { name: icons[mode], size: 16 })
+                        }
+                      ) }, mode);
+                    })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        loading && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: `${tokens.colors.background.overlay}80`,
+              backdropFilter: "blur(4px)",
+              zIndex: 100
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: 40,
+                  height: 40,
+                  border: `3px solid ${tokens.colors.border.muted}`,
+                  borderTopColor: tokens.colors.accent.primary,
+                  borderRadius: "50%",
+                  animation: "zendir-spin 1s linear infinite"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: viewMode === "list" ? "16px 20px" : "16px",
+              maxHeight,
+              overflowY: maxHeight ? "auto" : void 0,
+              overflowX: viewMode !== "list" ? "auto" : void 0
+            },
+            children: events.length === 0 ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "48px 0",
+                  color: tokens.colors.text.tertiary,
+                  gap: "12px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "clock", size: 32 }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem" }, children: "No events to display" })
+                ]
+              }
+            ) : viewMode === "list" ? (
+              // List View
+              sortedEvents.map((event, index) => /* @__PURE__ */ jsx(
+                EventListItem,
+                {
+                  event,
+                  isLast: index === sortedEvents.length - 1,
+                  onEventClick
+                },
+                event.id
+              ))
+            ) : viewMode === "scatter" ? (
+              // Scatter View (Dots on timeline) - uses same zoom as chart
+              /* @__PURE__ */ jsx(
+                ScatterView,
+                {
+                  events,
+                  tracks: effectiveTracks,
+                  start,
+                  end,
+                  trackHeight,
+                  onEventClick,
+                  timeFormat,
+                  referenceTime: referenceTime || start,
+                  zoom
+                }
+              )
+            ) : (
+              // Chart View (Gantt)
+              /* @__PURE__ */ jsx(
+                ChartView,
+                {
+                  events,
+                  tracks: effectiveTracks,
+                  start,
+                  end,
+                  trackHeight,
+                  onEventClick,
+                  zoom,
+                  showPlayhead,
+                  playheadTime,
+                  onPlayheadChange: _onPlayheadChangeTimeline,
+                  showDayMarkers
+                }
+              )
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes zendir-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` })
+      ]
+    }
+  );
+});
+export {
+  UnifiedTimeline
+};
+//# sourceMappingURL=UnifiedTimeline.js.map