@zendir/ui 0.1.0

package/dist/react/core/MissionCalendar.js

@@ -0,0 +1,1049 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useMemo, useCallback } from "react";
+import { AstroIcon } from "./AstroIcon.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+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;
+  }
+}
+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 "▼";
+  }
+}
+const 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";
+  }
+}
+function getDaysInMonth(year, month) {
+  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;
+}
+function isSameDay(a, b) {
+  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" });
+}
+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;
+  });
+}
+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);
+}
+function getDayOfYear(d) {
+  const start = new Date(d.getFullYear(), 0, 0);
+  const diff = d.getTime() - start.getTime();
+  return Math.floor(diff / 864e5);
+}
+const 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`);
+}
+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 })
+      ]
+    }
+  );
+});
+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
+        );
+      })
+    ] })
+  ] });
+});
+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
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+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
+  };
+}
+export {
+  MissionCalendar
+};
+//# sourceMappingURL=MissionCalendar.js.map