@zendir/ui 0.1.14 → 0.2.0

package/dist/react/astro/UnifiedTimeline.js

@@ -1,10 +1,140 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { memo, useState, useCallback, useMemo, useRef } from "react";
 import { classNames, safeAccentText } from "../utils/index.js";
+import { useCategoryPalette } from "../context/CategoryContext.js";
 import { Icon } from "../core/Icon.js";
 import { Badge } from "../core/Badge.js";
 import { Tooltip } from "../core/Tooltip.js";
+import { Button } from "../core/Button.js";
+import { useBreakpoint } from "../core/layout/useBreakpoint.js";
 import { useTheme } from "../theme/ThemeProvider.js";
+const Z = {
+  /** Base layer for track events / scatter dots */
+  trackEvent: 1,
+  /** Hovered track event raised above siblings */
+  trackEventHovered: 20,
+  /** Sticky column elements (playhead, track labels) */
+  sticky: 15,
+  /** Floating day-marker lines above track content */
+  dayMarker: 5,
+  /** Loading overlay covering chart content */
+  loadingOverlay: 100,
+  /** Floating tooltips — above all chart chrome */
+  tooltip: 1e3
+};
+const TIMELINE_FILTER_TEAM_NONE = "__zendir_team_none__";
+const TIMELINE_FILTER_TEAM_LEGACY = "__zendir_team_legacy__";
+function getTimelineTeamAccent(event) {
+  const t = event.team;
+  if (t == null ? void 0 : t.color) {
+    return { color: t.color, id: t.id, label: t.label };
+  }
+  if (event.color) {
+    return { color: event.color };
+  }
+  return null;
+}
+function getTimelineTeamDisplayLabel(event, accent) {
+  if (accent.label) return accent.label;
+  if (accent.id !== void 0 && accent.id !== "") return String(accent.id);
+  const args = event.arguments;
+  const argsTeam = args == null ? void 0 : args.Team;
+  if (argsTeam !== void 0 && argsTeam !== "") return String(argsTeam);
+  return event.badge || "Team";
+}
+function getTimelineTeamFilterKey(event) {
+  const accent = getTimelineTeamAccent(event);
+  if (!accent) return TIMELINE_FILTER_TEAM_NONE;
+  if (accent.id === void 0 || accent.id === "") return TIMELINE_FILTER_TEAM_LEGACY;
+  return String(accent.id);
+}
+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.teams && filter.teams.length > 0 || filter.teamColoredOnly
+  );
+}
+function normalizeTimelineFilter(f) {
+  var _a, _b, _c, _d;
+  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 ((_d = f.teams) == null ? void 0 : _d.length) o.teams = [...f.teams];
+  if (f.teamColoredOnly) o.teamColoredOnly = true;
+  return o;
+}
+function matchesTimelineFilter(event, filter) {
+  var _a, _b, _c, _d, _e, _f;
+  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 accent = getTimelineTeamAccent(event);
+    const teamHay = accent ? [accent.label, accent.id !== void 0 ? String(accent.id) : ""].filter(Boolean).join(" ") : "";
+    const hay = [
+      event.title,
+      event.subtitle,
+      event.badge,
+      event.track,
+      argStr,
+      teamHay
+    ].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 ((_f = filter.teams) == null ? void 0 : _f.length) {
+    const teamKey = getTimelineTeamFilterKey(event);
+    if (!filter.teams.includes(teamKey)) return false;
+  }
+  if (filter.teamColoredOnly && !(filter.teams && filter.teams.length > 0) && !getTimelineTeamAccent(event)) {
+    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.teams && filter.teams.length > 0) n++;
+  if (filter.teamColoredOnly && !(filter.teams && filter.teams.length > 0)) n++;
+  return n;
+}
 function TimelineStatusMarker({
   status,
   fillColor,
@@ -44,6 +174,7 @@ const EventListItem = memo(function EventListItem2({
   ];
   const displayStatus = event.badgeVariant && event.badgeVariant !== "default" && event.badgeVariant !== "primary" ? event.badgeVariant : event.status ?? "normal";
   const markerColor = tokens.colors.status[displayStatus];
+  const teamAccent = getTimelineTeamAccent(event);
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "16px" }, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -81,7 +212,7 @@ const EventListItem = memo(function EventListItem2({
           position: "relative",
           flex: 1,
           marginBottom: "16px",
-          padding: event.color ? "19px 20px 16px 20px" : "16px 20px",
+          padding: teamAccent ? "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,
@@ -91,7 +222,7 @@ const EventListItem = memo(function EventListItem2({
           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(
+          teamAccent && /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -100,7 +231,7 @@ const EventListItem = memo(function EventListItem2({
                 left: 0,
                 right: 0,
                 height: 3,
-                backgroundColor: event.color
+                backgroundColor: teamAccent.color
               }
             }
           ),
@@ -313,6 +444,7 @@ const ChartView = memo(function ChartView2({
   const [hoveredEvent, setHoveredEvent] = useState(null);
   const [tooltipPos, setTooltipPos] = useState(null);
   const scrollContainerRef = useRef(null);
+  const [scrollX, setScrollX] = useState(0);
   const totalDuration = end.getTime() - start.getTime();
   const trackLabelWidth = 130;
   const timeLabels = useMemo(() => {
@@ -416,6 +548,22 @@ const ChartView = memo(function ChartView2({
     if (!status) return tokens.colors.accent.primary;
     return tokens.colors.status[status] || tokens.colors.accent.primary;
   };
+  const isEventVisible = useCallback(
+    (event) => {
+      const container = scrollContainerRef.current;
+      if (!container) return true;
+      const viewportWidth = container.clientWidth - trackLabelWidth;
+      if (viewportWidth <= 0) return true;
+      const totalWidth = container.scrollWidth - trackLabelWidth;
+      const eventStartMs = event.start.getTime();
+      const eventEndMs = (event.end ?? new Date(eventStartMs + 3e5)).getTime();
+      const leftPx = (eventStartMs - start.getTime()) / totalDuration * totalWidth;
+      const rightPx = (eventEndMs - start.getTime()) / totalDuration * totalWidth;
+      const overscan = 50;
+      return rightPx >= scrollX - overscan && leftPx <= scrollX + viewportWidth + overscan;
+    },
+    [start, totalDuration, scrollX, trackLabelWidth]
+  );
   const getStatusLabel = (status) => {
     const labels = {
       normal: "Normal",
@@ -437,6 +585,7 @@ const ChartView = memo(function ChartView2({
       {
         ref: scrollContainerRef,
         className: "zendir-timeline-scroll",
+        onScroll: (e) => setScrollX(e.currentTarget.scrollLeft),
         style: {
           overflowX: "auto",
           overflowY: "hidden",
@@ -460,7 +609,7 @@ const ChartView = memo(function ChartView2({
                     borderBottom: `1px solid ${tokens.colors.accent.primary}20`,
                     position: "sticky",
                     top: 0,
-                    zIndex: 20,
+                    zIndex: Z.trackEventHovered,
                     backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
                     ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" }
                   },
@@ -473,7 +622,7 @@ const ChartView = memo(function ChartView2({
                           flexShrink: 0,
                           position: "sticky",
                           left: 0,
-                          zIndex: 25,
+                          zIndex: Z.trackEventHovered + 5,
                           backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
                           ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
                           borderRight: `1px solid ${tokens.colors.border.muted}30`,
@@ -502,7 +651,7 @@ const ChartView = memo(function ChartView2({
                             display: "flex",
                             flexDirection: "column",
                             alignItems: "center",
-                            zIndex: 5
+                            zIndex: Z.dayMarker
                           },
                           children: /* @__PURE__ */ jsx(
                             "span",
@@ -562,7 +711,7 @@ const ChartView = memo(function ChartView2({
                           flexShrink: 0,
                           position: "sticky",
                           left: 0,
-                          zIndex: 15,
+                          zIndex: Z.sticky,
                           display: "flex",
                           alignItems: "center",
                           paddingLeft: 12,
@@ -599,25 +748,28 @@ const ChartView = memo(function ChartView2({
                                 bottom: 0,
                                 width: 1,
                                 backgroundColor: `${tokens.colors.status.caution}25`,
-                                zIndex: 1,
+                                zIndex: Z.trackEvent,
                                 pointerEvents: "none"
                               }
                             },
                             `day-line-${index}`
                           )),
-                          (eventsByTrack[track.id] || []).map((event) => {
+                          (eventsByTrack[track.id] || []).filter(isEventVisible).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 teamAccent = getTimelineTeamAccent(event);
+                            const cardHeight = hasOverlap ? 30 : 38;
                             const stackOffset = overlap ? overlap.stackIndex * 30 : 0;
                             const baseTop = ((track.height || trackHeight) - cardHeight) / 2;
                             return /* @__PURE__ */ jsxs(
                               "button",
                               {
                                 type: "button",
+                                "aria-label": `${event.title}${event.status ? `, status: ${event.status}` : ""}`,
                                 onClick: () => onEventClick == null ? void 0 : onEventClick(event),
                                 onMouseEnter: (e) => {
                                   setHoveredEvent(event.id);
@@ -628,6 +780,15 @@ const ChartView = memo(function ChartView2({
                                   setHoveredEvent(null);
                                   setTooltipPos(null);
                                 },
+                                onFocus: (e) => {
+                                  setHoveredEvent(event.id);
+                                  const rect = e.currentTarget.getBoundingClientRect();
+                                  setTooltipPos({ x: rect.left + rect.width / 2, y: rect.top - 8 });
+                                },
+                                onBlur: () => {
+                                  setHoveredEvent(null);
+                                  setTooltipPos(null);
+                                },
                                 className: "zendir-timeline-region",
                                 style: {
                                   position: "absolute",
@@ -643,13 +804,13 @@ const ChartView = memo(function ChartView2({
                                   display: "flex",
                                   alignItems: "center",
                                   overflow: "hidden",
-                                  zIndex: isHovered ? 100 : 1,
+                                  zIndex: isHovered ? Z.trackEventHovered : Z.trackEvent,
                                   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: [
-                                  event.color && /* @__PURE__ */ jsx(
+                                  teamAccent ? /* @__PURE__ */ jsx(
                                     "div",
                                     {
                                       style: {
@@ -657,57 +818,63 @@ const ChartView = memo(function ChartView2({
                                         top: 0,
                                         left: 0,
                                         right: 0,
-                                        height: 3,
-                                        backgroundColor: event.color,
-                                        borderRadius: "4px 4px 0 0"
-                                      }
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx(
-                                    "div",
-                                    {
-                                      style: {
-                                        width: 4,
-                                        height: "100%",
-                                        backgroundColor: color,
-                                        flexShrink: 0,
-                                        borderRadius: "2px 0 0 2px"
-                                      }
+                                        height: 2,
+                                        backgroundColor: teamAccent.color,
+                                        borderRadius: "4px 4px 0 0",
+                                        zIndex: 1,
+                                        pointerEvents: "none"
+                                      },
+                                      "aria-hidden": true
                                     }
-                                  ),
+                                  ) : null,
                                   /* @__PURE__ */ jsxs(
                                     "div",
                                     {
                                       style: {
                                         flex: 1,
-                                        padding: "4px 8px",
+                                        padding: `${teamAccent ? 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(
@@ -719,7 +886,8 @@ const ChartView = memo(function ChartView2({
                                               whiteSpace: "nowrap",
                                               overflow: "hidden",
                                               textOverflow: "ellipsis",
-                                              marginTop: 1
+                                              marginTop: 1,
+                                              paddingLeft: 16
                                             },
                                             children: event.subtitle
                                           }
@@ -745,7 +913,7 @@ const ChartView = memo(function ChartView2({
                                         fontWeight: 700,
                                         color: "#000",
                                         boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
-                                        zIndex: 10
+                                        zIndex: Z.sticky - 5
                                       },
                                       title: `${overlap.overlapCount + 1} overlapping events`,
                                       children: [
@@ -777,7 +945,7 @@ const ChartView = memo(function ChartView2({
                     width: 2,
                     backgroundColor: tokens.colors.accent.primary,
                     boxShadow: `0 0 12px ${tokens.colors.accent.primary}`,
-                    zIndex: 20,
+                    zIndex: Z.trackEventHovered,
                     pointerEvents: "none"
                   },
                   children: [
@@ -828,8 +996,8 @@ const ChartView = memo(function ChartView2({
       }
     ),
     hoveredEventData && tooltipPos && (() => {
-      var _a;
       const tooltipColor = getStatusColor(hoveredEventData.status);
+      const teamTip = getTimelineTeamAccent(hoveredEventData);
       return /* @__PURE__ */ jsxs(
         "div",
         {
@@ -838,7 +1006,7 @@ const ChartView = memo(function ChartView2({
             left: tooltipPos.x,
             top: tooltipPos.y,
             transform: "translate(-50%, -100%)",
-            zIndex: 1e3,
+            zIndex: Z.tooltip,
             pointerEvents: "none",
             animation: "zendir-tooltip-appear 150ms ease"
           },
@@ -897,9 +1065,9 @@ const ChartView = memo(function ChartView2({
                       }
                     )
                   ] }),
-                  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" })
+                  teamTip && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: teamTip.color, flexShrink: 0 } }),
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6875rem", color: teamTip.color, fontWeight: 500 }, children: getTimelineTeamDisplayLabel(hoveredEventData, teamTip) })
                   ] }),
                   /* @__PURE__ */ jsx(
                     "div",
@@ -1180,11 +1348,14 @@ const ScatterView = memo(function ScatterView2({
                         const color = getStatusColor(event.status);
                         const isHovered = hoveredEvent === event.id;
                         const dotSize = isHovered ? 16 : 12;
+                        const hitboxPad = Math.max(0, (24 - dotSize) / 2);
                         const effectiveStatus = event.status ?? "normal";
+                        const scatterTeamAccent = getTimelineTeamAccent(event);
                         return /* @__PURE__ */ jsx(
                           "button",
                           {
                             type: "button",
+                            "aria-label": `${event.title}${event.status ? `, status: ${event.status}` : ""}`,
                             onClick: () => onEventClick == null ? void 0 : onEventClick(event),
                             onMouseEnter: (e) => {
                               setHoveredEvent(event.id);
@@ -1195,23 +1366,33 @@ const ScatterView = memo(function ScatterView2({
                               setHoveredEvent(null);
                               setTooltipPosition(null);
                             },
+                            onFocus: (e) => {
+                              setHoveredEvent(event.id);
+                              const rect = e.currentTarget.getBoundingClientRect();
+                              setTooltipPosition({ x: rect.left + rect.width / 2, y: rect.top });
+                            },
+                            onBlur: () => {
+                              setHoveredEvent(null);
+                              setTooltipPosition(null);
+                            },
                             style: {
                               position: "absolute",
                               left: `${leftPercent}%`,
                               transform: "translateX(-50%)",
+                              /* visible size + transparent padding = ≥24px touch/click target */
                               width: dotSize,
                               height: dotSize,
-                              padding: 0,
+                              padding: hitboxPad,
                               background: "none",
                               border: "none",
                               cursor: "pointer",
                               transition: "all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)",
-                              zIndex: isHovered ? 20 : 1,
+                              zIndex: isHovered ? Z.trackEventHovered : Z.trackEvent,
                               lineHeight: 0,
                               borderRadius: "50%",
-                              boxShadow: event.color ? `0 0 0 2px ${event.color}` : void 0
+                              boxSizing: "content-box",
+                              boxShadow: scatterTeamAccent ? `0 0 0 2px ${scatterTeamAccent.color}` : void 0
                             },
-                            "aria-label": event.title,
                             children: /* @__PURE__ */ jsx(TimelineStatusMarker, { status: effectiveStatus, fillColor: color, size: dotSize })
                           },
                           event.id
@@ -1228,8 +1409,8 @@ const ScatterView = memo(function ScatterView2({
       }
     ),
     hoveredEventData && tooltipPosition && (() => {
-      var _a;
       const scatterTipColor = getStatusColor(hoveredEventData.status);
+      const scatterTeamTip = getTimelineTeamAccent(hoveredEventData);
       return /* @__PURE__ */ jsxs(
         "div",
         {
@@ -1245,7 +1426,7 @@ const ScatterView = memo(function ScatterView2({
             padding: "12px 16px",
             minWidth: 200,
             maxWidth: 320,
-            zIndex: 1e3,
+            zIndex: Z.tooltip,
             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)"
@@ -1305,9 +1486,9 @@ const ScatterView = memo(function ScatterView2({
                 }
               )
             ] }),
-            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" })
+            scatterTeamTip && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }, children: [
+              /* @__PURE__ */ jsx("div", { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: scatterTeamTip.color, flexShrink: 0 } }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6875rem", color: scatterTeamTip.color, fontWeight: 500 }, children: getTimelineTeamDisplayLabel(hoveredEventData, scatterTeamTip) })
             ] }),
             /* @__PURE__ */ jsx(
               "div",
@@ -1404,6 +1585,243 @@ const ScatterView = memo(function ScatterView2({
       ` })
   ] });
 });
+function buildTeamFilterOptions(events, tokens, categoryLabel = "team") {
+  const map = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    const key = getTimelineTeamFilterKey(event);
+    if (map.has(key)) continue;
+    const accent = getTimelineTeamAccent(event);
+    const isNone = key === TIMELINE_FILTER_TEAM_NONE;
+    const isLegacy = key === TIMELINE_FILTER_TEAM_LEGACY;
+    const label = isNone ? `No ${categoryLabel.toLowerCase()}` : isLegacy ? "Accent only" : accent ? getTimelineTeamDisplayLabel(event, accent) : key;
+    const color = isNone ? "" : (accent == null ? void 0 : accent.color) ?? tokens.colors.text.tertiary;
+    map.set(key, { key, label, color, isNoneBucket: isNone });
+  }
+  const list = [...map.values()];
+  list.sort((a, b) => {
+    if (a.isNoneBucket !== b.isNoneBucket) return a.isNoneBucket ? 1 : -1;
+    if (a.key === TIMELINE_FILTER_TEAM_LEGACY) return b.key === TIMELINE_FILTER_TEAM_NONE ? -1 : 1;
+    if (b.key === TIMELINE_FILTER_TEAM_LEGACY) return a.key === TIMELINE_FILTER_TEAM_NONE ? 1 : -1;
+    return a.label.localeCompare(b.label, void 0, { sensitivity: "base" });
+  });
+  return list;
+}
+const TimelineFiltersPanel = memo(function TimelineFiltersPanel2({
+  filter,
+  onFilterChange,
+  trackOptions,
+  events,
+  expanded,
+  teamLabel
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const accentColor = tokens.colors.accent.primary;
+  const teamOptions = useMemo(() => buildTeamFilterOptions(events, tokens, teamLabel), [events, tokens, teamLabel]);
+  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 toggleTeam = useCallback(
+    (teamKey) => {
+      const cur = filter.teams ?? [];
+      const next = cur.includes(teamKey) ? cur.filter((k) => k !== teamKey) : [...cur, teamKey];
+      patch({ teams: next.length ? next : void 0 });
+    },
+    [filter.teams, patch]
+  );
+  const pillStyle = useCallback(
+    (active, tintColor) => {
+      const c = tintColor || accentColor;
+      return {
+        padding: "2px 8px",
+        borderRadius: tokens.borderRadius.md,
+        fontSize: tokens.typography.fontSize.xs,
+        fontWeight: 500,
+        textTransform: "uppercase",
+        letterSpacing: "0.06em",
+        lineHeight: 1.4,
+        border: `1px solid ${active ? `${c}66` : tokens.colors.border.muted}`,
+        backgroundColor: active ? `${c}22` : "transparent",
+        color: active ? c : tokens.colors.text.secondary,
+        cursor: "pointer",
+        transition: tokens.animation.fast
+      };
+    },
+    [accentColor, tokens]
+  );
+  const sectionHeader = (text) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        fontSize: tokens.typography.fontSize.xs,
+        fontWeight: 700,
+        letterSpacing: "0.06em",
+        textTransform: "uppercase",
+        color: tokens.colors.text.tertiary,
+        marginBottom: 8
+      },
+      children: text
+    }
+  );
+  if (!expanded) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: "zendir-timeline-filters-panel",
+      style: {
+        padding: `${tokens.spacing.smd} ${tokens.spacing.md}`,
+        borderBottom: `1px solid ${tokens.colors.border.muted}`,
+        backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+        ...isTransparentTheme && { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" },
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacing.smd
+      },
+      children: [
+        trackOptions.length > 0 ? /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Filter by track", children: [
+          sectionHeader("Tracks"),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: tokens.spacing.xs }, 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", "aria-pressed": active, onClick: () => toggleTrack(t.id), style: pillStyle(active), children: t.label }, t.id);
+          }) })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Filter by status", children: [
+          sectionHeader("Status"),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: tokens.spacing.xs }, children: ALL_TIMELINE_STATUSES.map((st) => {
+            var _a;
+            const active = ((_a = filter.status) == null ? void 0 : _a.includes(st)) ?? false;
+            const statusColor = st ? tokens.colors.status[st] : accentColor;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": active,
+                onClick: () => toggleStatus(st),
+                style: {
+                  ...pillStyle(active, statusColor),
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 6
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        width: 8,
+                        height: 8,
+                        borderRadius: "50%",
+                        backgroundColor: active ? statusColor : `${statusColor}50`,
+                        flexShrink: 0,
+                        transition: tokens.animation.fast
+                      }
+                    }
+                  ),
+                  st
+                ]
+              },
+              st
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: `${tokens.spacing.smd} ${tokens.spacing.lg}`,
+              alignItems: "flex-start"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Filter by duration", style: { minWidth: 0 }, children: [
+                sectionHeader("Duration"),
+                /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: tokens.spacing.xs }, children: ["all", "point", "range"].map((key) => {
+                  const active = (filter.eventShape ?? "all") === key;
+                  return /* @__PURE__ */ jsx("button", { type: "button", "aria-pressed": active, onClick: () => patch({ eventShape: key }), style: pillStyle(active), children: key === "all" ? "All" : key === "point" ? "Instant" : "Range" }, key);
+                }) })
+              ] }),
+              teamOptions.length > 0 ? /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": `Filter by ${teamLabel.toLowerCase()}`, style: { flex: 1, minWidth: 180 }, children: [
+                sectionHeader(teamLabel),
+                /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: tokens.spacing.xs }, children: teamOptions.map((opt) => {
+                  var _a, _b, _c;
+                  const active = ((_a = filter.teams) == null ? void 0 : _a.includes(opt.key)) ?? false;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-pressed": active,
+                      onClick: () => toggleTeam(opt.key),
+                      style: {
+                        ...pillStyle(active, opt.color || void 0),
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: 6,
+                        maxWidth: "100%"
+                      },
+                      children: [
+                        opt.isNoneBucket ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              width: 8,
+                              height: 8,
+                              borderRadius: "50%",
+                              border: `${((_c = (_b = tokens.borders) == null ? void 0 : _b.width) == null ? void 0 : _c.thick) ?? "2px"} solid ${tokens.colors.border.muted}`,
+                              flexShrink: 0,
+                              boxSizing: "border-box"
+                            }
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              width: 8,
+                              height: 8,
+                              borderRadius: "50%",
+                              backgroundColor: opt.color,
+                              flexShrink: 0
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: opt.label })
+                      ]
+                    },
+                    opt.key
+                  );
+                }) })
+              ] }) : null
+            ]
+          }
+        ),
+        isTimelineFilterActive(filter) ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(Button, { variant: "borderless", size: "small", onClick: clearAll, children: "Clear all" }) }) : null
+      ]
+    }
+  );
+});
 const UnifiedTimeline = memo(function UnifiedTimeline2({
   title = "Timeline",
   events,
@@ -1421,7 +1839,9 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
   timeFormat = "absolute",
   zoomable = false,
   initialZoom = 1,
-  showFilters: _showFilters = false,
+  showFilters: _showFilters = true,
+  filtersDefaultExpanded = false,
+  hideEmptyTracksWhenFiltered = true,
   filter: _filter,
   onFilterChange: _onFilterChange,
   showCount: _showCount = true,
@@ -1430,13 +1850,34 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
   showPlayhead = true,
   playheadTime,
   onPlayheadChange: _onPlayheadChangeTimeline,
-  showDayMarkers = true
+  showDayMarkers = true,
+  teamLabel: teamLabelProp
 }) {
   const { tokens, theme } = useTheme();
   const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const { isMobile } = useBreakpoint();
+  const categoryCtx = useCategoryPalette();
+  const teamLabel = teamLabelProp ?? (categoryCtx == null ? void 0 : categoryCtx.categoryLabel) ?? "Teams";
   const [internalViewMode, setInternalViewMode] = useState(defaultView);
   const [zoom, setZoom] = useState(initialZoom);
   const [_internalFilter, _setInternalFilter] = useState({});
+  const [filtersExpanded, setFiltersExpanded] = useState(filtersDefaultExpanded);
+  const filter = _filter !== void 0 ? _filter : _internalFilter;
+  const filterChipCount = _showFilters ? countTimelineFilterChips(filter) : 0;
+  const setFilter = useCallback(
+    (next) => {
+      const n = normalizeTimelineFilter(next);
+      if (_filter === void 0) _setInternalFilter(n);
+      _onFilterChange == null ? void 0 : _onFilterChange(n);
+    },
+    [_filter, _onFilterChange]
+  );
+  const patchFilter = useCallback(
+    (partial) => {
+      setFilter(normalizeTimelineFilter({ ...filter, ...partial }));
+    },
+    [filter, setFilter]
+  );
   const viewMode = controlledViewMode ?? internalViewMode;
   const handleViewModeChange = useCallback((mode) => {
     setInternalViewMode(mode);
@@ -1481,9 +1922,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",
     {
@@ -1501,202 +1961,323 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
           {
             style: {
               display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              padding: "16px 20px",
+              flexDirection: isMobile ? "column" : "row",
+              alignItems: isMobile ? "stretch" : "center",
+              padding: `${tokens.spacing.smd} ${tokens.spacing.md}`,
+              gap: isMobile ? tokens.spacing.xs : tokens.spacing.sm,
               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",
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
                   {
                     style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 4,
-                      paddingRight: 12,
-                      borderRight: `1px solid ${tokens.colors.border.muted}`
+                      margin: 0,
+                      fontSize: "1rem",
+                      fontWeight: 500,
+                      // AstroUXDS medium
+                      color: tokens.colors.text.primary,
+                      whiteSpace: "nowrap",
+                      flexShrink: 0
                     },
-                    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"
-                        }
-                      ) })
-                    ]
+                    children: countLabel
                   }
                 ),
-                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 })
+                !isMobile && /* @__PURE__ */ jsx("div", { style: { flex: 1 } })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm, flex: isMobile ? void 0 : 1, justifyContent: isMobile ? "space-between" : "flex-end" }, children: [
+                _showFilters && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs, flex: isMobile ? 1 : void 0, flexShrink: 0 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: isMobile ? "100%" : 180 }, children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: "search",
+                        size: 14,
+                        style: {
+                          position: "absolute",
+                          left: 8,
+                          top: "50%",
+                          transform: "translateY(-50%)",
+                          color: tokens.colors.text.tertiary,
+                          pointerEvents: "none"
                         }
-                      ) }, mode);
-                    })
-                  }
-                )
-              ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "search",
+                        value: filter.search ?? "",
+                        onChange: (e) => patchFilter({ search: e.target.value || void 0 }),
+                        placeholder: "Search…",
+                        "aria-label": "Search timeline events",
+                        style: {
+                          width: "100%",
+                          boxSizing: "border-box",
+                          height: tokens.elementSize.sm,
+                          paddingLeft: 28,
+                          paddingRight: 8,
+                          borderRadius: tokens.borderRadius.md,
+                          border: `1px solid ${tokens.colors.border.muted}`,
+                          backgroundColor: tokens.colors.background.base,
+                          color: tokens.colors.text.primary,
+                          fontSize: tokens.typography.fontSize.sm,
+                          fontFamily: "inherit",
+                          outline: "none",
+                          transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)"
+                        },
+                        onFocus: (e) => {
+                          e.target.style.borderColor = tokens.colors.accent.primary;
+                          e.target.style.boxShadow = `0 0 0 3px ${tokens.colors.accent.primary}50, 0 0 20px ${tokens.colors.accent.primary}15`;
+                        },
+                        onBlur: (e) => {
+                          e.target.style.borderColor = tokens.colors.border.muted;
+                          e.target.style.boxShadow = "none";
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(Tooltip, { content: filtersExpanded ? "Hide filters" : "Show filters", children: /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": filtersExpanded ? "Hide filters" : "Show filters",
+                      "aria-expanded": filtersExpanded,
+                      "aria-controls": "zendir-timeline-filters-panel",
+                      onClick: () => setFiltersExpanded((v) => !v),
+                      style: {
+                        position: "relative",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: 28,
+                        height: 28,
+                        border: `1px solid ${filterChipCount > 0 ? `${tokens.colors.accent.primary}80` : tokens.colors.border.muted}`,
+                        borderRadius: tokens.borderRadius.sm,
+                        backgroundColor: filterChipCount > 0 ? `${tokens.colors.accent.primary}12` : "transparent",
+                        color: filterChipCount > 0 ? tokens.colors.accent.primary : tokens.colors.text.secondary,
+                        cursor: "pointer",
+                        transition: tokens.animation.fast
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(Icon, { name: "filter", size: 16 }),
+                        filterChipCount > 0 ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              position: "absolute",
+                              top: -4,
+                              right: -4,
+                              minWidth: 14,
+                              height: 14,
+                              borderRadius: "50%",
+                              backgroundColor: tokens.colors.accent.primary,
+                              color: "#fff",
+                              fontSize: "0.5625rem",
+                              fontWeight: 700,
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              lineHeight: 1
+                            },
+                            children: filterChipCount
+                          }
+                        ) : null
+                      ]
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, flexShrink: 0 }, 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",
+                    {
+                      role: "group",
+                      "aria-label": "View mode",
+                      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],
+                            "aria-pressed": isActive,
+                            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);
+                      })
+                    }
+                  )
+                ] }),
+                " "
+              ] }),
+              " "
             ]
           }
         ),
