@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/widgets/MissionCalendar.js

@@ -1,1049 +1,1517 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useState, useRef, useMemo, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { AstroIcon } from "../display/AstroIcon.js";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/widgets/MissionCalendar.tsx
+/**
+* @zendir/ui - MissionCalendar Component
+*
+* Full-featured calendar for mission planning and scheduling with 5 views:
+* Month, Week (time-grid), Day (time-grid), Gantt, and List.
+*
+* Includes a mini calendar sidebar for quick date navigation, timeline
+* and event type filtering, right-click to create at time slots, week
+* number display, and DOY (Day of Year) in the header.
+*
+* Features (matching/exceeding OpenC3 Calendar):
+* - Day / Week / Month / Gantt / List views
+* - Time-grid with 30-min rows for Week and Day views
+* - Mini calendar sidebar with event type + timeline filters
+* - Activity scheduling with command/script/reserve execution types
+* - Metadata recording (key-value pairs, start time only)
+* - Notes with start + end time
+* - Status-colored events per Astro UX (circle, square, triangle down)
+* - Activity lifecycle (created, started, completed, paused, stopped, error, etc.)
+* - Multi-timeline support (overlapping prevention per timeline)
+* - Right-click context menu to create events at specific time slots
+* - Week number + DOY display
+* - Contact window / eclipse / pass event types (beyond OpenC3)
+* - weekStartsMonday option (Sunday-Saturday or Monday-Sunday)
+* - Integration with Timeline component via onDayDrillDown
+*
+* @example
+* ```tsx
+* <MissionCalendar
+*   events={missionEvents}
+*   timelines={[{ id: 'ops', name: 'OPS-1', color: '#2dccff' }]}
+*   onEventCreate={(e) => console.log('New event:', e)}
+*   onEventClick={(e) => console.log('Clicked:', e)}
+* />
+* ```
+*/
 function getStatusColor(status, tokens) {
-  if (!status) return tokens.colors.text.muted ?? tokens.colors.text.secondary;
-  switch (status) {
-    case "created":
-    case "scheduled":
-      return tokens.colors.status.standby;
-    case "started":
-      return tokens.colors.status.normal;
-    case "completed":
-      return tokens.colors.status.normal;
-    case "paused":
-    case "stopped":
-    case "disabled":
-      return tokens.colors.status.caution;
-    case "error":
-    case "failed":
-    case "crashed":
-      return tokens.colors.status.critical;
-  }
+	if (!status) return tokens.colors.text.muted ?? tokens.colors.text.secondary;
+	switch (status) {
+		case "created":
+		case "scheduled": return tokens.colors.status.standby;
+		case "started": return tokens.colors.status.normal;
+		case "completed": return tokens.colors.status.normal;
+		case "paused":
+		case "stopped":
+		case "disabled": return tokens.colors.status.caution;
+		case "error":
+		case "failed":
+		case "crashed": return tokens.colors.status.critical;
+	}
 }
+/**
+* Return Astro UX status shape per status level.
+*   off → small dot, standby → ring ◯, normal → filled circle ●,
+*   caution → square ■, serious → diamond ◆, critical → triangle down ▼
+*/
 function getStatusShape(status) {
-  if (!status) return "●";
-  switch (status) {
-    case "created":
-    case "scheduled":
-      return "◯";
-    case "started":
-    case "completed":
-      return "●";
-    case "paused":
-    case "stopped":
-    case "disabled":
-      return "■";
-    case "error":
-    case "failed":
-    case "crashed":
-      return "▼";
-  }
+	if (!status) return "●";
+	switch (status) {
+		case "created":
+		case "scheduled": return "◯";
+		case "started":
+		case "completed": return "●";
+		case "paused":
+		case "stopped":
+		case "disabled": return "■";
+		case "error":
+		case "failed":
+		case "crashed": return "▼";
+	}
 }
-const TYPE_ICON_ASTRO = ["contact", "eclipse", "pass"];
+var TYPE_ICON_ASTRO = [
+	"contact",
+	"eclipse",
+	"pass"
+];
 function getTypeIcon(type) {
-  switch (type) {
-    case "command":
-      return "⌘";
-    case "script":
-      return "▶";
-    case "reserve":
-      return "▒";
-    case "metadata":
-      return "◆";
-    case "note":
-      return "✎";
-    case "contact":
-      return "antenna";
-    case "eclipse":
-      return "brightness-2";
-    case "pass":
-      return "satellite";
-  }
+	switch (type) {
+		case "command": return "⌘";
+		case "script": return "▶";
+		case "reserve": return "▒";
+		case "metadata": return "◆";
+		case "note": return "✎";
+		case "contact": return "antenna";
+		case "eclipse": return "brightness-2";
+		case "pass": return "satellite";
+	}
 }
 function getDaysInMonth(year, month) {
-  return new Date(year, month + 1, 0).getDate();
+	return new Date(year, month + 1, 0).getDate();
 }
 function getFirstDayOfMonth(year, month, mondayStart) {
-  const day = new Date(year, month, 1).getDay();
-  if (mondayStart) return day === 0 ? 6 : day - 1;
-  return day;
+	const day = new Date(year, month, 1).getDay();
+	if (mondayStart) return day === 0 ? 6 : day - 1;
+	return day;
 }
 function isSameDay(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
 function formatTime(d) {
-  return d.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit" });
+	return d.toLocaleTimeString("en-US", {
+		hour12: false,
+		hour: "2-digit",
+		minute: "2-digit"
+	});
 }
 function getWeekDates(date, mondayStart) {
-  const d = new Date(date);
-  const day = d.getDay();
-  const diff = mondayStart ? day === 0 ? -6 : 1 - day : -day;
-  const start = new Date(d);
-  start.setDate(start.getDate() + diff);
-  return Array.from({ length: 7 }, (_, i) => {
-    const dt = new Date(start);
-    dt.setDate(dt.getDate() + i);
-    return dt;
-  });
+	const d = new Date(date);
+	const day = d.getDay();
+	const diff = mondayStart ? day === 0 ? -6 : 1 - day : -day;
+	const start = new Date(d);
+	start.setDate(start.getDate() + diff);
+	return Array.from({ length: 7 }, (_, i) => {
+		const dt = new Date(start);
+		dt.setDate(dt.getDate() + i);
+		return dt;
+	});
 }
+/** ISO week number */
 function getWeekNumber(d) {
-  const date = new Date(d.getTime());
-  date.setHours(0, 0, 0, 0);
-  date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
-  const week1 = new Date(date.getFullYear(), 0, 4);
-  return 1 + Math.round(((date.getTime() - week1.getTime()) / 864e5 - 3 + (week1.getDay() + 6) % 7) / 7);
+	const date = new Date(d.getTime());
+	date.setHours(0, 0, 0, 0);
+	date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
+	const week1 = new Date(date.getFullYear(), 0, 4);
+	return 1 + Math.round(((date.getTime() - week1.getTime()) / 864e5 - 3 + (week1.getDay() + 6) % 7) / 7);
 }
+/** Day of year (1-366) */
 function getDayOfYear(d) {
-  const start = new Date(d.getFullYear(), 0, 0);
-  const diff = d.getTime() - start.getTime();
-  return Math.floor(diff / 864e5);
+	const start = new Date(d.getFullYear(), 0, 0);
+	const diff = d.getTime() - start.getTime();
+	return Math.floor(diff / 864e5);
 }
-const TIME_SLOTS = [];
+/** 30-minute time slots for the time-grid views */
+var TIME_SLOTS = [];
 for (let h = 0; h < 24; h++) {
-  TIME_SLOTS.push(`${String(h).padStart(2, "0")}:00`);
-  TIME_SLOTS.push(`${String(h).padStart(2, "0")}:30`);
+	TIME_SLOTS.push(`${String(h).padStart(2, "0")}:00`);
+	TIME_SLOTS.push(`${String(h).padStart(2, "0")}:30`);
 }
-const SLOT_HEIGHT = 28;
-const CalendarEventChip = memo(function CalendarEventChip2({
-  event,
-  tokens,
-  compact,
-  onClick
-}) {
-  const color = event.color || getStatusColor(event.status, tokens);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        onClick == null ? void 0 : onClick();
-      },
-      title: `${event.title}
-${formatTime(event.start)}${event.end ? " – " + formatTime(event.end) : ""}
-${event.description || ""}`,
-      style: {
-        background: `${color}22`,
-        color: tokens.colors.text.primary,
-        padding: compact ? "1px 4px" : "2px 6px",
-        borderRadius: tokens.borderRadius.sm,
-        fontSize: compact ? tokens.typography.fontSize.micro : tokens.typography.fontSize.xxs,
-        lineHeight: compact ? "14px" : "16px",
-        cursor: "pointer",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        display: "flex",
-        alignItems: "center",
-        gap: 3,
-        transition: "background 150ms ease",
-        marginBottom: 1
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.micro, opacity: 0.7 }, children: TYPE_ICON_ASTRO.includes(event.type) ? /* @__PURE__ */ jsx(AstroIcon, { name: getTypeIcon(event.type), size: "extra-small", label: "" }) : getTypeIcon(event.type) }),
-        !compact && /* @__PURE__ */ jsx("span", { style: { color, fontSize: tokens.typography.fontSize.micro }, children: getStatusShape(event.status) }),
-        /* @__PURE__ */ jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: event.title })
-      ]
-    }
-  );
+var SLOT_HEIGHT = 28;
+var CalendarEventChip = memo(function CalendarEventChip({ event, tokens, compact, onClick }) {
+	const color = event.color || getStatusColor(event.status, tokens);
+	return /* @__PURE__ */ jsxs("div", {
+		onClick: (e) => {
+			e.stopPropagation();
+			onClick?.();
+		},
+		title: `${event.title}\n${formatTime(event.start)}${event.end ? " – " + formatTime(event.end) : ""}\n${event.description || ""}`,
+		style: {
+			background: `${color}22`,
+			color: tokens.colors.text.primary,
+			padding: compact ? "1px 4px" : "2px 6px",
+			borderRadius: tokens.borderRadius.sm,
+			fontSize: compact ? tokens.typography.fontSize.micro : tokens.typography.fontSize.xxs,
+			lineHeight: compact ? "14px" : "16px",
+			cursor: "pointer",
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			display: "flex",
+			alignItems: "center",
+			gap: 3,
+			transition: "background 150ms ease",
+			marginBottom: 1
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: tokens.typography.fontSize.micro,
+					opacity: .7
+				},
+				children: TYPE_ICON_ASTRO.includes(event.type) ? /* @__PURE__ */ jsx(AstroIcon, {
+					name: getTypeIcon(event.type),
+					size: "extra-small",
+					label: ""
+				}) : getTypeIcon(event.type)
+			}),
+			!compact && /* @__PURE__ */ jsx("span", {
+				style: {
+					color,
+					fontSize: tokens.typography.fontSize.micro
+				},
+				children: getStatusShape(event.status)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				},
+				children: event.title
+			})
+		]
+	});
 });
