@zendir/ui 0.1.13 → 0.1.15

package/dist/react/astro/UnifiedTimeline.js

@@ -4,7 +4,84 @@ 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 { Checkbox } from "../core/Checkbox.js";
 import { useTheme } from "../theme/ThemeProvider.js";
+const ALL_TIMELINE_STATUSES = [
+  "off",
+  "standby",
+  "normal",
+  "caution",
+  "serious",
+  "critical"
+];
+function getTimelineEventDisplayStatus(event) {
+  if (event.badgeVariant && event.badgeVariant !== "default" && event.badgeVariant !== "primary") {
+    return event.badgeVariant;
+  }
+  return event.status ?? "normal";
+}
+function isTimelineFilterActive(filter) {
+  return Boolean(
+    filter.search && filter.search.trim() || filter.tracks && filter.tracks.length > 0 || filter.status && filter.status.length > 0 || filter.eventShape && filter.eventShape !== "all" || filter.teamColoredOnly
+  );
+}
+function normalizeTimelineFilter(f) {
+  var _a, _b, _c;
+  const o = {};
+  const s = (_a = f.search) == null ? void 0 : _a.trim();
+  if (s) o.search = s;
+  if ((_b = f.tracks) == null ? void 0 : _b.length) o.tracks = [...f.tracks];
+  if ((_c = f.status) == null ? void 0 : _c.length) o.status = [...f.status];
+  if (f.eventShape && f.eventShape !== "all") o.eventShape = f.eventShape;
+  if (f.teamColoredOnly) o.teamColoredOnly = true;
+  return o;
+}
+function matchesTimelineFilter(event, filter) {
+  var _a, _b, _c, _d, _e;
+  if (!isTimelineFilterActive(filter)) return true;
+  if ((_a = filter.tracks) == null ? void 0 : _a.length) {
+    const tid = event.track ?? "default";
+    if (!filter.tracks.includes(tid)) return false;
+  }
+  if ((_b = filter.status) == null ? void 0 : _b.length) {
+    const ds = getTimelineEventDisplayStatus(event);
+    if (!filter.status.includes(ds)) return false;
+  }
+  const q = (_c = filter.search) == null ? void 0 : _c.trim().toLowerCase();
+  if (q) {
+    const argStr = event.arguments ? Object.values(event.arguments).map((v) => String(v)).join(" ") : "";
+    const hay = [
+      event.title,
+      event.subtitle,
+      event.badge,
+      event.track,
+      argStr
+    ].filter(Boolean).join(" ").toLowerCase();
+    if (!hay.includes(q)) return false;
+  }
+  if (filter.eventShape === "point") {
+    const endT = (_d = event.end) == null ? void 0 : _d.getTime();
+    const st = event.start.getTime();
+    if (endT != null && endT > st) return false;
+  }
+  if (filter.eventShape === "range") {
+    const endT = (_e = event.end) == null ? void 0 : _e.getTime();
+    const st = event.start.getTime();
+    if (endT == null || endT <= st) return false;
+  }
+  if (filter.teamColoredOnly && !event.color) return false;
+  return true;
+}
+function countTimelineFilterChips(filter) {
+  var _a, _b, _c;
+  let n = 0;
+  if ((_a = filter.search) == null ? void 0 : _a.trim()) n++;
+  if ((_b = filter.tracks) == null ? void 0 : _b.length) n++;
+  if ((_c = filter.status) == null ? void 0 : _c.length) n++;
+  if (filter.eventShape && filter.eventShape !== "all") n++;
+  if (filter.teamColoredOnly) n++;
+  return n;
+}
 function TimelineStatusMarker({
   status,
   fillColor,
@@ -78,17 +155,32 @@ const EventListItem = memo(function EventListItem2({
         onMouseLeave: () => setHovered(false),
         onClick: () => onEventClick == null ? void 0 : onEventClick(event),
         style: {
+          position: "relative",
           flex: 1,
           marginBottom: "16px",
-          padding: "16px 20px",
+          padding: event.color ? "19px 20px 16px 20px" : "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)",
+          overflow: "hidden",
           boxShadow: hovered ? `0 4px 20px ${tokens.colors.accent.primary}15, 0 0 0 1px ${tokens.colors.accent.primary}20` : "none"
         },
         children: [
+          event.color && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                height: 3,
+                backgroundColor: event.color
+              }
+            }
+          ),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -592,11 +684,12 @@ const ChartView = memo(function ChartView2({
                           )),
                           (eventsByTrack[track.id] || []).map((event) => {
                             const { left, width } = getEventPosition(event);
-                            const color = getStatusColor(event.status);
+                            const displayStatus = event.badgeVariant && event.badgeVariant !== "default" && event.badgeVariant !== "primary" ? event.badgeVariant : event.status ?? "normal";
+                            const color = getStatusColor(displayStatus);
                             const isHovered = hoveredEvent === event.id;
                             const overlap = eventOverlaps[event.id];
                             const hasOverlap = overlap && overlap.overlapCount > 0;
-                            const cardHeight = hasOverlap ? 28 : 36;
+                            const cardHeight = hasOverlap ? 30 : 38;
                             const stackOffset = overlap ? overlap.stackIndex * 30 : 0;
                             const baseTop = ((track.height || trackHeight) - cardHeight) / 2;
                             return /* @__PURE__ */ jsxs(
@@ -634,51 +727,71 @@ const ChartView = memo(function ChartView2({
                                   transform: isHovered ? "translateY(-3px) scale(1.02)" : "none"
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsx(
+                                  event.color ? /* @__PURE__ */ jsx(
                                     "div",
                                     {
                                       style: {
-                                        width: 4,
-                                        height: "100%",
-                                        backgroundColor: color,
-                                        flexShrink: 0,
-                                        borderRadius: "2px 0 0 2px"
-                                      }
+                                        position: "absolute",
+                                        top: 0,
+                                        left: 0,
+                                        right: 0,
+                                        height: 2,
+                                        backgroundColor: event.color,
+                                        borderRadius: "4px 4px 0 0",
+                                        zIndex: 1,
+                                        pointerEvents: "none"
+                                      },
+                                      "aria-hidden": true
                                     }
-                                  ),
+                                  ) : null,
                                   /* @__PURE__ */ jsxs(
                                     "div",
                                     {
                                       style: {
                                         flex: 1,
-                                        padding: "4px 8px",
+                                        padding: `${event.color ? 6 : 4}px 8px 4px 8px`,
                                         overflow: "hidden",
-                                        minWidth: 0
+                                        minWidth: 0,
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        justifyContent: "center"
                                       },
                                       children: [
-                                        /* @__PURE__ */ jsx(
+                                        /* @__PURE__ */ jsxs(
                                           "div",
                                           {
                                             style: {
                                               display: "flex",
                                               alignItems: "center",
-                                              gap: 4
+                                              gap: 6,
+                                              minWidth: 0
                                             },
-                                            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
-                                              }
-                                            )
+                                            children: [
+                                              /* @__PURE__ */ jsx(
+                                                TimelineStatusMarker,
+                                                {
+                                                  status: displayStatus,
+                                                  fillColor: color,
+                                                  size: hasOverlap ? 8 : 10
+                                                }
+                                              ),
+                                              /* @__PURE__ */ jsx(
+                                                "span",
+                                                {
+                                                  style: {
+                                                    fontSize: "0.6875rem",
+                                                    fontWeight: 500,
+                                                    // AstroUXDS medium (was 600)
+                                                    color: "#fff",
+                                                    whiteSpace: "nowrap",
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis",
+                                                    minWidth: 0
+                                                  },
+                                                  children: event.title
+                                                }
+                                              )
+                                            ]
                                           }
                                         ),
                                         event.subtitle && !hasOverlap && /* @__PURE__ */ jsx(
@@ -690,7 +803,8 @@ const ChartView = memo(function ChartView2({
                                               whiteSpace: "nowrap",
                                               overflow: "hidden",
                                               textOverflow: "ellipsis",
-                                              marginTop: 1
+                                              marginTop: 1,
+                                              paddingLeft: 16
                                             },
                                             children: event.subtitle
                                           }
@@ -798,158 +912,166 @@ const ChartView = memo(function ChartView2({
         )
       }
     ),
-    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: [
+    hoveredEventData && tooltipPos && (() => {
+      var _a;
+      const tooltipColor = getStatusColor(hoveredEventData.status);
+      return /* @__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 ${tooltipColor}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 ${tooltipColor}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: tooltipColor,
+                        size: 10
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "0.75rem",
+                          fontWeight: 500,
+                          // AstroUXDS medium (was 600)
+                          color: tooltipColor,
+                          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: `${tooltipColor}20`,
+                          color: tooltipColor
+                        },
+                        children: hoveredEventData.badge
+                      }
+                    )
+                  ] }),
+                  hoveredEventData.color && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: hoveredEventData.color, flexShrink: 0 } }),
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6875rem", color: hoveredEventData.color, fontWeight: 500 }, children: ((_a = hoveredEventData.arguments) == null ? void 0 : _a.Team) || hoveredEventData.badge || "Team" })
+                  ] }),
                   /* @__PURE__ */ jsx(
-                    TimelineStatusMarker,
+                    "div",
                     {
-                      status: hoveredEventData.status,
-                      fillColor: getStatusColor(hoveredEventData.status),
-                      size: 10
+                      style: {
+                        fontSize: "0.875rem",
+                        fontWeight: 500,
+                        // AstroUXDS medium (was 600)
+                        color: "#fff",
+                        marginBottom: 4
+                      },
+                      children: hoveredEventData.title
                     }
                   ),
-                  /* @__PURE__ */ jsx(
-                    "span",
+                  hoveredEventData.subtitle && /* @__PURE__ */ jsx(
+                    "div",
                     {
                       style: {
                         fontSize: "0.75rem",
-                        fontWeight: 500,
-                        // AstroUXDS medium (was 600)
-                        color: getStatusColor(hoveredEventData.status),
-                        textTransform: "uppercase",
-                        letterSpacing: "0.05em"
+                        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: getStatusLabel(hoveredEventData.status)
+                      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) })
+                      ]
                     }
                   ),
-                  hoveredEventData.badge && /* @__PURE__ */ jsx(
-                    "span",
+                  onEventClick && /* @__PURE__ */ jsx(
+                    "div",
                     {
                       style: {
-                        marginLeft: "auto",
+                        marginTop: 10,
+                        paddingTop: 8,
+                        borderTop: `1px solid ${tokens.colors.border.muted}20`,
                         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)
+                        color: tokens.colors.text.tertiary,
+                        textAlign: "center"
                       },
-                      children: hoveredEventData.badge
+                      children: "Click for details"
                     }
                   )
-                ] }),
-                /* @__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(
+              "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 ${tooltipColor}50`,
+                  borderBottom: `1px solid ${tooltipColor}50`
+                }
+              }
+            )
+          ]
+        }
+      );
+    })(),
     /* @__PURE__ */ jsx("style", { children: `
         .zendir-timeline-region:hover {
           z-index: 100 !important;
@@ -1170,7 +1292,9 @@ const ScatterView = memo(function ScatterView2({
                               cursor: "pointer",
                               transition: "all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)",
                               zIndex: isHovered ? 20 : 1,
-                              lineHeight: 0
+                              lineHeight: 0,
+                              borderRadius: "50%",
+                              boxShadow: event.color ? `0 0 0 2px ${event.color}` : void 0
                             },
                             "aria-label": event.title,
                             children: /* @__PURE__ */ jsx(TimelineStatusMarker, { status: effectiveStatus, fillColor: color, size: dotSize })
@@ -1188,153 +1312,161 @@ const ScatterView = memo(function ScatterView2({
         ]
       }
     ),
-    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: [
+    hoveredEventData && tooltipPosition && (() => {
+      var _a;
+      const scatterTipColor = getStatusColor(hoveredEventData.status);
+      return /* @__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 ${scatterTipColor}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 ${scatterTipColor}20`,
+            backdropFilter: "blur(12px)",
+            animation: "zendir-tooltip-in 150ms cubic-bezier(0.34, 1.56, 0.64, 1)"
+          },
+          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 })
-                ]
+                  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 ${scatterTipColor}40`,
+                  borderBottom: `1px solid ${scatterTipColor}40`
+                }
               }
             ),
-            /* @__PURE__ */ jsxs(
+            hoveredEventData.status && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
+              /* @__PURE__ */ jsx(
+                TimelineStatusMarker,
+                {
+                  status: hoveredEventData.status,
+                  fillColor: scatterTipColor,
+                  size: 10
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "0.75rem",
+                    fontWeight: 500,
+                    color: scatterTipColor,
+                    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: `${scatterTipColor}20`,
+                    color: scatterTipColor
+                  },
+                  children: hoveredEventData.badge
+                }
+              )
+            ] }),
+            hoveredEventData.color && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [
+              /* @__PURE__ */ jsx("div", { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: hoveredEventData.color, flexShrink: 0 } }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6875rem", color: hoveredEventData.color, fontWeight: 500 }, children: ((_a = hoveredEventData.arguments) == null ? void 0 : _a.Team) || hoveredEventData.badge || "Team" })
+            ] }),
+            /* @__PURE__ */ jsx(
               "div",
               {
                 style: {
-                  display: "flex",
-                  justifyContent: "space-between",
-                  fontSize: "0.75rem"
+                  fontSize: "0.875rem",
+                  fontWeight: 500,
+                  color: "#fff",
+                  marginBottom: 8
                 },
-                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) })
-                ]
+                children: hoveredEventData.title
               }
             ),
-            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__ */ 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 {
@@ -1357,6 +1489,273 @@ const ScatterView = memo(function ScatterView2({
       ` })
   ] });
 });
+const TimelineFiltersToolbar = memo(function TimelineFiltersToolbar2({
+  filter,
+  onFilterChange,
+  trackOptions,
+  defaultExpanded
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const chipCount = countTimelineFilterChips(filter);
+  const patch = useCallback(
+    (partial) => {
+      onFilterChange(normalizeTimelineFilter({ ...filter, ...partial }));
+    },
+    [filter, onFilterChange]
+  );
+  const clearAll = useCallback(() => {
+    onFilterChange({});
+  }, [onFilterChange]);
+  const toggleTrack = useCallback(
+    (id) => {
+      const cur = filter.tracks ?? [];
+      const next = cur.includes(id) ? cur.filter((t) => t !== id) : [...cur, id];
+      patch({ tracks: next.length ? next : void 0 });
+    },
+    [filter.tracks, patch]
+  );
+  const toggleStatus = useCallback(
+    (st) => {
+      const cur = filter.status ?? [];
+      const next = cur.includes(st) ? cur.filter((s) => s !== st) : [...cur, st];
+      patch({ status: next.length ? next : void 0 });
+    },
+    [filter.status, patch]
+  );
+  const pillBase = (active) => ({
+    padding: "4px 10px",
+    borderRadius: tokens.borderRadius.full ?? 999,
+    fontSize: "0.6875rem",
+    fontWeight: 500,
+    border: `1px solid ${active ? tokens.colors.accent.primary : tokens.colors.border.muted}`,
+    backgroundColor: active ? `${tokens.colors.accent.primary}22` : tokens.colors.background.elevated,
+    color: active ? tokens.colors.accent.primary : tokens.colors.text.secondary,
+    cursor: "pointer",
+    transition: "background-color 150ms ease, border-color 150ms ease, color 150ms ease"
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: "12px 20px",
+        borderBottom: `1px solid ${tokens.colors.border.muted}`,
+        backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.elevated,
+        ...isTransparentTheme && { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              gap: 10
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 220px", minWidth: 0, position: "relative" }, children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: "search",
+                    size: 16,
+                    style: {
+                      position: "absolute",
+                      left: 12,
+                      top: "50%",
+                      transform: "translateY(-50%)",
+                      color: tokens.colors.text.tertiary,
+                      pointerEvents: "none"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "search",
+                    value: filter.search ?? "",
+                    onChange: (e) => patch({ search: e.target.value || void 0 }),
+                    placeholder: "Search title, badge, track, fields…",
+                    "aria-label": "Search timeline events",
+                    style: {
+                      width: "100%",
+                      boxSizing: "border-box",
+                      height: 36,
+                      paddingLeft: 40,
+                      paddingRight: 12,
+                      borderRadius: tokens.borderRadius.md,
+                      border: `1px solid ${tokens.colors.border.muted}`,
+                      backgroundColor: tokens.colors.background.surface,
+                      color: tokens.colors.text.primary,
+                      fontSize: "0.8125rem",
+                      outline: "none"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setExpanded((v) => !v),
+                  "aria-expanded": expanded,
+                  "aria-controls": "zendir-timeline-filters-panel",
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 6,
+                    height: 36,
+                    padding: "0 14px",
+                    borderRadius: tokens.borderRadius.md,
+                    border: `1px solid ${tokens.colors.border.muted}`,
+                    backgroundColor: tokens.colors.background.surface,
+                    color: tokens.colors.text.primary,
+                    cursor: "pointer",
+                    fontSize: "0.8125rem",
+                    fontWeight: 500
+                  },
+                  children: [
+                    "Filters",
+                    chipCount > 0 ? /* @__PURE__ */ jsx(Badge, { variant: "filled", size: "small", status: "normal", children: chipCount }) : null,
+                    /* @__PURE__ */ jsx(Icon, { name: expanded ? "chevron-up" : "chevron-down", size: 18 })
+                  ]
+                }
+              ),
+              isTimelineFilterActive(filter) ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: clearAll,
+                  style: {
+                    height: 36,
+                    padding: "0 12px",
+                    borderRadius: tokens.borderRadius.md,
+                    border: `1px solid ${tokens.colors.border.muted}`,
+                    backgroundColor: "transparent",
+                    color: tokens.colors.text.secondary,
+                    cursor: "pointer",
+                    fontSize: "0.75rem",
+                    fontWeight: 500
+                  },
+                  children: "Clear all"
+                }
+              ) : null
+            ]
+          }
+        ),
+        expanded ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: "zendir-timeline-filters-panel",
+            style: {
+              marginTop: 14,
+              display: "flex",
+              flexDirection: "column",
+              gap: 14
+            },
+            children: [
+              trackOptions.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "0.625rem",
+                      fontWeight: 600,
+                      letterSpacing: "0.06em",
+                      textTransform: "uppercase",
+                      color: tokens.colors.text.tertiary,
+                      marginBottom: 8
+                    },
+                    children: "Tracks"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: trackOptions.map((t) => {
+                  var _a;
+                  const active = ((_a = filter.tracks) == null ? void 0 : _a.includes(t.id)) ?? false;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => toggleTrack(t.id),
+                      style: pillBase(active),
+                      children: t.label
+                    },
+                    t.id
+                  );
+                }) })
+              ] }) : null,
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "0.625rem",
+                      fontWeight: 600,
+                      letterSpacing: "0.06em",
+                      textTransform: "uppercase",
+                      color: tokens.colors.text.tertiary,
+                      marginBottom: 8
+                    },
+                    children: "Status"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: ALL_TIMELINE_STATUSES.map((st) => {
+                  var _a;
+                  const active = ((_a = filter.status) == null ? void 0 : _a.includes(st)) ?? false;
+                  return /* @__PURE__ */ jsx("button", { type: "button", onClick: () => toggleStatus(st), style: pillBase(active), children: st }, st);
+                }) })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    alignItems: "center",
+                    gap: 16
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "0.625rem",
+                            fontWeight: 600,
+                            letterSpacing: "0.06em",
+                            textTransform: "uppercase",
+                            color: tokens.colors.text.tertiary,
+                            marginBottom: 8
+                          },
+                          children: "Duration"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: ["all", "point", "range"].map((key) => {
+                        const active = (filter.eventShape ?? "all") === key;
+                        return /* @__PURE__ */ jsx("button", { type: "button", onClick: () => patch({ eventShape: key }), style: pillBase(active), children: key === "all" ? "All" : key === "point" ? "Instant" : "Range" }, key);
+                      }) })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        label: "Team color only",
+                        checked: Boolean(filter.teamColoredOnly),
+                        onChange: (checked) => patch({ teamColoredOnly: checked || void 0 }),
+                        size: "small"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+});
 const UnifiedTimeline = memo(function UnifiedTimeline2({
   title = "Timeline",
   events,
@@ -1375,6 +1774,8 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
   zoomable = false,
   initialZoom = 1,
   showFilters: _showFilters = false,
+  filtersDefaultExpanded = false,
+  hideEmptyTracksWhenFiltered = true,
   filter: _filter,
   onFilterChange: _onFilterChange,
   showCount: _showCount = true,
@@ -1390,6 +1791,15 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
   const [internalViewMode, setInternalViewMode] = useState(defaultView);
   const [zoom, setZoom] = useState(initialZoom);
   const [_internalFilter, _setInternalFilter] = useState({});
+  const filter = _filter !== void 0 ? _filter : _internalFilter;
+  const setFilter = useCallback(
+    (next) => {
+      const n = normalizeTimelineFilter(next);
+      if (_filter === void 0) _setInternalFilter(n);
+      _onFilterChange == null ? void 0 : _onFilterChange(n);
+    },
+    [_filter, _onFilterChange]
+  );
   const viewMode = controlledViewMode ?? internalViewMode;
   const handleViewModeChange = useCallback((mode) => {
     setInternalViewMode(mode);
@@ -1434,9 +1844,28 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
       height: trackHeight
     }));
   }, [events, tracks, trackHeight]);