+        " ",
+        _showFilters ? /* @__PURE__ */ jsx(
+          TimelineFiltersPanel,
+          {
+            filter,
+            onFilterChange: setFilter,
+            trackOptions: trackOptionsForToolbar,
+            events,
+            expanded: filtersExpanded,
+            teamLabel
+          }
+        ) : null,
         loading && /* @__PURE__ */ jsx(
           "div",
           {
@@ -1708,7 +2289,7 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
               justifyContent: "center",
               backgroundColor: `${tokens.colors.background.overlay}80`,
               backdropFilter: "blur(4px)",
-              zIndex: 100
+              zIndex: Z.loadingOverlay
             },
             children: /* @__PURE__ */ jsx(
               "div",
@@ -1751,6 +2332,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(
@@ -1767,8 +2385,8 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
               /* @__PURE__ */ jsx(
                 ScatterView,
                 {
-                  events,
-                  tracks: effectiveTracks,
+                  events: filteredEvents,
+                  tracks: effectiveTracksForViews,
                   start,
                   end,
                   trackHeight,
@@ -1783,8 +2401,8 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
               /* @__PURE__ */ jsx(
                 ChartView,
                 {
-                  events,
-                  tracks: effectiveTracks,
+                  events: filteredEvents,
+                  tracks: effectiveTracksForViews,
                   start,
                   end,
                   trackHeight,
@@ -1810,6 +2428,14 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
   );
 });
 export {
-  UnifiedTimeline
+  TIMELINE_FILTER_TEAM_LEGACY,
+  TIMELINE_FILTER_TEAM_NONE,
+  UnifiedTimeline,
+  getTimelineEventDisplayStatus,
+  getTimelineTeamAccent,
+  getTimelineTeamDisplayLabel,
+  getTimelineTeamFilterKey,
+  isTimelineFilterActive,
+  matchesTimelineFilter
 };
 //# sourceMappingURL=UnifiedTimeline.js.map