@dxos/react-ui-calendar 0.9.0 → 0.9.1-main.c7dcc2e112

package/dist/lib/browser/index.mjs

@@ -1,17 +1,21 @@
 // src/components/Calendar/Calendar.tsx
-import { createContext } from "@radix-ui/react-context";
-import { addDays, format, startOfDay, startOfWeek } from "date-fns";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { addDays as addDays3, format as format2, startOfDay as startOfDay3 } from "date-fns";
+import React3, { forwardRef, useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { List } from "react-virtualized";
 import { Event } from "@dxos/async";
 import { IconButton, useTranslation } from "@dxos/react-ui";
-import { composable, composableProps } from "@dxos/react-ui";
-import { mx } from "@dxos/ui-theme";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
+import { mx as mx3 } from "@dxos/ui-theme";
 import { translationKey } from "#translations";
 
+// src/components/Calendar/context.ts
+import { createContext } from "@radix-ui/react-context";
+var [CalendarContextProvider, useCalendarContext] = createContext("Calendar");
+
 // src/components/Calendar/util.ts
-import { differenceInCalendarDays } from "date-fns";
+import { differenceInCalendarDays, startOfDay } from "date-fns";
+var gridEpoch = /* @__PURE__ */ new Date("1970-01-01");
 var getDate = (start2, weekNumber, dayOfWeek, weekStartsOn) => {
   const result = new Date(start2);
   const startDayOfWeek = start2.getDay();
@@ -29,17 +33,473 @@ var getRowIndex = (start2, date, weekStartsOn) => {
 var isSameDay = (date1, date2) => {
   return !!date2 && date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
 };
+var MINUTES_PER_DAY = 24 * 60;
+var SNAP_MINUTES = 15;
+var minutesOfDay = (date) => (date.getTime() - startOfDay(date).getTime()) / 6e4;
+var setMinutesOfDay = (date, minutes) => new Date(startOfDay(date).getTime() + minutes * 6e4);
+var yToMinutes = (y, hourHeight) => y / hourHeight * 60;
+var minutesToY = (minutes, hourHeight) => minutes / 60 * hourHeight;
+var snapMinutes = (minutes, step = SNAP_MINUTES) => {
+  const snapped = Math.round(minutes / step) * step;
+  return Math.max(0, Math.min(MINUTES_PER_DAY, snapped));
+};
+var layoutDayEvents = (events) => {
+  const layout = /* @__PURE__ */ new Map();
+  const ordered = events.map((event, index) => ({
+    index,
+    start: event.start.getTime(),
+    end: event.end.getTime()
+  })).sort((a, b) => a.start - b.start);
+  let cluster = [];
+  let clusterMax = -Infinity;
+  const flush = () => {
+    if (cluster.length === 0) {
+      return;
+    }
+    const columnEnds = [];
+    const assigned = cluster.map(({ index, start: start2, end }) => {
+      let column = columnEnds.findIndex((columnEnd) => columnEnd <= start2);
+      if (column === -1) {
+        column = columnEnds.length;
+      }
+      columnEnds[column] = end;
+      return {
+        index,
+        column
+      };
+    });
+    const columnCount = columnEnds.length;
+    for (const { index, column } of assigned) {
+      layout.set(index, {
+        columnIndex: column,
+        columnCount
+      });
+    }
+    cluster = [];
+    clusterMax = -Infinity;
+  };
+  for (const entry of ordered) {
+    if (cluster.length > 0 && entry.start >= clusterMax) {
+      flush();
+    }
+    cluster.push(entry);
+    clusterMax = Math.max(clusterMax, entry.end);
+  }
+  flush();
+  return layout;
+};
+
+// src/components/Calendar/Week.tsx
+import { addDays as addDays2, startOfDay as startOfDay2, startOfWeek as startOfWeek2 } from "date-fns";
+import React2, { useCallback, useEffect, useLayoutEffect, useMemo as useMemo2, useRef, useState } from "react";
+import { composable, composableProps } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/ui-theme";
+
+// src/components/Calendar/Weekdays.tsx
+import { addDays, format, startOfWeek } from "date-fns";
+import React, { useMemo } from "react";
+import { mx } from "@dxos/ui-theme";
+var Weekdays = ({ weekStartsOn, columnWidth, gutter, dates }) => {
+  const labels = useMemo(() => {
+    const weekStart = startOfWeek(/* @__PURE__ */ new Date(), {
+      weekStartsOn
+    });
+    return Array.from({
+      length: 7
+    }, (_, index) => format(addDays(weekStart, index), "EEE"));
+  }, [
+    weekStartsOn
+  ]);
+  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const columnTemplate = columnWidth ? `repeat(7, ${columnWidth}px)` : "repeat(7, 1fr)";
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "grid w-full shrink-0",
+    style: {
+      gridTemplateColumns: gutter ? `${gutter}px ${columnTemplate}` : columnTemplate
+    }
+  }, gutter != null && /* @__PURE__ */ React.createElement("div", {
+    "aria-hidden": true
+  }), labels.map((label, index) => {
+    const date = dates?.[index];
+    const isToday = !!date && isSameDay(date, today);
+    return /* @__PURE__ */ React.createElement("div", {
+      key: index,
+      className: mx("flex flex-col items-center p-2 text-sm font-thin", isToday && "text-accent-text")
+    }, /* @__PURE__ */ React.createElement("span", null, label), date && /* @__PURE__ */ React.createElement("span", {
+      className: "text-lg font-normal tabular-nums"
+    }, date.getDate()));
+  }));
+};
+
+// src/components/Calendar/Week.tsx
+var CALENDAR_WEEK_NAME = "CalendarWeek";
+var HOUR_HEIGHT = 48;
+var GUTTER_WIDTH = 56;
+var RESIZE_HANDLE = 6;
+var MIN_DURATION = SNAP_MINUTES;
+var INITIAL_HOUR = 8;
+var CalendarWeek = composable(({ classNames, date, events = [], onEventCreate, onEventUpdate, ...props }, forwardedRef) => {
+  const { weekStartsOn, event: scrollEvent, setIndex } = useCalendarContext(CALENDAR_WEEK_NAME);
+  const today = useMemo2(() => /* @__PURE__ */ new Date(), []);
+  const [viewDate, setViewDate] = useState(() => date ?? today);
+  useEffect(() => {
+    if (date) {
+      setViewDate(date);
+    }
+  }, [
+    date
+  ]);
+  useEffect(() => {
+    return scrollEvent.on(({ date: date2 }) => setViewDate(date2));
+  }, [
+    scrollEvent
+  ]);
+  const weekDays = useMemo2(() => {
+    const weekStart = startOfWeek2(viewDate, {
+      weekStartsOn
+    });
+    return Array.from({
+      length: 7
+    }, (_, index) => startOfDay2(addDays2(weekStart, index)));
+  }, [
+    viewDate,
+    weekStartsOn
+  ]);
+  useEffect(() => {
+    setIndex(getRowIndex(gridEpoch, weekDays[0], weekStartsOn));
+  }, [
+    weekDays,
+    weekStartsOn,
+    setIndex
+  ]);
+  const eventsByDay = useMemo2(() => {
+    const byDay = weekDays.map(() => []);
+    for (const event of events) {
+      const dayIndex = weekDays.findIndex((day) => isSameDay(day, event.start));
+      if (dayIndex >= 0) {
+        byDay[dayIndex].push(event);
+      }
+    }
+    return byDay;
+  }, [
+    events,
+    weekDays
+  ]);
+  const scrollRef = useRef(null);
+  useLayoutEffect(() => {
+    scrollRef.current?.scrollTo({
+      top: minutesToY(INITIAL_HOUR * 60, HOUR_HEIGHT)
+    });
+  }, []);
+  const gestureRef = useRef(void 0);
+  const columnsRef = useRef([]);
+  const [draft, setDraft] = useState(void 0);
+  const pointerMinutes = useCallback((clientY) => {
+    const rect = columnsRef.current.find(Boolean)?.getBoundingClientRect();
+    if (!rect) {
+      return 0;
+    }
+    return Math.max(0, Math.min(MINUTES_PER_DAY, yToMinutes(clientY - rect.top, HOUR_HEIGHT)));
+  }, []);
+  const dayFromX = useCallback((clientX) => {
+    const index = columnsRef.current.findIndex((node) => {
+      const rect = node?.getBoundingClientRect();
+      return rect && clientX >= rect.left && clientX < rect.right;
+    });
+    return index >= 0 ? weekDays[index] : void 0;
+  }, [
+    weekDays
+  ]);
+  const applyGesture = useCallback((clientX, clientY) => {
+    const gesture = gestureRef.current;
+    if (!gesture) {
+      return void 0;
+    }
+    const { kind, day, eventId, anchorMinutes, grabOffset, durationMinutes } = gesture;
+    const raw = pointerMinutes(clientY);
+    switch (kind) {
+      case "create": {
+        const focus = snapMinutes(raw);
+        const from = Math.min(anchorMinutes, focus);
+        const to = Math.max(anchorMinutes, focus);
+        const end = Math.max(to, from + MIN_DURATION);
+        return {
+          eventId,
+          start: setMinutesOfDay(day, from),
+          end: setMinutesOfDay(day, end)
+        };
+      }
+      case "move": {
+        const targetDay = dayFromX(clientX) ?? day;
+        let start2 = snapMinutes(raw - grabOffset);
+        start2 = Math.max(0, Math.min(MINUTES_PER_DAY - durationMinutes, start2));
+        return {
+          eventId,
+          start: setMinutesOfDay(targetDay, start2),
+          end: setMinutesOfDay(targetDay, start2 + durationMinutes)
+        };
+      }
+      case "resize-start": {
+        const start2 = Math.min(snapMinutes(raw), anchorMinutes - MIN_DURATION);
+        return {
+          eventId,
+          start: setMinutesOfDay(day, start2),
+          end: setMinutesOfDay(day, anchorMinutes)
+        };
+      }
+      case "resize-end": {
+        const end = Math.max(snapMinutes(raw), anchorMinutes + MIN_DURATION);
+        return {
+          eventId,
+          start: setMinutesOfDay(day, anchorMinutes),
+          end: setMinutesOfDay(day, end)
+        };
+      }
+    }
+  }, [
+    dayFromX,
+    pointerMinutes
+  ]);
+  const callbacksRef = useRef({
+    onEventCreate,
+    onEventUpdate
+  });
+  callbacksRef.current = {
+    onEventCreate,
+    onEventUpdate
+  };
+  const detachRef = useRef(() => {
+  });
+  const beginGesture = useCallback((gesture, ev) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    gestureRef.current = gesture;
+    setDraft(applyGesture(ev.clientX, ev.clientY));
+    const handleMove = (moveEv) => {
+      if (gestureRef.current) {
+        setDraft(applyGesture(moveEv.clientX, moveEv.clientY));
+      }
+    };
+    const handleUp = (upEv) => {
+      const active = gestureRef.current;
+      const result = applyGesture(upEv.clientX, upEv.clientY);
+      detachRef.current();
+      gestureRef.current = void 0;
+      setDraft(void 0);
+      if (active && result) {
+        if (active.kind === "create") {
+          callbacksRef.current.onEventCreate?.({
+            start: result.start,
+            end: result.end
+          });
+        } else if (result.eventId) {
+          callbacksRef.current.onEventUpdate?.({
+            id: result.eventId,
+            start: result.start,
+            end: result.end
+          });
+        }
+      }
+    };
+    detachRef.current = () => {
+      window.removeEventListener("pointermove", handleMove);
+      window.removeEventListener("pointerup", handleUp);
+      window.removeEventListener("pointercancel", handleUp);
+    };
+    window.addEventListener("pointermove", handleMove);
+    window.addEventListener("pointerup", handleUp);
+    window.addEventListener("pointercancel", handleUp);
+  }, [
+    applyGesture
+  ]);
+  useEffect(() => () => detachRef.current(), []);
+  const handleColumnPointerDown = useCallback((day, event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const anchor = snapMinutes(yToMinutes(event.clientY - rect.top, HOUR_HEIGHT));
+    beginGesture({
+      kind: "create",
+      day,
+      anchorMinutes: anchor,
+      grabOffset: 0,
+      durationMinutes: 0
+    }, event);
+  }, [
+    beginGesture
+  ]);
+  const renderEvent = useCallback((event, day, start2, end, columnIndex, columnCount) => /* @__PURE__ */ React2.createElement(EventBlock, {
+    key: event.id,
+    event,
+    start: start2,
+    end,
+    columnIndex,
+    columnCount,
+    onMoveStart: (ev) => beginGesture({
+      kind: "move",
+      day,
+      eventId: event.id,
+      anchorMinutes: 0,
+      grabOffset: pointerMinutes(ev.clientY) - minutesOfDay(event.start),
+      durationMinutes: minutesOfDay(event.end) - minutesOfDay(event.start)
+    }, ev),
+    onResizeStart: (ev) => beginGesture({
+      kind: "resize-start",
+      day,
+      eventId: event.id,
+      anchorMinutes: minutesOfDay(event.end),
+      grabOffset: 0,
+      durationMinutes: 0
+    }, ev),
+    onResizeEnd: (ev) => beginGesture({
+      kind: "resize-end",
+      day,
+      eventId: event.id,
+      anchorMinutes: minutesOfDay(event.start),
+      grabOffset: 0,
+      durationMinutes: 0
+    }, ev)
+  }), [
+    beginGesture,
+    pointerMinutes
+  ]);
+  const draggedEvent = draft?.eventId ? events.find((event) => event.id === draft.eventId) : void 0;
+  return /* @__PURE__ */ React2.createElement("div", {
+    ...composableProps(props, {
+      classNames: [
+        "flex flex-col h-full w-full overflow-hidden outline-hidden",
+        classNames
+      ]
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React2.createElement(Weekdays, {
+    weekStartsOn,
+    gutter: GUTTER_WIDTH,
+    dates: weekDays
+  }), /* @__PURE__ */ React2.createElement("div", {
+    ref: scrollRef,
+    className: "flex-1 overflow-y-auto _scrollbar-thin"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "grid relative",
+    style: {
+      height: minutesToY(MINUTES_PER_DAY, HOUR_HEIGHT),
+      gridTemplateColumns: `${GUTTER_WIDTH}px repeat(7, 1fr)`
+    }
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "relative"
+  }, Array.from({
+    length: 24
+  }, (_, hour) => /* @__PURE__ */ React2.createElement("div", {
+    key: hour,
+    className: "absolute right-1 -translate-y-1/2 text-xs text-description tabular-nums",
+    style: {
+      top: minutesToY(hour * 60, HOUR_HEIGHT)
+    }
+  }, hour === 0 ? "" : `${hour.toString().padStart(2, "0")}:00`))), weekDays.map((day, dayIndex) => {
+    const dayEvents = eventsByDay[dayIndex];
+    const layout = layoutDayEvents(dayEvents);
+    const isToday = isSameDay(day, today);
+    const draftHere = draft && isSameDay(day, draft.start) ? draft : void 0;
+    return /* @__PURE__ */ React2.createElement("div", {
+      key: day.toISOString(),
+      ref: (node) => {
+        columnsRef.current[dayIndex] = node;
+      },
+      "data-date": day.toISOString(),
+      className: mx2("relative border-l border-separator cursor-cell select-none", dayIndex === 6 && "border-r", isToday && "bg-primary-500/5"),
+      onPointerDown: (ev) => handleColumnPointerDown(day, ev)
+    }, Array.from({
+      length: 24
+    }, (_, hour) => /* @__PURE__ */ React2.createElement("div", {
+      key: hour,
+      className: "absolute inset-x-0 border-t border-separator/60",
+      style: {
+        top: minutesToY(hour * 60, HOUR_HEIGHT)
+      }
+    })), dayEvents.map((event, index) => {
+      const slot = layout.get(index) ?? {
+        columnIndex: 0,
+        columnCount: 1
+      };
+      const editing = draft && draft.eventId === event.id ? draft : void 0;
+      if (editing && !isSameDay(editing.start, day)) {
+        return null;
+      }
+      const start2 = editing ? editing.start : event.start;
+      const end = editing ? editing.end : event.end;
+      return renderEvent(event, day, start2, end, slot.columnIndex, slot.columnCount);
+    }), draftHere && draggedEvent && !dayEvents.some((event) => event.id === draggedEvent.id) && renderEvent(draggedEvent, day, draftHere.start, draftHere.end, 0, 1), draftHere && !draftHere.eventId && /* @__PURE__ */ React2.createElement(PendingBlock, {
+      start: draftHere.start,
+      end: draftHere.end
+    }));
+  }))));
+});
+CalendarWeek.displayName = CALENDAR_WEEK_NAME;
+var formatTime = (date) => {
+  const minutes = minutesOfDay(date);
+  const hour = Math.floor(minutes / 60);
+  const minute = Math.round(minutes % 60);
+  return `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+};
+var EventBlock = ({ event, start: start2, end, columnIndex, columnCount, onMoveStart, onResizeStart, onResizeEnd }) => {
+  const top = minutesToY(minutesOfDay(start2), HOUR_HEIGHT);
+  const height = Math.max(minutesToY(minutesOfDay(end) - minutesOfDay(start2), HOUR_HEIGHT), RESIZE_HANDLE * 2);
+  const widthPct = 100 / columnCount;
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: "absolute rounded-sm bg-primary-500/80 text-inverse-fg overflow-hidden cursor-move shadow-sm",
+    style: {
+      top,
+      height,
+      left: `calc(${columnIndex * widthPct}% + 1px)`,
+      width: `calc(${widthPct}% - 2px)`
+    },
+    onPointerDown: onMoveStart
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "absolute inset-x-0 top-0 cursor-ns-resize",
+    style: {
+      height: RESIZE_HANDLE
+    },
+    onPointerDown: onResizeStart
+  }), /* @__PURE__ */ React2.createElement("div", {
+    className: "px-1 py-0.5 text-xs leading-tight"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "font-medium truncate"
+  }, event.title ?? "(untitled)")), /* @__PURE__ */ React2.createElement("div", {
+    className: "absolute inset-x-0 bottom-0 cursor-ns-resize",
+    style: {
+      height: RESIZE_HANDLE
+    },
+    onPointerDown: onResizeEnd
+  }));
+};
+var PendingBlock = ({ start: start2, end }) => {
+  const top = minutesToY(minutesOfDay(start2), HOUR_HEIGHT);
+  const height = minutesToY(minutesOfDay(end) - minutesOfDay(start2), HOUR_HEIGHT);
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: "absolute inset-x-0 rounded bg-primary-500/40 border border-primary-500 pointer-events-none",
+    style: {
+      top,
+      height
+    }
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "px-1 py-0.5 text-xs tabular-nums text-inverse-fg"
+  }, formatTime(start2), "\u2013", formatTime(end)));
+};
 
 // src/components/Calendar/Calendar.tsx
 var maxRows = 50 * 100;
-var start = /* @__PURE__ */ new Date("1970-01-01");
+var start = gridEpoch;
 var size = 40;
 var defaultWidth = 7 * size;
 var EDGE_SCROLL_ZONE = 32;
 var EDGE_SCROLL_MAX_SPEED = 12;
+var DATE_CLASS_NAMES = {
+  current: "ring-2 ring-primary-500",
+  today: "border-2 border-amber-500 bg-amber-500/50 text-inverse-fg",
+  busy: "border border-green-700",
+  starred: "border-2 border-dashed border-amber-500"
+};
 var makeRange = (a, b) => {
-  const dayA = startOfDay(a);
-  const dayB = startOfDay(b);
+  const dayA = startOfDay3(a);
+  const dayB = startOfDay3(b);
   return dayA <= dayB ? {
     from: dayA,
     to: dayB
@@ -52,7 +512,7 @@ var isInRange = (date, range) => {
   if (!range) {
     return false;
   }
-  const day = startOfDay(date).getTime();
+  const day = startOfDay3(date).getTime();
   return day >= range.from.getTime() && day <= range.to.getTime();
 };
 var cellDate = (el) => {
@@ -66,24 +526,29 @@ var cellDate = (el) => {
   }
   return void 0;
 };
-var [CalendarContextProvider, useCalendarContext] = createContext("Calendar");
 var CalendarRoot = /* @__PURE__ */ forwardRef(({ children, weekStartsOn = 1 }, forwardedRef) => {
-  const event = useMemo(() => new Event(), []);
-  const [selected, setSelected] = useState();
-  const [index, setIndex] = useState();
-  const [range, setRange] = useState();
-  const [pendingRange, setPendingRange] = useState();
+  const event = useMemo3(() => new Event(), []);
+  const [selected, setSelected] = useState2();
+  const [index, setIndex] = useState2();
+  const [range, setRange] = useState2();
+  const [pendingRange, setPendingRange] = useState2();
   useImperativeHandle(forwardedRef, () => ({
     scrollTo: (date) => {
       event.emit({
         type: "scroll",
         date
       });
+    },
+    select: (date) => {
+      event.emit({
+        type: "select",
+        date
+      });
     }
   }), [
     event
   ]);
-  return /* @__PURE__ */ React.createElement(CalendarContextProvider, {
+  return /* @__PURE__ */ React3.createElement(CalendarContextProvider, {
     weekStartsOn,
     event,
     index,
@@ -97,15 +562,15 @@ var CalendarRoot = /* @__PURE__ */ forwardRef(({ children, weekStartsOn = 1 }, f
   }, children);
 });
 var CALENDAR_TOOLBAR_NAME = "CalendarHeader";
-var CalendarToolbar = composable(({ classNames, ...props }, forwardedRef) => {
+var CalendarToolbar = composable2(({ classNames, ...props }, forwardedRef) => {
   const { t } = useTranslation(translationKey);
   const { weekStartsOn, event, index, selected } = useCalendarContext(CALENDAR_TOOLBAR_NAME);
-  const top = useMemo(() => getDate(start, index ?? 0, 6, weekStartsOn), [
+  const top = useMemo3(() => getDate(start, index ?? 0, 6, weekStartsOn), [
     index,
     weekStartsOn
   ]);
-  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
-  const handleToday = useCallback(() => {
+  const today = useMemo3(() => /* @__PURE__ */ new Date(), []);
+  const handleToday = useCallback2(() => {
     event.emit({
       type: "scroll",
       date: today
@@ -115,91 +580,98 @@ var CalendarToolbar = composable(({ classNames, ...props }, forwardedRef) => {
     start,
     today
   ]);
-  return /* @__PURE__ */ React.createElement("div", {
-    ...composableProps(props, {
+  return /* @__PURE__ */ React3.createElement("div", {
+    ...composableProps2(props, {
       role: "none",
       classNames: [
         "shrink-0 grid! grid-cols-3 items-center bg-toolbar-surface",
         classNames
       ]
     }),
-    ref: forwardedRef,
-    style: {
-      width: defaultWidth
-    }
-  }, /* @__PURE__ */ React.createElement("div", {
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement("div", {
     className: "flex justify-start"
-  }, /* @__PURE__ */ React.createElement(IconButton, {
+  }, /* @__PURE__ */ React3.createElement(IconButton, {
     variant: "ghost",
     icon: "ph--calendar--regular",
     iconOnly: true,
     classNames: "aspect-square",
     label: t("today.button"),
     onClick: handleToday
-  })), /* @__PURE__ */ React.createElement("div", {
+  })), /* @__PURE__ */ React3.createElement("div", {
     className: "flex justify-center p-2 text-description"
-  }, format(selected ?? top, "MMMM")), /* @__PURE__ */ React.createElement("div", {
+  }, format2(selected ?? top, "MMMM")), /* @__PURE__ */ React3.createElement("div", {
     className: "flex justify-end p-2 text-description"
   }, (selected ?? top).getFullYear()));
 });
 CalendarToolbar.displayName = CALENDAR_TOOLBAR_NAME;
 var CALENDAR_GRID_NAME = "CalendarGrid";
-var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSelect, onSelectRange, ...props }, forwardedRef) => {
+var CalendarGrid = composable2(({ classNames, rows, dates = [], initialDate, scrollMargin = 2, onSelect, onSelectRange, ...props }, forwardedRef) => {
   const { weekStartsOn, event, setIndex, selected, setSelected, range, setRange, pendingRange, setPendingRange } = useCalendarContext(CALENDAR_GRID_NAME);
   const { ref: containerRef, width = 0, height = 0 } = useResizeDetector();
   const maxHeight = rows ? rows * size : void 0;
-  const listRef = useRef(null);
-  const gridRef = useRef(null);
-  const today = useMemo(() => /* @__PURE__ */ new Date(), []);
-  const dateSet = useMemo(() => new Set(dates.map((date) => startOfDay(date).toISOString())), [
+  const listRef = useRef2(null);
+  const gridRef = useRef2(null);
+  const today = useMemo3(() => /* @__PURE__ */ new Date(), []);
+  const dateMarkers = useMemo3(() => {
+    const markers = /* @__PURE__ */ new Map();
+    for (const { startDate, endDate, tag = "busy" } of dates) {
+      const end = endDate ? startOfDay3(endDate) : startOfDay3(startDate);
+      for (let date = startOfDay3(startDate); date <= end; date = addDays3(date, 1)) {
+        const iso = date.toISOString();
+        if (markers.get(iso) !== "star") {
+          markers.set(iso, tag);
+        }
+      }
+    }
+    return markers;
+  }, [
     dates
   ]);
-  const hasDate = useCallback((date) => dateSet.has(startOfDay(date).toISOString()), [
-    dateSet
+  const getMarker = useCallback2((date) => {
+    const iso = startOfDay3(date).toISOString();
+    const tag = dateMarkers.get(iso);
+    return tag ? {
+      tag
+    } : void 0;
+  }, [
+    dateMarkers
   ]);
-  const [initialized, setInitialized] = useState(false);
-  useEffect(() => {
+  const [initialized, setInitialized] = useState2(false);
+  useEffect2(() => {
     const index = getRowIndex(start, initialDate ?? today, weekStartsOn);
-    listRef.current?.scrollToRow(index);
+    listRef.current?.scrollToRow(Math.max(0, index - scrollMargin));
   }, [
     initialized,
     start,
     today,
     initialDate,
-    weekStartsOn
+    weekStartsOn,
+    scrollMargin
   ]);
-  useEffect(() => {
+  useEffect2(() => {
     return event.on((event2) => {
-      switch (event2.type) {
-        case "scroll": {
-          const index = getRowIndex(start, event2.date, weekStartsOn);
-          listRef.current?.scrollToRow(index);
-          break;
-        }
+      if (event2.type === "select") {
+        setSelected(event2.date);
       }
+      const index = getRowIndex(start, event2.date, weekStartsOn);
+      listRef.current?.scrollToRow(Math.max(0, index - scrollMargin));
     });
   }, [
-    event
+    event,
+    start,
+    weekStartsOn,
+    scrollMargin,
+    setSelected
   ]);
-  const days = useMemo(() => {
-    const weekStart = startOfWeek(/* @__PURE__ */ new Date(), {
-      weekStartsOn
-    });
-    return Array.from({
-      length: 7
-    }, (_, i) => {
-      const day = addDays(weekStart, i);
-      return format(day, "EEE");
-    });
-  }, []);
-  const anchorRef = useRef(void 0);
-  const focusRef = useRef(void 0);
-  const draggingRef = useRef(false);
-  const pointerXRef = useRef(0);
-  const pointerYRef = useRef(0);
-  const scrollTopRef = useRef(0);
-  const scrollRafRef = useRef(void 0);
-  const scrollIntoView = useCallback((date) => {
+  const anchorRef = useRef2(void 0);
+  const focusRef = useRef2(void 0);
+  const draggingRef = useRef2(false);
+  const pointerXRef = useRef2(0);
+  const pointerYRef = useRef2(0);
+  const scrollTopRef = useRef2(0);
+  const scrollRafRef = useRef2(void 0);
+  const scrollIntoView = useCallback2((date) => {
     const targetRow = getRowIndex(start, date, weekStartsOn);
     const visibleHeight = maxHeight ?? height;
     if (!visibleHeight) {
@@ -217,7 +689,7 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
     maxHeight,
     weekStartsOn
   ]);
-  const updateRangeFromAnchor = useCallback((focus, fireRange = false) => {
+  const updateRangeFromAnchor = useCallback2((focus, fireRange = false) => {
     const anchor = anchorRef.current;
     if (!anchor) {
       return;
@@ -241,8 +713,8 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
     setRange,
     setSelected
   ]);
-  const prevSelectedRef = useRef(void 0);
-  const handleDayPointerDown = useCallback((date, ev) => {
+  const prevSelectedRef = useRef2(void 0);
+  const handleDayPointerDown = useCallback2((date, ev) => {
     ev.preventDefault();
     prevSelectedRef.current = selected;
     anchorRef.current = date;
@@ -260,7 +732,7 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
     setRange,
     setSelected
   ]);
-  const handleDayPointerEnter = useCallback((date) => {
+  const handleDayPointerEnter = useCallback2((date) => {
     if (!draggingRef.current) {
       return;
     }
@@ -275,7 +747,7 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
     setPendingRange,
     setSelected
   ]);
-  const handleDayPointerUp = useCallback((date) => {
+  const handleDayPointerUp = useCallback2((date) => {
     const anchor = anchorRef.current;
     const wasDragging = draggingRef.current;
     draggingRef.current = false;
@@ -309,7 +781,7 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
     setRange,
     setSelected
   ]);
-  useEffect(() => {
+  useEffect2(() => {
     const cancel = () => {
       if (draggingRef.current) {
         draggingRef.current = false;
@@ -325,7 +797,7 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
   }, [
     setPendingRange
   ]);
-  const tickEdgeScroll = useCallback(() => {
+  const tickEdgeScroll = useCallback2(() => {
     scrollRafRef.current = void 0;
     if (!draggingRef.current) {
       return;
@@ -363,7 +835,7 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
     setPendingRange,
     setSelected
   ]);
-  useEffect(() => {
+  useEffect2(() => {
     const handleMove = (ev) => {
       if (!draggingRef.current) {
         return;
@@ -385,7 +857,7 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
   }, [
     tickEdgeScroll
   ]);
-  const handleKeyDown = useCallback((ev) => {
+  const handleKeyDown = useCallback2((ev) => {
     let dx = 0;
     switch (ev.key) {
       case "ArrowLeft":
@@ -409,24 +881,24 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
       let focus = focusRef.current;
       if (!anchor) {
         if (selected) {
-          anchor = startOfDay(selected);
+          anchor = startOfDay3(selected);
           focus = anchor;
         } else if (range) {
           anchor = range.from;
           focus = range.to;
         } else {
-          anchor = startOfDay(today);
+          anchor = startOfDay3(today);
           focus = anchor;
         }
         anchorRef.current = anchor;
         focusRef.current = focus;
       }
-      const newFocus = addDays(focus ?? anchor, dx);
+      const newFocus = addDays3(focus ?? anchor, dx);
       updateRangeFromAnchor(newFocus, true);
       scrollIntoView(newFocus);
     } else {
       const current = selected ?? focusRef.current ?? anchorRef.current ?? today;
-      const next = addDays(startOfDay(current), dx);
+      const next = addDays3(startOfDay3(current), dx);
       anchorRef.current = next;
       focusRef.current = next;
       setRange(void 0);
@@ -449,17 +921,17 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
     updateRangeFromAnchor
   ]);
   const activeRange = pendingRange ?? range;
-  const handleScroll = useCallback((info) => {
+  const handleScroll = useCallback2((info) => {
     scrollTopRef.current = info.scrollTop;
     setIndex(Math.round(info.scrollTop / size));
   }, []);
-  const rowRenderer = useCallback(({ key, index, style }) => {
+  const rowRenderer = useCallback2(({ key, index, style }) => {
     const getBgColor = (date) => date.getMonth() % 2 === 0 ? "bg-group-surface" : "bg-group-alt-surface";
-    return /* @__PURE__ */ React.createElement("div", {
+    return /* @__PURE__ */ React3.createElement("div", {
       key,
       style,
       className: "grid"
-    }, /* @__PURE__ */ React.createElement("div", {
+    }, /* @__PURE__ */ React3.createElement("div", {
       className: "grid grid-cols-7 bg-input-surface",
       style: {
         gridTemplateColumns: `repeat(7, ${size}px)`
@@ -468,23 +940,26 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
       length: 7
     }).map((_, i) => {
       const date = getDate(start, index, i, weekStartsOn);
+      const marker = getMarker(date);
+      const isToday = isSameDay(date, today);
+      const isCurrent = isSameDay(date, selected);
+      const dateClassNames = isToday ? DATE_CLASS_NAMES.today : marker?.tag === "star" ? DATE_CLASS_NAMES.starred : marker ? DATE_CLASS_NAMES.busy : void 0;
       const inRange = isInRange(date, activeRange);
-      const border = isSameDay(date, selected) ? "border-primary-500" : isSameDay(date, today) ? "border-amber-500" : hasDate(date) ? "border-neutral-700 border-dashed" : void 0;
-      return /* @__PURE__ */ React.createElement("div", {
+      return /* @__PURE__ */ React3.createElement("div", {
         key: i,
-        "data-date": startOfDay(date).toISOString(),
-        className: mx("relative flex justify-center items-center cursor-pointer select-none", getBgColor(date)),
+        "data-date": startOfDay3(date).toISOString(),
+        className: mx3("relative flex justify-center cursor-pointer select-none", getBgColor(date)),
         onPointerDown: (ev) => handleDayPointerDown(date, ev),
         onPointerEnter: () => handleDayPointerEnter(date),
         onPointerUp: () => handleDayPointerUp(date)
-      }, inRange && /* @__PURE__ */ React.createElement("div", {
+      }, inRange && /* @__PURE__ */ React3.createElement("div", {
         className: "absolute inset-0 bg-primary-500/20"
-      }), /* @__PURE__ */ React.createElement("span", {
-        className: "relative text-description text-sm"
-      }, date.getDate()), !border && date.getDate() === 1 && /* @__PURE__ */ React.createElement("span", {
+      }), !dateClassNames && date.getDate() === 1 && /* @__PURE__ */ React3.createElement("span", {
         className: "absolute top-0 text-xs text-description"
-      }, format(date, "MMM")), border && /* @__PURE__ */ React.createElement("div", {
-        className: mx("absolute inset-1 border-2 rounded-full", border)
+      }, format2(date, "MMM")), /* @__PURE__ */ React3.createElement("div", {
+        className: mx3("absolute inset-1 rounded-full flex justify-center items-center text-sm text-description", dateClassNames)
+      }, date.getDate()), isCurrent && /* @__PURE__ */ React3.createElement("div", {
+        className: mx3("absolute inset-0.5 rounded-full", DATE_CLASS_NAMES.current)
       }));
     })));
   }, [
@@ -492,12 +967,12 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
     handleDayPointerDown,
     handleDayPointerEnter,
     handleDayPointerUp,
-    hasDate,
+    getMarker,
     selected,
     weekStartsOn
   ]);
-  return /* @__PURE__ */ React.createElement("div", {
-    ...composableProps(props, {
+  return /* @__PURE__ */ React3.createElement("div", {
+    ...composableProps2(props, {
       role: "none",
       classNames: [
         "flex flex-col h-full w-full justify-center overflow-hidden outline-hidden",
@@ -514,18 +989,17 @@ var CalendarGrid = composable(({ classNames, rows, dates = [], initialDate, onSe
     },
     tabIndex: 0,
     onKeyDown: handleKeyDown
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "grid w-full grid-cols-7",
+  }, /* @__PURE__ */ React3.createElement("div", {
     style: {
       width: defaultWidth
     }
-  }, days.map((date, i) => /* @__PURE__ */ React.createElement("div", {
-    key: i,
-    className: "flex justify-center p-2 text-sm font-thin"
-  }, date))), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React3.createElement(Weekdays, {
+    weekStartsOn,
+    columnWidth: size
+  })), /* @__PURE__ */ React3.createElement("div", {
     className: "flex flex-col h-full w-full justify-center overflow-hidden",
     ref: containerRef
-  }, /* @__PURE__ */ React.createElement(List, {
+  }, /* @__PURE__ */ React3.createElement(List, {
     ref: listRef,
     role: "none",
     className: "scrollbar-none outline-hidden",
@@ -543,7 +1017,8 @@ CalendarGrid.displayName = CALENDAR_GRID_NAME;
 var Calendar = {
   Root: CalendarRoot,
   Toolbar: CalendarToolbar,
-  Grid: CalendarGrid
+  Grid: CalendarGrid,
+  Week: CalendarWeek
 };
 export {
   Calendar