@orchestra-mcp/tracking 1.0.0

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2026 Orchestra MCP
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.

package/README.md

@@ -0,0 +1,13 @@
+# @orchestra-mcp/tracking
+
+Analytics and tracking components for Orchestra MCP
+
+## Install
+
+```bash
+npm install @orchestra-mcp/tracking
+```
+
+## License
+
+MIT — [Orchestra MCP](https://orchestra-mcp.dev)

package/dist/index.cjs

@@ -0,0 +1,345 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  FullCalendar: () => FullCalendar,
+  Timer: () => Timer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Timer/Timer.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function formatTime(totalSeconds, compact) {
+  const hrs = Math.floor(totalSeconds / 3600);
+  const mins = Math.floor(totalSeconds % 3600 / 60);
+  const secs = totalSeconds % 60;
+  const pad = (n) => String(n).padStart(2, "0");
+  if (compact && hrs === 0) {
+    return `${pad(mins)}:${pad(secs)}`;
+  }
+  return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
+}
+var Timer = ({
+  mode = "stopwatch",
+  initialTime = 0,
+  autoStart = false,
+  display = "full",
+  onTick,
+  onComplete,
+  showControls = true,
+  showLaps = false
+}) => {
+  const [elapsed, setElapsed] = (0, import_react.useState)(0);
+  const [running, setRunning] = (0, import_react.useState)(autoStart);
+  const [laps, setLaps] = (0, import_react.useState)([]);
+  const intervalRef = (0, import_react.useRef)(null);
+  const elapsedRef = (0, import_react.useRef)(0);
+  const currentTime = mode === "countdown" ? Math.max(initialTime - elapsed, 0) : elapsed;
+  const clearTimer = (0, import_react.useCallback)(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  const startTimer = (0, import_react.useCallback)(() => {
+    clearTimer();
+    intervalRef.current = setInterval(() => {
+      elapsedRef.current += 1;
+      setElapsed(elapsedRef.current);
+    }, 1e3);
+    setRunning(true);
+  }, [clearTimer]);
+  const pauseTimer = (0, import_react.useCallback)(() => {
+    clearTimer();
+    setRunning(false);
+  }, [clearTimer]);
+  const resetTimer = (0, import_react.useCallback)(() => {
+    clearTimer();
+    setElapsed(0);
+    elapsedRef.current = 0;
+    setRunning(false);
+    setLaps([]);
+  }, [clearTimer]);
+  const addLap = (0, import_react.useCallback)(() => {
+    setLaps((prev) => [...prev, currentTime]);
+  }, [currentTime]);
+  (0, import_react.useEffect)(() => {
+    if (elapsed > 0) onTick?.(elapsed);
+  }, [elapsed, onTick]);
+  (0, import_react.useEffect)(() => {
+    if (mode === "countdown" && currentTime === 0 && elapsed > 0) {
+      pauseTimer();
+      onComplete?.();
+    }
+  }, [mode, currentTime, elapsed, pauseTimer, onComplete]);
+  (0, import_react.useEffect)(() => {
+    if (autoStart) startTimer();
+    return clearTimer;
+  }, []);
+  const compact = display === "compact";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "timer", "data-mode": mode, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `timer__display ${compact ? "timer__display--compact" : ""}`, children: formatTime(currentTime, compact) }),
+    showControls && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "timer__controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "timer__btn timer__btn--primary",
+          onClick: running ? pauseTimer : startTimer,
+          children: running ? "Pause" : "Start"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "timer__btn timer__btn--secondary",
+          onClick: resetTimer,
+          children: "Reset"
+        }
+      ),
+      showLaps && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "timer__btn timer__btn--secondary",
+          onClick: addLap,
+          disabled: !running,
+          children: "Lap"
+        }
+      )
+    ] }),
+    showLaps && laps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "timer__laps", children: laps.map((lap, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "timer__lap", children: [
+      "Lap ",
+      i + 1,
+      ": ",
+      formatTime(lap, compact)
+    ] }, i)) })
+  ] });
+};
+
+// src/FullCalendar/FullCalendar.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DAY_HEADERS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var DEFAULT_EVENT_COLOR = "#3b82f6";
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfWeek(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function formatMonthYear(year, month) {
+  const date = new Date(year, month, 1);
+  return date.toLocaleDateString("en-US", { month: "long", year: "numeric" });
+}
+function buildCalendarGrid(year, month, today) {
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDay = getFirstDayOfWeek(year, month);
+  const cells = [];
+  const prevMonth = month === 0 ? 11 : month - 1;
+  const prevYear = month === 0 ? year - 1 : year;
+  const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
+  for (let i = firstDay - 1; i >= 0; i--) {
+    const day = daysInPrevMonth - i;
+    const date = new Date(prevYear, prevMonth, day);
+    cells.push({
+      date,
+      day,
+      isCurrentMonth: false,
+      isToday: isSameDay(date, today),
+      isWeekend: date.getDay() === 0 || date.getDay() === 6
+    });
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    const date = new Date(year, month, day);
+    cells.push({
+      date,
+      day,
+      isCurrentMonth: true,
+      isToday: isSameDay(date, today),
+      isWeekend: date.getDay() === 0 || date.getDay() === 6
+    });
+  }
+  const totalCells = Math.ceil(cells.length / 7) * 7;
+  const nextMonth = month === 11 ? 0 : month + 1;
+  const nextYear = month === 11 ? year + 1 : year;
+  let nextDay = 1;
+  while (cells.length < totalCells) {
+    const date = new Date(nextYear, nextMonth, nextDay);
+    cells.push({
+      date,
+      day: nextDay,
+      isCurrentMonth: false,
+      isToday: isSameDay(date, today),
+      isWeekend: date.getDay() === 0 || date.getDay() === 6
+    });
+    nextDay++;
+  }
+  return cells;
+}
+function dateToKey(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+var FullCalendar = ({
+  events = [],
+  onDateSelect,
+  onEventClick,
+  selectedDate,
+  onMonthChange,
+  initialYear,
+  initialMonth
+}) => {
+  const now = /* @__PURE__ */ new Date();
+  const [year, setYear] = (0, import_react2.useState)(initialYear ?? now.getFullYear());
+  const [month, setMonth] = (0, import_react2.useState)(initialMonth ?? now.getMonth());
+  const today = (0, import_react2.useMemo)(() => /* @__PURE__ */ new Date(), []);
+  const cells = (0, import_react2.useMemo)(() => buildCalendarGrid(year, month, today), [year, month, today]);
+  const eventsByDate = (0, import_react2.useMemo)(() => {
+    const map = {};
+    for (const event of events) {
+      const key = event.date;
+      if (!map[key]) {
+        map[key] = [];
+      }
+      map[key].push(event);
+    }
+    return map;
+  }, [events]);
+  const goToPrevMonth = (0, import_react2.useCallback)(() => {
+    setYear((y) => month === 0 ? y - 1 : y);
+    setMonth((m) => m === 0 ? 11 : m - 1);
+    const newMonth = month === 0 ? 11 : month - 1;
+    const newYear = month === 0 ? year - 1 : year;
+    onMonthChange?.(newYear, newMonth);
+  }, [month, year, onMonthChange]);
+  const goToNextMonth = (0, import_react2.useCallback)(() => {
+    setYear((y) => month === 11 ? y + 1 : y);
+    setMonth((m) => m === 11 ? 0 : m + 1);
+    const newMonth = month === 11 ? 0 : month + 1;
+    const newYear = month === 11 ? year + 1 : year;
+    onMonthChange?.(newYear, newMonth);
+  }, [month, year, onMonthChange]);
+  const handleDateClick = (0, import_react2.useCallback)(
+    (date) => {
+      onDateSelect?.(date);
+    },
+    [onDateSelect]
+  );
+  const handleEventClick = (0, import_react2.useCallback)(
+    (event, e) => {
+      e.stopPropagation();
+      onEventClick?.(event);
+    },
+    [onEventClick]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "calendar", "data-testid": "full-calendar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "calendar__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { className: "calendar__title", "data-testid": "calendar-title", children: formatMonthYear(year, month) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "calendar__nav", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "calendar__nav-btn",
+            onClick: goToPrevMonth,
+            "aria-label": "Previous month",
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "calendar__nav-btn",
+            onClick: goToNextMonth,
+            "aria-label": "Next month",
+            children: "\u203A"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "calendar__grid", role: "grid", "aria-label": "Calendar", children: [
+      DAY_HEADERS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: "calendar__day-header",
+          role: "columnheader",
+          children: day
+        },
+        day
+      )),
+      cells.map((cell) => {
+        const key = dateToKey(cell.date);
+        const cellEvents = eventsByDate[key] || [];
+        const isSelected = selectedDate ? isSameDay(cell.date, selectedDate) : false;
+        const classNames = ["calendar__cell"];
+        if (!cell.isCurrentMonth) classNames.push("calendar__cell--outside");
+        if (cell.isWeekend) classNames.push("calendar__cell--weekend");
+        if (cell.isToday) classNames.push("calendar__cell--today");
+        if (isSelected) classNames.push("calendar__cell--selected");
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            className: classNames.join(" "),
+            role: "gridcell",
+            "aria-label": cell.date.toLocaleDateString("en-US", {
+              month: "long",
+              day: "numeric",
+              year: "numeric"
+            }),
+            onClick: () => handleDateClick(cell.date),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "calendar__date", children: cell.day }),
+              cellEvents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "calendar__events", children: cellEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  className: "calendar__event",
+                  style: {
+                    backgroundColor: event.color || DEFAULT_EVENT_COLOR
+                  },
+                  title: event.title,
+                  "data-testid": `event-${event.id}`,
+                  onClick: (e) => handleEventClick(event, e),
+                  children: event.title
+                },
+                event.id
+              )) })
+            ]
+          },
+          `${cell.isCurrentMonth ? "cur" : "out"}-${key}`
+        );
+      })
+    ] })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FullCalendar,
+  Timer
+});

