@zendir/ui 0.5.0 → 0.6.1

package/dist/react/astro/UnifiedTimeline.js

@@ -1,1196 +1,1186 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { memo, useState, useCallback, useMemo, useRef, useEffect } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
-import { classNames, safeAccentText } from "../utils/index.js";
-import { useCategoryPalette } from "../context/CategoryContext.js";
 import { Icon } from "../core/display/Icon.js";
-import { Badge } from "../core/display/Badge.js";
-import { Tooltip } from "../core/overlays/Tooltip.js";
+import { classNames, safeAccentText } from "../utils/index.js";
 import { Button } from "../core/inputs/Button.js";
 import { useBreakpoint } from "../core/layout/useBreakpoint.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,
-  /** Current-time playhead line — above sticky headers and events */
-  playhead: 25,
-  /** Loading overlay covering chart content */
-  loadingOverlay: 100,
-  /** Floating tooltips — above all chart chrome */
-  tooltip: 1e3
+import { Tooltip } from "../core/overlays/Tooltip.js";
+import { Badge } from "../core/display/Badge.js";
+import { useCategoryPalette } from "../context/CategoryContext.js";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/astro/UnifiedTimeline.tsx
+/**
+* @zendir/ui - UnifiedTimeline Component
+*
+* Enterprise-grade unified timeline with seamless view switching between
+* Gantt chart view and Event list view.
+*
+* Design Philosophy (Apple/Google inspired):
+* - Single component, multiple views
+* - Smooth transitions between views
+* - Consistent data model
+* - Flexible for teams and single user
+*
+* @example
+* ```tsx
+* <UnifiedTimeline
+*   title="Mission Timeline"
+*   events={events}
+*   tracks={tracks}
+*   defaultView="list"
+* />
+* ```
+*/
+var 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,
+	/** Current-time playhead line — above sticky headers and events */
+	playhead: 25,
+	/** 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__";
+/** Filter key for events with no team accent (use with `TimelineFilter.teams`). */
+var TIMELINE_FILTER_TEAM_NONE = "__zendir_team_none__";
+/** Filter key for legacy accent color only (no structured `team.id`). */
+var TIMELINE_FILTER_TEAM_LEGACY = "__zendir_team_legacy__";
+/** Resolved team accent for rendering (from `event.team` or legacy `event.color`). */
 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;
+	const t = event.team;
+	if (t?.color) return {
+		color: t.color,
+		id: t.id,
+		label: t.label
+	};
+	if (event.color) return { color: event.color };
+	return null;
 }
+/** Label for team row in tooltips (id / label / arguments.Team / badge). */
 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";
+	if (accent.label) return accent.label;
+	if (accent.id !== void 0 && accent.id !== "") return String(accent.id);
+	const argsTeam = event.arguments?.Team;
+	if (argsTeam !== void 0 && argsTeam !== "") return String(argsTeam);
+	return event.badge || "Team";
 }
+/** Stable key for team filter pills (`TimelineFilter.teams`). */
 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 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"
+var ALL_TIMELINE_STATUSES = [
+	"off",
+	"standby",
+	"normal",
+	"caution",
+	"serious",
+	"critical"
 ];
+/** Display status used for filtering and markers (badgeVariant overrides raw status when set). */
 function getTimelineEventDisplayStatus(event) {
-  if (event.badgeVariant && event.badgeVariant !== "default" && event.badgeVariant !== "primary") {
-    return event.badgeVariant;
-  }
-  return event.status ?? "normal";
+	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
-  );
+	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;
+	const o = {};
+	const s = f.search?.trim();
+	if (s) o.search = s;
+	if (f.tracks?.length) o.tracks = [...f.tracks];
+	if (f.status?.length) o.status = [...f.status];
+	if (f.eventShape && f.eventShape !== "all") o.eventShape = f.eventShape;
+	if (f.teams?.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;
+	if (!isTimelineFilterActive(filter)) return true;
+	if (filter.tracks?.length) {
+		const tid = event.track ?? "default";
+		if (!filter.tracks.includes(tid)) return false;
+	}
+	if (filter.status?.length) {
+		const ds = getTimelineEventDisplayStatus(event);
+		if (!filter.status.includes(ds)) return false;
+	}
+	const q = filter.search?.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(" ") : "";
+		if (![
+			event.title,
+			event.subtitle,
+			event.badge,
+			event.track,
+			argStr,
+			teamHay
+		].filter(Boolean).join(" ").toLowerCase().includes(q)) return false;
+	}
+	if (filter.eventShape === "point") {
+		const endT = event.end?.getTime();
+		const st = event.start.getTime();
+		if (endT != null && endT > st) return false;
+	}
+	if (filter.eventShape === "range") {
+		const endT = event.end?.getTime();
+		const st = event.start.getTime();
+		if (endT == null || endT <= st) return false;
+	}
+	if (filter.teams?.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;
+	let n = 0;
+	if (filter.search?.trim()) n++;
+	if (filter.tracks?.length) n++;
+	if (filter.status?.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,
-  size = 12
-}) {
-  const effectiveStatus = status ?? "normal";
-  const glow = `${fillColor}60`;
-  switch (effectiveStatus) {
-    case "off":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3", fill: fillColor }) });
-    case "standby":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: fillColor, strokeWidth: "2" }) });
-    case "normal":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: fillColor }) });
-    case "caution":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "10", fill: fillColor }) });
-    case "serious":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("polygon", { points: "6,1 11,6 6,11 1,6", fill: fillColor }) });
-    case "critical":
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("polygon", { points: "6,11 1,2 11,2", fill: fillColor }) });
-    default:
-      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { flexShrink: 0, filter: `drop-shadow(0 0 4px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: fillColor }) });
-  }
+/** Astro UX status shapes per official spec: filled circle (normal), ring (standby), small circle (off), square (caution), diamond (serious), triangle (critical) */
+function TimelineStatusMarker({ status, fillColor, size = 12 }) {
+	const effectiveStatus = status ?? "normal";
+	const glow = `${fillColor}60`;
+	switch (effectiveStatus) {
+		case "off": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: {
+				flexShrink: 0,
+				filter: `drop-shadow(0 0 4px ${glow})`
+			},
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "3",
+				fill: fillColor
+			})
+		});
+		case "standby": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: {
+				flexShrink: 0,
+				filter: `drop-shadow(0 0 4px ${glow})`
+			},
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "3.5",
+				fill: "none",
+				stroke: fillColor,
+				strokeWidth: "2"
+			})
+		});
+		case "normal": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: {
+				flexShrink: 0,
+				filter: `drop-shadow(0 0 4px ${glow})`
+			},
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "5",
+				fill: fillColor
+			})
+		});
+		case "caution": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: {
+				flexShrink: 0,
+				filter: `drop-shadow(0 0 4px ${glow})`
+			},
+			children: /* @__PURE__ */ jsx("rect", {
+				x: "1",
+				y: "1",
+				width: "10",
+				height: "10",
+				fill: fillColor
+			})
+		});
+		case "serious": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: {
+				flexShrink: 0,
+				filter: `drop-shadow(0 0 4px ${glow})`
+			},
+			children: /* @__PURE__ */ jsx("polygon", {
+				points: "6,1 11,6 6,11 1,6",
+				fill: fillColor
+			})
+		});
+		case "critical": return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: {
+				flexShrink: 0,
+				filter: `drop-shadow(0 0 4px ${glow})`
+			},
+			children: /* @__PURE__ */ jsx("polygon", {
+				points: "6,11 1,2 11,2",
+				fill: fillColor
+			})
+		});
+		default: return /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			width: size,
+			height: size,
+			style: {
+				flexShrink: 0,
+				filter: `drop-shadow(0 0 4px ${glow})`
+			},
+			children: /* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "6",
+				r: "5",
+				fill: fillColor
+			})
+		});
+	}
 }
-const EventListItem = memo(function EventListItem2({
-  event,
-  isLast,
-  onEventClick
-}) {
-  const { tokens } = useTheme();
-  const [expanded, setExpanded] = useState(false);
-  const [hovered, setHovered] = useState(false);
-  const hasArguments = event.arguments && Object.keys(event.arguments).length > 0;
-  const argumentCount = hasArguments ? Object.keys(event.arguments).length : 0;
-  const timestamps = event.timestamps || [
-    { label: "Time", value: event.start.toISOString().replace("T", " ").substring(0, 19) + " UTC", status: event.status }
-  ];
-  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",
-      {
-        style: {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          width: "20px",
-          flexShrink: 0
-        },
-        children: [
-          /* @__PURE__ */ jsx("div", { style: { marginTop: "8px" }, children: /* @__PURE__ */ jsx(TimelineStatusMarker, { status: displayStatus, fillColor: markerColor, size: 12 }) }),
-          !isLast && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                width: "2px",
-                flex: 1,
-                backgroundColor: `${tokens.colors.accent.primary}30`,
-                marginTop: "4px"
-              }
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        onMouseEnter: () => setHovered(true),
-        onMouseLeave: () => setHovered(false),
-        onClick: () => onEventClick == null ? void 0 : onEventClick(event),
-        style: {
-          position: "relative",
-          flex: 1,
-          marginBottom: "16px",
-          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,
-          cursor: onEventClick ? "pointer" : "default",
-          transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
-          overflow: "hidden",
-          boxShadow: hovered ? `0 4px 20px ${tokens.colors.accent.primary}15, 0 0 0 1px ${tokens.colors.accent.primary}20` : "none"
-        },
-        children: [
-          teamAccent && /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                right: 0,
-                height: 3,
-                backgroundColor: teamAccent.color
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                marginBottom: timestamps.length ? "12px" : 0
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "h4",
-                  {
-                    style: {
-                      margin: 0,
-                      fontSize: "0.875rem",
-                      fontWeight: 500,
-                      // AstroUXDS medium (was 600)
-                      color: tokens.colors.text.primary,
-                      letterSpacing: "0.02em",
-                      textTransform: "uppercase"
-                    },
-                    children: event.title
-                  }
-                ),
-                event.badge && /* @__PURE__ */ jsx(
-                  Badge,
-                  {
-                    variant: displayStatus === "caution" || displayStatus === "serious" ? "filled" : "outline",
-                    size: "small",
-                    status: displayStatus === "critical" ? "critical" : displayStatus === "serious" ? "serious" : displayStatus === "caution" ? "caution" : displayStatus === "normal" ? "normal" : void 0,
-                    children: event.badge
-                  }
-                )
-              ]
-            }
-          ),
-          event.subtitle && /* @__PURE__ */ jsx(
-            "p",
-            {
-              style: {
-                margin: "0 0 12px 0",
-                fontSize: "0.8125rem",
-                color: tokens.colors.text.secondary
-              },
-              children: event.subtitle
-            }
-          ),
-          timestamps.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: timestamps.map((ts, index) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                fontSize: "0.8125rem"
-              },
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "8px",
-                      color: tokens.colors.text.secondary
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        TimelineStatusMarker,
-                        {
-                          status: ts.status ?? "normal",
-                          fillColor: ts.status ? tokens.colors.status[ts.status] : tokens.colors.accent.primary,
-                          size: 6
-                        }
-                      ),
-                      ts.label
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontFamily: tokens.typography.fontFamily.mono,
-                      color: tokens.colors.text.primary,
-                      fontWeight: 500
-                    },
-                    children: ts.value
-                  }
-                )
-              ]
-            },
-            index
-          )) }),
-          hasArguments && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setExpanded(!expanded);
-                },
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "6px",
-                  marginTop: "12px",
-                  padding: 0,
-                  background: "none",
-                  border: "none",
-                  color: tokens.colors.text.secondary,
-                  fontSize: "0.75rem",
-                  cursor: "pointer",
-                  transition: "color 150ms ease"
-                },
-                onMouseEnter: (e) => e.currentTarget.style.color = tokens.colors.accent.primary,
-                onMouseLeave: (e) => e.currentTarget.style.color = tokens.colors.text.secondary,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      width: "10",
-                      height: "10",
-                      viewBox: "0 0 24 24",
-                      fill: "currentColor",
-                      style: {
-                        transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
-                        transition: "transform 150ms ease"
-                      },
-                      children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
-                    }
-                  ),
-                  expanded ? "Hide" : "Show",
-                  " Arguments (",
-                  argumentCount,
-                  ")"
-                ]
-              }
-            ),
-            expanded && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  marginTop: "12px",
-                  borderTop: `1px solid ${tokens.colors.border.muted}`,
-                  paddingTop: "12px",
-                  animation: "zendir-expand 200ms ease-out"
-                },
-                children: [
-                  /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-expand { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }` }),
-                  Object.entries(event.arguments).map(([key, value]) => /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        padding: "8px 12px",
-                        marginBottom: "4px",
-                        backgroundColor: tokens.colors.background.elevated,
-                        borderRadius: tokens.borderRadius.md,
-                        fontSize: "0.8125rem"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary }, children: key }),
-                        /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            style: {
-                              fontFamily: tokens.typography.fontFamily.mono,
-                              color: typeof value === "boolean" ? value ? tokens.colors.status.normal : tokens.colors.text.tertiary : tokens.colors.text.primary,
-                              fontWeight: 500
-                            },
-                            children: String(value)
-                          }
-                        )
-                      ]
-                    },
-                    key
-                  ))
-                ]
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
+var EventListItem = memo(function EventListItem({ event, isLast, onEventClick }) {
+	const { tokens } = useTheme();
+	const [expanded, setExpanded] = useState(false);
+	const [hovered, setHovered] = useState(false);
+	const hasArguments = event.arguments && Object.keys(event.arguments).length > 0;
+	const argumentCount = hasArguments ? Object.keys(event.arguments).length : 0;
+	const timestamps = event.timestamps || [{
+		label: "Time",
+		value: event.start.toISOString().replace("T", " ").substring(0, 19) + " UTC",
+		status: event.status
+	}];
+	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", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				width: "20px",
+				flexShrink: 0
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				style: { marginTop: "8px" },
+				children: /* @__PURE__ */ jsx(TimelineStatusMarker, {
+					status: displayStatus,
+					fillColor: markerColor,
+					size: 12
+				})
+			}), !isLast && /* @__PURE__ */ jsx("div", { style: {
+				width: "2px",
+				flex: 1,
+				backgroundColor: `${tokens.colors.accent.primary}30`,
+				marginTop: "4px"
+			} })]
+		}), /* @__PURE__ */ jsxs("div", {
+			onMouseEnter: () => setHovered(true),
+			onMouseLeave: () => setHovered(false),
+			onClick: () => onEventClick?.(event),
+			style: {
+				position: "relative",
+				flex: 1,
+				marginBottom: "16px",
+				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,
+				cursor: onEventClick ? "pointer" : "default",
+				transition: "all 200ms cubic-bezier(0.4, 0, 0.2, 1)",
+				overflow: "hidden",
+				boxShadow: hovered ? `0 4px 20px ${tokens.colors.accent.primary}15, 0 0 0 1px ${tokens.colors.accent.primary}20` : "none"
+			},
+			children: [
+				teamAccent && /* @__PURE__ */ jsx("div", { style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					right: 0,
+					height: 3,
+					backgroundColor: teamAccent.color
+				} }),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						marginBottom: timestamps.length ? "12px" : 0
+					},
+					children: [/* @__PURE__ */ jsx("h4", {
+						style: {
+							margin: 0,
+							fontSize: "0.875rem",
+							fontWeight: 500,
+							color: tokens.colors.text.primary,
+							letterSpacing: "0.02em",
+							textTransform: "uppercase"
+						},
+						children: event.title
+					}), event.badge && /* @__PURE__ */ jsx(Badge, {
+						variant: displayStatus === "caution" || displayStatus === "serious" ? "filled" : "outline",
+						size: "small",
+						status: displayStatus === "critical" ? "critical" : displayStatus === "serious" ? "serious" : displayStatus === "caution" ? "caution" : displayStatus === "normal" ? "normal" : void 0,
+						children: event.badge
+					})]
+				}),
+				event.subtitle && /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: "0 0 12px 0",
+						fontSize: "0.8125rem",
+						color: tokens.colors.text.secondary
+					},
+					children: event.subtitle
+				}),
+				timestamps.length > 0 && /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: "6px"
+					},
+					children: timestamps.map((ts, index) => /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							fontSize: "0.8125rem"
+						},
+						children: [/* @__PURE__ */ jsxs("span", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "8px",
+								color: tokens.colors.text.secondary
+							},
+							children: [/* @__PURE__ */ jsx(TimelineStatusMarker, {
+								status: ts.status ?? "normal",
+								fillColor: ts.status ? tokens.colors.status[ts.status] : tokens.colors.accent.primary,
+								size: 6
+							}), ts.label]
+						}), /* @__PURE__ */ jsx("span", {
+							style: {
+								fontFamily: tokens.typography.fontFamily.mono,
+								color: tokens.colors.text.primary,
+								fontWeight: 500
+							},
+							children: ts.value
+						})]
+					}, index))
+				}),
+				hasArguments && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						setExpanded(!expanded);
+					},
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "6px",
+						marginTop: "12px",
+						padding: 0,
+						background: "none",
+						border: "none",
+						color: tokens.colors.text.secondary,
+						fontSize: "0.75rem",
+						cursor: "pointer",
+						transition: "color 150ms ease"
+					},
+					onMouseEnter: (e) => e.currentTarget.style.color = tokens.colors.accent.primary,
+					onMouseLeave: (e) => e.currentTarget.style.color = tokens.colors.text.secondary,
+					children: [
+						/* @__PURE__ */ jsx("svg", {
+							width: "10",
+							height: "10",
+							viewBox: "0 0 24 24",
+							fill: "currentColor",
+							style: {
+								transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+								transition: "transform 150ms ease"
+							},
+							children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+						}),
+						expanded ? "Hide" : "Show",
+						" Arguments (",
+						argumentCount,
+						")"
+					]
+				}), expanded && /* @__PURE__ */ jsxs("div", {
+					style: {
+						marginTop: "12px",
+						borderTop: `1px solid ${tokens.colors.border.muted}`,
+						paddingTop: "12px",
+						animation: "zendir-expand 200ms ease-out"
+					},
+					children: [/* @__PURE__ */ jsx("style", { children: `@keyframes zendir-expand { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }` }), Object.entries(event.arguments).map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							padding: "8px 12px",
+							marginBottom: "4px",
+							backgroundColor: tokens.colors.background.elevated,
+							borderRadius: tokens.borderRadius.md,
+							fontSize: "0.8125rem"
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							style: { color: tokens.colors.text.secondary },
+							children: key
+						}), /* @__PURE__ */ jsx("span", {
+							style: {
+								fontFamily: tokens.typography.fontFamily.mono,
+								color: typeof value === "boolean" ? value ? tokens.colors.status.normal : tokens.colors.text.tertiary : tokens.colors.text.primary,
+								fontWeight: 500
+							},
+							children: String(value)
+						})]
+					}, key))]
+				})] })
+			]
+		})]
+	});
 });