-const MiniCalendar = memo(function MiniCalendar2({
-  currentDate,
-  tokens,
-  weekStartsMonday,
-  onDateSelect,
-  getEventsForDay
-}) {
-  const [miniDate, setMiniDate] = useState(new Date(currentDate));
-  const year = miniDate.getFullYear();
-  const month = miniDate.getMonth();
-  const today = /* @__PURE__ */ new Date();
-  const dayLabels = weekStartsMonday ? ["M", "T", "W", "T", "F", "S", "S"] : ["S", "M", "T", "W", "T", "F", "S"];
-  const grid = useMemo(() => {
-    const firstDay = getFirstDayOfMonth(year, month, weekStartsMonday);
-    const daysInMonth = getDaysInMonth(year, month);
-    const daysInPrevMonth = getDaysInMonth(year, month === 0 ? 11 : month - 1);
-    const cells = [];
-    for (let i = firstDay - 1; i >= 0; i--) {
-      cells.push({ date: new Date(year, month - 1, daysInPrevMonth - i), isCurrentMonth: false });
-    }
-    for (let i = 1; i <= daysInMonth; i++) {
-      cells.push({ date: new Date(year, month, i), isCurrentMonth: true });
-    }
-    while (cells.length < 42) {
-      cells.push({ date: new Date(year, month + 1, cells.length - firstDay - daysInMonth + 1), isCurrentMonth: false });
-    }
-    return cells;
-  }, [year, month, weekStartsMonday]);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }, children: [
-      /* @__PURE__ */ jsx("button", { onClick: () => setMiniDate(new Date(year, month - 1)), style: { background: "none", border: "none", color: tokens.colors.text.muted, cursor: "pointer", fontSize: 12, padding: "2px 6px" }, children: "◀" }),
-      /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, fontSize: 11 }, children: miniDate.toLocaleDateString("en-US", { month: "short", year: "numeric" }) }),
-      /* @__PURE__ */ jsx("button", { onClick: () => setMiniDate(new Date(year, month + 1)), style: { background: "none", border: "none", color: tokens.colors.text.muted, cursor: "pointer", fontSize: 12, padding: "2px 6px" }, children: "▶" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0 }, children: [
-      dayLabels.map((d, i) => /* @__PURE__ */ jsx("div", { style: { textAlign: "center", fontSize: 9, color: tokens.colors.text.muted, fontWeight: 500, padding: "2px 0" }, children: d }, i)),
-      grid.map(({ date, isCurrentMonth }, idx) => {
-        const isToday = isSameDay(date, today);
-        const isSelected = isSameDay(date, currentDate);
-        const hasEvents = getEventsForDay(date).length > 0;
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            onClick: () => onDateSelect(date),
-            style: {
-              textAlign: "center",
-              fontSize: 10,
-              padding: "3px 0",
-              cursor: "pointer",
-              color: isSelected ? tokens.colors.text.inverse : isCurrentMonth ? tokens.colors.text.primary : tokens.colors.text.muted + "55",
-              fontWeight: isToday || isSelected ? 700 : 400,
-              background: isSelected ? tokens.colors.interactive.default : isToday ? `${tokens.colors.interactive.default}20` : "transparent",
-              borderRadius: isSelected || isToday ? tokens.borderRadius.full : 0,
-              position: "relative"
-            },
-            children: [
-              date.getDate(),
-              hasEvents && !isSelected && /* @__PURE__ */ jsx("span", { style: {
-                position: "absolute",
-                bottom: 0,
-                left: "50%",
-                transform: "translateX(-50%)",
-                width: 3,
-                height: 3,
-                borderRadius: "50%",
-                background: tokens.colors.interactive.default
-              } })
-            ]
-          },
-          idx
-        );
-      })
-    ] })
-  ] });
+/** Mini calendar for sidebar */
+var MiniCalendar = memo(function MiniCalendar({ currentDate, tokens, weekStartsMonday, onDateSelect, getEventsForDay }) {
+	const [miniDate, setMiniDate] = useState(new Date(currentDate));
+	const year = miniDate.getFullYear();
+	const month = miniDate.getMonth();
+	const today = /* @__PURE__ */ new Date();
+	const dayLabels = weekStartsMonday ? [
+		"M",
+		"T",
+		"W",
+		"T",
+		"F",
+		"S",
+		"S"
+	] : [
+		"S",
+		"M",
+		"T",
+		"W",
+		"T",
+		"F",
+		"S"
+	];
+	const grid = useMemo(() => {
+		const firstDay = getFirstDayOfMonth(year, month, weekStartsMonday);
+		const daysInMonth = getDaysInMonth(year, month);
+		const daysInPrevMonth = getDaysInMonth(year, month === 0 ? 11 : month - 1);
+		const cells = [];
+		for (let i = firstDay - 1; i >= 0; i--) cells.push({
+			date: new Date(year, month - 1, daysInPrevMonth - i),
+			isCurrentMonth: false
+		});
+		for (let i = 1; i <= daysInMonth; i++) cells.push({
+			date: new Date(year, month, i),
+			isCurrentMonth: true
+		});
+		while (cells.length < 42) cells.push({
+			date: new Date(year, month + 1, cells.length - firstDay - daysInMonth + 1),
+			isCurrentMonth: false
+		});
+		return cells;
+	}, [
+		year,
+		month,
+		weekStartsMonday
+	]);
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			marginBottom: 6
+		},
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				onClick: () => setMiniDate(new Date(year, month - 1)),
+				style: {
+					background: "none",
+					border: "none",
+					color: tokens.colors.text.muted,
+					cursor: "pointer",
+					fontSize: 12,
+					padding: "2px 6px"
+				},
+				children: "◀"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					fontWeight: 500,
+					fontSize: 11
+				},
+				children: miniDate.toLocaleDateString("en-US", {
+					month: "short",
+					year: "numeric"
+				})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				onClick: () => setMiniDate(new Date(year, month + 1)),
+				style: {
+					background: "none",
+					border: "none",
+					color: tokens.colors.text.muted,
+					cursor: "pointer",
+					fontSize: 12,
+					padding: "2px 6px"
+				},
+				children: "▶"
+			})
+		]
+	}), /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "grid",
+			gridTemplateColumns: "repeat(7, 1fr)",
+			gap: 0
+		},
+		children: [dayLabels.map((d, i) => /* @__PURE__ */ jsx("div", {
+			style: {
+				textAlign: "center",
+				fontSize: 9,
+				color: tokens.colors.text.muted,
+				fontWeight: 500,
+				padding: "2px 0"
+			},
+			children: d
+		}, i)), grid.map(({ date, isCurrentMonth }, idx) => {
+			const isToday = isSameDay(date, today);
+			const isSelected = isSameDay(date, currentDate);
+			const hasEvents = getEventsForDay(date).length > 0;
+			return /* @__PURE__ */ jsxs("div", {
+				onClick: () => onDateSelect(date),
+				style: {
+					textAlign: "center",
+					fontSize: 10,
+					padding: "3px 0",
+					cursor: "pointer",
+					color: isSelected ? tokens.colors.text.inverse : isCurrentMonth ? tokens.colors.text.primary : tokens.colors.text.muted + "55",
+					fontWeight: isToday || isSelected ? 700 : 400,
+					background: isSelected ? tokens.colors.interactive.default : isToday ? `${tokens.colors.interactive.default}20` : "transparent",
+					borderRadius: isSelected || isToday ? tokens.borderRadius.full : 0,
+					position: "relative"
+				},
+				children: [date.getDate(), hasEvents && !isSelected && /* @__PURE__ */ jsx("span", { style: {
+					position: "absolute",
+					bottom: 0,
+					left: "50%",
+					transform: "translateX(-50%)",
+					width: 3,
+					height: 3,
+					borderRadius: "50%",
+					background: tokens.colors.interactive.default
+				} })]
+			}, idx);
+		})]
+	})] });
 });