+  const filteredEvents = useMemo(
+    () => events.filter((e) => matchesTimelineFilter(e, filter)),
+    [events, filter]
+  );
+  const effectiveTracksForViews = useMemo(() => {
+    if (!hideEmptyTracksWhenFiltered || !isTimelineFilterActive(filter)) return effectiveTracks;
+    const ids = new Set(filteredEvents.map((e) => e.track || "default"));
+    return effectiveTracks.filter((t) => ids.has(t.id));
+  }, [effectiveTracks, filteredEvents, filter, hideEmptyTracksWhenFiltered]);
+  const trackOptionsForToolbar = useMemo(() => {
+    if (tracks.length > 0) return tracks.map((t) => ({ id: t.id, label: t.label }));
+    const u = /* @__PURE__ */ new Set();
+    events.forEach((e) => {
+      if (e.track) u.add(e.track);
+    });
+    if (u.size === 0) return [{ id: "default", label: "Events" }];
+    return [...u].sort().map((id) => ({ id, label: id }));
+  }, [events, tracks]);
   const sortedEvents = useMemo(() => {
-    return [...events].sort((a, b) => b.start.getTime() - a.start.getTime());
-  }, [events]);
+    return [...filteredEvents].sort((a, b) => b.start.getTime() - a.start.getTime());
+  }, [filteredEvents]);
+  const countLabel = !_showCount ? title : `${title} (${filteredEvents.length}${filteredEvents.length !== events.length ? ` / ${events.length}` : ""})`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1460,7 +1889,7 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
               borderBottom: `1px solid ${tokens.colors.border.muted}`
             },
             children: [
-              /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx(
                 "h3",
                 {
                   style: {
@@ -1470,12 +1899,7 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
                     // AstroUXDS medium (was 600)
                     color: tokens.colors.text.primary
                   },
-                  children: [
-                    title,
-                    " (",
-                    events.length,
-                    ")"
-                  ]
+                  children: countLabel
                 }
               ),
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
@@ -1650,6 +2074,15 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
             ]
           }
         ),