-const ChartView = memo(function ChartView2({
-  events,
-  tracks,
-  start,
-  end,
-  trackHeight,
-  onEventClick,
-  zoom,
-  showPlayhead = true,
-  playheadTime,
-  onPlayheadChange: _onPlayheadChange,
-  showDayMarkers = true,
-  timeFormat = "absolute"
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const [hoveredEvent, setHoveredEvent] = useState(null);
-  const [tooltipPos, setTooltipPos] = useState(null);
-  const scrollContainerRef = useRef(null);
-  const [scrollX, setScrollX] = useState(0);
-  const totalDuration = end.getTime() - start.getTime();
-  const trackLabelWidth = 130;
-  const timeLabels = useMemo(() => {
-    const labels = [];
-    const baseLabelCount = 6;
-    const labelCount = Math.round(baseLabelCount * zoom);
-    for (let i = 0; i <= labelCount; i++) {
-      const percent = i / labelCount * 100;
-      const time = new Date(start.getTime() + totalDuration * percent / 100);
-      labels.push({ time, percent });
-    }
-    return labels;
-  }, [start, totalDuration, zoom]);
-  const eventsByTrack = useMemo(() => {
-    const grouped = {};
-    tracks.forEach((track) => {
-      grouped[track.id] = events.filter((e) => e.track === track.id);
-    });
-    const unassigned = events.filter((e) => !e.track);
-    if (unassigned.length > 0 && tracks.length > 0) {
-      grouped[tracks[0].id] = [...grouped[tracks[0].id] || [], ...unassigned];
-    }
-    return grouped;
-  }, [events, tracks]);
-  const eventOverlaps = useMemo(() => {
-    const overlaps = {};
-    Object.entries(eventsByTrack).forEach(([_trackId, trackEvents]) => {
-      const sorted = [...trackEvents].sort((a, b) => a.start.getTime() - b.start.getTime());
-      sorted.forEach((event) => {
-        const eventStart = event.start.getTime();
-        const eventEnd = (event.end || new Date(eventStart + 3e5)).getTime();
-        const overlapping = sorted.filter((other) => {
-          if (other.id === event.id) return false;
-          const otherStart = other.start.getTime();
-          const otherEnd = (other.end || new Date(otherStart + 3e5)).getTime();
-          return eventStart < otherEnd && eventEnd > otherStart;
-        });
-        let stackIndex = 0;
-        if (overlapping.length > 0) {
-          const usedIndices = overlapping.filter((o) => overlaps[o.id] !== void 0).map((o) => overlaps[o.id].stackIndex);
-          while (usedIndices.includes(stackIndex)) {
-            stackIndex++;
-          }
-        }
-        overlaps[event.id] = {
-          stackIndex,
-          overlapCount: overlapping.length,
-          overlappingIds: overlapping.map((o) => o.id)
-        };
-      });
-    });
-    return overlaps;
-  }, [eventsByTrack]);
-  const dayMarkers = useMemo(() => {
-    const markers = [];
-    const current = new Date(start);
-    current.setUTCHours(0, 0, 0, 0);
-    if (current.getTime() < start.getTime()) {
-      current.setUTCDate(current.getUTCDate() + 1);
-    }
-    while (current.getTime() <= end.getTime()) {
-      const percent = (current.getTime() - start.getTime()) / totalDuration * 100;
-      if (percent >= 0 && percent <= 100) {
-        markers.push({ time: new Date(current), percent });
-      }
-      current.setUTCDate(current.getUTCDate() + 1);
-    }
-    return markers;
-  }, [start, end, totalDuration]);
-  const formatTime = (date, showSeconds = false) => {
-    if (timeFormat === "utc") {
-      const h = String(date.getUTCHours()).padStart(2, "0");
-      const m = String(date.getUTCMinutes()).padStart(2, "0");
-      if (showSeconds) {
-        const s = String(date.getUTCSeconds()).padStart(2, "0");
-        return `${h}:${m}:${s} UTC`;
-      }
-      return `${h}:${m} UTC`;
-    }
-    const options = {
-      hour: "2-digit",
-      minute: "2-digit",
-      ...showSeconds && { second: "2-digit" }
-    };
-    return date.toLocaleTimeString([], options);
-  };
-  const formatDuration = (ms) => {
-    const totalSeconds = Math.floor(ms / 1e3);
-    const hours = Math.floor(totalSeconds / 3600);
-    const minutes = Math.floor(totalSeconds % 3600 / 60);
-    const seconds = totalSeconds % 60;
-    if (hours > 0) return `${hours}h ${minutes}m`;
-    if (minutes > 0) return `${minutes}m ${seconds}s`;
-    return `${seconds}s`;
-  };
-  const formatUTC = (date) => {
-    return date.toISOString().replace("T", " ").substring(0, 19) + " UTC";
-  };
-  const getEventPosition = (event) => {
-    const eventStart = event.start.getTime();
-    const eventEnd = (event.end || new Date(eventStart + 3e5)).getTime();
-    const leftPercent = (eventStart - start.getTime()) / totalDuration * 100;
-    const widthPercent = (eventEnd - eventStart) / totalDuration * 100;
-    return {
-      left: `${Math.max(0, Math.min(100, leftPercent))}%`,
-      width: `${Math.max(2, Math.min(100 - leftPercent, widthPercent))}%`
-    };
-  };
-  const getStatusColor = (status) => {
-    if (!status) return tokens.colors.accent.primary;
-    return tokens.colors.status[status] || tokens.colors.accent.primary;
-  };
-  const 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",
-      standby: "Standby",
-      caution: "Caution",
-      serious: "Serious",
-      critical: "Critical",
-      off: "Off"
-    };
-    return labels[status || ""] || "Unknown";
-  };
-  const currentPlayheadTime = playheadTime || /* @__PURE__ */ new Date();
-  const now = currentPlayheadTime.getTime();
-  const playheadPercent = showPlayhead && now >= start.getTime() && now <= end.getTime() ? (now - start.getTime()) / totalDuration * 100 : null;
-  const lastAutoScrollRef = useRef(0);
-  useEffect(() => {
-    if (playheadPercent === null) return;
-    const container = scrollContainerRef.current;
-    if (!container) return;
-    const contentWidth = container.scrollWidth;
-    const viewportWidth = container.clientWidth;
-    if (contentWidth <= viewportWidth) return;
-    const timelineContentWidth = contentWidth - trackLabelWidth;
-    const playheadPx = trackLabelWidth + playheadPercent / 100 * timelineContentWidth;
-    const scrollLeft = container.scrollLeft;
-    const visibleLeft = scrollLeft + trackLabelWidth;
-    const visibleRight = scrollLeft + viewportWidth;
-    const margin = viewportWidth * 0.15;
-    if (playheadPx > visibleRight - margin || playheadPx < visibleLeft + margin) {
-      const nowMs = Date.now();
-      if (nowMs - lastAutoScrollRef.current < 300) return;
-      lastAutoScrollRef.current = nowMs;
-      const targetScroll = playheadPx - viewportWidth * 0.5;
-      container.scrollTo({ left: Math.max(0, targetScroll), behavior: "smooth" });
-    }
-  }, [playheadPercent, trackLabelWidth]);
-  const hoveredEventData = hoveredEvent ? events.find((e) => e.id === hoveredEvent) : null;
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: scrollContainerRef,
-        className: "zendir-timeline-scroll",
-        onScroll: (e) => setScrollX(e.currentTarget.scrollLeft),
-        style: {
-          overflowX: "auto",
-          overflowY: "hidden",
-          position: "relative"
-        },
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              width: `${zoom * 100}%`,
-              minWidth: "100%",
-              position: "relative"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    height: 32,
-                    borderBottom: `1px solid ${tokens.colors.accent.primary}20`,
-                    position: "sticky",
-                    top: 0,
-                    zIndex: Z.trackEventHovered,
-                    backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
-                    ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" }
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          width: trackLabelWidth,
-                          flexShrink: 0,
-                          position: "sticky",
-                          left: 0,
-                          zIndex: 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`,
-                          display: "flex",
-                          alignItems: "center",
-                          paddingLeft: 12,
-                          fontSize: "0.625rem",
-                          fontWeight: 500,
-                          // AstroUXDS medium (was 600)
-                          color: tokens.colors.text.tertiary,
-                          textTransform: "uppercase",
-                          letterSpacing: "0.08em"
-                        },
-                        children: "Tracks"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { style: { flex: 1, position: "relative" }, children: [
-                      showDayMarkers && dayMarkers.map((marker, index) => /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          style: {
-                            position: "absolute",
-                            left: `${marker.percent}%`,
-                            top: 0,
-                            height: "100%",
-                            display: "flex",
-                            flexDirection: "column",
-                            alignItems: "center",
-                            zIndex: Z.dayMarker
-                          },
-                          children: /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              style: {
-                                fontSize: "0.5rem",
-                                color: tokens.colors.status.caution,
-                                fontFamily: tokens.typography.fontFamily.mono,
-                                whiteSpace: "nowrap",
-                                backgroundColor: `${tokens.colors.status.caution}20`,
-                                padding: "1px 4px",
-                                borderRadius: 2,
-                                marginTop: 2
-                              },
-                              children: marker.time.toLocaleDateString([], { month: "short", day: "numeric" })
-                            }
-                          )
-                        },
-                        `day-${index}`
-                      )),
-                      timeLabels.map((label, index) => /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          style: {
-                            position: "absolute",
-                            left: `${label.percent}%`,
-                            transform: "translateX(-50%)",
-                            top: 8,
-                            fontSize: "0.6875rem",
-                            color: tokens.colors.text.tertiary,
-                            fontFamily: tokens.typography.fontFamily.mono,
-                            whiteSpace: "nowrap"
-                          },
-                          children: formatTime(label.time)
-                        },
-                        index
-                      ))
-                    ] })
-                  ]
-                }
-              ),
-              tracks.map((track) => /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  "aria-label": track.label,
-                  style: {
-                    display: "flex",
-                    height: track.height || trackHeight,
-                    borderBottom: `1px solid ${tokens.colors.accent.primary}10`
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          width: trackLabelWidth,
-                          flexShrink: 0,
-                          position: "sticky",
-                          left: 0,
-                          zIndex: Z.sticky,
-                          display: "flex",
-                          alignItems: "center",
-                          paddingLeft: 12,
-                          fontSize: "0.6875rem",
-                          fontWeight: 500,
-                          // AstroUXDS medium (was 600)
-                          color: tokens.colors.text.secondary,
-                          textTransform: "uppercase",
-                          letterSpacing: "0.05em",
-                          backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
-                          ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
-                          borderRight: `1px solid ${tokens.colors.border.muted}30`,
-                          boxShadow: "2px 0 8px rgba(0,0,0,0.15)"
-                        },
-                        children: track.label
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        style: {
-                          flex: 1,
-                          position: "relative",
-                          height: "100%"
-                        },
-                        children: [
-                          showDayMarkers && dayMarkers.map((marker, index) => /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              style: {
-                                position: "absolute",
-                                left: `${marker.percent}%`,
-                                top: 0,
-                                bottom: 0,
-                                width: 1,
-                                backgroundColor: `${tokens.colors.status.caution}25`,
-                                zIndex: Z.trackEvent,
-                                pointerEvents: "none"
-                              }
-                            },
-                            `day-line-${index}`
-                          )),
-                          (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;
-                            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);
-                                  const rect = e.currentTarget.getBoundingClientRect();
-                                  setTooltipPos({ x: rect.left + rect.width / 2, y: rect.top - 8 });
-                                },
-                                onMouseLeave: () => {
-                                  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",
-                                  left,
-                                  width,
-                                  minWidth: 50,
-                                  height: cardHeight,
-                                  top: Math.min(baseTop + stackOffset, (track.height || trackHeight) - cardHeight - 4),
-                                  backgroundColor: "rgba(11, 26, 40, 0.95)",
-                                  border: `1px solid ${isHovered ? color : `${tokens.colors.accent.primary}30`}`,
-                                  borderRadius: "4px",
-                                  cursor: onEventClick ? "pointer" : "default",
-                                  display: "flex",
-                                  alignItems: "center",
-                                  overflow: "hidden",
-                                  zIndex: isHovered ? 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: [
-                                  teamAccent ? /* @__PURE__ */ jsx(
-                                    "div",
-                                    {
-                                      style: {
-                                        position: "absolute",
-                                        top: 0,
-                                        left: 0,
-                                        right: 0,
-                                        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: `${teamAccent ? 6 : 4}px 8px 4px 8px`,
-                                        overflow: "hidden",
-                                        minWidth: 0,
-                                        display: "flex",
-                                        flexDirection: "column",
-                                        justifyContent: "center"
-                                      },
-                                      children: [
-                                        /* @__PURE__ */ jsxs(
-                                          "div",
-                                          {
-                                            style: {
-                                              display: "flex",
-                                              alignItems: "center",
-                                              gap: 6,
-                                              minWidth: 0
-                                            },
-                                            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(
-                                          "div",
-                                          {
-                                            style: {
-                                              fontSize: "0.5625rem",
-                                              color: "rgba(255, 255, 255, 0.5)",
-                                              whiteSpace: "nowrap",
-                                              overflow: "hidden",
-                                              textOverflow: "ellipsis",
-                                              marginTop: 1,
-                                              paddingLeft: 16
-                                            },
-                                            children: event.subtitle
-                                          }
-                                        )
-                                      ]
-                                    }
-                                  ),
-                                  hasOverlap && overlap.stackIndex === 0 && /* @__PURE__ */ jsxs(
-                                    "div",
-                                    {
-                                      style: {
-                                        position: "absolute",
-                                        top: -6,
-                                        right: -6,
-                                        minWidth: 18,
-                                        height: 18,
-                                        backgroundColor: tokens.colors.status.caution,
-                                        borderRadius: 9,
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        fontSize: "0.625rem",
-                                        fontWeight: 700,
-                                        color: "#000",
-                                        boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
-                                        zIndex: Z.sticky - 5
-                                      },
-                                      title: `${overlap.overlapCount + 1} overlapping events`,
-                                      children: [
-                                        "+",
-                                        overlap.overlapCount
-                                      ]
-                                    }
-                                  )
-                                ]
-                              },
-                              event.id
-                            );
-                          })
-                        ]
-                      }
-                    )
-                  ]
-                },
-                track.id
-              )),
-              playheadPercent !== null && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: 0,
-                    bottom: 0,
-                    left: `calc(${trackLabelWidth}px + (100% - ${trackLabelWidth}px) * ${playheadPercent} / 100)`,
-                    width: 2,
-                    backgroundColor: tokens.colors.accent.primary,
-                    boxShadow: `0 0 12px ${tokens.colors.accent.primary}`,
-                    zIndex: Z.playhead,
-                    pointerEvents: "none",
-                    transition: "left 0.4s linear"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          top: 22,
-                          left: -5,
-                          width: 12,
-                          height: 12,
-                          backgroundColor: tokens.colors.accent.primary,
-                          borderRadius: 2,
-                          transform: "rotate(45deg)",
-                          boxShadow: `0 0 8px ${tokens.colors.accent.primary}`
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          top: 4,
-                          left: "50%",
-                          transform: "translateX(-50%)",
-                          backgroundColor: tokens.colors.accent.primary,
-                          color: tokens.colors.background.base,
-                          fontSize: "0.5625rem",
-                          fontWeight: 500,
-                          // AstroUXDS medium (was 600)
-                          fontFamily: tokens.typography.fontFamily.mono,
-                          padding: "2px 6px",
-                          borderRadius: 3,
-                          whiteSpace: "nowrap",
-                          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
-                        },
-                        children: formatTime(currentPlayheadTime, true)
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    hoveredEventData && tooltipPos && (() => {
-      const tooltipColor = getStatusColor(hoveredEventData.status);
-      const teamTip = getTimelineTeamAccent(hoveredEventData);
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            position: "fixed",
-            left: tooltipPos.x,
-            top: tooltipPos.y,
-            transform: "translate(-50%, -100%)",
-            zIndex: Z.tooltip,
-            pointerEvents: "none",
-            animation: "zendir-tooltip-appear 150ms ease"
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  backgroundColor: "rgba(15, 23, 42, 0.98)",
-                  border: `1px solid ${tooltipColor}50`,
-                  borderRadius: tokens.borderRadius.md,
-                  padding: "12px 16px",
-                  minWidth: 220,
-                  maxWidth: 320,
-                  boxShadow: `0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px ${tooltipColor}30`,
-                  backdropFilter: "blur(12px)"
-                },
-                children: [
-                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
-                    /* @__PURE__ */ jsx(
-                      TimelineStatusMarker,
-                      {
-                        status: hoveredEventData.status,
-                        fillColor: tooltipColor,
-                        size: 10
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          fontSize: "0.75rem",
-                          fontWeight: 500,
-                          // AstroUXDS medium (was 600)
-                          color: tooltipColor,
-                          textTransform: "uppercase",
-                          letterSpacing: "0.05em"
-                        },
-                        children: getStatusLabel(hoveredEventData.status)
-                      }
-                    ),
-                    hoveredEventData.badge && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          marginLeft: "auto",
-                          fontSize: "0.625rem",
-                          fontWeight: 500,
-                          // AstroUXDS medium (was 600)
-                          padding: "2px 6px",
-                          borderRadius: tokens.borderRadius.sm,
-                          backgroundColor: `${tooltipColor}20`,
-                          color: tooltipColor
-                        },
-                        children: hoveredEventData.badge
-                      }
-                    )
-                  ] }),
-                  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",
-                    {
-                      style: {
-                        fontSize: "0.875rem",
-                        fontWeight: 500,
-                        // AstroUXDS medium (was 600)
-                        color: "#fff",
-                        marginBottom: 4
-                      },
-                      children: hoveredEventData.title
-                    }
-                  ),
-                  hoveredEventData.subtitle && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        fontSize: "0.75rem",
-                        color: "rgba(255, 255, 255, 0.6)",
-                        marginBottom: 12
-                      },
-                      children: hoveredEventData.subtitle
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      style: {
-                        display: "grid",
-                        gridTemplateColumns: "auto 1fr",
-                        gap: "6px 12px",
-                        fontSize: "0.6875rem",
-                        borderTop: `1px solid ${tokens.colors.border.muted}30`,
-                        paddingTop: 10
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Start:" }),
-                        /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.primary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTime(hoveredEventData.start, true) }),
-                        hoveredEventData.end && /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "End:" }),
-                          /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.primary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTime(hoveredEventData.end, true) }),
-                          /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Duration:" }),
-                          /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.accent.secondary, fontWeight: 500 }, children: formatDuration(hoveredEventData.end.getTime() - hoveredEventData.start.getTime()) })
-                        ] }),
-                        /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "UTC:" }),
-                        /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono, fontSize: "0.625rem" }, children: formatUTC(hoveredEventData.start) })
-                      ]
-                    }
-                  ),
-                  onEventClick && /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        marginTop: 10,
-                        paddingTop: 8,
-                        borderTop: `1px solid ${tokens.colors.border.muted}20`,
-                        fontSize: "0.625rem",
-                        color: tokens.colors.text.tertiary,
-                        textAlign: "center"
-                      },
-                      children: "Click for details"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  bottom: -6,
-                  left: "50%",
-                  transform: "translateX(-50%) rotate(45deg)",
-                  width: 12,
-                  height: 12,
-                  backgroundColor: "rgba(15, 23, 42, 0.98)",
-                  borderRight: `1px solid ${tooltipColor}50`,
-                  borderBottom: `1px solid ${tooltipColor}50`
-                }
-              }
-            )
-          ]
-        }
-      );
-    })(),
-    /* @__PURE__ */ jsx("style", { children: `
+var ChartView = memo(function ChartView({ events, tracks, start, end, trackHeight, onEventClick, zoom, showPlayhead = true, playheadTime, onPlayheadChange: _onPlayheadChange, showDayMarkers = true, timeFormat = "absolute" }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const [hoveredEvent, setHoveredEvent] = useState(null);
+	const [tooltipPos, setTooltipPos] = useState(null);
+	const scrollContainerRef = useRef(null);
+	const [scrollX, setScrollX] = useState(0);
+	const totalDuration = end.getTime() - start.getTime();
+	const trackLabelWidth = 130;
+	const timeLabels = useMemo(() => {
+		const labels = [];
+		const labelCount = Math.round(6 * zoom);
+		for (let i = 0; i <= labelCount; i++) {
+			const percent = i / labelCount * 100;
+			const time = new Date(start.getTime() + totalDuration * percent / 100);
+			labels.push({
+				time,
+				percent
+			});
+		}
+		return labels;
+	}, [
+		start,
+		totalDuration,
+		zoom
+	]);
+	const eventsByTrack = useMemo(() => {
+		const grouped = {};
+		tracks.forEach((track) => {
+			grouped[track.id] = events.filter((e) => e.track === track.id);
+		});
+		const unassigned = events.filter((e) => !e.track);
+		if (unassigned.length > 0 && tracks.length > 0) grouped[tracks[0].id] = [...grouped[tracks[0].id] || [], ...unassigned];
+		return grouped;
+	}, [events, tracks]);
+	const eventOverlaps = useMemo(() => {
+		const overlaps = {};
+		Object.entries(eventsByTrack).forEach(([_trackId, trackEvents]) => {
+			const sorted = [...trackEvents].sort((a, b) => a.start.getTime() - b.start.getTime());
+			sorted.forEach((event) => {
+				const eventStart = event.start.getTime();
+				const eventEnd = (event.end || new Date(eventStart + 3e5)).getTime();
+				const overlapping = sorted.filter((other) => {
+					if (other.id === event.id) return false;
+					const otherStart = other.start.getTime();
+					const otherEnd = (other.end || new Date(otherStart + 3e5)).getTime();
+					return eventStart < otherEnd && eventEnd > otherStart;
+				});
+				let stackIndex = 0;
+				if (overlapping.length > 0) {
+					const usedIndices = overlapping.filter((o) => overlaps[o.id] !== void 0).map((o) => overlaps[o.id].stackIndex);
+					while (usedIndices.includes(stackIndex)) stackIndex++;
+				}
+				overlaps[event.id] = {
+					stackIndex,
+					overlapCount: overlapping.length,
+					overlappingIds: overlapping.map((o) => o.id)
+				};
+			});
+		});
+		return overlaps;
+	}, [eventsByTrack]);
+	const dayMarkers = useMemo(() => {
+		const markers = [];
+		const current = new Date(start);
+		current.setUTCHours(0, 0, 0, 0);
+		if (current.getTime() < start.getTime()) current.setUTCDate(current.getUTCDate() + 1);
+		while (current.getTime() <= end.getTime()) {
+			const percent = (current.getTime() - start.getTime()) / totalDuration * 100;
+			if (percent >= 0 && percent <= 100) markers.push({
+				time: new Date(current),
+				percent
+			});
+			current.setUTCDate(current.getUTCDate() + 1);
+		}
+		return markers;
+	}, [
+		start,
+		end,
+		totalDuration
+	]);
+	const formatTime = (date, showSeconds = false) => {
+		if (timeFormat === "utc") {
+			const h = String(date.getUTCHours()).padStart(2, "0");
+			const m = String(date.getUTCMinutes()).padStart(2, "0");
+			if (showSeconds) return `${h}:${m}:${String(date.getUTCSeconds()).padStart(2, "0")} UTC`;
+			return `${h}:${m} UTC`;
+		}
+		const options = {
+			hour: "2-digit",
+			minute: "2-digit",
+			...showSeconds && { second: "2-digit" }
+		};
+		return date.toLocaleTimeString([], options);
+	};
+	const formatDuration = (ms) => {
+		const totalSeconds = Math.floor(ms / 1e3);
+		const hours = Math.floor(totalSeconds / 3600);
+		const minutes = Math.floor(totalSeconds % 3600 / 60);
+		const seconds = totalSeconds % 60;
+		if (hours > 0) return `${hours}h ${minutes}m`;
+		if (minutes > 0) return `${minutes}m ${seconds}s`;
+		return `${seconds}s`;
+	};
+	const formatUTC = (date) => {
+		return date.toISOString().replace("T", " ").substring(0, 19) + " UTC";
+	};
+	const getEventPosition = (event) => {
+		const eventStart = event.start.getTime();
+		const eventEnd = (event.end || new Date(eventStart + 3e5)).getTime();
+		const leftPercent = (eventStart - start.getTime()) / totalDuration * 100;
+		const widthPercent = (eventEnd - eventStart) / totalDuration * 100;
+		return {
+			left: `${Math.max(0, Math.min(100, leftPercent))}%`,
+			width: `${Math.max(2, Math.min(100 - leftPercent, widthPercent))}%`
+		};
+	};
+	const getStatusColor = (status) => {
+		if (!status) return tokens.colors.accent.primary;
+		return tokens.colors.status[status] || tokens.colors.accent.primary;
+	};
+	/**
+	* Returns false for events whose rendered position is entirely outside the current horizontal
+	* scroll viewport, so we can skip them without touching the DOM. This is cheap per-frame
+	* bounding-box culling; the scroll container width is read once from the ref at render time.
+	*/
+	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) => {
+		return {
+			normal: "Normal",
+			standby: "Standby",
+			caution: "Caution",
+			serious: "Serious",
+			critical: "Critical",
+			off: "Off"
+		}[status || ""] || "Unknown";
+	};
+	const currentPlayheadTime = playheadTime || /* @__PURE__ */ new Date();
+	const now = currentPlayheadTime.getTime();
+	const playheadPercent = showPlayhead && now >= start.getTime() && now <= end.getTime() ? (now - start.getTime()) / totalDuration * 100 : null;
+	const lastAutoScrollRef = useRef(0);
+	useEffect(() => {
+		if (playheadPercent === null) return;
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const contentWidth = container.scrollWidth;
+		const viewportWidth = container.clientWidth;
+		if (contentWidth <= viewportWidth) return;
+		const timelineContentWidth = contentWidth - trackLabelWidth;
+		const playheadPx = trackLabelWidth + playheadPercent / 100 * timelineContentWidth;
+		const scrollLeft = container.scrollLeft;
+		const visibleLeft = scrollLeft + trackLabelWidth;
+		const visibleRight = scrollLeft + viewportWidth;
+		const margin = viewportWidth * .15;
+		if (playheadPx > visibleRight - margin || playheadPx < visibleLeft + margin) {
+			const nowMs = Date.now();
+			if (nowMs - lastAutoScrollRef.current < 300) return;
+			lastAutoScrollRef.current = nowMs;
+			const targetScroll = playheadPx - viewportWidth * .5;
+			container.scrollTo({
+				left: Math.max(0, targetScroll),
+				behavior: "smooth"
+			});
+		}
+	}, [playheadPercent, trackLabelWidth]);
+	const hoveredEventData = hoveredEvent ? events.find((e) => e.id === hoveredEvent) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		style: { position: "relative" },
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollContainerRef,
+				className: "zendir-timeline-scroll",
+				onScroll: (e) => setScrollX(e.currentTarget.scrollLeft),
+				style: {
+					overflowX: "auto",
+					overflowY: "hidden",
+					position: "relative"
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						width: `${zoom * 100}%`,
+						minWidth: "100%",
+						position: "relative"
+					},
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								height: 32,
+								borderBottom: `1px solid ${tokens.colors.accent.primary}20`,
+								position: "sticky",
+								top: 0,
+								zIndex: Z.trackEventHovered,
+								backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+								...isTransparentTheme && {
+									backdropFilter: "blur(12px)",
+									WebkitBackdropFilter: "blur(12px)"
+								}
+							},
+							children: [/* @__PURE__ */ jsx("div", {
+								style: {
+									width: trackLabelWidth,
+									flexShrink: 0,
+									position: "sticky",
+									left: 0,
+									zIndex: 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`,
+									display: "flex",
+									alignItems: "center",
+									paddingLeft: 12,
+									fontSize: "0.625rem",
+									fontWeight: 500,
+									color: tokens.colors.text.tertiary,
+									textTransform: "uppercase",
+									letterSpacing: "0.08em"
+								},
+								children: "Tracks"
+							}), /* @__PURE__ */ jsxs("div", {
+								style: {
+									flex: 1,
+									position: "relative"
+								},
+								children: [showDayMarkers && dayMarkers.map((marker, index) => /* @__PURE__ */ jsx("div", {
+									style: {
+										position: "absolute",
+										left: `${marker.percent}%`,
+										top: 0,
+										height: "100%",
+										display: "flex",
+										flexDirection: "column",
+										alignItems: "center",
+										zIndex: Z.dayMarker
+									},
+									children: /* @__PURE__ */ jsx("span", {
+										style: {
+											fontSize: "0.5rem",
+											color: tokens.colors.status.caution,
+											fontFamily: tokens.typography.fontFamily.mono,
+											whiteSpace: "nowrap",
+											backgroundColor: `${tokens.colors.status.caution}20`,
+											padding: "1px 4px",
+											borderRadius: 2,
+											marginTop: 2
+										},
+										children: marker.time.toLocaleDateString([], {
+											month: "short",
+											day: "numeric"
+										})
+									})
+								}, `day-${index}`)), timeLabels.map((label, index) => /* @__PURE__ */ jsx("span", {
+									style: {
+										position: "absolute",
+										left: `${label.percent}%`,
+										transform: "translateX(-50%)",
+										top: 8,
+										fontSize: "0.6875rem",
+										color: tokens.colors.text.tertiary,
+										fontFamily: tokens.typography.fontFamily.mono,
+										whiteSpace: "nowrap"
+									},
+									children: formatTime(label.time)
+								}, index))]
+							})]
+						}),
+						tracks.map((track) => /* @__PURE__ */ jsxs("div", {
+							"aria-label": track.label,
+							style: {
+								display: "flex",
+								height: track.height || trackHeight,
+								borderBottom: `1px solid ${tokens.colors.accent.primary}10`
+							},
+							children: [/* @__PURE__ */ jsx("div", {
+								style: {
+									width: trackLabelWidth,
+									flexShrink: 0,
+									position: "sticky",
+									left: 0,
+									zIndex: Z.sticky,
+									display: "flex",
+									alignItems: "center",
+									paddingLeft: 12,
+									fontSize: "0.6875rem",
+									fontWeight: 500,
+									color: tokens.colors.text.secondary,
+									textTransform: "uppercase",
+									letterSpacing: "0.05em",
+									backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+									...isTransparentTheme && {
+										backdropFilter: "blur(12px)",
+										WebkitBackdropFilter: "blur(12px)"
+									},
+									borderRight: `1px solid ${tokens.colors.border.muted}30`,
+									boxShadow: "2px 0 8px rgba(0,0,0,0.15)"
+								},
+								children: track.label
+							}), /* @__PURE__ */ jsxs("div", {
+								style: {
+									flex: 1,
+									position: "relative",
+									height: "100%"
+								},
+								children: [showDayMarkers && dayMarkers.map((marker, index) => /* @__PURE__ */ jsx("div", { style: {
+									position: "absolute",
+									left: `${marker.percent}%`,
+									top: 0,
+									bottom: 0,
+									width: 1,
+									backgroundColor: `${tokens.colors.status.caution}25`,
+									zIndex: Z.trackEvent,
+									pointerEvents: "none"
+								} }, `day-line-${index}`)), (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;
+									return /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										"aria-label": `${event.title}${event.status ? `, status: ${event.status}` : ""}`,
+										onClick: () => onEventClick?.(event),
+										onMouseEnter: (e) => {
+											setHoveredEvent(event.id);
+											const rect = e.currentTarget.getBoundingClientRect();
+											setTooltipPos({
+												x: rect.left + rect.width / 2,
+												y: rect.top - 8
+											});
+										},
+										onMouseLeave: () => {
+											setHoveredEvent(null);
+											setTooltipPos(null);
+										},
+										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",
+											left,
+											width,
+											minWidth: 50,
+											height: cardHeight,
+											top: Math.min(baseTop + stackOffset, (track.height || trackHeight) - cardHeight - 4),
+											backgroundColor: "rgba(11, 26, 40, 0.95)",
+											border: `1px solid ${isHovered ? color : `${tokens.colors.accent.primary}30`}`,
+											borderRadius: "4px",
+											cursor: onEventClick ? "pointer" : "default",
+											display: "flex",
+											alignItems: "center",
+											overflow: "hidden",
+											zIndex: isHovered ? 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: [
+											teamAccent ? /* @__PURE__ */ jsx("div", {
+												style: {
+													position: "absolute",
+													top: 0,
+													left: 0,
+													right: 0,
+													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: `${teamAccent ? 6 : 4}px 8px 4px 8px`,
+													overflow: "hidden",
+													minWidth: 0,
+													display: "flex",
+													flexDirection: "column",
+													justifyContent: "center"
+												},
+												children: [/* @__PURE__ */ jsxs("div", {
+													style: {
+														display: "flex",
+														alignItems: "center",
+														gap: 6,
+														minWidth: 0
+													},
+													children: [/* @__PURE__ */ jsx(TimelineStatusMarker, {
+														status: displayStatus,
+														fillColor: color,
+														size: hasOverlap ? 8 : 10
+													}), /* @__PURE__ */ jsx("span", {
+														style: {
+															fontSize: "0.6875rem",
+															fontWeight: 500,
+															color: "#fff",
+															whiteSpace: "nowrap",
+															overflow: "hidden",
+															textOverflow: "ellipsis",
+															minWidth: 0
+														},
+														children: event.title
+													})]
+												}), event.subtitle && !hasOverlap && /* @__PURE__ */ jsx("div", {
+													style: {
+														fontSize: "0.5625rem",
+														color: "rgba(255, 255, 255, 0.5)",
+														whiteSpace: "nowrap",
+														overflow: "hidden",
+														textOverflow: "ellipsis",
+														marginTop: 1,
+														paddingLeft: 16
+													},
+													children: event.subtitle
+												})]
+											}),
+											hasOverlap && overlap.stackIndex === 0 && /* @__PURE__ */ jsxs("div", {
+												style: {
+													position: "absolute",
+													top: -6,
+													right: -6,
+													minWidth: 18,
+													height: 18,
+													backgroundColor: tokens.colors.status.caution,
+													borderRadius: 9,
+													display: "flex",
+													alignItems: "center",
+													justifyContent: "center",
+													fontSize: "0.625rem",
+													fontWeight: 700,
+													color: "#000",
+													boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
+													zIndex: Z.sticky - 5
+												},
+												title: `${overlap.overlapCount + 1} overlapping events`,
+												children: ["+", overlap.overlapCount]
+											})
+										]
+									}, event.id);
+								})]
+							})]
+						}, track.id)),
+						playheadPercent !== null && /* @__PURE__ */ jsxs("div", {
+							style: {
+								position: "absolute",
+								top: 0,
+								bottom: 0,
+								left: `calc(${trackLabelWidth}px + (100% - ${trackLabelWidth}px) * ${playheadPercent} / 100)`,
+								width: 2,
+								backgroundColor: tokens.colors.accent.primary,
+								boxShadow: `0 0 12px ${tokens.colors.accent.primary}`,
+								zIndex: Z.playhead,
+								pointerEvents: "none",
+								transition: "left 0.4s linear"
+							},
+							children: [/* @__PURE__ */ jsx("div", { style: {
+								position: "absolute",
+								top: 22,
+								left: -5,
+								width: 12,
+								height: 12,
+								backgroundColor: tokens.colors.accent.primary,
+								borderRadius: 2,
+								transform: "rotate(45deg)",
+								boxShadow: `0 0 8px ${tokens.colors.accent.primary}`
+							} }), /* @__PURE__ */ jsx("div", {
+								style: {
+									position: "absolute",
+									top: 4,
+									left: "50%",
+									transform: "translateX(-50%)",
+									backgroundColor: tokens.colors.accent.primary,
+									color: tokens.colors.background.base,
+									fontSize: "0.5625rem",
+									fontWeight: 500,
+									fontFamily: tokens.typography.fontFamily.mono,
+									padding: "2px 6px",
+									borderRadius: 3,
+									whiteSpace: "nowrap",
+									boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
+								},
+								children: formatTime(currentPlayheadTime, true)
+							})]
+						})
+					]
+				})
+			}),
+			hoveredEventData && tooltipPos && (() => {
+				const tooltipColor = getStatusColor(hoveredEventData.status);
+				const teamTip = getTimelineTeamAccent(hoveredEventData);
+				return /* @__PURE__ */ jsxs("div", {
+					style: {
+						position: "fixed",
+						left: tooltipPos.x,
+						top: tooltipPos.y,
+						transform: "translate(-50%, -100%)",
+						zIndex: Z.tooltip,
+						pointerEvents: "none",
+						animation: "zendir-tooltip-appear 150ms ease"
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							backgroundColor: "rgba(15, 23, 42, 0.98)",
+							border: `1px solid ${tooltipColor}50`,
+							borderRadius: tokens.borderRadius.md,
+							padding: "12px 16px",
+							minWidth: 220,
+							maxWidth: 320,
+							boxShadow: `0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px ${tooltipColor}30`,
+							backdropFilter: "blur(12px)"
+						},
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 8,
+									marginBottom: 8
+								},
+								children: [
+									/* @__PURE__ */ jsx(TimelineStatusMarker, {
+										status: hoveredEventData.status,
+										fillColor: tooltipColor,
+										size: 10
+									}),
+									/* @__PURE__ */ jsx("span", {
+										style: {
+											fontSize: "0.75rem",
+											fontWeight: 500,
+											color: tooltipColor,
+											textTransform: "uppercase",
+											letterSpacing: "0.05em"
+										},
+										children: getStatusLabel(hoveredEventData.status)
+									}),
+									hoveredEventData.badge && /* @__PURE__ */ jsx("span", {
+										style: {
+											marginLeft: "auto",
+											fontSize: "0.625rem",
+											fontWeight: 500,
+											padding: "2px 6px",
+											borderRadius: tokens.borderRadius.sm,
+											backgroundColor: `${tooltipColor}20`,
+											color: tooltipColor
+										},
+										children: hoveredEventData.badge
+									})
+								]
+							}),
+							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", {
+								style: {
+									fontSize: "0.875rem",
+									fontWeight: 500,
+									color: "#fff",
+									marginBottom: 4
+								},
+								children: hoveredEventData.title
+							}),
+							hoveredEventData.subtitle && /* @__PURE__ */ jsx("div", {
+								style: {
+									fontSize: "0.75rem",
+									color: "rgba(255, 255, 255, 0.6)",
+									marginBottom: 12
+								},
+								children: hoveredEventData.subtitle
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "grid",
+									gridTemplateColumns: "auto 1fr",
+									gap: "6px 12px",
+									fontSize: "0.6875rem",
+									borderTop: `1px solid ${tokens.colors.border.muted}30`,
+									paddingTop: 10
+								},
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										style: { color: tokens.colors.text.tertiary },
+										children: "Start:"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										style: {
+											color: tokens.colors.text.primary,
+											fontFamily: tokens.typography.fontFamily.mono
+										},
+										children: formatTime(hoveredEventData.start, true)
+									}),
+									hoveredEventData.end && /* @__PURE__ */ jsxs(Fragment, { children: [
+										/* @__PURE__ */ jsx("span", {
+											style: { color: tokens.colors.text.tertiary },
+											children: "End:"
+										}),
+										/* @__PURE__ */ jsx("span", {
+											style: {
+												color: tokens.colors.text.primary,
+												fontFamily: tokens.typography.fontFamily.mono
+											},
+											children: formatTime(hoveredEventData.end, true)
+										}),
+										/* @__PURE__ */ jsx("span", {
+											style: { color: tokens.colors.text.tertiary },
+											children: "Duration:"
+										}),
+										/* @__PURE__ */ jsx("span", {
+											style: {
+												color: tokens.colors.accent.secondary,
+												fontWeight: 500
+											},
+											children: formatDuration(hoveredEventData.end.getTime() - hoveredEventData.start.getTime())
+										})
+									] }),
+									/* @__PURE__ */ jsx("span", {
+										style: { color: tokens.colors.text.tertiary },
+										children: "UTC:"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										style: {
+											color: tokens.colors.text.secondary,
+											fontFamily: tokens.typography.fontFamily.mono,
+											fontSize: "0.625rem"
+										},
+										children: formatUTC(hoveredEventData.start)
+									})
+								]
+							}),
+							onEventClick && /* @__PURE__ */ jsx("div", {
+								style: {
+									marginTop: 10,
+									paddingTop: 8,
+									borderTop: `1px solid ${tokens.colors.border.muted}20`,
+									fontSize: "0.625rem",
+									color: tokens.colors.text.tertiary,
+									textAlign: "center"
+								},
+								children: "Click for details"
+							})
+						]
+					}), /* @__PURE__ */ jsx("div", { style: {
+						position: "absolute",
+						bottom: -6,
+						left: "50%",
+						transform: "translateX(-50%) rotate(45deg)",
+						width: 12,
+						height: 12,
+						backgroundColor: "rgba(15, 23, 42, 0.98)",
+						borderRight: `1px solid ${tooltipColor}50`,
+						borderBottom: `1px solid ${tooltipColor}50`
+					} })]
+				});
+			})(),
+			/* @__PURE__ */ jsx("style", { children: `
         .zendir-timeline-region:hover {
           z-index: 100 !important;
         }
@@ -1223,382 +1213,366 @@ const ChartView = memo(function ChartView2({
           }
         }
       ` })
-  ] });
+		]
+	});
 });
-const ScatterView = memo(function ScatterView2({
-  events,
-  tracks,
-  start,
-  end,
-  trackHeight,
-  onEventClick,
-  timeFormat = "relative",
-  referenceTime,
-  zoom = 1
-}) {
-  const { tokens } = useTheme();
-  const [hoveredEvent, setHoveredEvent] = useState(null);
-  const [tooltipPosition, setTooltipPosition] = useState(null);
-  const totalDuration = end.getTime() - start.getTime();
-  const trackLabelWidth = 140;
-  const refTime = referenceTime || start;
-  const formatTimeLabel = useCallback((date) => {
-    if (timeFormat === "relative") {
-      const diff = date.getTime() - refTime.getTime();
-      const totalSeconds = Math.floor(Math.abs(diff) / 1e3);
-      const hours = Math.floor(totalSeconds / 3600);
-      const minutes = Math.floor(totalSeconds % 3600 / 60);
-      const seconds = totalSeconds % 60;
-      if (hours > 0) {
-        return `${hours}h ${minutes}m`;
-      }
-      return `${minutes}m ${seconds}s`;
-    } else if (timeFormat === "utc") {
-      return date.toISOString().slice(11, 19) + " UTC";
-    }
-    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  }, [timeFormat, refTime]);
-  const timeLabels = useMemo(() => {
-    const labels = [];
-    const baseLabelCount = 8;
-    const labelCount = Math.round(baseLabelCount * zoom);
-    for (let i = 0; i <= labelCount; i++) {
-      const percent = i / labelCount * 100;
-      const time = new Date(start.getTime() + totalDuration * percent / 100);
-      labels.push({ time, percent });
-    }
-    return labels;
-  }, [start, totalDuration, zoom]);
-  const eventsByTrack = useMemo(() => {
-    const grouped = {};
-    tracks.forEach((track) => {
-      grouped[track.id] = events.filter((e) => e.track === track.id);
-    });
-    const unassigned = events.filter((e) => !e.track);
-    if (unassigned.length > 0 && tracks.length > 0) {
-      grouped[tracks[0].id] = [...grouped[tracks[0].id] || [], ...unassigned];
-    }
-    return grouped;
-  }, [events, tracks]);
-  const getEventPosition = (event) => {
-    const eventTime = event.start.getTime();
-    return (eventTime - start.getTime()) / totalDuration * 100;
-  };
-  const getStatusColor = (status) => {
-    if (!status) return tokens.colors.accent.primary;
-    return tokens.colors.status[status] || tokens.colors.accent.primary;
-  };
-  const hoveredEventData = events.find((e) => e.id === hoveredEvent);
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          width: `${zoom * 100}%`,
-          minWidth: "100%",
-          position: "relative"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "relative",
-                height: 32,
-                marginLeft: trackLabelWidth,
-                borderBottom: `1px solid ${tokens.colors.accent.primary}15`
-              },
-              children: timeLabels.map((label, index) => /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    position: "absolute",
-                    left: `${label.percent}%`,
-                    transform: "translateX(-50%)",
-                    top: 8,
-                    fontSize: "0.6875rem",
-                    color: tokens.colors.text.tertiary,
-                    fontFamily: tokens.typography.fontFamily.mono,
-                    whiteSpace: "nowrap",
-                    fontWeight: 500
-                  },
-                  children: formatTimeLabel(label.time)
-                },
-                index
-              ))
-            }
-          ),
-          tracks.map((track, trackIndex) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                position: "relative",
-                display: "flex",
-                alignItems: "center",
-                height: track.height || trackHeight,
-                borderBottom: trackIndex < tracks.length - 1 ? `1px solid ${tokens.colors.border.muted}20` : "none"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      width: trackLabelWidth,
-                      flexShrink: 0,
-                      padding: "0 16px",
-                      fontSize: "0.8125rem",
-                      fontWeight: 500,
-                      // AstroUXDS medium (was 600)
-                      color: tokens.colors.text.primary
-                    },
-                    children: track.label
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      flex: 1,
-                      position: "relative",
-                      height: "100%",
-                      display: "flex",
-                      alignItems: "center"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          style: {
-                            position: "absolute",
-                            left: 0,
-                            right: 0,
-                            height: 1,
-                            backgroundColor: tokens.colors.border.muted,
-                            opacity: 0.3
-                          }
-                        }
-                      ),
-                      (eventsByTrack[track.id] || []).map((event) => {
-                        const leftPercent = getEventPosition(event);
-                        const color = getStatusColor(event.status);
-                        const isHovered = hoveredEvent === event.id;
-                        const dotSize = isHovered ? 16 : 12;
-                        const 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);
-                              const rect = e.currentTarget.getBoundingClientRect();
-                              setTooltipPosition({ x: rect.left + rect.width / 2, y: rect.top });
-                            },
-                            onMouseLeave: () => {
-                              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: hitboxPad,
-                              background: "none",
-                              border: "none",
-                              cursor: "pointer",
-                              transition: "all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)",
-                              zIndex: isHovered ? Z.trackEventHovered : Z.trackEvent,
-                              lineHeight: 0,
-                              borderRadius: "50%",
-                              boxSizing: "content-box",
-                              boxShadow: scatterTeamAccent ? `0 0 0 2px ${scatterTeamAccent.color}` : void 0
-                            },
-                            children: /* @__PURE__ */ jsx(TimelineStatusMarker, { status: effectiveStatus, fillColor: color, size: dotSize })
-                          },
-                          event.id
-                        );
-                      })
-                    ]
-                  }
-                )
-              ]
-            },
-            track.id
-          ))
-        ]
-      }
-    ),
-    hoveredEventData && tooltipPosition && (() => {
-      const scatterTipColor = getStatusColor(hoveredEventData.status);
-      const scatterTeamTip = getTimelineTeamAccent(hoveredEventData);
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "zendir-scatter-tooltip",
-          style: {
-            position: "fixed",
-            left: tooltipPosition.x,
-            top: tooltipPosition.y - 12,
-            transform: "translate(-50%, -100%)",
-            backgroundColor: "rgba(11, 26, 40, 0.98)",
-            border: `1px solid ${scatterTipColor}40`,
-            borderRadius: tokens.borderRadius.lg,
-            padding: "12px 16px",
-            minWidth: 200,
-            maxWidth: 320,
-            zIndex: 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)"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  bottom: -6,
-                  left: "50%",
-                  transform: "translateX(-50%) rotate(45deg)",
-                  width: 12,
-                  height: 12,
-                  backgroundColor: "rgba(11, 26, 40, 0.98)",
-                  borderRight: `1px solid ${scatterTipColor}40`,
-                  borderBottom: `1px solid ${scatterTipColor}40`
-                }
-              }
-            ),
-            hoveredEventData.status && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
-              /* @__PURE__ */ jsx(
-                TimelineStatusMarker,
-                {
-                  status: hoveredEventData.status,
-                  fillColor: scatterTipColor,
-                  size: 10
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: "0.75rem",
-                    fontWeight: 500,
-                    color: scatterTipColor,
-                    textTransform: "uppercase",
-                    letterSpacing: "0.05em"
-                  },
-                  children: hoveredEventData.status
-                }
-              ),
-              hoveredEventData.badge && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    marginLeft: "auto",
-                    fontSize: "0.625rem",
-                    fontWeight: 500,
-                    padding: "2px 6px",
-                    borderRadius: tokens.borderRadius.sm,
-                    backgroundColor: `${scatterTipColor}20`,
-                    color: scatterTipColor
-                  },
-                  children: hoveredEventData.badge
-                }
-              )
-            ] }),
-            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",
-              {
-                style: {
-                  fontSize: "0.875rem",
-                  fontWeight: 500,
-                  color: "#fff",
-                  marginBottom: 8
-                },
-                children: hoveredEventData.title
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    fontSize: "0.75rem"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Time:" }),
-                    /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono }, children: formatTimeLabel(hoveredEventData.start) })
-                  ]
-                }
-              ),
-              hoveredEventData.badge && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    fontSize: "0.75rem"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "Trigger:" }),
-                    /* @__PURE__ */ jsx("span", { style: { color: safeAccentText(tokens.colors.accent.primary), fontWeight: 500 }, children: hoveredEventData.badge })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    fontSize: "0.75rem"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.tertiary }, children: "UTC:" }),
-                    /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary, fontFamily: tokens.typography.fontFamily.mono }, children: hoveredEventData.start.toISOString().replace("T", " ").slice(0, 19) })
-                  ]
-                }
-              ),
-              hoveredEventData.subtitle && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    marginTop: 4,
-                    paddingTop: 8,
-                    borderTop: `1px solid ${tokens.colors.border.muted}`,
-                    fontSize: "0.75rem",
-                    color: tokens.colors.text.secondary
-                  },
-                  children: hoveredEventData.subtitle
-                }
-              )
-            ] })
-          ]
-        }
-      );
-    })(),
-    /* @__PURE__ */ jsx("style", { children: `
+var ScatterView = memo(function ScatterView({ events, tracks, start, end, trackHeight, onEventClick, timeFormat = "relative", referenceTime, zoom = 1 }) {
+	const { tokens } = useTheme();
+	const [hoveredEvent, setHoveredEvent] = useState(null);
+	const [tooltipPosition, setTooltipPosition] = useState(null);
+	const totalDuration = end.getTime() - start.getTime();
+	const trackLabelWidth = 140;
+	const refTime = referenceTime || start;
+	const formatTimeLabel = useCallback((date) => {
+		if (timeFormat === "relative") {
+			const diff = date.getTime() - refTime.getTime();
+			const totalSeconds = Math.floor(Math.abs(diff) / 1e3);
+			const hours = Math.floor(totalSeconds / 3600);
+			const minutes = Math.floor(totalSeconds % 3600 / 60);
+			const seconds = totalSeconds % 60;
+			if (hours > 0) return `${hours}h ${minutes}m`;
+			return `${minutes}m ${seconds}s`;
+		} else if (timeFormat === "utc") return date.toISOString().slice(11, 19) + " UTC";
+		return date.toLocaleTimeString([], {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+	}, [timeFormat, refTime]);
+	const timeLabels = useMemo(() => {
+		const labels = [];
+		const labelCount = Math.round(8 * zoom);
+		for (let i = 0; i <= labelCount; i++) {
+			const percent = i / labelCount * 100;
+			const time = new Date(start.getTime() + totalDuration * percent / 100);
+			labels.push({
+				time,
+				percent
+			});
+		}
+		return labels;
+	}, [
+		start,
+		totalDuration,
+		zoom
+	]);
+	const eventsByTrack = useMemo(() => {
+		const grouped = {};
+		tracks.forEach((track) => {
+			grouped[track.id] = events.filter((e) => e.track === track.id);
+		});
+		const unassigned = events.filter((e) => !e.track);
+		if (unassigned.length > 0 && tracks.length > 0) grouped[tracks[0].id] = [...grouped[tracks[0].id] || [], ...unassigned];
+		return grouped;
+	}, [events, tracks]);
+	const getEventPosition = (event) => {
+		return (event.start.getTime() - start.getTime()) / totalDuration * 100;
+	};
+	const getStatusColor = (status) => {
+		if (!status) return tokens.colors.accent.primary;
+		return tokens.colors.status[status] || tokens.colors.accent.primary;
+	};
+	const hoveredEventData = events.find((e) => e.id === hoveredEvent);
+	return /* @__PURE__ */ jsxs("div", {
+		style: { position: "relative" },
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					width: `${zoom * 100}%`,
+					minWidth: "100%",
+					position: "relative"
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						position: "relative",
+						height: 32,
+						marginLeft: trackLabelWidth,
+						borderBottom: `1px solid ${tokens.colors.accent.primary}15`
+					},
+					children: timeLabels.map((label, index) => /* @__PURE__ */ jsx("span", {
+						style: {
+							position: "absolute",
+							left: `${label.percent}%`,
+							transform: "translateX(-50%)",
+							top: 8,
+							fontSize: "0.6875rem",
+							color: tokens.colors.text.tertiary,
+							fontFamily: tokens.typography.fontFamily.mono,
+							whiteSpace: "nowrap",
+							fontWeight: 500
+						},
+						children: formatTimeLabel(label.time)
+					}, index))
+				}), tracks.map((track, trackIndex) => /* @__PURE__ */ jsxs("div", {
+					style: {
+						position: "relative",
+						display: "flex",
+						alignItems: "center",
+						height: track.height || trackHeight,
+						borderBottom: trackIndex < tracks.length - 1 ? `1px solid ${tokens.colors.border.muted}20` : "none"
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							width: trackLabelWidth,
+							flexShrink: 0,
+							padding: "0 16px",
+							fontSize: "0.8125rem",
+							fontWeight: 500,
+							color: tokens.colors.text.primary
+						},
+						children: track.label
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							flex: 1,
+							position: "relative",
+							height: "100%",
+							display: "flex",
+							alignItems: "center"
+						},
+						children: [/* @__PURE__ */ jsx("div", { style: {
+							position: "absolute",
+							left: 0,
+							right: 0,
+							height: 1,
+							backgroundColor: tokens.colors.border.muted,
+							opacity: .3
+						} }), (eventsByTrack[track.id] || []).map((event) => {
+							const leftPercent = getEventPosition(event);
+							const color = getStatusColor(event.status);
+							const isHovered = hoveredEvent === event.id;
+							const dotSize = isHovered ? 16 : 12;
+							const 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?.(event),
+								onMouseEnter: (e) => {
+									setHoveredEvent(event.id);
+									const rect = e.currentTarget.getBoundingClientRect();
+									setTooltipPosition({
+										x: rect.left + rect.width / 2,
+										y: rect.top
+									});
+								},
+								onMouseLeave: () => {
+									setHoveredEvent(null);
+									setTooltipPosition(null);
+								},
+								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%)",
+									width: dotSize,
+									height: dotSize,
+									padding: hitboxPad,
+									background: "none",
+									border: "none",
+									cursor: "pointer",
+									transition: "all 200ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+									zIndex: isHovered ? Z.trackEventHovered : Z.trackEvent,
+									lineHeight: 0,
+									borderRadius: "50%",
+									boxSizing: "content-box",
+									boxShadow: scatterTeamAccent ? `0 0 0 2px ${scatterTeamAccent.color}` : void 0
+								},
+								children: /* @__PURE__ */ jsx(TimelineStatusMarker, {
+									status: effectiveStatus,
+									fillColor: color,
+									size: dotSize
+								})
+							}, event.id);
+						})]
+					})]
+				}, track.id))]
+			}),
+			hoveredEventData && tooltipPosition && (() => {
+				const scatterTipColor = getStatusColor(hoveredEventData.status);
+				const scatterTeamTip = getTimelineTeamAccent(hoveredEventData);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "zendir-scatter-tooltip",
+					style: {
+						position: "fixed",
+						left: tooltipPosition.x,
+						top: tooltipPosition.y - 12,
+						transform: "translate(-50%, -100%)",
+						backgroundColor: "rgba(11, 26, 40, 0.98)",
+						border: `1px solid ${scatterTipColor}40`,
+						borderRadius: tokens.borderRadius.lg,
+						padding: "12px 16px",
+						minWidth: 200,
+						maxWidth: 320,
+						zIndex: 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)"
+					},
+					children: [
+						/* @__PURE__ */ jsx("div", { style: {
+							position: "absolute",
+							bottom: -6,
+							left: "50%",
+							transform: "translateX(-50%) rotate(45deg)",
+							width: 12,
+							height: 12,
+							backgroundColor: "rgba(11, 26, 40, 0.98)",
+							borderRight: `1px solid ${scatterTipColor}40`,
+							borderBottom: `1px solid ${scatterTipColor}40`
+						} }),
+						hoveredEventData.status && /* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 8,
+								marginBottom: 8
+							},
+							children: [
+								/* @__PURE__ */ jsx(TimelineStatusMarker, {
+									status: hoveredEventData.status,
+									fillColor: scatterTipColor,
+									size: 10
+								}),
+								/* @__PURE__ */ jsx("span", {
+									style: {
+										fontSize: "0.75rem",
+										fontWeight: 500,
+										color: scatterTipColor,
+										textTransform: "uppercase",
+										letterSpacing: "0.05em"
+									},
+									children: hoveredEventData.status
+								}),
+								hoveredEventData.badge && /* @__PURE__ */ jsx("span", {
+									style: {
+										marginLeft: "auto",
+										fontSize: "0.625rem",
+										fontWeight: 500,
+										padding: "2px 6px",
+										borderRadius: tokens.borderRadius.sm,
+										backgroundColor: `${scatterTipColor}20`,
+										color: scatterTipColor
+									},
+									children: hoveredEventData.badge
+								})
+							]
+						}),
+						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", {
+							style: {
+								fontSize: "0.875rem",
+								fontWeight: 500,
+								color: "#fff",
+								marginBottom: 8
+							},
+							children: hoveredEventData.title
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 4
+							},
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										display: "flex",
+										justifyContent: "space-between",
+										fontSize: "0.75rem"
+									},
+									children: [/* @__PURE__ */ jsx("span", {
+										style: { color: tokens.colors.text.tertiary },
+										children: "Time:"
+									}), /* @__PURE__ */ jsx("span", {
+										style: {
+											color: tokens.colors.text.secondary,
+											fontFamily: tokens.typography.fontFamily.mono
+										},
+										children: formatTimeLabel(hoveredEventData.start)
+									})]
+								}),
+								hoveredEventData.badge && /* @__PURE__ */ jsxs("div", {
+									style: {
+										display: "flex",
+										justifyContent: "space-between",
+										fontSize: "0.75rem"
+									},
+									children: [/* @__PURE__ */ jsx("span", {
+										style: { color: tokens.colors.text.tertiary },
+										children: "Trigger:"
+									}), /* @__PURE__ */ jsx("span", {
+										style: {
+											color: safeAccentText(tokens.colors.accent.primary),
+											fontWeight: 500
+										},
+										children: hoveredEventData.badge
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									style: {
+										display: "flex",
+										justifyContent: "space-between",
+										fontSize: "0.75rem"
+									},
+									children: [/* @__PURE__ */ jsx("span", {
+										style: { color: tokens.colors.text.tertiary },
+										children: "UTC:"
+									}), /* @__PURE__ */ jsx("span", {
+										style: {
+											color: tokens.colors.text.secondary,
+											fontFamily: tokens.typography.fontFamily.mono
+										},
+										children: hoveredEventData.start.toISOString().replace("T", " ").slice(0, 19)
+									})]
+								}),
+								hoveredEventData.subtitle && /* @__PURE__ */ jsx("div", {
+									style: {
+										marginTop: 4,
+										paddingTop: 8,
+										borderTop: `1px solid ${tokens.colors.border.muted}`,
+										fontSize: "0.75rem",
+										color: tokens.colors.text.secondary
+									},
+									children: hoveredEventData.subtitle
+								})
+							]
+						})
+					]
+				});
+			})(),
+			/* @__PURE__ */ jsx("style", { children: `
         @keyframes zendir-tooltip-in {
           from {
             opacity: 0;
@@ -1614,864 +1588,843 @@ const ScatterView = memo(function ScatterView2({
           position: absolute;
           inset: 0;
           border-radius: inherit;
-          background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
+          background: linear-gradient(135deg, ${tokens.colors.accent.primary}1a 0%, transparent 50%);
           pointer-events: none;
         }
       ` })