package/dist/index.css

@@ -0,0 +1,309 @@
+/* src/Timer/Timer.css */
+.timer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+.timer__display {
+  font-size: 36px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-fg);
+  background: var(--color-bg-alt);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 16px 32px;
+  min-width: 200px;
+  text-align: center;
+}
+.timer__display--compact {
+  font-size: 24px;
+  padding: 8px 16px;
+  min-width: 120px;
+}
+.timer__controls {
+  display: flex;
+  gap: 8px;
+}
+.timer__btn {
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  border-radius: 6px;
+  padding: 8px 16px;
+  transition: all 0.15s ease;
+}
+.timer__btn--primary {
+  background-color: var(--color-accent);
+  color: #ffffff;
+}
+.timer__btn--primary:hover {
+  opacity: 0.85;
+}
+.timer__btn--secondary {
+  background-color: var(--color-bg-alt);
+  color: var(--color-fg);
+  border: 1px solid var(--color-border);
+}
+.timer__btn--secondary:hover:not(:disabled) {
+  border-color: var(--color-accent);
+}
+.timer__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.timer__laps {
+  list-style: none;
+  padding: 0;
+  margin: 8px 0 0;
+  width: 100%;
+  max-width: 280px;
+}
+.timer__lap {
+  font-size: 13px;
+  color: var(--color-fg);
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--color-border);
+  font-variant-numeric: tabular-nums;
+}
+.timer__lap:last-child {
+  border-bottom: none;
+}
+[data-variant=compact] .timer__display {
+  font-size: 24px;
+  padding: 8px 16px;
+  border-radius: 4px;
+}
+[data-variant=compact] .timer__display--compact {
+  font-size: 18px;
+  padding: 6px 12px;
+}
+[data-variant=compact] .timer__btn {
+  font-size: 12px;
+  padding: 6px 12px;
+  border-radius: 4px;
+}
+[data-variant=modern] .timer__display {
+  font-size: 42px;
+  font-weight: 700;
+  padding: 20px 40px;
+  border-radius: 12px;
+}
+[data-variant=modern] .timer__display--compact {
+  font-size: 28px;
+  padding: 12px 24px;
+}
+[data-variant=modern] .timer__btn {
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px 20px;
+  border-radius: 8px;
+}
+
+/* src/FullCalendar/FullCalendar.css */
+.calendar {
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  background-color: var(--color-bg);
+  color: var(--color-fg);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  overflow: hidden;
+  width: 100%;
+}
+.calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background-color: var(--color-bg-alt);
+  border-bottom: 1px solid var(--color-border);
+}
+.calendar__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-fg);
+  margin: 0;
+}
+.calendar__nav {
+  display: flex;
+  gap: 4px;
+}
+.calendar__nav-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background-color: var(--color-bg);
+  color: var(--color-fg);
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.15s ease;
+}
+.calendar__nav-btn:hover {
+  background-color: var(--color-bg-active);
+  border-color: var(--color-accent);
+}
+.calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.calendar__day-header {
+  padding: 8px 4px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--color-border);
+}
+.calendar__cell {
+  min-height: 80px;
+  padding: 4px;
+  border-right: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  position: relative;
+}
+.calendar__cell:nth-child(7n) {
+  border-right: none;
+}
+.calendar__cell:hover {
+  background-color: var(--color-bg-active);
+}
+.calendar__cell--outside {
+  opacity: 0.35;
+}
+.calendar__cell--weekend {
+  background-color: color-mix(in srgb, var(--color-bg-alt) 50%, transparent);
+}
+.calendar__cell--today {
+  border: 2px solid var(--color-accent);
+}
+.calendar__cell--selected {
+  background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
+}
+.calendar__date {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-fg);
+  margin-bottom: 2px;
+}
+.calendar__cell--today .calendar__date {
+  background-color: var(--color-accent);
+  color: #ffffff;
+  border-radius: 50%;
+  font-weight: 700;
+}
+.calendar__events {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+.calendar__event {
+  font-size: 11px;
+  line-height: 1.3;
+  padding: 1px 4px;
+  border-radius: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  color: #ffffff;
+  font-weight: 500;
+  transition: opacity 0.15s ease;
+}
+.calendar__event:hover {
+  opacity: 0.8;
+}
+[data-variant=compact] .calendar {
+  border-radius: 4px;
+}
+[data-variant=compact] .calendar__header {
+  padding: 8px 12px;
+}
+[data-variant=compact] .calendar__title {
+  font-size: 14px;
+}
+[data-variant=compact] .calendar__nav-btn {
+  width: 26px;
+  height: 26px;
+  font-size: 12px;
+  border-radius: 4px;
+}
+[data-variant=compact] .calendar__cell {
+  min-height: 56px;
+  padding: 2px;
+}
+[data-variant=compact] .calendar__date {
+  width: 20px;
+  height: 20px;
+  font-size: 11px;
+}
+[data-variant=compact] .calendar__day-header {
+  padding: 4px 2px;
+  font-size: 10px;
+}
+[data-variant=compact] .calendar__event {
+  font-size: 10px;
+  padding: 0 3px;
+}
+[data-variant=modern] .calendar {
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+[data-variant=modern] .calendar__header {
+  padding: 16px 20px;
+}
+[data-variant=modern] .calendar__title {
+  font-size: 18px;
+  font-weight: 700;
+}
+[data-variant=modern] .calendar__nav-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  font-size: 16px;
+}
+[data-variant=modern] .calendar__cell {
+  min-height: 90px;
+  padding: 6px;
+  border-radius: 0;
+}
+[data-variant=modern] .calendar__date {
+  width: 28px;
+  height: 28px;
+  font-size: 14px;
+}
+[data-variant=modern] .calendar__cell--today .calendar__date {
+  border-radius: 8px;
+}
+[data-variant=modern] .calendar__day-header {
+  padding: 10px 4px;
+  font-size: 12px;
+}
+[data-variant=modern] .calendar__event {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 6px;
+}

package/dist/index.d.cts

@@ -0,0 +1,49 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TimerProps {
+    /** Timer mode */
+    mode?: 'stopwatch' | 'countdown';
+    /** Initial time in seconds (countdown start, or stopwatch offset) */
+    initialTime?: number;
+    /** Start timer automatically on mount */
+    autoStart?: boolean;
+    /** Display format */
+    display?: 'full' | 'compact';
+    /** Called every second with elapsed seconds */
+    onTick?: (seconds: number) => void;
+    /** Called when countdown reaches 0 */
+    onComplete?: () => void;
+    /** Show start/pause/reset controls */
+    showControls?: boolean;
+    /** Show lap button and lap list */
+    showLaps?: boolean;
+}
+declare const Timer: ({ mode, initialTime, autoStart, display, onTick, onComplete, showControls, showLaps, }: TimerProps) => react_jsx_runtime.JSX.Element;
+
+interface CalendarEvent {
+    id: string;
+    title: string;
+    /** ISO date string (YYYY-MM-DD) */
+    date: string;
+    color?: string;
+    allDay?: boolean;
+}
+interface FullCalendarProps {
+    /** Array of calendar events to display */
+    events?: CalendarEvent[];
+    /** Called when a date cell is clicked */
+    onDateSelect?: (date: Date) => void;
+    /** Called when an event pill is clicked */
+    onEventClick?: (event: CalendarEvent) => void;
+    /** Currently selected date */
+    selectedDate?: Date;
+    /** Called when month navigation changes */
+    onMonthChange?: (year: number, month: number) => void;
+    /** Initial year to display (defaults to current year) */
+    initialYear?: number;
+    /** Initial month to display, 0-indexed (defaults to current month) */
+    initialMonth?: number;
+}
+declare const FullCalendar: ({ events, onDateSelect, onEventClick, selectedDate, onMonthChange, initialYear, initialMonth, }: FullCalendarProps) => react_jsx_runtime.JSX.Element;
+
+export { type CalendarEvent, FullCalendar, type FullCalendarProps, Timer, type TimerProps };

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TimerProps {
+    /** Timer mode */
+    mode?: 'stopwatch' | 'countdown';
+    /** Initial time in seconds (countdown start, or stopwatch offset) */
+    initialTime?: number;
+    /** Start timer automatically on mount */
+    autoStart?: boolean;
+    /** Display format */
+    display?: 'full' | 'compact';
+    /** Called every second with elapsed seconds */
+    onTick?: (seconds: number) => void;
+    /** Called when countdown reaches 0 */
+    onComplete?: () => void;
+    /** Show start/pause/reset controls */
+    showControls?: boolean;
+    /** Show lap button and lap list */
+    showLaps?: boolean;
+}
+declare const Timer: ({ mode, initialTime, autoStart, display, onTick, onComplete, showControls, showLaps, }: TimerProps) => react_jsx_runtime.JSX.Element;
+
+interface CalendarEvent {
+    id: string;
+    title: string;
+    /** ISO date string (YYYY-MM-DD) */
+    date: string;
+    color?: string;
+    allDay?: boolean;
+}
+interface FullCalendarProps {
+    /** Array of calendar events to display */
+    events?: CalendarEvent[];
+    /** Called when a date cell is clicked */
+    onDateSelect?: (date: Date) => void;
+    /** Called when an event pill is clicked */
+    onEventClick?: (event: CalendarEvent) => void;
+    /** Currently selected date */
+    selectedDate?: Date;
+    /** Called when month navigation changes */
+    onMonthChange?: (year: number, month: number) => void;
+    /** Initial year to display (defaults to current year) */
+    initialYear?: number;
+    /** Initial month to display, 0-indexed (defaults to current month) */
+    initialMonth?: number;
+}
+declare const FullCalendar: ({ events, onDateSelect, onEventClick, selectedDate, onMonthChange, initialYear, initialMonth, }: FullCalendarProps) => react_jsx_runtime.JSX.Element;
+
+export { type CalendarEvent, FullCalendar, type FullCalendarProps, Timer, type TimerProps };

package/dist/index.js

@@ -0,0 +1,317 @@
+// src/Timer/Timer.tsx
+import { useState, useRef, useCallback, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatTime(totalSeconds, compact) {
+  const hrs = Math.floor(totalSeconds / 3600);
+  const mins = Math.floor(totalSeconds % 3600 / 60);
+  const secs = totalSeconds % 60;
+  const pad = (n) => String(n).padStart(2, "0");
+  if (compact && hrs === 0) {
+    return `${pad(mins)}:${pad(secs)}`;
+  }
+  return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
+}
+var Timer = ({
+  mode = "stopwatch",
+  initialTime = 0,
+  autoStart = false,
+  display = "full",
+  onTick,
+  onComplete,
+  showControls = true,
+  showLaps = false
+}) => {
+  const [elapsed, setElapsed] = useState(0);
+  const [running, setRunning] = useState(autoStart);
+  const [laps, setLaps] = useState([]);
+  const intervalRef = useRef(null);
+  const elapsedRef = useRef(0);
+  const currentTime = mode === "countdown" ? Math.max(initialTime - elapsed, 0) : elapsed;
+  const clearTimer = useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  const startTimer = useCallback(() => {
+    clearTimer();
+    intervalRef.current = setInterval(() => {
+      elapsedRef.current += 1;
+      setElapsed(elapsedRef.current);
+    }, 1e3);
+    setRunning(true);
+  }, [clearTimer]);
+  const pauseTimer = useCallback(() => {
+    clearTimer();
+    setRunning(false);
+  }, [clearTimer]);
+  const resetTimer = useCallback(() => {
+    clearTimer();
+    setElapsed(0);
+    elapsedRef.current = 0;
+    setRunning(false);
+    setLaps([]);
+  }, [clearTimer]);
+  const addLap = useCallback(() => {
+    setLaps((prev) => [...prev, currentTime]);
+  }, [currentTime]);
+  useEffect(() => {
+    if (elapsed > 0) onTick?.(elapsed);
+  }, [elapsed, onTick]);
+  useEffect(() => {
+    if (mode === "countdown" && currentTime === 0 && elapsed > 0) {
+      pauseTimer();
+      onComplete?.();
+    }
+  }, [mode, currentTime, elapsed, pauseTimer, onComplete]);
+  useEffect(() => {
+    if (autoStart) startTimer();
+    return clearTimer;
+  }, []);
+  const compact = display === "compact";
+  return /* @__PURE__ */ jsxs("div", { className: "timer", "data-mode": mode, children: [
+    /* @__PURE__ */ jsx("div", { className: `timer__display ${compact ? "timer__display--compact" : ""}`, children: formatTime(currentTime, compact) }),
+    showControls && /* @__PURE__ */ jsxs("div", { className: "timer__controls", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "timer__btn timer__btn--primary",
+          onClick: running ? pauseTimer : startTimer,
+          children: running ? "Pause" : "Start"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "timer__btn timer__btn--secondary",
+          onClick: resetTimer,
+          children: "Reset"
+        }
+      ),
+      showLaps && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "timer__btn timer__btn--secondary",
+          onClick: addLap,
+          disabled: !running,
+          children: "Lap"
+        }
+      )
+    ] }),
+    showLaps && laps.length > 0 && /* @__PURE__ */ jsx("ol", { className: "timer__laps", children: laps.map((lap, i) => /* @__PURE__ */ jsxs("li", { className: "timer__lap", children: [
+      "Lap ",
+      i + 1,
+      ": ",
+      formatTime(lap, compact)
+    ] }, i)) })
+  ] });
+};
+
+// src/FullCalendar/FullCalendar.tsx
+import { useState as useState2, useMemo, useCallback as useCallback2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DAY_HEADERS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var DEFAULT_EVENT_COLOR = "#3b82f6";
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getFirstDayOfWeek(year, month) {
+  return new Date(year, month, 1).getDay();
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function formatMonthYear(year, month) {
+  const date = new Date(year, month, 1);
+  return date.toLocaleDateString("en-US", { month: "long", year: "numeric" });
+}
+function buildCalendarGrid(year, month, today) {
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstDay = getFirstDayOfWeek(year, month);
+  const cells = [];
+  const prevMonth = month === 0 ? 11 : month - 1;
+  const prevYear = month === 0 ? year - 1 : year;
+  const daysInPrevMonth = getDaysInMonth(prevYear, prevMonth);
+  for (let i = firstDay - 1; i >= 0; i--) {
+    const day = daysInPrevMonth - i;
+    const date = new Date(prevYear, prevMonth, day);
+    cells.push({
+      date,
+      day,
+      isCurrentMonth: false,
+      isToday: isSameDay(date, today),
+      isWeekend: date.getDay() === 0 || date.getDay() === 6
+    });
+  }
+  for (let day = 1; day <= daysInMonth; day++) {
+    const date = new Date(year, month, day);
+    cells.push({
+      date,
+      day,
+      isCurrentMonth: true,
+      isToday: isSameDay(date, today),
+      isWeekend: date.getDay() === 0 || date.getDay() === 6
+    });
+  }
+  const totalCells = Math.ceil(cells.length / 7) * 7;
+  const nextMonth = month === 11 ? 0 : month + 1;
+  const nextYear = month === 11 ? year + 1 : year;
+  let nextDay = 1;
+  while (cells.length < totalCells) {
+    const date = new Date(nextYear, nextMonth, nextDay);
+    cells.push({
+      date,
+      day: nextDay,
+      isCurrentMonth: false,
+      isToday: isSameDay(date, today),
+      isWeekend: date.getDay() === 0 || date.getDay() === 6
+    });
+    nextDay++;
+  }
+  return cells;
+}
+function dateToKey(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+var FullCalendar = ({
+  events = [],
+  onDateSelect,
+  onEventClick,
+  selectedDate,
+  onMonthChange,
+  initialYear,
+  initialMonth
+}) => {
+  const now = /* @__PURE__ */ new Date();
+  const [year, setYear] = useState2(initialYear ?? now.getFullYear());
+  const [month, setMonth] = useState2(initialMonth ?? now.getMonth());
+  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const cells = useMemo(() => buildCalendarGrid(year, month, today), [year, month, today]);
+  const eventsByDate = useMemo(() => {
+    const map = {};
+    for (const event of events) {
+      const key = event.date;
+      if (!map[key]) {
+        map[key] = [];
+      }
+      map[key].push(event);
+    }
+    return map;
+  }, [events]);
+  const goToPrevMonth = useCallback2(() => {
+    setYear((y) => month === 0 ? y - 1 : y);
+    setMonth((m) => m === 0 ? 11 : m - 1);
+    const newMonth = month === 0 ? 11 : month - 1;
+    const newYear = month === 0 ? year - 1 : year;
+    onMonthChange?.(newYear, newMonth);
+  }, [month, year, onMonthChange]);
+  const goToNextMonth = useCallback2(() => {
+    setYear((y) => month === 11 ? y + 1 : y);
+    setMonth((m) => m === 11 ? 0 : m + 1);
+    const newMonth = month === 11 ? 0 : month + 1;
+    const newYear = month === 11 ? year + 1 : year;
+    onMonthChange?.(newYear, newMonth);
+  }, [month, year, onMonthChange]);
+  const handleDateClick = useCallback2(
+    (date) => {
+      onDateSelect?.(date);
+    },
+    [onDateSelect]
+  );
+  const handleEventClick = useCallback2(
+    (event, e) => {
+      e.stopPropagation();
+      onEventClick?.(event);
+    },
+    [onEventClick]
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: "calendar", "data-testid": "full-calendar", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "calendar__header", children: [
+      /* @__PURE__ */ jsx2("h2", { className: "calendar__title", "data-testid": "calendar-title", children: formatMonthYear(year, month) }),
+      /* @__PURE__ */ jsxs2("div", { className: "calendar__nav", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "calendar__nav-btn",
+            onClick: goToPrevMonth,
+            "aria-label": "Previous month",
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "calendar__nav-btn",
+            onClick: goToNextMonth,
+            "aria-label": "Next month",
+            children: "\u203A"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "calendar__grid", role: "grid", "aria-label": "Calendar", children: [
+      DAY_HEADERS.map((day) => /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "calendar__day-header",
+          role: "columnheader",
+          children: day
+        },
+        day
+      )),
+      cells.map((cell) => {
+        const key = dateToKey(cell.date);
+        const cellEvents = eventsByDate[key] || [];
+        const isSelected = selectedDate ? isSameDay(cell.date, selectedDate) : false;
+        const classNames = ["calendar__cell"];
+        if (!cell.isCurrentMonth) classNames.push("calendar__cell--outside");
+        if (cell.isWeekend) classNames.push("calendar__cell--weekend");
+        if (cell.isToday) classNames.push("calendar__cell--today");
+        if (isSelected) classNames.push("calendar__cell--selected");
+        return /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: classNames.join(" "),
+            role: "gridcell",
+            "aria-label": cell.date.toLocaleDateString("en-US", {
+              month: "long",
+              day: "numeric",
+              year: "numeric"
+            }),
+            onClick: () => handleDateClick(cell.date),
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "calendar__date", children: cell.day }),
+              cellEvents.length > 0 && /* @__PURE__ */ jsx2("div", { className: "calendar__events", children: cellEvents.map((event) => /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: "calendar__event",
+                  style: {
+                    backgroundColor: event.color || DEFAULT_EVENT_COLOR
+                  },
+                  title: event.title,
+                  "data-testid": `event-${event.id}`,
+                  onClick: (e) => handleEventClick(event, e),
+                  children: event.title
+                },
+                event.id
+              )) })
+            ]
+          },
+          `${cell.isCurrentMonth ? "cur" : "out"}-${key}`
+        );
+      })
+    ] })
+  ] });
+};
+export {
+  FullCalendar,
+  Timer
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@orchestra-mcp/tracking",
+  "version": "1.0.0",
+  "description": "Analytics and tracking components for Orchestra MCP",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/orchestra-mcp/tracking"
+  },
+  "funding": "https://github.com/sponsors/fadymondy",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "prepublishOnly": "pnpm build"
+  }
+}