-const MissionCalendar = memo(function MissionCalendar2({
-  events,
-  timelines = [],
-  defaultView = "month",
-  initialDate,
-  height = 600,
-  title,
-  showSidebar = true,
-  showTimelines = true,
-  showFilters = true,
-  showCreate = true,
-  weekStartsMonday = true,
-  onEventClick,
-  onEventCreate,
-  onDayDrillDown,
-  className = ""
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const [viewMode, setViewMode] = useState(defaultView);
-  const [currentDate, setCurrentDate] = useState(initialDate || /* @__PURE__ */ new Date());
-  const [selectedTimelines, setSelectedTimelines] = useState(
-    new Set(timelines.map((t) => t.id))
-  );
-  const [typeFilter, setTypeFilter] = useState(
-    /* @__PURE__ */ new Set(["command", "script", "reserve", "metadata", "note", "contact", "eclipse", "pass"])
-  );
-  const [contextMenu, setContextMenu] = useState(null);
-  const bodyRef = useRef(null);
-  const year = currentDate.getFullYear();
-  const month = currentDate.getMonth();
-  const filteredEvents = useMemo(
-    () => events.filter(
-      (e) => typeFilter.has(e.type) && (selectedTimelines.size === 0 || !e.timeline || selectedTimelines.has(e.timeline))
-    ),
-    [events, typeFilter, selectedTimelines]
-  );
-  const eventsByDay = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    filteredEvents.forEach((e) => {
-      const key = `${e.start.getFullYear()}-${e.start.getMonth()}-${e.start.getDate()}`;
-      if (!map.has(key)) map.set(key, []);
-      map.get(key).push(e);
-      if (e.end) {
-        const days = Math.ceil((e.end.getTime() - e.start.getTime()) / 864e5);
-        for (let d = 1; d <= days && d < 30; d++) {
-          const next = new Date(e.start);
-          next.setDate(next.getDate() + d);
-          const nk = `${next.getFullYear()}-${next.getMonth()}-${next.getDate()}`;
-          if (!map.has(nk)) map.set(nk, []);
-          map.get(nk).push(e);
-        }
-      }
-    });
-    return map;
-  }, [filteredEvents]);
-  const getEventsForDay = useCallback((d) => {
-    const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
-    return eventsByDay.get(key) || [];
-  }, [eventsByDay]);
-  const navigate = useCallback((dir) => {
-    if (dir === 0) {
-      setCurrentDate(/* @__PURE__ */ new Date());
-      return;
-    }
-    const d = new Date(currentDate);
-    if (viewMode === "month") d.setMonth(d.getMonth() + dir);
-    else if (viewMode === "week" || viewMode === "gantt") d.setDate(d.getDate() + dir * 7);
-    else d.setDate(d.getDate() + dir);
-    setCurrentDate(d);
-  }, [currentDate, viewMode]);
-  const toggleTimeline = useCallback((id) => {
-    setSelectedTimelines((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  }, []);
-  const toggleType = useCallback((type) => {
-    setTypeFilter((prev) => {
-      const next = new Set(prev);
-      if (next.has(type)) next.delete(type);
-      else next.add(type);
-      return next;
-    });
-  }, []);
-  const dayNames = weekStartsMonday ? ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  const monthLabel = currentDate.toLocaleDateString("en-US", { month: "long", year: "numeric" });
-  const today = /* @__PURE__ */ new Date();
-  const weekNum = getWeekNumber(currentDate);
-  const doy = getDayOfYear(currentDate);
-  const monthGrid = useMemo(() => {
-    const firstDay = getFirstDayOfMonth(year, month, weekStartsMonday);
-    const daysInMonth = getDaysInMonth(year, month);
-    const daysInPrevMonth = getDaysInMonth(year, month === 0 ? 11 : month - 1);
-    const cells = [];
-    for (let i = firstDay - 1; i >= 0; i--) {
-      cells.push({ date: new Date(year, month - 1, daysInPrevMonth - i), isCurrentMonth: false });
-    }
-    for (let i = 1; i <= daysInMonth; i++) {
-      cells.push({ date: new Date(year, month, i), isCurrentMonth: true });
-    }
-    while (cells.length < 42) {
-      cells.push({ date: new Date(year, month + 1, cells.length - firstDay - daysInMonth + 1), isCurrentMonth: false });
-    }
-    return cells;
-  }, [year, month, weekStartsMonday]);
-  const weekDates = useMemo(() => getWeekDates(currentDate, weekStartsMonday), [currentDate, weekStartsMonday]);
-  const dayEvents = useMemo(() => {
-    const evts = getEventsForDay(currentDate);
-    return [...evts].sort((a, b) => a.start.getTime() - b.start.getTime());
-  }, [currentDate, getEventsForDay]);
-  const listEvents = useMemo(() => {
-    const now = /* @__PURE__ */ new Date();
-    const end = new Date(now);
-    end.setDate(end.getDate() + 7);
-    return filteredEvents.filter((e) => e.start >= now && e.start <= end).sort((a, b) => a.start.getTime() - b.start.getTime());
-  }, [filteredEvents]);
-  const ganttData = useMemo(() => {
-    const weekStart = new Date(weekDates[0]);
-    weekStart.setHours(0, 0, 0, 0);
-    const weekEnd = new Date(weekDates[6]);
-    weekEnd.setHours(23, 59, 59, 999);
-    const weekEvents = filteredEvents.filter(
-      (e) => e.start <= weekEnd && (e.end || e.start) >= weekStart
-    );
-    const tlMap = /* @__PURE__ */ new Map();
-    const noTl = [];
-    weekEvents.forEach((e) => {
-      const tlId = e.timeline || "";
-      if (!tlId) {
-        noTl.push(e);
-        return;
-      }
-      if (!tlMap.has(tlId)) tlMap.set(tlId, []);
-      tlMap.get(tlId).push(e);
-    });
-    const rows = [];
-    timelines.forEach((tl) => {
-      if (tlMap.has(tl.id)) {
-        rows.push({ label: tl.name, color: tl.color || tokens.colors.interactive.default, events: tlMap.get(tl.id) });
-      }
-    });
-    if (noTl.length > 0) rows.push({ label: "Unassigned", color: tokens.colors.text.muted ?? tokens.colors.text.secondary, events: noTl });
-    return { rows, weekStart, weekEnd };
-  }, [filteredEvents, weekDates, timelines, tokens]);
-  const handleContextMenu = useCallback((e, date, slotTime) => {
-    e.preventDefault();
-    if (!onEventCreate) return;
-    const d = new Date(date);
-    if (slotTime) {
-      const [h, m] = slotTime.split(":").map(Number);
-      d.setHours(h, m, 0, 0);
-    }
-    setContextMenu({ x: e.clientX, y: e.clientY, date: d });
-  }, [onEventCreate]);
-  const headerLabel = useMemo(() => {
-    if (viewMode === "month") return monthLabel;
-    if (viewMode === "week" || viewMode === "gantt") {
-      return `${weekDates[0].toLocaleDateString("en-US", { month: "short", day: "numeric" })} – ${weekDates[6].toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}  Week ${weekNum}`;
-    }
-    return currentDate.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" });
-  }, [viewMode, monthLabel, weekDates, weekNum, currentDate]);
-  const renderSidebar = () => /* @__PURE__ */ jsxs("div", { style: {
-    width: 190,
-    minWidth: 190,
-    borderRight: `1px solid ${tokens.colors.border.muted}`,
-    background: tokens.colors.background.surface,
-    padding: "8px 10px",
-    display: "flex",
-    flexDirection: "column",
-    gap: 12,
-    overflow: "auto"
-  }, children: [
-    /* @__PURE__ */ jsx(
-      MiniCalendar,
-      {
-        currentDate,
-        tokens,
-        weekStartsMonday,
-        onDateSelect: (d) => {
-          setCurrentDate(d);
-          if (viewMode === "month") setViewMode("day");
-        },
-        getEventsForDay
-      }
-    ),
-    showFilters && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { fontSize: 10, fontWeight: 500, color: tokens.colors.text.muted, textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 4 }, children: "Event Types" }),
-      ["command", "script", "reserve", "metadata", "note", "contact"].map((type) => /* @__PURE__ */ jsxs("label", { style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        padding: "2px 0",
-        cursor: "pointer",
-        fontSize: 11,
-        color: typeFilter.has(type) ? tokens.colors.text.primary : tokens.colors.text.muted + "66"
-      }, children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: typeFilter.has(type),
-            onChange: () => toggleType(type),
-            style: { accentColor: tokens.colors.interactive.default, width: 12, height: 12 }
-          }
-        ),
-        TYPE_ICON_ASTRO.includes(type) ? /* @__PURE__ */ jsx(AstroIcon, { name: getTypeIcon(type), size: "extra-small", label: "", style: { opacity: 0.7 } }) : /* @__PURE__ */ jsx("span", { style: { opacity: 0.7, fontSize: 10 }, children: getTypeIcon(type) }),
-        /* @__PURE__ */ jsx("span", { style: { textTransform: "capitalize" }, children: type })
-      ] }, type))
-    ] }),
-    showTimelines && timelines.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { fontSize: 10, fontWeight: 500, color: tokens.colors.text.muted, textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 4 }, children: "Timelines" }),
-      timelines.map((tl) => /* @__PURE__ */ jsxs("label", { style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        padding: "3px 0",
-        cursor: "pointer",
-        fontSize: 11,
-        color: selectedTimelines.has(tl.id) ? tokens.colors.text.primary : tokens.colors.text.muted + "66"
-      }, children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: selectedTimelines.has(tl.id),
-            onChange: () => toggleTimeline(tl.id),
-            style: { accentColor: tl.color || tokens.colors.interactive.default, width: 12, height: 12 }
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { style: { width: 8, height: 8, borderRadius: "50%", background: tl.color || tokens.colors.interactive.default, flexShrink: 0 } }),
-        /* @__PURE__ */ jsx("span", { children: tl.name })
-      ] }, tl.id))
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: {
-      marginTop: "auto",
-      fontSize: 10,
-      color: tokens.colors.text.muted,
-      borderTop: `1px solid ${tokens.colors.border.muted}`,
-      paddingTop: 8
-    }, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        "DOY: ",
-        /* @__PURE__ */ jsx("span", { style: { fontFamily: tokens.typography.fontFamily.mono, color: tokens.colors.text.secondary }, children: doy })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        "Week: ",
-        /* @__PURE__ */ jsx("span", { style: { fontFamily: tokens.typography.fontFamily.mono, color: tokens.colors.text.secondary }, children: weekNum })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        "UTC: ",
-        /* @__PURE__ */ jsx("span", { style: { fontFamily: tokens.typography.fontFamily.mono, color: tokens.colors.text.secondary }, children: today.toISOString().slice(11, 19) })
-      ] })
-    ] })
-  ] });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `mission-calendar ${className}`,
-      onClick: () => setContextMenu(null),
-      style: {
-        height: typeof height === "number" ? height : void 0,
-        background: tokens.colors.background.base,
-        ...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
-        borderRadius: tokens.borderRadius.lg,
-        overflow: "hidden",
-        display: "flex",
-        flexDirection: "column",
-        fontFamily: tokens.typography.fontFamily.primary,
-        color: tokens.colors.text.primary,
-        backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
-        WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: {
-          padding: "8px 14px",
-          borderBottom: `1px solid ${tokens.colors.border.muted}`,
-          background: tokens.colors.background.surface,
-          backdropFilter: "blur(8px)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          flexWrap: "wrap",
-          gap: 8
-        }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-            title && /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, fontSize: tokens.typography.fontSize.sm }, children: title }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 2 }, children: [
-              /* @__PURE__ */ jsx("button", { onClick: () => navigate(-1), style: navBtnStyle(tokens), children: "◀" }),
-              /* @__PURE__ */ jsx("button", { onClick: () => navigate(0), style: { ...navBtnStyle(tokens), padding: "3px 10px", fontSize: tokens.typography.fontSize.xs }, children: "Today" }),
-              /* @__PURE__ */ jsx("button", { onClick: () => navigate(1), style: navBtnStyle(tokens), children: "▶" })
-            ] }),
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, fontSize: tokens.typography.fontSize.sm }, children: headerLabel }),
-            /* @__PURE__ */ jsxs("span", { style: {
-              fontSize: 9,
-              fontFamily: tokens.typography.fontFamily.mono,
-              color: tokens.colors.text.muted,
-              background: `${tokens.colors.text.muted}15`,
-              padding: "1px 6px",
-              borderRadius: tokens.borderRadius.sm
-            }, children: [
-              "DOY ",
-              doy
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-            showCreate && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => onEventCreate == null ? void 0 : onEventCreate({ start: currentDate, type: "reserve" }),
-                style: {
-                  background: tokens.colors.interactive.default,
-                  color: tokens.colors.text.inverse,
-                  border: "none",
-                  borderRadius: tokens.borderRadius.md,
-                  padding: "4px 12px",
-                  fontSize: tokens.typography.fontSize.xs,
-                  fontWeight: 500,
-                  cursor: "pointer"
-                },
-                children: "+ Activity"
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { style: {
-              display: "flex",
-              borderRadius: tokens.borderRadius.md,
-              overflow: "hidden",
-              border: `1px solid ${tokens.colors.border.muted}`
-            }, children: ["month", "week", "day", "gantt", "list"].map((v) => /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setViewMode(v),
-                style: {
-                  background: viewMode === v ? tokens.colors.interactive.default : tokens.colors.background.base,
-                  color: viewMode === v ? tokens.colors.text.inverse : tokens.colors.text.secondary,
-                  border: "none",
-                  padding: "3px 10px",
-                  fontSize: tokens.typography.fontSize.xxs,
-                  fontWeight: 500,
-                  cursor: "pointer",
-                  textTransform: "capitalize"
-                },
-                children: v
-              },
-              v
-            )) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-          showSidebar && renderSidebar(),
-          /* @__PURE__ */ jsxs("div", { ref: bodyRef, style: { flex: 1, overflow: "auto" }, children: [
-            viewMode === "month" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-              /* @__PURE__ */ jsx("div", { style: {
-                display: "grid",
-                gridTemplateColumns: "repeat(7, 1fr)",
-                borderBottom: `1px solid ${tokens.colors.border.muted}`,
-                background: tokens.colors.background.surface
-              }, children: dayNames.map((d) => /* @__PURE__ */ jsx("div", { style: {
-                padding: "4px 6px",
-                textAlign: "center",
-                fontSize: tokens.typography.fontSize.xxs,
-                fontWeight: 500,
-                color: tokens.colors.text.muted,
-                textTransform: "uppercase"
-              }, children: d }, d)) }),
-              /* @__PURE__ */ jsx("div", { style: {
-                display: "grid",
-                gridTemplateColumns: "repeat(7, 1fr)",
-                gridTemplateRows: "repeat(6, 1fr)",
-                flex: 1
-              }, children: monthGrid.map(({ date, isCurrentMonth }, idx) => {
-                const dayEvts = getEventsForDay(date);
-                const isToday = isSameDay(date, today);
-                return /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    onClick: () => {
-                      setCurrentDate(date);
-                      if (onDayDrillDown) onDayDrillDown(date, dayEvts);
-                      else setViewMode("day");
-                    },
-                    onContextMenu: (e) => handleContextMenu(e, date),
-                    style: {
-                      borderRight: `1px solid ${tokens.colors.border.muted}11`,
-                      borderBottom: `1px solid ${tokens.colors.border.muted}11`,
-                      padding: 3,
-                      cursor: "pointer",
-                      background: isToday ? `${tokens.colors.interactive.default}08` : "transparent",
-                      opacity: isCurrentMonth ? 1 : 0.35,
-                      overflow: "hidden",
-                      minHeight: 70
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx("div", { style: {
-                        fontSize: tokens.typography.fontSize.xs,
-                        fontWeight: isToday ? 700 : 400,
-                        color: isToday ? tokens.colors.interactive.default : tokens.colors.text.primary,
-                        marginBottom: 2,
-                        textAlign: "right",
-                        paddingRight: 2
-                      }, children: isToday ? /* @__PURE__ */ jsx("span", { style: {
-                        background: tokens.colors.interactive.default,
-                        color: tokens.colors.text.inverse,
-                        borderRadius: tokens.borderRadius.full,
-                        width: 20,
-                        height: 20,
-                        display: "inline-flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        fontSize: tokens.typography.fontSize.xxs
-                      }, children: date.getDate() }) : date.getDate() }),
-                      dayEvts.slice(0, 3).map((e) => /* @__PURE__ */ jsx(CalendarEventChip, { event: e, tokens, compact: true, onClick: () => onEventClick == null ? void 0 : onEventClick(e) }, e.id)),
-                      dayEvts.length > 3 && /* @__PURE__ */ jsxs("div", { style: { fontSize: tokens.typography.fontSize.micro, color: tokens.colors.text.muted, textAlign: "center" }, children: [
-                        "+",
-                        dayEvts.length - 3,
-                        " more"
-                      ] })
-                    ]
-                  },
-                  idx
-                );
-              }) })
-            ] }),
-            viewMode === "week" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-              /* @__PURE__ */ jsxs("div", { style: {
-                display: "grid",
-                gridTemplateColumns: `50px repeat(7, 1fr)`,
-                borderBottom: `1px solid ${tokens.colors.border.muted}`,
-                background: tokens.colors.background.surface,
-                position: "sticky",
-                top: 0,
-                zIndex: 2
-              }, children: [
-                /* @__PURE__ */ jsx("div", { style: { borderRight: `1px solid ${tokens.colors.border.muted}22` } }),
-                weekDates.map((d, i) => {
-                  const isToday = isSameDay(d, today);
-                  return /* @__PURE__ */ jsxs("div", { style: {
-                    padding: "4px 4px",
-                    textAlign: "center",
-                    background: isToday ? `${tokens.colors.interactive.default}10` : "transparent",
-                    borderRight: `1px solid ${tokens.colors.border.muted}11`
-                  }, children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontSize: 9, color: tokens.colors.text.muted, textTransform: "uppercase" }, children: dayNames[i] }),
-                    /* @__PURE__ */ jsx("div", { style: {
-                      fontSize: 16,
-                      fontWeight: isToday ? 700 : 400,
-                      color: isToday ? tokens.colors.interactive.default : tokens.colors.text.primary
-                    }, children: isToday ? /* @__PURE__ */ jsx("span", { style: {
-                      background: tokens.colors.interactive.default,
-                      color: tokens.colors.text.inverse,
-                      borderRadius: tokens.borderRadius.full,
-                      width: 24,
-                      height: 24,
-                      display: "inline-flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: 13
-                    }, children: d.getDate() }) : d.getDate() })
-                  ] }, i);
-                })
-              ] }),
-              /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: TIME_SLOTS.map((slot, _si) => {
-                const isHour = slot.endsWith(":00");
-                return /* @__PURE__ */ jsxs("div", { style: {
-                  display: "grid",
-                  gridTemplateColumns: `50px repeat(7, 1fr)`,
-                  height: SLOT_HEIGHT,
-                  borderBottom: `1px solid ${tokens.colors.border.muted}${isHour ? "22" : "0A"}`
-                }, children: [
-                  /* @__PURE__ */ jsx("div", { style: {
-                    fontSize: 9,
-                    color: tokens.colors.text.muted,
-                    textAlign: "right",
-                    paddingRight: 6,
-                    fontFamily: tokens.typography.fontFamily.mono,
-                    borderRight: `1px solid ${tokens.colors.border.muted}22`,
-                    lineHeight: `${SLOT_HEIGHT}px`,
-                    visibility: isHour ? "visible" : "hidden"
-                  }, children: slot }),
-                  weekDates.map((d, di) => {
-                    const slotStart = new Date(d);
-                    slotStart.setHours(parseInt(slot), slot.endsWith(":30") ? 30 : 0, 0, 0);
-                    const slotEvents = getEventsForDay(d).filter((e) => {
-                      const eStart = e.start.getHours() * 60 + e.start.getMinutes();
-                      const sStart = parseInt(slot) * 60 + (slot.endsWith(":30") ? 30 : 0);
-                      return eStart >= sStart && eStart < sStart + 30;
-                    });
-                    return /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        onClick: () => {
-                          setCurrentDate(d);
-                          setViewMode("day");
-                        },
-                        onContextMenu: (e) => handleContextMenu(e, d, slot),
-                        style: {
-                          borderRight: `1px solid ${tokens.colors.border.muted}0A`,
-                          padding: "0 2px",
-                          cursor: "pointer",
-                          overflow: "hidden",
-                          background: isSameDay(d, today) ? `${tokens.colors.interactive.default}04` : "transparent"
-                        },
-                        children: slotEvents.map((e) => /* @__PURE__ */ jsx(CalendarEventChip, { event: e, tokens, compact: true, onClick: () => onEventClick == null ? void 0 : onEventClick(e) }, e.id))
-                      },
-                      di
-                    );
-                  })
-                ] }, slot);
-              }) })
-            ] }),
-            viewMode === "day" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: TIME_SLOTS.map((slot) => {
-              const isHour = slot.endsWith(":00");
-              const slotEvents = dayEvents.filter((e) => {
-                const eStart = e.start.getHours() * 60 + e.start.getMinutes();
-                const sStart = parseInt(slot) * 60 + (slot.endsWith(":30") ? 30 : 0);
-                return eStart >= sStart && eStart < sStart + 30;
-              });
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  onContextMenu: (e) => handleContextMenu(e, currentDate, slot),
-                  style: {
-                    display: "grid",
-                    gridTemplateColumns: "50px 1fr",
-                    minHeight: slotEvents.length > 0 ? Math.max(SLOT_HEIGHT, slotEvents.length * 24 + 4) : SLOT_HEIGHT,
-                    borderBottom: `1px solid ${tokens.colors.border.muted}${isHour ? "22" : "0A"}`
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("div", { style: {
-                      fontSize: 10,
-                      color: tokens.colors.text.muted,
-                      textAlign: "right",
-                      paddingRight: 8,
-                      fontFamily: tokens.typography.fontFamily.mono,
-                      borderRight: `1px solid ${tokens.colors.border.muted}22`,
-                      lineHeight: `${SLOT_HEIGHT}px`,
-                      visibility: isHour ? "visible" : "hidden"
-                    }, children: slot }),
-                    /* @__PURE__ */ jsx("div", { style: { padding: "1px 6px", cursor: "pointer" }, children: slotEvents.map((e) => {
-                      const color = e.color || getStatusColor(e.status, tokens);
-                      return /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          onClick: () => onEventClick == null ? void 0 : onEventClick(e),
-                          style: {
-                            background: `${color}18`,
-                            borderRadius: tokens.borderRadius.sm,
-                            padding: "3px 8px",
-                            marginBottom: 2,
-                            cursor: "pointer",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: 6,
-                            fontSize: tokens.typography.fontSize.xxs
-                          },
-                          children: [
-                            TYPE_ICON_ASTRO.includes(e.type) ? /* @__PURE__ */ jsx(AstroIcon, { name: getTypeIcon(e.type), size: "extra-small", label: "", style: { opacity: 0.7 } }) : /* @__PURE__ */ jsx("span", { style: { opacity: 0.7 }, children: getTypeIcon(e.type) }),
-                            /* @__PURE__ */ jsx("span", { style: { color, fontSize: tokens.typography.fontSize.micro }, children: getStatusShape(e.status) }),
-                            /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: e.title }),
-                            /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.text.muted, fontFamily: tokens.typography.fontFamily.mono, fontSize: tokens.typography.fontSize.micro, marginLeft: "auto" }, children: [
-                              formatTime(e.start),
-                              e.end ? `–${formatTime(e.end)}` : ""
-                            ] }),
-                            e.status && /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.micro, color, fontWeight: 500, textTransform: "uppercase" }, children: e.status })
-                          ]
-                        },
-                        e.id
-                      );
-                    }) })
-                  ]
-                },
-                slot
-              );
-            }) }) }),
-            viewMode === "gantt" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
-              /* @__PURE__ */ jsxs("div", { style: {
-                display: "grid",
-                gridTemplateColumns: `120px repeat(7, 1fr)`,
-                borderBottom: `1px solid ${tokens.colors.border.muted}`,
-                background: tokens.colors.background.surface,
-                position: "sticky",
-                top: 0,
-                zIndex: 2
-              }, children: [
-                /* @__PURE__ */ jsx("div", { style: { padding: "6px 8px", fontSize: 10, fontWeight: 500, color: tokens.colors.text.muted, borderRight: `1px solid ${tokens.colors.border.muted}22` }, children: "Timeline" }),
-                weekDates.map((d, i) => {
-                  const isToday = isSameDay(d, today);
-                  return /* @__PURE__ */ jsxs("div", { style: {
-                    padding: "4px 4px",
-                    textAlign: "center",
-                    background: isToday ? `${tokens.colors.interactive.default}10` : "transparent",
-                    borderRight: `1px solid ${tokens.colors.border.muted}11`,
-                    fontSize: 10
-                  }, children: [
-                    /* @__PURE__ */ jsxs("span", { style: { color: tokens.colors.text.muted }, children: [
-                      dayNames[i],
-                      " "
-                    ] }),
-                    /* @__PURE__ */ jsx("span", { style: { fontWeight: isToday ? 700 : 400, color: isToday ? tokens.colors.interactive.default : tokens.colors.text.primary }, children: d.getDate() })
-                  ] }, i);
-                })
-              ] }),
-              /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto" }, children: ganttData.rows.length === 0 ? /* @__PURE__ */ jsx("div", { style: { textAlign: "center", color: tokens.colors.text.muted, padding: 40, fontSize: 12 }, children: "No activities this week" }) : ganttData.rows.map((row, ri) => /* @__PURE__ */ jsxs("div", { style: {
-                display: "grid",
-                gridTemplateColumns: `120px repeat(7, 1fr)`,
-                borderBottom: `1px solid ${tokens.colors.border.muted}15`,
-                minHeight: 36
-              }, children: [
-                /* @__PURE__ */ jsxs("div", { style: {
-                  padding: "6px 8px",
-                  fontSize: 11,
-                  fontWeight: 500,
-                  borderRight: `1px solid ${tokens.colors.border.muted}22`,
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 6,
-                  color: tokens.colors.text.primary
-                }, children: [
-                  /* @__PURE__ */ jsx("span", { style: { width: 6, height: 6, borderRadius: "50%", background: row.color, flexShrink: 0 } }),
-                  row.label
-                ] }),
-                weekDates.map((d, di) => {
-                  const cellEvents = row.events.filter((e) => {
-                    const eDay = new Date(e.start);
-                    eDay.setHours(0, 0, 0, 0);
-                    const cellDay = new Date(d);
-                    cellDay.setHours(0, 0, 0, 0);
-                    if (e.end) {
-                      const eEnd = new Date(e.end);
-                      eEnd.setHours(23, 59, 59, 999);
-                      return cellDay >= eDay && cellDay <= eEnd;
-                    }
-                    return eDay.getTime() === cellDay.getTime();
-                  });
-                  return /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      onContextMenu: (e) => handleContextMenu(e, d),
-                      style: {
-                        borderRight: `1px solid ${tokens.colors.border.muted}0A`,
-                        padding: "2px 2px",
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: 2,
-                        background: isSameDay(d, today) ? `${tokens.colors.interactive.default}04` : "transparent"
-                      },
-                      children: cellEvents.map((e) => {
-                        const color = e.color || getStatusColor(e.status, tokens);
-                        return /* @__PURE__ */ jsxs(
-                          "div",
-                          {
-                            onClick: () => onEventClick == null ? void 0 : onEventClick(e),
-                            style: {
-                              background: `${color}33`,
-                              borderRadius: 3,
-                              padding: "2px 4px",
-                              fontSize: 9,
-                              fontWeight: 500,
-                              color: tokens.colors.text.primary,
-                              cursor: "pointer",
-                              whiteSpace: "nowrap",
-                              overflow: "hidden",
-                              textOverflow: "ellipsis"
-                            },
-                            title: `${e.title}
-${formatTime(e.start)}${e.end ? " – " + formatTime(e.end) : ""}`,
-                            children: [
-                              /* @__PURE__ */ jsx("span", { style: { opacity: 0.7, marginRight: 3 }, children: getStatusShape(e.status) }),
-                              e.title
-                            ]
-                          },
-                          e.id
-                        );
-                      })
-                    },
-                    di
-                  );
-                })
-              ] }, ri)) })
-            ] }),
-            viewMode === "list" && /* @__PURE__ */ jsxs("div", { style: { padding: 12 }, children: [
-              /* @__PURE__ */ jsxs("div", { style: { fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.muted, marginBottom: 8 }, children: [
-                "Upcoming 7 days — ",
-                listEvents.length,
-                " activities"
-              ] }),
-              listEvents.length === 0 ? /* @__PURE__ */ jsx("div", { style: { textAlign: "center", color: tokens.colors.text.muted, padding: 40, fontSize: tokens.typography.fontSize.sm }, children: "No upcoming activities" }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: listEvents.map((e) => {
-                const color = e.color || getStatusColor(e.status, tokens);
-                return /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    onClick: () => onEventClick == null ? void 0 : onEventClick(e),
-                    style: {
-                      display: "grid",
-                      gridTemplateColumns: "100px 1fr auto",
-                      padding: "6px 10px",
-                      borderRadius: tokens.borderRadius.md,
-                      background: `${color}08`,
-                      cursor: "pointer",
-                      alignItems: "center",
-                      gap: 10,
-                      fontSize: tokens.typography.fontSize.xs
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxs("span", { style: { fontFamily: tokens.typography.fontFamily.mono, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted }, children: [
-                        e.start.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
-                        " ",
-                        formatTime(e.start)
-                      ] }),
-                      /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-                        TYPE_ICON_ASTRO.includes(e.type) ? /* @__PURE__ */ jsx(AstroIcon, { name: getTypeIcon(e.type), size: "extra-small", label: "" }) : /* @__PURE__ */ jsx("span", { children: getTypeIcon(e.type) }),
-                        /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: e.title })
-                      ] }),
-                      e.status && /* @__PURE__ */ jsxs("span", { style: { fontSize: tokens.typography.fontSize.micro, color, fontWeight: 500 }, children: [
-                        getStatusShape(e.status),
-                        " ",
-                        e.status
-                      ] })
-                    ]
-                  },
-                  e.id
-                );
-              }) })
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: {
-          padding: "4px 14px",
-          borderTop: `1px solid ${tokens.colors.border.muted}`,
-          background: tokens.colors.background.surface,
-          fontSize: tokens.typography.fontSize.xxs,
-          color: tokens.colors.text.muted,
-          display: "flex",
-          justifyContent: "space-between"
-        }, children: [
-          /* @__PURE__ */ jsxs("span", { children: [
-            filteredEvents.length,
-            " activities | DOY ",
-            doy,
-            " | Week ",
-            weekNum
-          ] }),
-          /* @__PURE__ */ jsx("span", { children: events.filter((e) => e.status === "error" || e.status === "failed" || e.status === "crashed").length > 0 ? `⚠ ${events.filter((e) => e.status === "error" || e.status === "failed" || e.status === "crashed").length} errors` : "✓ All nominal" })
-        ] }),
-        contextMenu && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "fixed",
-              left: contextMenu.x,
-              top: contextMenu.y,
-              zIndex: 1e3,
-              background: tokens.colors.background.surface,
-              backdropFilter: "blur(8px)",
-              border: `1px solid ${tokens.colors.border.muted}`,
-              borderRadius: tokens.borderRadius.md,
-              boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
-              padding: 4,
-              minWidth: 160
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: { fontSize: 9, color: tokens.colors.text.muted, padding: "4px 8px", fontFamily: tokens.typography.fontFamily.mono }, children: [
-                contextMenu.date.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
-                " ",
-                formatTime(contextMenu.date)
-              ] }),
-              ["command", "script", "reserve", "metadata", "note"].map((type) => /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => {
-                    onEventCreate == null ? void 0 : onEventCreate({ start: contextMenu.date, type });
-                    setContextMenu(null);
-                  },
-                  style: {
-                    display: "block",
-                    width: "100%",
-                    textAlign: "left",
-                    background: "none",
-                    border: "none",
-                    color: tokens.colors.text.primary,
-                    padding: "5px 8px",
-                    fontSize: 11,
-                    cursor: "pointer",
-                    borderRadius: tokens.borderRadius.sm
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.background = `${tokens.colors.interactive.default}22`;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.background = "none";
-                  },
-                  children: [
-                    getTypeIcon(type),
-                    " Create ",
-                    type.charAt(0).toUpperCase() + type.slice(1)
-                  ]
-                },
-                type
-              ))
-            ]
-          }
-        )
-      ]
-    }
-  );
+var MissionCalendar = memo(function MissionCalendar({ events, timelines = [], defaultView = "month", initialDate, height = 600, title, showSidebar = true, showTimelines = true, showFilters = true, showCreate = true, weekStartsMonday = true, onEventClick, onEventCreate, onDayDrillDown, className = "" }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const [viewMode, setViewMode] = useState(defaultView);
+	const [currentDate, setCurrentDate] = useState(initialDate || /* @__PURE__ */ new Date());
+	const [selectedTimelines, setSelectedTimelines] = useState(new Set(timelines.map((t) => t.id)));
+	const [typeFilter, setTypeFilter] = useState(/* @__PURE__ */ new Set([
+		"command",
+		"script",
+		"reserve",
+		"metadata",
+		"note",
+		"contact",
+		"eclipse",
+		"pass"
+	]));
+	const [contextMenu, setContextMenu] = useState(null);
+	const bodyRef = useRef(null);
+	const year = currentDate.getFullYear();
+	const month = currentDate.getMonth();
+	const filteredEvents = useMemo(() => events.filter((e) => typeFilter.has(e.type) && (selectedTimelines.size === 0 || !e.timeline || selectedTimelines.has(e.timeline))), [
+		events,
+		typeFilter,
+		selectedTimelines
+	]);
+	const eventsByDay = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		filteredEvents.forEach((e) => {
+			const key = `${e.start.getFullYear()}-${e.start.getMonth()}-${e.start.getDate()}`;
+			if (!map.has(key)) map.set(key, []);
+			map.get(key).push(e);
+			if (e.end) {
+				const days = Math.ceil((e.end.getTime() - e.start.getTime()) / 864e5);
+				for (let d = 1; d <= days && d < 30; d++) {
+					const next = new Date(e.start);
+					next.setDate(next.getDate() + d);
+					const nk = `${next.getFullYear()}-${next.getMonth()}-${next.getDate()}`;
+					if (!map.has(nk)) map.set(nk, []);
+					map.get(nk).push(e);
+				}
+			}
+		});
+		return map;
+	}, [filteredEvents]);
+	const getEventsForDay = useCallback((d) => {
+		const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+		return eventsByDay.get(key) || [];
+	}, [eventsByDay]);
+	const navigate = useCallback((dir) => {
+		if (dir === 0) {
+			setCurrentDate(/* @__PURE__ */ new Date());
+			return;
+		}
+		const d = new Date(currentDate);
+		if (viewMode === "month") d.setMonth(d.getMonth() + dir);
+		else if (viewMode === "week" || viewMode === "gantt") d.setDate(d.getDate() + dir * 7);
+		else d.setDate(d.getDate() + dir);
+		setCurrentDate(d);
+	}, [currentDate, viewMode]);
+	const toggleTimeline = useCallback((id) => {
+		setSelectedTimelines((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}, []);
+	const toggleType = useCallback((type) => {
+		setTypeFilter((prev) => {
+			const next = new Set(prev);
+			if (next.has(type)) next.delete(type);
+			else next.add(type);
+			return next;
+		});
+	}, []);
+	const dayNames = weekStartsMonday ? [
+		"Mon",
+		"Tue",
+		"Wed",
+		"Thu",
+		"Fri",
+		"Sat",
+		"Sun"
+	] : [
+		"Sun",
+		"Mon",
+		"Tue",
+		"Wed",
+		"Thu",
+		"Fri",
+		"Sat"
+	];
+	const monthLabel = currentDate.toLocaleDateString("en-US", {
+		month: "long",
+		year: "numeric"
+	});
+	const today = /* @__PURE__ */ new Date();
+	const weekNum = getWeekNumber(currentDate);
+	const doy = getDayOfYear(currentDate);
+	const monthGrid = useMemo(() => {
+		const firstDay = getFirstDayOfMonth(year, month, weekStartsMonday);
+		const daysInMonth = getDaysInMonth(year, month);
+		const daysInPrevMonth = getDaysInMonth(year, month === 0 ? 11 : month - 1);
+		const cells = [];
+		for (let i = firstDay - 1; i >= 0; i--) cells.push({
+			date: new Date(year, month - 1, daysInPrevMonth - i),
+			isCurrentMonth: false
+		});
+		for (let i = 1; i <= daysInMonth; i++) cells.push({
+			date: new Date(year, month, i),
+			isCurrentMonth: true
+		});
+		while (cells.length < 42) cells.push({
+			date: new Date(year, month + 1, cells.length - firstDay - daysInMonth + 1),
+			isCurrentMonth: false
+		});
+		return cells;
+	}, [
+		year,
+		month,
+		weekStartsMonday
+	]);
+	const weekDates = useMemo(() => getWeekDates(currentDate, weekStartsMonday), [currentDate, weekStartsMonday]);
+	const dayEvents = useMemo(() => {
+		return [...getEventsForDay(currentDate)].sort((a, b) => a.start.getTime() - b.start.getTime());
+	}, [currentDate, getEventsForDay]);
+	const listEvents = useMemo(() => {
+		const now = /* @__PURE__ */ new Date();
+		const end = new Date(now);
+		end.setDate(end.getDate() + 7);
+		return filteredEvents.filter((e) => e.start >= now && e.start <= end).sort((a, b) => a.start.getTime() - b.start.getTime());
+	}, [filteredEvents]);
+	const ganttData = useMemo(() => {
+		const weekStart = new Date(weekDates[0]);
+		weekStart.setHours(0, 0, 0, 0);
+		const weekEnd = new Date(weekDates[6]);
+		weekEnd.setHours(23, 59, 59, 999);
+		const weekEvents = filteredEvents.filter((e) => e.start <= weekEnd && (e.end || e.start) >= weekStart);
+		const tlMap = /* @__PURE__ */ new Map();
+		const noTl = [];
+		weekEvents.forEach((e) => {
+			const tlId = e.timeline || "";
+			if (!tlId) {
+				noTl.push(e);
+				return;
+			}
+			if (!tlMap.has(tlId)) tlMap.set(tlId, []);
+			tlMap.get(tlId).push(e);
+		});
+		const rows = [];
+		timelines.forEach((tl) => {
+			if (tlMap.has(tl.id)) rows.push({
+				label: tl.name,
+				color: tl.color || tokens.colors.interactive.default,
+				events: tlMap.get(tl.id)
+			});
+		});
+		if (noTl.length > 0) rows.push({
+			label: "Unassigned",
+			color: tokens.colors.text.muted ?? tokens.colors.text.secondary,
+			events: noTl
+		});
+		return {
+			rows,
+			weekStart,
+			weekEnd
+		};
+	}, [
+		filteredEvents,
+		weekDates,
+		timelines,
+		tokens
+	]);
+	const handleContextMenu = useCallback((e, date, slotTime) => {
+		e.preventDefault();
+		if (!onEventCreate) return;
+		const d = new Date(date);
+		if (slotTime) {
+			const [h, m] = slotTime.split(":").map(Number);
+			d.setHours(h, m, 0, 0);
+		}
+		setContextMenu({
+			x: e.clientX,
+			y: e.clientY,
+			date: d
+		});
+	}, [onEventCreate]);
+	const headerLabel = useMemo(() => {
+		if (viewMode === "month") return monthLabel;
+		if (viewMode === "week" || viewMode === "gantt") return `${weekDates[0].toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric"
+		})} – ${weekDates[6].toLocaleDateString("en-US", {
+			month: "short",
+			day: "numeric",
+			year: "numeric"
+		})}  Week ${weekNum}`;
+		return currentDate.toLocaleDateString("en-US", {
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		});
+	}, [
+		viewMode,
+		monthLabel,
+		weekDates,
+		weekNum,
+		currentDate
+	]);
+	const renderSidebar = () => /* @__PURE__ */ jsxs("div", {
+		style: {
+			width: 190,
+			minWidth: 190,
+			borderRight: `1px solid ${tokens.colors.border.muted}`,
+			background: tokens.colors.background.surface,
+			padding: "8px 10px",
+			display: "flex",
+			flexDirection: "column",
+			gap: 12,
+			overflow: "auto"
+		},
+		children: [
+			/* @__PURE__ */ jsx(MiniCalendar, {
+				currentDate,
+				tokens,
+				weekStartsMonday,
+				onDateSelect: (d) => {
+					setCurrentDate(d);
+					if (viewMode === "month") setViewMode("day");
+				},
+				getEventsForDay
+			}),
+			showFilters && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: 10,
+					fontWeight: 500,
+					color: tokens.colors.text.muted,
+					textTransform: "uppercase",
+					letterSpacing: .5,
+					marginBottom: 4
+				},
+				children: "Event Types"
+			}), [
+				"command",
+				"script",
+				"reserve",
+				"metadata",
+				"note",
+				"contact"
+			].map((type) => /* @__PURE__ */ jsxs("label", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 6,
+					padding: "2px 0",
+					cursor: "pointer",
+					fontSize: 11,
+					color: typeFilter.has(type) ? tokens.colors.text.primary : tokens.colors.text.muted + "66"
+				},
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: typeFilter.has(type),
+						onChange: () => toggleType(type),
+						style: {
+							accentColor: tokens.colors.interactive.default,
+							width: 12,
+							height: 12
+						}
+					}),
+					TYPE_ICON_ASTRO.includes(type) ? /* @__PURE__ */ jsx(AstroIcon, {
+						name: getTypeIcon(type),
+						size: "extra-small",
+						label: "",
+						style: { opacity: .7 }
+					}) : /* @__PURE__ */ jsx("span", {
+						style: {
+							opacity: .7,
+							fontSize: 10
+						},
+						children: getTypeIcon(type)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: { textTransform: "capitalize" },
+						children: type
+					})
+				]
+			}, type))] }),
+			showTimelines && timelines.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: 10,
+					fontWeight: 500,
+					color: tokens.colors.text.muted,
+					textTransform: "uppercase",
+					letterSpacing: .5,
+					marginBottom: 4
+				},
+				children: "Timelines"
+			}), timelines.map((tl) => /* @__PURE__ */ jsxs("label", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 6,
+					padding: "3px 0",
+					cursor: "pointer",
+					fontSize: 11,
+					color: selectedTimelines.has(tl.id) ? tokens.colors.text.primary : tokens.colors.text.muted + "66"
+				},
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: selectedTimelines.has(tl.id),
+						onChange: () => toggleTimeline(tl.id),
+						style: {
+							accentColor: tl.color || tokens.colors.interactive.default,
+							width: 12,
+							height: 12
+						}
+					}),
+					/* @__PURE__ */ jsx("span", { style: {
+						width: 8,
+						height: 8,
+						borderRadius: "50%",
+						background: tl.color || tokens.colors.interactive.default,
+						flexShrink: 0
+					} }),
+					/* @__PURE__ */ jsx("span", { children: tl.name })
+				]
+			}, tl.id))] }),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					marginTop: "auto",
+					fontSize: 10,
+					color: tokens.colors.text.muted,
+					borderTop: `1px solid ${tokens.colors.border.muted}`,
+					paddingTop: 8
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [
+						"DOY:",
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							style: {
+								fontFamily: tokens.typography.fontFamily.mono,
+								color: tokens.colors.text.secondary
+							},
+							children: doy
+						})
+					] }),
+					/* @__PURE__ */ jsxs("div", { children: [
+						"Week:",
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							style: {
+								fontFamily: tokens.typography.fontFamily.mono,
+								color: tokens.colors.text.secondary
+							},
+							children: weekNum
+						})
+					] }),
+					/* @__PURE__ */ jsxs("div", { children: [
+						"UTC:",
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							style: {
+								fontFamily: tokens.typography.fontFamily.mono,
+								color: tokens.colors.text.secondary
+							},
+							children: today.toISOString().slice(11, 19)
+						})
+					] })
+				]
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: `mission-calendar ${className}`,
+		onClick: () => setContextMenu(null),
+		style: {
+			height: typeof height === "number" ? height : void 0,
+			background: tokens.colors.background.base,
+			...tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` },
+			borderRadius: tokens.borderRadius.lg,
+			overflow: "hidden",
+			display: "flex",
+			flexDirection: "column",
+			fontFamily: tokens.typography.fontFamily.primary,
+			color: tokens.colors.text.primary,
+			backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
+			WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: "8px 14px",
+					borderBottom: `1px solid ${tokens.colors.border.muted}`,
+					background: tokens.colors.background.surface,
+					backdropFilter: "blur(8px)",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					flexWrap: "wrap",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 10
+					},
+					children: [
+						title && /* @__PURE__ */ jsx("span", {
+							style: {
+								fontWeight: 500,
+								fontSize: tokens.typography.fontSize.sm
+							},
+							children: title
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								gap: 2
+							},
+							children: [
+								/* @__PURE__ */ jsx("button", {
+									onClick: () => navigate(-1),
+									style: navBtnStyle(tokens),
+									children: "◀"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									onClick: () => navigate(0),
+									style: {
+										...navBtnStyle(tokens),
+										padding: "3px 10px",
+										fontSize: tokens.typography.fontSize.xs
+									},
+									children: "Today"
+								}),
+								/* @__PURE__ */ jsx("button", {
+									onClick: () => navigate(1),
+									style: navBtnStyle(tokens),
+									children: "▶"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							style: {
+								fontWeight: 500,
+								fontSize: tokens.typography.fontSize.sm
+							},
+							children: headerLabel
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							style: {
+								fontSize: 9,
+								fontFamily: tokens.typography.fontFamily.mono,
+								color: tokens.colors.text.muted,
+								background: `${tokens.colors.text.muted}15`,
+								padding: "1px 6px",
+								borderRadius: tokens.borderRadius.sm
+							},
+							children: ["DOY ", doy]
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 6
+					},
+					children: [showCreate && /* @__PURE__ */ jsx("button", {
+						onClick: () => onEventCreate?.({
+							start: currentDate,
+							type: "reserve"
+						}),
+						style: {
+							background: tokens.colors.interactive.default,
+							color: tokens.colors.text.inverse,
+							border: "none",
+							borderRadius: tokens.borderRadius.md,
+							padding: "4px 12px",
+							fontSize: tokens.typography.fontSize.xs,
+							fontWeight: 500,
+							cursor: "pointer"
+						},
+						children: "+ Activity"
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							borderRadius: tokens.borderRadius.md,
+							overflow: "hidden",
+							border: `1px solid ${tokens.colors.border.muted}`
+						},
+						children: [
+							"month",
+							"week",
+							"day",
+							"gantt",
+							"list"
+						].map((v) => /* @__PURE__ */ jsx("button", {
+							onClick: () => setViewMode(v),
+							style: {
+								background: viewMode === v ? tokens.colors.interactive.default : tokens.colors.background.base,
+								color: viewMode === v ? tokens.colors.text.inverse : tokens.colors.text.secondary,
+								border: "none",
+								padding: "3px 10px",
+								fontSize: tokens.typography.fontSize.xxs,
+								fontWeight: 500,
+								cursor: "pointer",
+								textTransform: "capitalize"
+							},
+							children: v
+						}, v))
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					flex: 1,
+					display: "flex",
+					overflow: "hidden"
+				},
+				children: [showSidebar && renderSidebar(), /* @__PURE__ */ jsxs("div", {
+					ref: bodyRef,
+					style: {
+						flex: 1,
+						overflow: "auto"
+					},
+					children: [
+						viewMode === "month" && /* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								height: "100%"
+							},
+							children: [/* @__PURE__ */ jsx("div", {
+								style: {
+									display: "grid",
+									gridTemplateColumns: "repeat(7, 1fr)",
+									borderBottom: `1px solid ${tokens.colors.border.muted}`,
+									background: tokens.colors.background.surface
+								},
+								children: dayNames.map((d) => /* @__PURE__ */ jsx("div", {
+									style: {
+										padding: "4px 6px",
+										textAlign: "center",
+										fontSize: tokens.typography.fontSize.xxs,
+										fontWeight: 500,
+										color: tokens.colors.text.muted,
+										textTransform: "uppercase"
+									},
+									children: d
+								}, d))
+							}), /* @__PURE__ */ jsx("div", {
+								style: {
+									display: "grid",
+									gridTemplateColumns: "repeat(7, 1fr)",
+									gridTemplateRows: "repeat(6, 1fr)",
+									flex: 1
+								},
+								children: monthGrid.map(({ date, isCurrentMonth }, idx) => {
+									const dayEvts = getEventsForDay(date);
+									const isToday = isSameDay(date, today);
+									return /* @__PURE__ */ jsxs("div", {
+										onClick: () => {
+											setCurrentDate(date);
+											if (onDayDrillDown) onDayDrillDown(date, dayEvts);
+											else setViewMode("day");
+										},
+										onContextMenu: (e) => handleContextMenu(e, date),
+										style: {
+											borderRight: `1px solid ${tokens.colors.border.muted}11`,
+											borderBottom: `1px solid ${tokens.colors.border.muted}11`,
+											padding: 3,
+											cursor: "pointer",
+											background: isToday ? `${tokens.colors.interactive.default}08` : "transparent",
+											opacity: isCurrentMonth ? 1 : .35,
+											overflow: "hidden",
+											minHeight: 70
+										},
+										children: [
+											/* @__PURE__ */ jsx("div", {
+												style: {
+													fontSize: tokens.typography.fontSize.xs,
+													fontWeight: isToday ? 700 : 400,
+													color: isToday ? tokens.colors.interactive.default : tokens.colors.text.primary,
+													marginBottom: 2,
+													textAlign: "right",
+													paddingRight: 2
+												},
+												children: isToday ? /* @__PURE__ */ jsx("span", {
+													style: {
+														background: tokens.colors.interactive.default,
+														color: tokens.colors.text.inverse,
+														borderRadius: tokens.borderRadius.full,
+														width: 20,
+														height: 20,
+														display: "inline-flex",
+														alignItems: "center",
+														justifyContent: "center",
+														fontSize: tokens.typography.fontSize.xxs
+													},
+													children: date.getDate()
+												}) : date.getDate()
+											}),
+											dayEvts.slice(0, 3).map((e) => /* @__PURE__ */ jsx(CalendarEventChip, {
+												event: e,
+												tokens,
+												compact: true,
+												onClick: () => onEventClick?.(e)
+											}, e.id)),
+											dayEvts.length > 3 && /* @__PURE__ */ jsxs("div", {
+												style: {
+													fontSize: tokens.typography.fontSize.micro,
+													color: tokens.colors.text.muted,
+													textAlign: "center"
+												},
+												children: [
+													"+",
+													dayEvts.length - 3,
+													" more"
+												]
+											})
+										]
+									}, idx);
+								})
+							})]
+						}),
+						viewMode === "week" && /* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								height: "100%"
+							},
+							children: [/* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "grid",
+									gridTemplateColumns: `50px repeat(7, 1fr)`,
+									borderBottom: `1px solid ${tokens.colors.border.muted}`,
+									background: tokens.colors.background.surface,
+									position: "sticky",
+									top: 0,
+									zIndex: 2
+								},
+								children: [/* @__PURE__ */ jsx("div", { style: { borderRight: `1px solid ${tokens.colors.border.muted}22` } }), weekDates.map((d, i) => {
+									const isToday = isSameDay(d, today);
+									return /* @__PURE__ */ jsxs("div", {
+										style: {
+											padding: "4px 4px",
+											textAlign: "center",
+											background: isToday ? `${tokens.colors.interactive.default}10` : "transparent",
+											borderRight: `1px solid ${tokens.colors.border.muted}11`
+										},
+										children: [/* @__PURE__ */ jsx("div", {
+											style: {
+												fontSize: 9,
+												color: tokens.colors.text.muted,
+												textTransform: "uppercase"
+											},
+											children: dayNames[i]
+										}), /* @__PURE__ */ jsx("div", {
+											style: {
+												fontSize: 16,
+												fontWeight: isToday ? 700 : 400,
+												color: isToday ? tokens.colors.interactive.default : tokens.colors.text.primary
+											},
+											children: isToday ? /* @__PURE__ */ jsx("span", {
+												style: {
+													background: tokens.colors.interactive.default,
+													color: tokens.colors.text.inverse,
+													borderRadius: tokens.borderRadius.full,
+													width: 24,
+													height: 24,
+													display: "inline-flex",
+													alignItems: "center",
+													justifyContent: "center",
+													fontSize: 13
+												},
+												children: d.getDate()
+											}) : d.getDate()
+										})]
+									}, i);
+								})]
+							}), /* @__PURE__ */ jsx("div", {
+								style: {
+									flex: 1,
+									overflow: "auto"
+								},
+								children: TIME_SLOTS.map((slot, _si) => {
+									const isHour = slot.endsWith(":00");
+									return /* @__PURE__ */ jsxs("div", {
+										style: {
+											display: "grid",
+											gridTemplateColumns: `50px repeat(7, 1fr)`,
+											height: SLOT_HEIGHT,
+											borderBottom: `1px solid ${tokens.colors.border.muted}${isHour ? "22" : "0A"}`
+										},
+										children: [/* @__PURE__ */ jsx("div", {
+											style: {
+												fontSize: 9,
+												color: tokens.colors.text.muted,
+												textAlign: "right",
+												paddingRight: 6,
+												fontFamily: tokens.typography.fontFamily.mono,
+												borderRight: `1px solid ${tokens.colors.border.muted}22`,
+												lineHeight: `${SLOT_HEIGHT}px`,
+												visibility: isHour ? "visible" : "hidden"
+											},
+											children: slot
+										}), weekDates.map((d, di) => {
+											new Date(d).setHours(parseInt(slot), slot.endsWith(":30") ? 30 : 0, 0, 0);
+											const slotEvents = getEventsForDay(d).filter((e) => {
+												const eStart = e.start.getHours() * 60 + e.start.getMinutes();
+												const sStart = parseInt(slot) * 60 + (slot.endsWith(":30") ? 30 : 0);
+												return eStart >= sStart && eStart < sStart + 30;
+											});
+											return /* @__PURE__ */ jsx("div", {
+												onClick: () => {
+													setCurrentDate(d);
+													setViewMode("day");
+												},
+												onContextMenu: (e) => handleContextMenu(e, d, slot),
+												style: {
+													borderRight: `1px solid ${tokens.colors.border.muted}0A`,
+													padding: "0 2px",
+													cursor: "pointer",
+													overflow: "hidden",
+													background: isSameDay(d, today) ? `${tokens.colors.interactive.default}04` : "transparent"
+												},
+												children: slotEvents.map((e) => /* @__PURE__ */ jsx(CalendarEventChip, {
+													event: e,
+													tokens,
+													compact: true,
+													onClick: () => onEventClick?.(e)
+												}, e.id))
+											}, di);
+										})]
+									}, slot);
+								})
+							})]
+						}),
+						viewMode === "day" && /* @__PURE__ */ jsx("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								height: "100%"
+							},
+							children: /* @__PURE__ */ jsx("div", {
+								style: {
+									flex: 1,
+									overflow: "auto"
+								},
+								children: TIME_SLOTS.map((slot) => {
+									const isHour = slot.endsWith(":00");
+									const slotEvents = dayEvents.filter((e) => {
+										const eStart = e.start.getHours() * 60 + e.start.getMinutes();
+										const sStart = parseInt(slot) * 60 + (slot.endsWith(":30") ? 30 : 0);
+										return eStart >= sStart && eStart < sStart + 30;
+									});
+									return /* @__PURE__ */ jsxs("div", {
+										onContextMenu: (e) => handleContextMenu(e, currentDate, slot),
+										style: {
+											display: "grid",
+											gridTemplateColumns: "50px 1fr",
+											minHeight: slotEvents.length > 0 ? Math.max(SLOT_HEIGHT, slotEvents.length * 24 + 4) : SLOT_HEIGHT,
+											borderBottom: `1px solid ${tokens.colors.border.muted}${isHour ? "22" : "0A"}`
+										},
+										children: [/* @__PURE__ */ jsx("div", {
+											style: {
+												fontSize: 10,
+												color: tokens.colors.text.muted,
+												textAlign: "right",
+												paddingRight: 8,
+												fontFamily: tokens.typography.fontFamily.mono,
+												borderRight: `1px solid ${tokens.colors.border.muted}22`,
+												lineHeight: `${SLOT_HEIGHT}px`,
+												visibility: isHour ? "visible" : "hidden"
+											},
+											children: slot
+										}), /* @__PURE__ */ jsx("div", {
+											style: {
+												padding: "1px 6px",
+												cursor: "pointer"
+											},
+											children: slotEvents.map((e) => {
+												const color = e.color || getStatusColor(e.status, tokens);
+												return /* @__PURE__ */ jsxs("div", {
+													onClick: () => onEventClick?.(e),
+													style: {
+														background: `${color}18`,
+														borderRadius: tokens.borderRadius.sm,
+														padding: "3px 8px",
+														marginBottom: 2,
+														cursor: "pointer",
+														display: "flex",
+														alignItems: "center",
+														gap: 6,
+														fontSize: tokens.typography.fontSize.xxs
+													},
+													children: [
+														TYPE_ICON_ASTRO.includes(e.type) ? /* @__PURE__ */ jsx(AstroIcon, {
+															name: getTypeIcon(e.type),
+															size: "extra-small",
+															label: "",
+															style: { opacity: .7 }
+														}) : /* @__PURE__ */ jsx("span", {
+															style: { opacity: .7 },
+															children: getTypeIcon(e.type)
+														}),
+														/* @__PURE__ */ jsx("span", {
+															style: {
+																color,
+																fontSize: tokens.typography.fontSize.micro
+															},
+															children: getStatusShape(e.status)
+														}),
+														/* @__PURE__ */ jsx("span", {
+															style: { fontWeight: 500 },
+															children: e.title
+														}),
+														/* @__PURE__ */ jsxs("span", {
+															style: {
+																color: tokens.colors.text.muted,
+																fontFamily: tokens.typography.fontFamily.mono,
+																fontSize: tokens.typography.fontSize.micro,
+																marginLeft: "auto"
+															},
+															children: [formatTime(e.start), e.end ? `–${formatTime(e.end)}` : ""]
+														}),
+														e.status && /* @__PURE__ */ jsx("span", {
+															style: {
+																fontSize: tokens.typography.fontSize.micro,
+																color,
+																fontWeight: 500,
+																textTransform: "uppercase"
+															},
+															children: e.status
+														})
+													]
+												}, e.id);
+											})
+										})]
+									}, slot);
+								})
+							})
+						}),
+						viewMode === "gantt" && /* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								height: "100%"
+							},
+							children: [/* @__PURE__ */ jsxs("div", {
+								style: {
+									display: "grid",
+									gridTemplateColumns: `120px repeat(7, 1fr)`,
+									borderBottom: `1px solid ${tokens.colors.border.muted}`,
+									background: tokens.colors.background.surface,
+									position: "sticky",
+									top: 0,
+									zIndex: 2
+								},
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										padding: "6px 8px",
+										fontSize: 10,
+										fontWeight: 500,
+										color: tokens.colors.text.muted,
+										borderRight: `1px solid ${tokens.colors.border.muted}22`
+									},
+									children: "Timeline"
+								}), weekDates.map((d, i) => {
+									const isToday = isSameDay(d, today);
+									return /* @__PURE__ */ jsxs("div", {
+										style: {
+											padding: "4px 4px",
+											textAlign: "center",
+											background: isToday ? `${tokens.colors.interactive.default}10` : "transparent",
+											borderRight: `1px solid ${tokens.colors.border.muted}11`,
+											fontSize: 10
+										},
+										children: [/* @__PURE__ */ jsxs("span", {
+											style: { color: tokens.colors.text.muted },
+											children: [dayNames[i], " "]
+										}), /* @__PURE__ */ jsx("span", {
+											style: {
+												fontWeight: isToday ? 700 : 400,
+												color: isToday ? tokens.colors.interactive.default : tokens.colors.text.primary
+											},
+											children: d.getDate()
+										})]
+									}, i);
+								})]
+							}), /* @__PURE__ */ jsx("div", {
+								style: {
+									flex: 1,
+									overflow: "auto"
+								},
+								children: ganttData.rows.length === 0 ? /* @__PURE__ */ jsx("div", {
+									style: {
+										textAlign: "center",
+										color: tokens.colors.text.muted,
+										padding: 40,
+										fontSize: 12
+									},
+									children: "No activities this week"
+								}) : ganttData.rows.map((row, ri) => /* @__PURE__ */ jsxs("div", {
+									style: {
+										display: "grid",
+										gridTemplateColumns: `120px repeat(7, 1fr)`,
+										borderBottom: `1px solid ${tokens.colors.border.muted}15`,
+										minHeight: 36
+									},
+									children: [/* @__PURE__ */ jsxs("div", {
+										style: {
+											padding: "6px 8px",
+											fontSize: 11,
+											fontWeight: 500,
+											borderRight: `1px solid ${tokens.colors.border.muted}22`,
+											display: "flex",
+											alignItems: "center",
+											gap: 6,
+											color: tokens.colors.text.primary
+										},
+										children: [/* @__PURE__ */ jsx("span", { style: {
+											width: 6,
+											height: 6,
+											borderRadius: "50%",
+											background: row.color,
+											flexShrink: 0
+										} }), row.label]
+									}), weekDates.map((d, di) => {
+										const cellEvents = row.events.filter((e) => {
+											const eDay = new Date(e.start);
+											eDay.setHours(0, 0, 0, 0);
+											const cellDay = new Date(d);
+											cellDay.setHours(0, 0, 0, 0);
+											if (e.end) {
+												const eEnd = new Date(e.end);
+												eEnd.setHours(23, 59, 59, 999);
+												return cellDay >= eDay && cellDay <= eEnd;
+											}
+											return eDay.getTime() === cellDay.getTime();
+										});
+										return /* @__PURE__ */ jsx("div", {
+											onContextMenu: (e) => handleContextMenu(e, d),
+											style: {
+												borderRight: `1px solid ${tokens.colors.border.muted}0A`,
+												padding: "2px 2px",
+												display: "flex",
+												flexDirection: "column",
+												gap: 2,
+												background: isSameDay(d, today) ? `${tokens.colors.interactive.default}04` : "transparent"
+											},
+											children: cellEvents.map((e) => {
+												return /* @__PURE__ */ jsxs("div", {
+													onClick: () => onEventClick?.(e),
+													style: {
+														background: `${e.color || getStatusColor(e.status, tokens)}33`,
+														borderRadius: 3,
+														padding: "2px 4px",
+														fontSize: 9,
+														fontWeight: 500,
+														color: tokens.colors.text.primary,
+														cursor: "pointer",
+														whiteSpace: "nowrap",
+														overflow: "hidden",
+														textOverflow: "ellipsis"
+													},
+													title: `${e.title}\n${formatTime(e.start)}${e.end ? " – " + formatTime(e.end) : ""}`,
+													children: [/* @__PURE__ */ jsx("span", {
+														style: {
+															opacity: .7,
+															marginRight: 3
+														},
+														children: getStatusShape(e.status)
+													}), e.title]
+												}, e.id);
+											})
+										}, di);
+									})]
+								}, ri))
+							})]
+						}),
+						viewMode === "list" && /* @__PURE__ */ jsxs("div", {
+							style: { padding: 12 },
+							children: [/* @__PURE__ */ jsxs("div", {
+								style: {
+									fontSize: tokens.typography.fontSize.xs,
+									color: tokens.colors.text.muted,
+									marginBottom: 8
+								},
+								children: [
+									"Upcoming 7 days — ",
+									listEvents.length,
+									" activities"
+								]
+							}), listEvents.length === 0 ? /* @__PURE__ */ jsx("div", {
+								style: {
+									textAlign: "center",
+									color: tokens.colors.text.muted,
+									padding: 40,
+									fontSize: tokens.typography.fontSize.sm
+								},
+								children: "No upcoming activities"
+							}) : /* @__PURE__ */ jsx("div", {
+								style: {
+									display: "flex",
+									flexDirection: "column",
+									gap: 4
+								},
+								children: listEvents.map((e) => {
+									const color = e.color || getStatusColor(e.status, tokens);
+									return /* @__PURE__ */ jsxs("div", {
+										onClick: () => onEventClick?.(e),
+										style: {
+											display: "grid",
+											gridTemplateColumns: "100px 1fr auto",
+											padding: "6px 10px",
+											borderRadius: tokens.borderRadius.md,
+											background: `${color}08`,
+											cursor: "pointer",
+											alignItems: "center",
+											gap: 10,
+											fontSize: tokens.typography.fontSize.xs
+										},
+										children: [
+											/* @__PURE__ */ jsxs("span", {
+												style: {
+													fontFamily: tokens.typography.fontFamily.mono,
+													fontSize: tokens.typography.fontSize.xxs,
+													color: tokens.colors.text.muted
+												},
+												children: [
+													e.start.toLocaleDateString("en-US", {
+														month: "short",
+														day: "numeric"
+													}),
+													" ",
+													formatTime(e.start)
+												]
+											}),
+											/* @__PURE__ */ jsxs("span", {
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: 6
+												},
+												children: [TYPE_ICON_ASTRO.includes(e.type) ? /* @__PURE__ */ jsx(AstroIcon, {
+													name: getTypeIcon(e.type),
+													size: "extra-small",
+													label: ""
+												}) : /* @__PURE__ */ jsx("span", { children: getTypeIcon(e.type) }), /* @__PURE__ */ jsx("span", {
+													style: { fontWeight: 500 },
+													children: e.title
+												})]
+											}),
+											e.status && /* @__PURE__ */ jsxs("span", {
+												style: {
+													fontSize: tokens.typography.fontSize.micro,
+													color,
+													fontWeight: 500
+												},
+												children: [
+													getStatusShape(e.status),
+													" ",
+													e.status
+												]
+											})
+										]
+									}, e.id);
+								})
+							})]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					padding: "4px 14px",
+					borderTop: `1px solid ${tokens.colors.border.muted}`,
+					background: tokens.colors.background.surface,
+					fontSize: tokens.typography.fontSize.xxs,
+					color: tokens.colors.text.muted,
+					display: "flex",
+					justifyContent: "space-between"
+				},
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					filteredEvents.length,
+					" activities | DOY ",
+					doy,
+					" | Week ",
+					weekNum
+				] }), /* @__PURE__ */ jsx("span", { children: events.filter((e) => e.status === "error" || e.status === "failed" || e.status === "crashed").length > 0 ? `⚠ ${events.filter((e) => e.status === "error" || e.status === "failed" || e.status === "crashed").length} errors` : "✓ All nominal" })]
+			}),
+			contextMenu && /* @__PURE__ */ jsxs("div", {
+				style: {
+					position: "fixed",
+					left: contextMenu.x,
+					top: contextMenu.y,
+					zIndex: 1e3,
+					background: tokens.colors.background.surface,
+					backdropFilter: "blur(8px)",
+					border: `1px solid ${tokens.colors.border.muted}`,
+					borderRadius: tokens.borderRadius.md,
+					boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
+					padding: 4,
+					minWidth: 160
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: 9,
+						color: tokens.colors.text.muted,
+						padding: "4px 8px",
+						fontFamily: tokens.typography.fontFamily.mono
+					},
+					children: [
+						contextMenu.date.toLocaleDateString("en-US", {
+							month: "short",
+							day: "numeric"
+						}),
+						" ",
+						formatTime(contextMenu.date)
+					]
+				}), [
+					"command",
+					"script",
+					"reserve",
+					"metadata",
+					"note"
+				].map((type) => /* @__PURE__ */ jsxs("button", {
+					onClick: () => {
+						onEventCreate?.({
+							start: contextMenu.date,
+							type
+						});
+						setContextMenu(null);
+					},
+					style: {
+						display: "block",
+						width: "100%",
+						textAlign: "left",
+						background: "none",
+						border: "none",
+						color: tokens.colors.text.primary,
+						padding: "5px 8px",
+						fontSize: 11,
+						cursor: "pointer",
+						borderRadius: tokens.borderRadius.sm
+					},
+					onMouseEnter: (e) => {
+						e.currentTarget.style.background = `${tokens.colors.interactive.default}22`;
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.background = "none";
+					},
+					children: [
+						getTypeIcon(type),
+						" Create",
+						" ",
+						type.charAt(0).toUpperCase() + type.slice(1)
+					]
+				}, type))]
+			})
+		]
+	});
 });
 function navBtnStyle(tokens) {
-  return {
-    background: tokens.colors.background.base,
-    color: tokens.colors.text.secondary,
-    border: `1px solid ${tokens.colors.border.muted}`,
-    borderRadius: tokens.borderRadius.sm,
-    padding: "3px 8px",
-    fontSize: tokens.typography.fontSize.xs,
-    cursor: "pointer",
-    lineHeight: 1
-  };
+	return {
+		background: tokens.colors.background.base,
+		color: tokens.colors.text.secondary,
+		border: `1px solid ${tokens.colors.border.muted}`,
+		borderRadius: tokens.borderRadius.sm,
+		padding: "3px 8px",
+		fontSize: tokens.typography.fontSize.xs,
+		cursor: "pointer",
+		lineHeight: 1
+	};
 }
-export {
-  MissionCalendar
-};
-//# sourceMappingURL=MissionCalendar.js.map
+//#endregion
+export { MissionCalendar, MissionCalendar as default };
+
+//# sourceMappingURL=MissionCalendar.js.map