@zendir/ui 0.1.15 → 0.2.0

package/dist/react/astro/UnifiedTimeline.js

@@ -1,11 +1,53 @@
 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 { Checkbox } from "../core/Checkbox.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",
@@ -22,22 +64,23 @@ function getTimelineEventDisplayStatus(event) {
 }
 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
+    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;
+  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;
+  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";
@@ -50,12 +93,15 @@ function matchesTimelineFilter(event, filter) {
   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
+      argStr,
+      teamHay
     ].filter(Boolean).join(" ").toLowerCase();
     if (!hay.includes(q)) return false;
   }
@@ -69,7 +115,13 @@ function matchesTimelineFilter(event, filter) {
     const st = event.start.getTime();
     if (endT == null || endT <= st) return false;
   }
-  if (filter.teamColoredOnly && !event.color) 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) {
@@ -79,7 +131,8 @@ function countTimelineFilterChips(filter) {
   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++;
+  if (filter.teams && filter.teams.length > 0) n++;
+  if (filter.teamColoredOnly && !(filter.teams && filter.teams.length > 0)) n++;
   return n;
 }
 function TimelineStatusMarker({
@@ -121,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",
@@ -158,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,
@@ -168,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: {
@@ -177,7 +231,7 @@ const EventListItem = memo(function EventListItem2({
                 left: 0,
                 right: 0,
                 height: 3,
-                backgroundColor: event.color
+                backgroundColor: teamAccent.color
               }
             }
           ),
@@ -390,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(() => {
@@ -493,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",
@@ -514,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",
@@ -537,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)" }
                   },
@@ -550,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`,
@@ -579,7 +651,7 @@ const ChartView = memo(function ChartView2({
                             display: "flex",
                             flexDirection: "column",
                             alignItems: "center",
-                            zIndex: 5
+                            zIndex: Z.dayMarker
                           },
                           children: /* @__PURE__ */ jsx(
                             "span",
@@ -639,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,
@@ -676,19 +748,20 @@ 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 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 teamAccent = getTimelineTeamAccent(event);
                             const cardHeight = hasOverlap ? 30 : 38;
                             const stackOffset = overlap ? overlap.stackIndex * 30 : 0;
                             const baseTop = ((track.height || trackHeight) - cardHeight) / 2;
@@ -696,6 +769,7 @@ const ChartView = memo(function ChartView2({
                               "button",
                               {
                                 type: "button",
+                                "aria-label": `${event.title}${event.status ? `, status: ${event.status}` : ""}`,
                                 onClick: () => onEventClick == null ? void 0 : onEventClick(event),
                                 onMouseEnter: (e) => {
                                   setHoveredEvent(event.id);
@@ -706,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",
@@ -721,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: {
@@ -736,7 +819,7 @@ const ChartView = memo(function ChartView2({
                                         left: 0,
                                         right: 0,
                                         height: 2,
-                                        backgroundColor: event.color,
+                                        backgroundColor: teamAccent.color,
                                         borderRadius: "4px 4px 0 0",
                                         zIndex: 1,
                                         pointerEvents: "none"
@@ -749,7 +832,7 @@ const ChartView = memo(function ChartView2({
                                     {
                                       style: {
                                         flex: 1,
-                                        padding: `${event.color ? 6 : 4}px 8px 4px 8px`,
+                                        padding: `${teamAccent ? 6 : 4}px 8px 4px 8px`,
                                         overflow: "hidden",
                                         minWidth: 0,
                                         display: "flex",
@@ -830,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: [
@@ -862,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: [
@@ -913,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",
         {
@@ -923,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"
           },
@@ -982,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",
@@ -1265,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);
@@ -1280,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
@@ -1313,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",
         {
@@ -1330,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)"
@@ -1390,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",
@@ -1489,16 +1585,39 @@ const ScatterView = memo(function ScatterView2({
       ` })
   ] });
 });
-const TimelineFiltersToolbar = memo(function TimelineFiltersToolbar2({
+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,
-  defaultExpanded
+  events,
+  expanded,
+  teamLabel
 }) {
   const { tokens, theme } = useTheme();
   const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const chipCount = countTimelineFilterChips(filter);
+  const accentColor = tokens.colors.accent.primary;
+  const teamOptions = useMemo(() => buildTeamFilterOptions(events, tokens, teamLabel), [events, tokens, teamLabel]);
   const patch = useCallback(
     (partial) => {
       onFilterChange(normalizeTimelineFilter({ ...filter, ...partial }));
@@ -1524,234 +1643,181 @@ const TimelineFiltersToolbar = memo(function TimelineFiltersToolbar2({
     },
     [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"
-  });
+  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: "12px 20px",
+        padding: `${tokens.spacing.smd} ${tokens.spacing.md}`,
         borderBottom: `1px solid ${tokens.colors.border.muted}`,
-        backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.elevated,
-        ...isTransparentTheme && { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" }
+        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",
-              alignItems: "center",
-              gap: 10
+              gap: `${tokens.spacing.smd} ${tokens.spacing.lg}`,
+              alignItems: "flex-start"
             },
             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("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);
+                }) })
               ] }),
-              /* @__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(
+              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",
-                      onClick: () => toggleTrack(t.id),
-                      style: pillBase(active),
-                      children: t.label
+                      "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 })
+                      ]
                     },
-                    t.id
+                    opt.key
                   );
                 }) })
-              ] }) : 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
             ]
           }
-        ) : 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
       ]
     }
   );
@@ -1773,7 +1839,7 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
   timeFormat = "absolute",
   zoomable = false,
   initialZoom = 1,
-  showFilters: _showFilters = false,
+  showFilters: _showFilters = true,
   filtersDefaultExpanded = false,
   hideEmptyTracksWhenFiltered = true,
   filter: _filter,
@@ -1784,14 +1850,20 @@ 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);
@@ -1800,6 +1872,12 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
     },
     [_filter, _onFilterChange]
   );
+  const patchFilter = useCallback(
+    (partial) => {
+      setFilter(normalizeTimelineFilter({ ...filter, ...partial }));
+    },
+    [filter, setFilter]
+  );
   const viewMode = controlledViewMode ?? internalViewMode;
   const handleViewModeChange = useCallback((mode) => {
     setInternalViewMode(mode);
@@ -1883,204 +1961,321 @@ 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__ */ jsx(
-                "h3",
-                {
-                  style: {
-                    margin: 0,
-                    fontSize: "1rem",
-                    fontWeight: 500,
-                    // AstroUXDS medium (was 600)
-                    color: tokens.colors.text.primary
-                  },
-                  children: countLabel
-                }
-              ),
-              /* @__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(
-          TimelineFiltersToolbar,
+          TimelineFiltersPanel,
           {
             filter,
             onFilterChange: setFilter,
             trackOptions: trackOptionsForToolbar,
-            defaultExpanded: filtersDefaultExpanded
+            events,
+            expanded: filtersExpanded,
+            teamLabel
           }
         ) : null,
         loading && /* @__PURE__ */ jsx(
@@ -2094,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",
@@ -2233,8 +2428,13 @@ const UnifiedTimeline = memo(function UnifiedTimeline2({
   );
 });
 export {
+  TIMELINE_FILTER_TEAM_LEGACY,
+  TIMELINE_FILTER_TEAM_NONE,
   UnifiedTimeline,
   getTimelineEventDisplayStatus,
+  getTimelineTeamAccent,
+  getTimelineTeamDisplayLabel,
+  getTimelineTeamFilterKey,
   isTimelineFilterActive,
   matchesTimelineFilter
 };