+        _showFilters ? /* @__PURE__ */ jsx(
+          TimelineFiltersToolbar,
+          {
+            filter,
+            onFilterChange: setFilter,
+            trackOptions: trackOptionsForToolbar,
+            defaultExpanded: filtersDefaultExpanded
+          }
+        ) : null,
         loading && /* @__PURE__ */ jsx(
           "div",
           {
@@ -1704,6 +2137,43 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
                   /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem" }, children: "No events to display" })
                 ]
               }
+            ) : filteredEvents.length === 0 ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "48px 24px",
+                  color: tokens.colors.text.tertiary,
+                  gap: 12,
+                  textAlign: "center"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "search", size: 32 }),
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem", color: tokens.colors.text.secondary }, children: "No events match the current filters." }),
+                  _showFilters && isTimelineFilterActive(filter) ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setFilter({}),
+                      style: {
+                        marginTop: 4,
+                        padding: "8px 16px",
+                        borderRadius: tokens.borderRadius.md,
+                        border: `1px solid ${tokens.colors.accent.primary}`,
+                        backgroundColor: `${tokens.colors.accent.primary}18`,
+                        color: tokens.colors.accent.primary,
+                        cursor: "pointer",
+                        fontSize: "0.8125rem",
+                        fontWeight: 500
+                      },
+                      children: "Clear filters"
+                    }
+                  ) : null
+                ]
+              }
             ) : viewMode === "list" ? (
               // List View
               sortedEvents.map((event, index) => /* @__PURE__ */ jsx(
@@ -1720,8 +2190,8 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
               /* @__PURE__ */ jsx(
                 ScatterView,
                 {
-                  events,
-                  tracks: effectiveTracks,
+                  events: filteredEvents,
+                  tracks: effectiveTracksForViews,
                   start,
                   end,
                   trackHeight,
@@ -1736,8 +2206,8 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
               /* @__PURE__ */ jsx(
                 ChartView,
                 {
-                  events,
-                  tracks: effectiveTracks,
+                  events: filteredEvents,
+                  tracks: effectiveTracksForViews,
                   start,
                   end,
                   trackHeight,
@@ -1763,6 +2233,9 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
   );
 });
 export {
-  UnifiedTimeline
+  UnifiedTimeline,
+  getTimelineEventDisplayStatus,
+  isTimelineFilterActive,
+  matchesTimelineFilter
 };
 //# sourceMappingURL=UnifiedTimeline.js.map