-  ] });
+		]
+	});
 });
 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 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 label = isNone ? `No ${categoryLabel.toLowerCase()}` : key === "__zendir_team_legacy__" ? "Accent only" : accent ? getTimelineTeamDisplayLabel(event, accent) : key;
+		const color = isNone ? "" : 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 === "__zendir_team_legacy__") return b.key === "__zendir_team_none__" ? -1 : 1;
+		if (b.key === "__zendir_team_legacy__") return a.key === "__zendir_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
-      ]
-    }
-  );
+/** Expandable filter panel — rendered below the header when expanded. Search + toggle live in the header. */
+var TimelineFiltersPanel = memo(function TimelineFiltersPanel({ 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) => {
+						const active = filter.tracks?.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) => {
+						const active = filter.status?.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) => {
+							const active = filter.teams?.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: `${tokens.borders?.width?.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,
-  tracks = [],
-  start: propStart,
-  end: propEnd,
-  defaultView = "chart",
-  viewMode: controlledViewMode,
-  onViewModeChange,
-  onEventClick,
-  showViewToggle = true,
-  maxHeight,
-  trackHeight = 56,
-  className = "",
-  timeFormat = "absolute",
-  zoomable = false,
-  initialZoom = 1,
-  showFilters: _showFilters = true,
-  filtersDefaultExpanded = false,
-  hideEmptyTracksWhenFiltered = true,
-  filter: _filter,
-  onFilterChange: _onFilterChange,
-  showCount: _showCount = true,
-  loading = false,
-  referenceTime,
-  showPlayhead = true,
-  playheadTime,
-  onPlayheadChange: _onPlayheadChangeTimeline,
-  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);
-    onViewModeChange == null ? void 0 : onViewModeChange(mode);
-  }, [onViewModeChange]);
-  const { start, end } = useMemo(() => {
-    if (propStart && propEnd) {
-      return { start: propStart, end: propEnd };
-    }
-    if (events.length === 0) {
-      const now = /* @__PURE__ */ new Date();
-      return {
-        start: new Date(now.getTime() - 36e5),
-        end: new Date(now.getTime() + 36e5)
-      };
-    }
-    let minTime = events[0].start.getTime();
-    let maxTime = events[0].start.getTime();
-    events.forEach((event) => {
-      minTime = Math.min(minTime, event.start.getTime());
-      maxTime = Math.max(maxTime, (event.end || event.start).getTime());
-    });
-    const duration = maxTime - minTime;
-    const padding = duration * 0.1;
-    return {
-      start: new Date(minTime - padding),
-      end: new Date(maxTime + padding)
-    };
-  }, [events, propStart, propEnd]);
-  const effectiveTracks = useMemo(() => {
-    if (tracks.length > 0) return tracks;
-    const trackSet = /* @__PURE__ */ new Set();
-    events.forEach((event) => {
-      if (event.track) trackSet.add(event.track);
-    });
-    if (trackSet.size === 0) {
-      return [{ id: "default", label: "Events", height: trackHeight }];
-    }
-    return Array.from(trackSet).map((id) => ({
-      id,
-      label: id,
-      height: trackHeight
-    }));
-  }, [events, tracks, trackHeight]);
-  const 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 [...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",
-    {
-      className: classNames("zendir-unified-timeline", className),
-      style: {
-        backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
-        ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
-        ...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
-        borderRadius: tokens.borderRadius.lg,
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              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("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm }, children: [
-                /* @__PURE__ */ jsx(
-                  "h3",
-                  {
-                    style: {
-                      margin: 0,
-                      fontSize: "1rem",
-                      fontWeight: 500,
-                      // AstroUXDS medium
-                      color: tokens.colors.text.primary,
-                      whiteSpace: "nowrap",
-                      flexShrink: 0
-                    },
-                    children: countLabel
-                  }
-                ),
-                !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"
-                        }
-                      }
-                    ),
-                    /* @__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",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              backgroundColor: `${tokens.colors.background.overlay}80`,
-              backdropFilter: "blur(4px)",
-              zIndex: Z.loadingOverlay
-            },
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  width: 40,
-                  height: 40,
-                  border: `3px solid ${tokens.colors.border.muted}`,
-                  borderTopColor: tokens.colors.accent.primary,
-                  borderRadius: "50%",
-                  animation: "zendir-spin 1s linear infinite"
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              padding: viewMode === "list" ? "16px 20px" : "16px",
-              maxHeight,
-              overflowY: maxHeight ? "auto" : void 0,
-              overflowX: viewMode !== "list" ? "auto" : void 0
-            },
-            children: events.length === 0 ? /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  padding: "48px 0",
-                  color: tokens.colors.text.tertiary,
-                  gap: "12px"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Icon, { name: "clock", size: 32 }),
-                  /* @__PURE__ */ jsx("span", { style: { fontSize: "0.875rem" }, children: "No events to display" })
-                ]
-              }
-            ) : 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(
-                EventListItem,
-                {
-                  event,
-                  isLast: index === sortedEvents.length - 1,
-                  onEventClick
-                },
-                event.id
-              ))
-            ) : viewMode === "scatter" ? (
-              // Scatter View (Dots on timeline) - uses same zoom as chart
-              /* @__PURE__ */ jsx(
-                ScatterView,
-                {
-                  events: filteredEvents,
-                  tracks: effectiveTracksForViews,
-                  start,
-                  end,
-                  trackHeight,
-                  onEventClick,
-                  timeFormat,
-                  referenceTime: referenceTime || start,
-                  zoom
-                }
-              )
-            ) : (
-              // Chart View (Gantt)
-              /* @__PURE__ */ jsx(
-                ChartView,
-                {
-                  events: filteredEvents,
-                  tracks: effectiveTracksForViews,
-                  start,
-                  end,
-                  trackHeight,
-                  onEventClick,
-                  zoom,
-                  showPlayhead,
-                  playheadTime,
-                  onPlayheadChange: _onPlayheadChangeTimeline,
-                  showDayMarkers,
-                  timeFormat
-                }
-              )
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
+var UnifiedTimeline = memo(function UnifiedTimeline({ title = "Timeline", events, tracks = [], start: propStart, end: propEnd, defaultView = "chart", viewMode: controlledViewMode, onViewModeChange, onEventClick, showViewToggle = true, maxHeight, trackHeight = 56, className = "", timeFormat = "absolute", zoomable = false, initialZoom = 1, showFilters: _showFilters = true, filtersDefaultExpanded = false, hideEmptyTracksWhenFiltered = true, filter: _filter, onFilterChange: _onFilterChange, showCount: _showCount = true, loading = false, referenceTime, showPlayhead = true, playheadTime, onPlayheadChange: _onPlayheadChangeTimeline, showDayMarkers = true, teamLabel: teamLabelProp }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const { isMobile } = useBreakpoint();
+	const categoryCtx = useCategoryPalette();
+	/** Explicit prop → CategoryProvider label → default "Teams" */
+	const teamLabel = teamLabelProp ?? 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?.(n);
+	}, [_filter, _onFilterChange]);
+	const patchFilter = useCallback((partial) => {
+		setFilter(normalizeTimelineFilter({
+			...filter,
+			...partial
+		}));
+	}, [filter, setFilter]);
+	const viewMode = controlledViewMode ?? internalViewMode;
+	const handleViewModeChange = useCallback((mode) => {
+		setInternalViewMode(mode);
+		onViewModeChange?.(mode);
+	}, [onViewModeChange]);
+	const { start, end } = useMemo(() => {
+		if (propStart && propEnd) return {
+			start: propStart,
+			end: propEnd
+		};
+		if (events.length === 0) {
+			const now = /* @__PURE__ */ new Date();
+			return {
+				start: /* @__PURE__ */ new Date(now.getTime() - 36e5),
+				end: new Date(now.getTime() + 36e5)
+			};
+		}
+		let minTime = events[0].start.getTime();
+		let maxTime = events[0].start.getTime();
+		events.forEach((event) => {
+			minTime = Math.min(minTime, event.start.getTime());
+			maxTime = Math.max(maxTime, (event.end || event.start).getTime());
+		});
+		const padding = (maxTime - minTime) * .1;
+		return {
+			start: new Date(minTime - padding),
+			end: new Date(maxTime + padding)
+		};
+	}, [
+		events,
+		propStart,
+		propEnd
+	]);
+	const effectiveTracks = useMemo(() => {
+		if (tracks.length > 0) return tracks;
+		const trackSet = /* @__PURE__ */ new Set();
+		events.forEach((event) => {
+			if (event.track) trackSet.add(event.track);
+		});
+		if (trackSet.size === 0) return [{
+			id: "default",
+			label: "Events",
+			height: trackHeight
+		}];
+		return Array.from(trackSet).map((id) => ({
+			id,
+			label: id,
+			height: trackHeight
+		}));
+	}, [
+		events,
+		tracks,
+		trackHeight
+	]);
+	const 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 [...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", {
+		className: classNames("zendir-unified-timeline", className),
+		style: {
+			backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+			...isTransparentTheme && {
+				backdropFilter: "blur(12px)",
+				WebkitBackdropFilter: "blur(12px)"
+			},
+			...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
+			borderRadius: tokens.borderRadius.lg,
+			overflow: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					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("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: tokens.spacing.sm
+						},
+						children: [/* @__PURE__ */ jsx("h3", {
+							style: {
+								margin: 0,
+								fontSize: "1rem",
+								fontWeight: 500,
+								color: tokens.colors.text.primary,
+								whiteSpace: "nowrap",
+								flexShrink: 0
+							},
+							children: countLabel
+						}), !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"
+										}
+									}), /* @__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 - .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,
+													opacity: zoom <= 1 ? .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 + .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,
+													opacity: zoom >= 4 ? .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", {
+				style: {
+					position: "absolute",
+					inset: 0,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					backgroundColor: `${tokens.colors.background.overlay}80`,
+					backdropFilter: "blur(4px)",
+					zIndex: Z.loadingOverlay
+				},
+				children: /* @__PURE__ */ jsx("div", { style: {
+					width: 40,
+					height: 40,
+					border: `3px solid ${tokens.colors.border.muted}`,
+					borderTopColor: tokens.colors.accent.primary,
+					borderRadius: "50%",
+					animation: "zendir-spin 1s linear infinite"
+				} })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					padding: viewMode === "list" ? "16px 20px" : "16px",
+					maxHeight,
+					overflowY: maxHeight ? "auto" : void 0,
+					overflowX: viewMode !== "list" ? "auto" : void 0
+				},
+				children: events.length === 0 ? /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						justifyContent: "center",
+						padding: "48px 0",
+						color: tokens.colors.text.tertiary,
+						gap: "12px"
+					},
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: "clock",
+						size: 32
+					}), /* @__PURE__ */ jsx("span", {
+						style: { fontSize: "0.875rem" },
+						children: "No events to display"
+					})]
+				}) : 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" ? sortedEvents.map((event, index) => /* @__PURE__ */ jsx(EventListItem, {
+					event,
+					isLast: index === sortedEvents.length - 1,
+					onEventClick
+				}, event.id)) : viewMode === "scatter" ? /* @__PURE__ */ jsx(ScatterView, {
+					events: filteredEvents,
+					tracks: effectiveTracksForViews,
+					start,
+					end,
+					trackHeight,
+					onEventClick,
+					timeFormat,
+					referenceTime: referenceTime || start,
+					zoom
+				}) : /* @__PURE__ */ jsx(ChartView, {
+					events: filteredEvents,
+					tracks: effectiveTracksForViews,
+					start,
+					end,
+					trackHeight,
+					onEventClick,
+					zoom,
+					showPlayhead,
+					playheadTime,
+					onPlayheadChange: _onPlayheadChangeTimeline,
+					showDayMarkers,
+					timeFormat
+				})
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
         @keyframes zendir-spin {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
       ` })
-      ]
-    }
-  );
+		]
+	});
 });
-export {
-  TIMELINE_FILTER_TEAM_LEGACY,
-  TIMELINE_FILTER_TEAM_NONE,
-  UnifiedTimeline,
-  getTimelineEventDisplayStatus,
-  getTimelineTeamAccent,
-  getTimelineTeamDisplayLabel,
-  getTimelineTeamFilterKey,
-  isTimelineFilterActive,
-  matchesTimelineFilter
-};
-//# sourceMappingURL=UnifiedTimeline.js.map
+//#endregion
+export { TIMELINE_FILTER_TEAM_LEGACY, TIMELINE_FILTER_TEAM_NONE, UnifiedTimeline, UnifiedTimeline as default, getTimelineEventDisplayStatus, getTimelineTeamAccent, getTimelineTeamDisplayLabel, getTimelineTeamFilterKey, isTimelineFilterActive, matchesTimelineFilter };
+
+//# sourceMappingURL=UnifiedTimeline.js.map