silver-ui 0.5.0 → 0.6.0

package/dist/{chunk-GSTINE4X.js → chunk-CZUMVOPH.js}

@@ -1,20 +1,27 @@
-import { DropdownMenu, DropdownMenuItem } from './chunk-TH537HOM.js';
+import { ToggleButtonGroup, ToggleButton } from './chunk-XTLNUYCK.js';
+import { MetadataList, MetadataListItem } from './chunk-WAWHHXSR.js';
+import { DropdownMenu, DropdownMenuItem } from './chunk-C6EWA3H2.js';
 import { ButtonGroup } from './chunk-D3CHBU46.js';
 import { plainDateToInstant, plainDateFromInstant, plainDateIsEqual, plainDateFormat, DATE_FORMAT_WITH_WEEKDAY, DATE_FORMAT_MONTH_YEAR, plainDateIsBefore, plainDateIsAfter, plainDateDayOfWeek } from './chunk-5HPXUDX6.js';
 import { getBrowserTimezoneID, nowEpochMilliseconds } from './chunk-OX4ZMUF4.js';
-import { Popover } from './chunk-S5CMLG2E.js';
-import { Button } from './chunk-THTVYP5V.js';
-import { Spinner } from './chunk-2VAUVJVG.js';
-import { Heading, Text } from './chunk-RJEZBOSH.js';
-import { Tooltip } from './chunk-6PIVWNUR.js';
+import { Layout, LayoutHeader, LayoutFooter, LayoutContent } from './chunk-6I5QWA6A.js';
+import { Popover, usePopover } from './chunk-JHMUMJF3.js';
+import { Link } from './chunk-S4WWBV4N.js';
+import { Button } from './chunk-HMJINNXZ.js';
+import { Spinner } from './chunk-QHXI2QDK.js';
+import { Text, Heading } from './chunk-NXTDP6AX.js';
+import { Tooltip } from './chunk-KWZMXX4F.js';
+import { useLatest_default } from './chunk-KEPCKSDE.js';
+import { isReactNode } from './chunk-2PSZAWLC.js';
 import { Icon } from './chunk-IUW777WZ.js';
 import { sva } from './chunk-IAVZKGZS.js';
+import { cva } from './chunk-FMEIPGUP.js';
 import { css } from './chunk-OD4DHHZH.js';
 import { cx } from './chunk-PPNETWIP.js';
 import { Temporal } from '@js-temporal/polyfill';
-import { createContext, use, useMemo, useState, Suspense, useSyncExternalStore, useCallback } from 'react';
+import { createContext, use, useRef, useCallback, useMemo, useState, Suspense, useSyncExternalStore } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronLeft, ChevronRight, Check } from 'lucide-react';
+import { Pencil, Trash2, X, CalendarDays, MapPin, AlignLeft, Tag, ChevronLeft, ChevronRight, Check } from 'lucide-react';
 
 var DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
 function createEventFromISO({
@@ -60,6 +67,22 @@ var scheduleEventRecipe = sva({
       color: "var(--schedule-event-fg)",
       _hover: {
         bg: "var(--schedule-event-bg-hover)"
+      },
+      // Active state: the pill's popover is open. Interactive pills carry
+      // `aria-expanded`, so this only matches the open trigger. The outline uses
+      // the category accent color and composes cleanly with the color/past
+      // background overrides.
+      '&[aria-expanded="true"]': {
+        outlineWidth: "focus",
+        outlineStyle: "solid",
+        outlineColor: "var(--schedule-event-dot)",
+        outlineOffset: "1px"
+      },
+      '&[data-state="past"]': {
+        "--schedule-event-bg": "color-mix(in srgb, var(--schedule-event-dot) 10%, token(colors.bg))",
+        "--schedule-event-bg-hover": "color-mix(in srgb, var(--schedule-event-dot) 14%, token(colors.bg))",
+        "--schedule-event-border": "color-mix(in srgb, var(--schedule-event-dot) 48%, token(colors.border))",
+        "--schedule-event-fg": "color-mix(in srgb, var(--schedule-event-fg-base) 52%, token(colors.fg.muted))"
       }
     },
     dot: {
@@ -115,6 +138,26 @@ var scheduleEventRecipe = sva({
       true: { event: { w: "full" } },
       false: {}
     },
+    // Applied when the pill is rendered as a clickable <button> trigger (event
+    // popover plugin). Resets user-agent button styling so the pill looks
+    // identical to its static <span> form.
+    isInteractive: {
+      true: {
+        event: {
+          appearance: "none",
+          textAlign: "inherit",
+          font: "inherit",
+          m: 0,
+          cursor: "pointer",
+          _focusVisible: {
+            outlineWidth: "focus",
+            outlineStyle: "solid",
+            outlineColor: "primary"
+          }
+        }
+      },
+      false: {}
+    },
     color: {
       blue: {
         event: {
@@ -230,6 +273,9 @@ var scheduleEventRecipe = sva({
     isPast: {
       true: {
         event: {
+          // Keep `isPast` in the recipe API for class-based assertions and
+          // callers, but rely on `[data-state="past"]` for the actual variable
+          // overrides so the color variant cannot win by atomic CSS order.
           "--schedule-event-bg": "color-mix(in srgb, var(--schedule-event-dot) 10%, token(colors.bg))",
           "--schedule-event-bg-hover": "color-mix(in srgb, var(--schedule-event-dot) 14%, token(colors.bg))",
           "--schedule-event-border": "color-mix(in srgb, var(--schedule-event-dot) 48%, token(colors.border))",
@@ -243,9 +289,208 @@ var scheduleEventRecipe = sva({
     layout: "inline",
     color: "blue",
     isFullWidth: false,
+    isInteractive: false,
     isPast: false
   }
 });
+
+// src/components/Schedule/TimeGridView.recipe.ts
+var scheduleTimeGridViewRecipe = sva({
+  slots: [
+    "grid",
+    "header",
+    "corner",
+    "dayHeader",
+    "dayHeaderContent",
+    "dayHeaderDayNumber",
+    "allDayLabel",
+    "allDayRow",
+    "dayCell",
+    "timeLabel",
+    "timeRow",
+    "hourCell",
+    "events",
+    "allDayEvents",
+    "allDayPopoverContent",
+    "allDayPopoverEvents",
+    "allDaySeeMoreButton",
+    "rowContents"
+  ],
+  base: {
+    grid: {
+      display: "grid",
+      gridTemplateColumns: "72px 1fr",
+      overflow: "auto"
+    },
+    header: {
+      display: "grid",
+      gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    corner: {
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    dayHeader: {
+      p: "2",
+      textAlign: "center",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border"
+    },
+    dayHeaderContent: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1"
+    },
+    dayHeaderDayNumber: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minW: "30px",
+      h: "30px",
+      lineHeight: "30px",
+      borderRadius: "full"
+    },
+    allDayLabel: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "flex-end",
+      py: "0.5",
+      px: "2",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    allDayRow: {
+      display: "grid",
+      gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    dayCell: {
+      minH: 0,
+      p: "0.5",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border"
+    },
+    timeLabel: {
+      p: "2",
+      color: "fg.muted",
+      textAlign: "end",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    timeRow: {
+      display: "grid",
+      gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))"
+    },
+    hourCell: {
+      position: "relative",
+      minH: "14",
+      p: "1",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    events: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1"
+    },
+    allDayEvents: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5"
+    },
+    allDayPopoverContent: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      p: "3"
+    },
+    allDayPopoverEvents: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 0,
+      m: 0,
+      p: 0,
+      listStyleType: "none"
+    },
+    allDaySeeMoreButton: {
+      display: "inline-flex",
+      alignItems: "center",
+      maxW: "full",
+      h: "5",
+      px: "1",
+      borderRadius: "sm",
+      color: "primary",
+      cursor: "pointer",
+      fontSize: "xs",
+      fontWeight: "medium",
+      lineHeight: "tight",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      _hover: {
+        bg: "bg.muted"
+      }
+    },
+    rowContents: {
+      display: "contents"
+    }
+  },
+  variants: {
+    isCurrentDay: {
+      true: {
+        dayHeaderDayNumber: {
+          bg: "primary",
+          color: "fg.onPrimary"
+        }
+      },
+      false: {}
+    },
+    isLastColumn: {
+      true: {
+        dayHeader: { borderInlineEndWidth: 0 },
+        dayCell: { borderInlineEndWidth: 0 },
+        hourCell: { borderInlineEndWidth: 0 }
+      },
+      false: {}
+    },
+    isLastRow: {
+      true: {
+        timeLabel: { borderBlockEndWidth: 0 },
+        hourCell: { borderBlockEndWidth: 0 }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    isCurrentDay: false,
+    isLastColumn: false,
+    isLastRow: false
+  }
+});
 var ScheduleContext = createContext(null);
 ScheduleContext.displayName = "ScheduleContext";
 function useScheduleContext() {
@@ -382,6 +627,53 @@ var scheduleRecipe = sva({
 });
 var scheduleClasses = scheduleRecipe();
 var categoryFallback = { label: "Event", color: "blue" };
+var currentTimeIndicator = cva({
+  base: {
+    h: "0.5",
+    bg: "surface.orange.accent",
+    borderRadius: "full",
+    pointerEvents: "none",
+    _before: {
+      content: '""',
+      position: "absolute",
+      insetInlineStart: "-6px",
+      top: "50%",
+      w: "2.5",
+      h: "2.5",
+      borderRadius: "full",
+      bg: "surface.orange.accent",
+      transform: "translateY(-50%)"
+    }
+  },
+  variants: {
+    layout: {
+      list: {
+        position: "relative"
+      },
+      timeGrid: {
+        position: "absolute",
+        insetInline: "0",
+        transform: "translateY(2px)",
+        zIndex: "20"
+      }
+    }
+  }
+});
+function ScheduleCurrentTimeIndicator({
+  layout,
+  testId,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: currentTimeIndicator({ layout }),
+      "data-testid": testId,
+      style
+    }
+  );
+}
 function createCategoryMap(categories) {
   const categoryMap = /* @__PURE__ */ new Map();
   categories.forEach((category) => {
@@ -458,45 +750,197 @@ function isEventInPast(event, currentTime2, timezoneID) {
   }
   return event.end <= currentTime2;
 }
-function CalendarEventPill({
+function hasEventPopoverPlugin(plugins) {
+  return plugins.some((plugin) => plugin.renderEventPopover != null);
+}
+function useScheduleEventPopover(event, { placement = "end" } = {}) {
+  const { categoryMap, plugins, timezoneID } = useScheduleContext();
+  const popover = usePopover({
+    // Content renders its own close affordance via the `controls.close` passed
+    // to renderEventPopover, so suppress the built-in close button.
+    hasCloseButton: false,
+    label: getEventAccessibleLabel(event, categoryMap, timezoneID),
+    role: "dialog"
+  });
+  const { hide } = popover;
+  const controls = useMemo(
+    () => ({ close: hide }),
+    [hide]
+  );
+  const content = useMemo(() => {
+    for (const plugin of plugins) {
+      const node = plugin.renderEventPopover?.(event, controls);
+      if (isReactNode(node)) {
+        return node;
+      }
+    }
+    return null;
+  }, [controls, event, plugins]);
+  if (!isReactNode(content)) {
+    return {};
+  }
+  return {
+    popover: popover.render(content, {
+      alignment: "start",
+      offsetX: 8,
+      offsetY: -3,
+      placement
+    }),
+    triggerProps: {
+      ...popover.triggerProps,
+      onClick: popover.toggle,
+      ref: popover.triggerRef
+    }
+  };
+}
+function useScheduleEventPluginProps({
   event,
-  isPast = false
+  layout
 }) {
-  const { categoryMap, timezoneID } = useScheduleContext();
-  const category = getCategory(categoryMap, event);
-  const classes = scheduleEventRecipe({ color: category.color, isPast });
+  const { plugins, timezoneID } = useScheduleContext();
+  return useMemo(() => {
+    let props;
+    plugins.forEach((plugin) => {
+      const pluginProps = plugin.getEventProps?.({ event, layout, timezoneID });
+      if (pluginProps != null) {
+        props = { ...props, ...pluginProps };
+      }
+    });
+    return props;
+  }, [event, layout, plugins, timezoneID]);
+}
+function EventPillRoot({
+  children,
+  className,
+  dataState,
+  dataTestId,
+  pluginProps,
+  triggerProps
+}) {
+  if (triggerProps != null) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className,
+        "data-state": dataState,
+        "data-testid": dataTestId,
+        ...pluginProps,
+        type: "button",
+        ...triggerProps,
+        children
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: classes.event,
-      "data-state": isPast ? "past" : void 0,
-      "data-testid": `schedule-event-${event.id}`,
-      children: /* @__PURE__ */ jsx("span", { className: classes.title, children: isDayEvent(event) ? event.title : getEventAccessibleLabel(event, categoryMap, timezoneID) })
+      className,
+      "data-state": dataState,
+      "data-testid": dataTestId,
+      ...pluginProps,
+      children
     }
   );
 }
+function CalendarEventPill({
+  event,
+  isFullWidth = false,
+  isPast = false
+}) {
+  const { categoryMap, timezoneID } = useScheduleContext();
+  const { popover, triggerProps } = useScheduleEventPopover(event);
+  const pluginProps = useScheduleEventPluginProps({ event, layout: "inline" });
+  const category = getCategory(categoryMap, event);
+  const classes = scheduleEventRecipe({
+    color: category.color,
+    isFullWidth,
+    isPast,
+    isInteractive: triggerProps != null
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      EventPillRoot,
+      {
+        className: classes.event,
+        dataState: isPast ? "past" : void 0,
+        dataTestId: `schedule-event-${event.id}`,
+        pluginProps,
+        triggerProps,
+        children: /* @__PURE__ */ jsx("span", { className: classes.title, children: isDayEvent(event) ? event.title : getEventAccessibleLabel(event, categoryMap, timezoneID) })
+      }
+    ),
+    popover
+  ] });
+}
 function CalendarMonthEventPill({
   event,
   isPast = false
 }) {
   const { categoryMap, timezoneID } = useScheduleContext();
+  const { popover, triggerProps } = useScheduleEventPopover(event);
+  const pluginProps = useScheduleEventPluginProps({ event, layout: "month" });
   const category = getCategory(categoryMap, event);
   const startTimeLabel = getEventStartTimeLabel(event, timezoneID);
   const classes = scheduleEventRecipe({
     color: category.color,
     isPast,
-    isFullWidth: true
+    isFullWidth: true,
+    isInteractive: triggerProps != null
   });
-  return /* @__PURE__ */ jsxs(
-    "span",
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      EventPillRoot,
+      {
+        className: classes.event,
+        dataState: isPast ? "past" : void 0,
+        dataTestId: `schedule-event-${event.id}`,
+        pluginProps,
+        triggerProps,
+        children: [
+          startTimeLabel != null ? /* @__PURE__ */ jsx("span", { className: classes.time, children: startTimeLabel }) : null,
+          /* @__PURE__ */ jsx("span", { className: classes.title, children: event.title })
+        ]
+      }
+    ),
+    popover
+  ] });
+}
+function ScheduleEventOverflowPopover({
+  buttonClassName,
+  contentClassName,
+  events,
+  eventsClassName,
+  hiddenEventCount,
+  label,
+  renderEvent,
+  testId,
+  title
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover,
     {
-      className: classes.event,
-      "data-state": isPast ? "past" : void 0,
-      "data-testid": `schedule-event-${event.id}`,
-      children: [
-        startTimeLabel != null ? /* @__PURE__ */ jsx("span", { className: classes.time, children: startTimeLabel }) : null,
-        /* @__PURE__ */ jsx("span", { className: classes.title, children: event.title })
-      ]
+      content: /* @__PURE__ */ jsxs("div", { className: contentClassName, children: [
+        /* @__PURE__ */ jsx(Heading, { level: 4, children: title }),
+        /* @__PURE__ */ jsx("ul", { className: eventsClassName, children: events.map((event) => /* @__PURE__ */ jsx("li", { children: renderEvent(event) }, event.id)) })
+      ] }),
+      "data-testid": testId,
+      label,
+      width: 320,
+      children: /* @__PURE__ */ jsxs(
+        Link,
+        {
+          className: buttonClassName,
+          color: "primary",
+          label,
+          size: "xs",
+          weight: "medium",
+          children: [
+            "+",
+            hiddenEventCount,
+            " more"
+          ]
+        }
+      )
     }
   );
 }
@@ -570,141 +1014,7 @@ function subscribe(listener) {
 function useCurrentTime() {
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
-var styles = {
-  grid: css({
-    display: "grid",
-    gridTemplateColumns: "72px 1fr",
-    overflow: "auto"
-  }),
-  header: css({
-    display: "grid",
-    gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))",
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  }),
-  corner: css({
-    borderInlineEndWidth: "default",
-    borderInlineEndStyle: "solid",
-    borderInlineEndColor: "border",
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  }),
-  dayHeader: css({
-    p: "2",
-    textAlign: "center",
-    borderInlineEndWidth: "default",
-    borderInlineEndStyle: "solid",
-    borderInlineEndColor: "border"
-  }),
-  lastColumn: css({
-    borderInlineEndWidth: 0
-  }),
-  dayHeaderContent: css({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "1"
-  }),
-  dayHeaderDayNumber: css({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    minW: "30px",
-    h: "30px",
-    lineHeight: "30px",
-    borderRadius: "full"
-  }),
-  dayHeaderCurrent: css({
-    bg: "primary",
-    color: "fg.onPrimary"
-  }),
-  allDayLabel: css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    py: "1",
-    px: "2",
-    borderInlineEndWidth: "default",
-    borderInlineEndStyle: "solid",
-    borderInlineEndColor: "border",
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  }),
-  allDayRow: css({
-    display: "grid",
-    gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))",
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  }),
-  dayCell: css({
-    minH: 0,
-    p: "0.5",
-    borderInlineEndWidth: "default",
-    borderInlineEndStyle: "solid",
-    borderInlineEndColor: "border"
-  }),
-  timeLabel: css({
-    p: "2",
-    color: "fg.muted",
-    textAlign: "end",
-    borderInlineEndWidth: "default",
-    borderInlineEndStyle: "solid",
-    borderInlineEndColor: "border",
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  }),
-  timeRow: css({
-    display: "grid",
-    gridTemplateColumns: "repeat(var(--schedule-day-count), minmax(160px, 1fr))"
-  }),
-  hourCell: css({
-    position: "relative",
-    minH: "14",
-    p: "1",
-    borderInlineEndWidth: "default",
-    borderInlineEndStyle: "solid",
-    borderInlineEndColor: "border",
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  }),
-  lastRow: css({
-    borderBlockEndWidth: 0
-  }),
-  events: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "1"
-  }),
-  currentTimeLine: css({
-    position: "absolute",
-    insetInline: "0",
-    borderBlockStartWidth: "2px",
-    borderBlockStartStyle: "solid",
-    borderBlockStartColor: "surface.orange.accent",
-    transform: "translateY(2px)",
-    zIndex: "20",
-    pointerEvents: "none",
-    _before: {
-      content: '""',
-      position: "absolute",
-      insetInlineStart: "-6px",
-      top: "-6px",
-      w: "2.5",
-      h: "2.5",
-      borderRadius: "full",
-      bg: "surface.orange.accent"
-    }
-  }),
-  rowContents: css({
-    display: "contents"
-  })
-};
+var styles = scheduleTimeGridViewRecipe();
 function eventOverlapsHour(event, day, hour, timezoneID) {
   if (isDayEvent(event)) {
     return false;
@@ -785,6 +1095,73 @@ function getTimedEventStyle({
     zIndex: level + 1
   };
 }
+function TimeGridEvent({
+  currentTime: currentTime2,
+  hourHeight,
+  layout,
+  maxHour,
+  minHour
+}) {
+  const { categoryMap, plugins, timezoneID } = useScheduleContext();
+  const { event } = layout;
+  const { popover, triggerProps } = useScheduleEventPopover(event);
+  const eventPluginProps = useScheduleEventPluginProps({
+    event,
+    layout: "timeGrid"
+  });
+  const pluginEndContent = useMemo(
+    () => plugins.map(
+      (plugin) => plugin.renderTimeGridEventContent?.({
+        event,
+        hourHeight,
+        maxHour,
+        minHour,
+        timezoneID
+      })
+    ).filter(isReactNode),
+    [event, hourHeight, maxHour, minHour, plugins, timezoneID]
+  );
+  const category = getCategory(categoryMap, event);
+  const isPast = isEventInPast(event, currentTime2, timezoneID);
+  const classes = scheduleEventRecipe({
+    layout: "block",
+    color: category.color,
+    isPast,
+    isInteractive: triggerProps != null
+  });
+  const style = getTimedEventStyle(layout);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: classes.title, children: event.title }),
+    /* @__PURE__ */ jsx("span", { className: classes.time, children: getEventTimeLabel(event, timezoneID) }),
+    pluginEndContent
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerProps != null ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: classes.event,
+        "data-state": isPast ? "past" : void 0,
+        "data-testid": `schedule-event-${event.id}`,
+        style,
+        type: "button",
+        ...eventPluginProps,
+        ...triggerProps,
+        children: body
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classes.event,
+        "data-state": isPast ? "past" : void 0,
+        "data-testid": `schedule-event-${event.id}`,
+        ...eventPluginProps,
+        style,
+        children: body
+      }
+    ),
+    popover
+  ] });
+}
 function getCellName({
   categoryMap,
   date,
@@ -799,12 +1176,13 @@ function getCellName({
   return eventLabels.length > 0 ? `${dateLabel} ${hourLabel}. ${eventLabels.join(". ")}` : `${dateLabel} ${hourLabel}`;
 }
 function TimeGridView({
+  allDayEventLimit = 3,
   days,
   hourHeight = 100,
   maxHour = 24,
   minHour = 0
 }) {
-  const { categoryMap, events, highlightDate, timezoneID } = useScheduleContext();
+  const { categoryMap, events, highlightDate, plugins, timezoneID } = useScheduleContext();
   const normalizedMinHour = Math.max(0, Math.min(23, Math.floor(minHour)));
   const normalizedMaxHour = Math.max(
     normalizedMinHour + 1,
@@ -824,6 +1202,7 @@ function TimeGridView({
     "--schedule-day-count": String(days.length)
   };
   const normalizedHourHeight = Math.max(1, Math.floor(hourHeight));
+  const normalizedAllDayEventLimit = Number.isFinite(allDayEventLimit) ? Math.max(0, Math.floor(allDayEventLimit)) : 3;
   const hourStyle = {
     height: normalizedHourHeight,
     minHeight: normalizedHourHeight
@@ -859,42 +1238,37 @@ function TimeGridView({
               role: "columnheader"
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: styles.header, children: days.map((day, index) => /* @__PURE__ */ jsx(
-            "div",
-            {
-              "aria-colindex": index + 2,
-              "aria-current": plainDateIsEqual(day, highlightPlainDate) ? "date" : void 0,
-              "aria-label": plainDateFormat(day, DATE_FORMAT_WITH_WEEKDAY),
-              className: cx(
-                styles.dayHeader,
-                index === days.length - 1 && styles.lastColumn
-              ),
-              role: "columnheader",
-              children: /* @__PURE__ */ jsx(
-                Heading,
-                {
-                  "aria-hidden": "true",
-                  color: "secondary",
-                  level: 4,
-                  textWrap: "nowrap",
-                  children: /* @__PURE__ */ jsxs("span", { className: styles.dayHeaderContent, children: [
-                    plainDateFormat(day, { weekday: "short" }),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cx(
-                          styles.dayHeaderDayNumber,
-                          plainDateIsEqual(day, highlightPlainDate) && styles.dayHeaderCurrent
-                        ),
-                        children: day.day
-                      }
-                    )
-                  ] })
-                }
-              )
-            },
-            day.toString()
-          )) })
+          /* @__PURE__ */ jsx("div", { className: styles.header, children: days.map((day, index) => {
+            const isCurrentDay = plainDateIsEqual(day, highlightPlainDate);
+            const dayHeaderClasses = scheduleTimeGridViewRecipe({
+              isCurrentDay,
+              isLastColumn: index === days.length - 1
+            });
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-colindex": index + 2,
+                "aria-current": isCurrentDay ? "date" : void 0,
+                "aria-label": plainDateFormat(day, DATE_FORMAT_WITH_WEEKDAY),
+                className: dayHeaderClasses.dayHeader,
+                role: "columnheader",
+                children: /* @__PURE__ */ jsx(
+                  Heading,
+                  {
+                    "aria-hidden": "true",
+                    color: "secondary",
+                    level: 4,
+                    textWrap: "nowrap",
+                    children: /* @__PURE__ */ jsxs("span", { className: styles.dayHeaderContent, children: [
+                      plainDateFormat(day, { weekday: "short" }),
+                      /* @__PURE__ */ jsx("span", { className: dayHeaderClasses.dayHeaderDayNumber, children: day.day })
+                    ] })
+                  }
+                )
+              },
+              day.toString()
+            );
+          }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.rowContents, role: "row", children: [
           /* @__PURE__ */ jsx(
@@ -911,6 +1285,16 @@ function TimeGridView({
             const dayEvents = events.filter(
               (event) => isDayEvent(event) && eventOccursOnDate(event, day, timezoneID)
             );
+            const visibleDayEvents = dayEvents.slice(
+              0,
+              normalizedAllDayEventLimit
+            );
+            const hiddenDayEvents = dayEvents.slice(normalizedAllDayEventLimit);
+            const dayCellClasses = scheduleTimeGridViewRecipe({
+              isLastColumn: index === days.length - 1
+            });
+            const dateLabel = plainDateFormat(day, DATE_FORMAT_WITH_WEEKDAY);
+            const seeMoreLabel = `Show ${hiddenDayEvents.length} more all-day events for ${dateLabel}`;
             return /* @__PURE__ */ jsx(
               "div",
               {
@@ -922,19 +1306,39 @@ function TimeGridView({
                   hourLabel: "all day",
                   timezoneID
                 }),
-                className: cx(
-                  styles.dayCell,
-                  index === days.length - 1 && styles.lastColumn
-                ),
+                className: dayCellClasses.dayCell,
                 role: "gridcell",
-                children: /* @__PURE__ */ jsx("div", { className: styles.events, children: dayEvents.map((event) => /* @__PURE__ */ jsx(
-                  CalendarEventPill,
-                  {
-                    event,
-                    isPast: isEventInPast(event, currentTime2, timezoneID)
-                  },
-                  event.id
-                )) })
+                children: /* @__PURE__ */ jsxs("div", { className: styles.allDayEvents, children: [
+                  visibleDayEvents.map((event) => /* @__PURE__ */ jsx(
+                    CalendarEventPill,
+                    {
+                      event,
+                      isPast: isEventInPast(event, currentTime2, timezoneID)
+                    },
+                    event.id
+                  )),
+                  hiddenDayEvents.length > 0 ? /* @__PURE__ */ jsx(
+                    ScheduleEventOverflowPopover,
+                    {
+                      buttonClassName: styles.allDaySeeMoreButton,
+                      contentClassName: styles.allDayPopoverContent,
+                      events: dayEvents,
+                      eventsClassName: styles.allDayPopoverEvents,
+                      hiddenEventCount: hiddenDayEvents.length,
+                      label: seeMoreLabel,
+                      renderEvent: (event) => /* @__PURE__ */ jsx(
+                        CalendarEventPill,
+                        {
+                          event,
+                          isFullWidth: true,
+                          isPast: isEventInPast(event, currentTime2, timezoneID)
+                        }
+                      ),
+                      testId: `schedule-all-day-see-more-${day.toString()}`,
+                      title: dateLabel
+                    }
+                  ) : null
+                ] })
               },
               `${day.toString()}-all-day`
             );
@@ -943,12 +1347,15 @@ function TimeGridView({
         hours.map((hour) => {
           const hourLabel = formatHour(hour);
           const isLastHour = hour === hours[hours.length - 1];
+          const timeLabelClasses = scheduleTimeGridViewRecipe({
+            isLastRow: isLastHour
+          });
           return /* @__PURE__ */ jsxs("div", { className: styles.rowContents, role: "row", children: [
             /* @__PURE__ */ jsx(
               "div",
               {
                 "aria-colindex": 1,
-                className: cx(styles.timeLabel, isLastHour && styles.lastRow),
+                className: timeLabelClasses.timeLabel,
                 role: "rowheader",
                 style: hourStyle,
                 children: hourLabel
@@ -967,6 +1374,24 @@ function TimeGridView({
                 minHour: normalizedMinHour,
                 timezoneID
               });
+              const hourCellClasses = scheduleTimeGridViewRecipe({
+                isLastColumn: index === days.length - 1,
+                isLastRow: isLastHour
+              });
+              const hourCellPluginProps = plugins.reduce(
+                (props, plugin) => ({
+                  ...props,
+                  ...plugin.getTimeGridCellProps?.({
+                    date: day,
+                    hour,
+                    hourHeight: normalizedHourHeight,
+                    maxHour: normalizedMaxHour,
+                    minHour: normalizedMinHour,
+                    timezoneID
+                  })
+                }),
+                {}
+              );
               return /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -978,51 +1403,31 @@ function TimeGridView({
                     hourLabel,
                     timezoneID
                   }),
-                  className: cx(
-                    styles.hourCell,
-                    index === days.length - 1 && styles.lastColumn,
-                    isLastHour && styles.lastRow
-                  ),
+                  className: hourCellClasses.hourCell,
+                  "data-testid": `schedule-time-grid-cell-${day.toString()}-${hour}`,
                   role: "gridcell",
                   style: hourStyle,
+                  ...hourCellPluginProps,
                   children: [
                     currentTimeTop != null ? /* @__PURE__ */ jsx(
-                      "div",
+                      ScheduleCurrentTimeIndicator,
                       {
-                        "aria-hidden": "true",
-                        className: styles.currentTimeLine,
-                        "data-testid": "schedule-current-time-line",
-                        style: { top: `${currentTimeTop}%` }
+                        layout: "timeGrid",
+                        style: { top: `${currentTimeTop}%` },
+                        testId: "schedule-current-time-line"
                       }
                     ) : null,
-                    /* @__PURE__ */ jsx("div", { className: styles.events, children: visibleTimedEventLayouts.map((layout) => {
-                      const { event } = layout;
-                      const category = getCategory(categoryMap, event);
-                      const isPast = isEventInPast(
-                        event,
-                        currentTime2,
-                        timezoneID
-                      );
-                      const eventClasses = scheduleEventRecipe({
-                        layout: "block",
-                        color: category.color,
-                        isPast
-                      });
-                      return /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          className: eventClasses.event,
-                          "data-state": isPast ? "past" : void 0,
-                          "data-testid": `schedule-event-${event.id}`,
-                          style: getTimedEventStyle(layout),
-                          children: [
-                            /* @__PURE__ */ jsx("span", { className: eventClasses.title, children: event.title }),
-                            /* @__PURE__ */ jsx("span", { className: eventClasses.time, children: getEventTimeLabel(event, timezoneID) })
-                          ]
-                        },
-                        event.id
-                      );
-                    }) })
+                    /* @__PURE__ */ jsx("div", { className: styles.events, children: visibleTimedEventLayouts.map((layout) => /* @__PURE__ */ jsx(
+                      TimeGridEvent,
+                      {
+                        currentTime: currentTime2,
+                        hourHeight: normalizedHourHeight,
+                        layout,
+                        maxHour: normalizedMaxHour,
+                        minHour: normalizedMinHour
+                      },
+                      layout.event.id
+                    )) })
                   ]
                 },
                 `${day.toString()}-${hour}`
@@ -1099,6 +1504,7 @@ function ScheduleDayView({
   return /* @__PURE__ */ jsx(ScheduleFrame, { title: formatMonthTitle(day), titleLabel: formatDate(day), children: /* @__PURE__ */ jsx(
     TimeGridView,
     {
+      allDayEventLimit: options.allDayEventLimit,
       days: [day],
       hourHeight: options.hourHeight,
       maxHour: options.maxHour,
@@ -1107,6 +1513,7 @@ function ScheduleDayView({
   ) });
 }
 function createScheduleDayView({
+  allDayEventLimit = 3,
   hourHeight = 100,
   maxHour = 24,
   minHour = 0
@@ -1129,114 +1536,192 @@ function createScheduleDayView({
       label: "Previous day",
       range: [date.startOfDay().addDays(-1), date.startOfDay()]
     }),
-    options: { hourHeight, maxHour, minHour }
+    options: { allDayEventLimit, hourHeight, maxHour, minHour }
   };
 }
-var styles2 = {
-  list: css({
-    display: "flex",
-    flexDirection: "column"
-  }),
-  day: css({
-    display: "grid",
-    gridTemplateColumns: "112px minmax(0, 1fr)",
-    alignItems: "start",
-    columnGap: "3",
-    p: "3",
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  }),
-  dayLast: css({
-    borderBlockEndWidth: 0
-  }),
-  dayHeading: css({
-    m: 0,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "flex-start",
-    gap: "2",
-    color: "fg.muted",
-    fontFamily: "body",
-    fontSize: "lg",
-    fontWeight: "semibold",
-    lineHeight: "tight",
-    whiteSpace: "nowrap"
-  }),
-  dayWeekday: css({
-    display: "inline-block",
-    fontSize: "lg"
-  }),
-  dayNumber: css({
-    display: "inline-flex",
-    flexShrink: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    w: "30px",
-    h: "30px",
-    borderRadius: "full",
-    fontWeight: "bold"
-  }),
-  dayNumberCurrent: css({
-    bg: "primary",
-    color: "fg.onPrimary"
-  }),
-  events: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "2"
-  }),
-  eventRow: css({
-    display: "grid",
-    gridTemplateColumns: "160px minmax(0, 1fr)",
-    alignItems: "center",
-    gap: "3"
-  }),
-  eventPast: css({
-    opacity: 0.64
-  }),
-  eventContent: css({
-    display: "flex",
-    alignItems: "center",
-    gap: "2",
-    minW: 0
-  }),
-  eventTime: css({
-    whiteSpace: "nowrap"
-  }),
-  nowRow: css({
-    h: "0.5",
-    bg: "fg.danger",
-    borderRadius: "full"
-  })
-};
+
+// src/components/Schedule/ListView.recipe.ts
+var scheduleListViewRecipe = sva({
+  slots: [
+    "list",
+    "day",
+    "dayHeading",
+    "dayWeekday",
+    "dayNumber",
+    "events",
+    "eventRow",
+    "eventContent",
+    "eventTime"
+  ],
+  base: {
+    list: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    day: {
+      display: "grid",
+      gridTemplateColumns: "112px minmax(0, 1fr)",
+      alignItems: "start",
+      columnGap: "3",
+      p: "3",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    dayHeading: {
+      m: 0,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      gap: "2",
+      color: "fg.muted",
+      fontFamily: "body",
+      fontSize: "lg",
+      fontWeight: "semibold",
+      lineHeight: "tight",
+      whiteSpace: "nowrap"
+    },
+    dayWeekday: {
+      display: "inline-block",
+      fontSize: "lg"
+    },
+    dayNumber: {
+      display: "inline-flex",
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      w: "30px",
+      h: "30px",
+      borderRadius: "full",
+      fontWeight: "bold"
+    },
+    events: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "2"
+    },
+    eventRow: {
+      display: "grid",
+      gridTemplateColumns: "160px minmax(0, 1fr)",
+      alignItems: "center",
+      gap: "3"
+    },
+    eventContent: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      justifySelf: "start",
+      minW: 0
+    },
+    eventTime: {
+      whiteSpace: "nowrap"
+    }
+  },
+  variants: {
+    isHighlightedDay: {
+      true: {
+        dayNumber: {
+          bg: "primary",
+          color: "fg.onPrimary"
+        }
+      },
+      false: {}
+    },
+    isLastDay: {
+      true: {
+        day: {
+          borderBlockEndWidth: 0
+        }
+      },
+      false: {}
+    },
+    isPastEvent: {
+      true: {
+        eventRow: {
+          opacity: 0.64
+        }
+      },
+      false: {}
+    },
+    isInteractiveEvent: {
+      true: {
+        eventContent: {
+          appearance: "none",
+          bg: "none",
+          borderWidth: 0,
+          p: 0,
+          m: 0,
+          font: "inherit",
+          textAlign: "inherit",
+          color: "inherit",
+          cursor: "pointer",
+          borderRadius: "sm",
+          _focusVisible: {
+            outlineWidth: "focus",
+            outlineStyle: "solid",
+            outlineColor: "primary"
+          }
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    isHighlightedDay: false,
+    isLastDay: false,
+    isPastEvent: false,
+    isInteractiveEvent: false
+  }
+});
+var styles2 = scheduleListViewRecipe();
 function ListEvent({
   event,
   isPast
 }) {
   const { categoryMap, timezoneID } = useScheduleContext();
+  const { popover, triggerProps } = useScheduleEventPopover(event, {
+    placement: "end"
+  });
   const category = getCategory(categoryMap, event);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cx(styles2.eventRow, isPast && styles2.eventPast),
-      "data-state": isPast ? "past" : void 0,
-      children: [
-        /* @__PURE__ */ jsx(Text, { className: styles2.eventTime, color: "secondary", type: "supporting", children: isDayEvent(event) ? "All day" : getEventTimeLabel(event, timezoneID) }),
-        /* @__PURE__ */ jsxs("div", { className: styles2.eventContent, children: [
-          /* @__PURE__ */ jsx(Tooltip, { content: category.label, hasHoverIndication: false, children: /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-label": category.label,
-              className: scheduleEventRecipe({ color: category.color }).dot,
-              role: "img"
-            }
-          ) }),
-          /* @__PURE__ */ jsx(Text, { children: event.title })
-        ] })
-      ]
-    }
-  );
+  const eventDataState = isPast ? "past" : void 0;
+  const classes = scheduleListViewRecipe({
+    isInteractiveEvent: triggerProps != null,
+    isPastEvent: isPast
+  });
+  const eventContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { content: category.label, hoverIndication: "never", children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-label": category.label,
+        className: scheduleEventRecipe({ color: category.color }).dot,
+        role: "img"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Text, { children: event.title })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: classes.eventRow, "data-state": eventDataState, children: [
+    /* @__PURE__ */ jsx(Text, { className: classes.eventTime, color: "secondary", type: "supporting", children: isDayEvent(event) ? "All day" : getEventTimeLabel(event, timezoneID) }),
+    triggerProps != null ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: classes.eventContent,
+        "data-state": eventDataState,
+        "data-testid": `schedule-event-${event.id}`,
+        type: "button",
+        ...triggerProps,
+        children: eventContent
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classes.eventContent,
+        "data-state": eventDataState,
+        "data-testid": `schedule-event-${event.id}`,
+        children: eventContent
+      }
+    ),
+    popover
+  ] });
 }
 function ScheduleListView() {
   const { events, highlightDate, isLoading, range, timezoneID } = useScheduleContext();
@@ -1264,45 +1749,30 @@ function ScheduleListView() {
   return /* @__PURE__ */ jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsx("div", { className: cx(scheduleClasses.surface, styles2.list), children: visibleDays.map(
     ({ day, dayEvents, isCurrentDay, isHighlightedDay }, index) => {
       const fullDate = plainDateFormat(day, DATE_FORMAT_WITH_WEEKDAY);
-      return /* @__PURE__ */ jsxs(
-        "section",
-        {
-          className: cx(
-            styles2.day,
-            index === visibleDays.length - 1 && styles2.dayLast
-          ),
-          children: [
-            /* @__PURE__ */ jsxs(
-              "h4",
-              {
-                "aria-current": isHighlightedDay ? "date" : void 0,
-                "aria-label": fullDate,
-                className: styles2.dayHeading,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cx(
-                        styles2.dayNumber,
-                        isHighlightedDay && styles2.dayNumberCurrent
-                      ),
-                      children: day.day
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: styles2.dayWeekday, children: plainDateFormat(day, { weekday: "short" }) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: styles2.events, children: renderListRows({
-              currentTime: currentTime2,
-              events: dayEvents,
-              isShowingCurrentTime: isCurrentDay && !isLoading,
-              timezoneID
-            }) })
-          ]
-        },
-        day.toString()
-      );
+      const dayClasses = scheduleListViewRecipe({
+        isHighlightedDay,
+        isLastDay: index === visibleDays.length - 1
+      });
+      return /* @__PURE__ */ jsxs("section", { className: dayClasses.day, children: [
+        /* @__PURE__ */ jsxs(
+          "h4",
+          {
+            "aria-current": isHighlightedDay ? "date" : void 0,
+            "aria-label": fullDate,
+            className: dayClasses.dayHeading,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: dayClasses.dayNumber, children: day.day }),
+              /* @__PURE__ */ jsx("span", { className: dayClasses.dayWeekday, children: plainDateFormat(day, { weekday: "short" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: dayClasses.events, children: renderListRows({
+          currentTime: currentTime2,
+          events: dayEvents,
+          isShowingCurrentTime: isCurrentDay && !isLoading,
+          timezoneID
+        }) })
+      ] }, day.toString());
     }
   ) }) });
 }
@@ -1324,11 +1794,10 @@ function renderListRows({
     return rows;
   }
   const marker = /* @__PURE__ */ jsx(
-    "div",
+    ScheduleCurrentTimeIndicator,
     {
-      "aria-hidden": "true",
-      className: styles2.nowRow,
-      "data-testid": "schedule-list-current-time"
+      layout: "list",
+      testId: "schedule-list-current-time"
     },
     "current-time"
   );
@@ -1363,127 +1832,159 @@ function createScheduleListView({
     options: { days }
   };
 }
-var styles3 = {
-  grid: css({
-    display: "grid",
-    gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
-  }),
-  weekday: css({
-    p: "2",
-    textAlign: "center",
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  }),
-  cell: css({
-    minH: "24",
-    p: "0.5",
-    borderInlineEndWidth: "default",
-    borderInlineEndStyle: "solid",
-    borderInlineEndColor: "border",
-    borderBlockEndWidth: "default",
-    borderBlockEndStyle: "solid",
-    borderBlockEndColor: "border"
-  }),
-  lastColumn: css({
-    borderInlineEndWidth: 0
-  }),
-  lastRow: css({
-    borderBlockEndWidth: 0
-  }),
-  otherMonth: css({
-    bg: "bg.subtle",
-    color: "fg.muted"
-  }),
-  dayNumber: css({
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    w: "6",
-    h: "6",
-    m: "0.5",
-    borderRadius: "full"
-  }),
-  today: css({
-    bg: "primary",
-    color: "fg.onPrimary"
-  }),
-  events: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "1",
-    m: 0,
-    p: 0,
-    listStyleType: "none"
-  }),
-  eventItem: css({
-    display: "flex"
-  }),
-  monthSurface: css({
-    position: "relative",
-    gridColumn: "1 / -1"
-  }),
-  monthCellGrid: css({
-    display: "grid",
-    gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-    gridAutoRows: "var(--schedule-month-row-height)"
-  }),
-  monthEventOverlay: css({
-    position: "absolute",
-    inset: 0,
-    display: "grid",
-    gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-    gridAutoRows: "var(--schedule-month-row-height)",
-    pointerEvents: "none"
-  }),
-  monthEventSpan: css({
-    alignSelf: "start",
-    minW: 0,
-    mx: "0.5",
-    pointerEvents: "auto",
-    zIndex: 1
-  }),
-  monthSeeMoreSpan: css({
-    alignSelf: "start",
-    minW: 0,
-    mx: "0.5",
-    pointerEvents: "auto",
-    zIndex: 2
-  }),
-  monthSeeMoreButton: css({
-    display: "inline-flex",
-    alignItems: "center",
-    maxW: "full",
-    h: "5",
-    px: "1",
-    borderRadius: "sm",
-    color: "primary",
-    cursor: "pointer",
-    fontSize: "xs",
-    fontWeight: "medium",
-    lineHeight: "tight",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    _hover: {
-      bg: "bg.muted"
+
+// src/components/Schedule/MonthlyView.recipe.ts
+var scheduleMonthlyViewRecipe = sva({
+  slots: [
+    "grid",
+    "weekday",
+    "cell",
+    "dayNumber",
+    "todayText",
+    "monthSurface",
+    "monthCellGrid",
+    "monthEventOverlay",
+    "monthEventSpan",
+    "monthSeeMoreSpan",
+    "monthSeeMoreButton",
+    "monthPopoverContent",
+    "monthPopoverEvents"
+  ],
+  base: {
+    grid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
+    },
+    weekday: {
+      p: "2",
+      textAlign: "center",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    cell: {
+      minH: "24",
+      p: "0.5",
+      borderInlineEndWidth: "default",
+      borderInlineEndStyle: "solid",
+      borderInlineEndColor: "border",
+      borderBlockEndWidth: "default",
+      borderBlockEndStyle: "solid",
+      borderBlockEndColor: "border"
+    },
+    dayNumber: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      w: "6",
+      h: "6",
+      m: "0.5",
+      borderRadius: "full"
+    },
+    monthSurface: {
+      position: "relative",
+      gridColumn: "1 / -1"
+    },
+    monthCellGrid: {
+      display: "grid",
+      gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+      gridAutoRows: "var(--schedule-month-row-height)"
+    },
+    monthEventOverlay: {
+      position: "absolute",
+      inset: 0,
+      display: "grid",
+      gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+      gridAutoRows: "var(--schedule-month-row-height)",
+      pointerEvents: "none"
+    },
+    monthEventSpan: {
+      alignSelf: "start",
+      minW: 0,
+      mx: "0.5",
+      pointerEvents: "auto",
+      zIndex: 1
+    },
+    monthSeeMoreSpan: {
+      alignSelf: "start",
+      minW: 0,
+      mx: "0.5",
+      pointerEvents: "auto",
+      zIndex: 2
+    },
+    monthSeeMoreButton: {
+      display: "inline-flex",
+      alignItems: "center",
+      maxW: "full",
+      h: "5",
+      px: "1",
+      borderRadius: "sm",
+      color: "primary",
+      cursor: "pointer",
+      fontSize: "xs",
+      fontWeight: "medium",
+      lineHeight: "tight",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      _hover: {
+        bg: "bg.muted"
+      }
+    },
+    monthPopoverContent: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1",
+      p: "3"
+    },
+    monthPopoverEvents: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 0,
+      m: 0,
+      p: 0,
+      listStyleType: "none"
     }
-  }),
-  monthPopoverContent: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "1",
-    p: "3"
-  }),
-  monthPopoverEvents: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: 0,
-    m: 0,
-    p: 0,
-    listStyleType: "none"
-  })
-};
+  },
+  variants: {
+    isLastColumn: {
+      true: { cell: { borderInlineEndWidth: 0 } },
+      false: {}
+    },
+    isLastRow: {
+      true: { cell: { borderBlockEndWidth: 0 } },
+      false: {}
+    },
+    isOtherMonth: {
+      true: {
+        cell: {
+          bg: "bg.subtle",
+          color: "fg.muted"
+        }
+      },
+      false: {}
+    },
+    isToday: {
+      true: {
+        dayNumber: {
+          bg: "primary",
+          color: "fg.onPrimary"
+        },
+        todayText: {
+          marginInlineEnd: "1px"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    isLastColumn: false,
+    isLastRow: false,
+    isOtherMonth: false,
+    isToday: false
+  }
+});
+var styles3 = scheduleMonthlyViewRecipe();
 var weekdays = [
   { label: "Sunday", shortLabel: "Sun" },
   { label: "Monday", shortLabel: "Mon" },
@@ -1732,7 +2233,8 @@ function getGridCellName({
 function ScheduleMonthlyView({
   options
 }) {
-  const { categoryMap, events, highlightDate, timezoneID, viewDate } = useScheduleContext();
+  const { categoryMap, events, highlightDate, plugins, timezoneID, viewDate } = useScheduleContext();
+  const eventPopoverActive = hasEventPopoverPlugin(plugins);
   const currentTime2 = useCurrentTime();
   const month = viewDate.toPlainDate();
   const title = formatMonthTitle(month);
@@ -1790,43 +2292,52 @@ function ScheduleMonthlyView({
             const isCurrentMonth = day.month === month.month && day.year === month.year;
             const isLastColumn = index % 7 === 6;
             const isLastRow = index >= days.length - 7;
+            const isToday = plainDateIsEqual(day, today);
+            const dayClasses = scheduleMonthlyViewRecipe({
+              isLastColumn,
+              isLastRow,
+              isOtherMonth: !isCurrentMonth,
+              isToday
+            });
+            const dayCellPluginProps = plugins.reduce(
+              (props, plugin) => ({
+                ...props,
+                ...plugin.getMonthCellProps?.({
+                  date: day,
+                  timezoneID
+                })
+              }),
+              {}
+            );
             return /* @__PURE__ */ jsx(
               "div",
               {
-                "aria-current": plainDateIsEqual(day, today) ? "date" : void 0,
+                "aria-current": isToday ? "date" : void 0,
                 "aria-label": getGridCellName({
                   categoryMap,
                   date: day,
-                  events: dayEvents,
+                  // When events are interactive popover triggers they expose
+                  // their own accessible names, so omit them here to avoid
+                  // announcing each event twice.
+                  events: eventPopoverActive ? [] : dayEvents,
                   timezoneID
                 }),
-                className: cx(
-                  styles3.cell,
-                  isLastColumn ? styles3.lastColumn : void 0,
-                  isLastRow ? styles3.lastRow : void 0,
-                  !isCurrentMonth ? styles3.otherMonth : void 0
-                ),
+                className: dayClasses.cell,
+                "data-testid": `schedule-month-cell-${day.toString()}`,
                 role: "gridcell",
-                children: /* @__PURE__ */ jsx(
-                  "span",
+                ...dayCellPluginProps,
+                children: /* @__PURE__ */ jsx("span", { className: dayClasses.dayNumber, children: /* @__PURE__ */ jsx(
+                  Text,
                   {
-                    className: cx(
-                      styles3.dayNumber,
-                      plainDateIsEqual(day, today) ? styles3.today : void 0
-                    ),
-                    children: /* @__PURE__ */ jsx(
-                      Text,
-                      {
-                        as: "span",
-                        color: "inherit",
-                        hasTabularNumbers: true,
-                        type: "supporting",
-                        weight: "medium",
-                        children: day.day
-                      }
-                    )
+                    as: "span",
+                    className: dayClasses.todayText,
+                    color: "inherit",
+                    hasTabularNumbers: true,
+                    type: "supporting",
+                    weight: "medium",
+                    children: day.day
                   }
-                )
+                ) })
               },
               day.toString()
             );
@@ -1835,7 +2346,7 @@ function ScheduleMonthlyView({
             visibleEventSegments.map((segment) => /* @__PURE__ */ jsx(
               "div",
               {
-                "aria-hidden": "true",
+                "aria-hidden": eventPopoverActive ? void 0 : "true",
                 className: styles3.monthEventSpan,
                 "data-testid": `schedule-event-span-${segment.event.id}`,
                 style: getMonthEventSegmentStyle(segment),
@@ -1865,40 +2376,23 @@ function ScheduleMonthlyView({
                     level: Math.max(0, monthEventLevelCount - 1)
                   }),
                   children: /* @__PURE__ */ jsx(
-                    Popover,
+                    ScheduleEventOverflowPopover,
                     {
-                      content: /* @__PURE__ */ jsxs("div", { className: styles3.monthPopoverContent, children: [
-                        /* @__PURE__ */ jsx(Heading, { level: 4, children: dateLabel }),
-                        /* @__PURE__ */ jsx("ul", { className: styles3.monthPopoverEvents, children: (eventsByDate.get(day.toString()) ?? []).map(
-                          (event) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-                            CalendarMonthEventPill,
-                            {
-                              event,
-                              isPast: isEventInPast(
-                                event,
-                                currentTime2,
-                                timezoneID
-                              )
-                            }
-                          ) }, event.id)
-                        ) })
-                      ] }),
-                      "data-testid": `schedule-month-see-more-${day.toString()}`,
+                      buttonClassName: styles3.monthSeeMoreButton,
+                      contentClassName: styles3.monthPopoverContent,
+                      events: eventsByDate.get(day.toString()) ?? [],
+                      eventsClassName: styles3.monthPopoverEvents,
+                      hiddenEventCount: hiddenEvents.length,
                       label,
-                      width: 320,
-                      children: /* @__PURE__ */ jsxs(
-                        "button",
+                      renderEvent: (event) => /* @__PURE__ */ jsx(
+                        CalendarMonthEventPill,
                         {
-                          "aria-label": label,
-                          className: styles3.monthSeeMoreButton,
-                          type: "button",
-                          children: [
-                            "+",
-                            hiddenEvents.length,
-                            " more"
-                          ]
+                          event,
+                          isPast: isEventInPast(event, currentTime2, timezoneID)
                         }
-                      )
+                      ),
+                      testId: `schedule-month-see-more-${day.toString()}`,
+                      title: dateLabel
                     }
                   )
                 },
@@ -1944,6 +2438,706 @@ function createScheduleMonthlyView({
     options: { monthRowHeight, weekCount, weekStartsOn }
   };
 }
+var DEFAULT_SNAP_MINUTES = 15;
+var MILLISECONDS_PER_MINUTE = 6e4;
+var MINUTES_PER_DAY = 24 * 60;
+function getSnappedMinutes(minutes, snapMinutes) {
+  return Math.round(minutes / snapMinutes) * snapMinutes;
+}
+function getTimeGridStartMinutes({
+  drag,
+  hour,
+  pointerOffsetMinutes,
+  snapMinutes
+}) {
+  return getSnappedMinutes(
+    hour * 60 + pointerOffsetMinutes - drag.offsetMinutes,
+    snapMinutes
+  );
+}
+function instantFromDateAndMinutes(date, minutes, timezoneID) {
+  const clampedMinutes = Math.round(
+    Math.max(0, Math.min(MINUTES_PER_DAY - 1, minutes))
+  );
+  const hour = Math.floor(clampedMinutes / 60);
+  const minute = clampedMinutes % 60;
+  return date.toPlainDateTime(Temporal.PlainTime.from({ hour, minute })).toZonedDateTime(timezoneID).epochMilliseconds;
+}
+function moveEventToDate(event, date, timezoneID) {
+  if (isDayEvent(event)) {
+    const durationDays = event.start.until(event.end).days;
+    return {
+      end: date.add({ days: durationDays }),
+      event,
+      start: date
+    };
+  }
+  const startTime = Temporal.Instant.fromEpochMilliseconds(event.start).toZonedDateTimeISO(timezoneID).toPlainTime();
+  const start = date.toPlainDateTime(startTime).toZonedDateTime(timezoneID).epochMilliseconds;
+  return {
+    end: start + (event.end - event.start),
+    event,
+    start
+  };
+}
+function moveEventToDateTime({
+  date,
+  drag,
+  hour,
+  pointerOffsetMinutes,
+  snapMinutes,
+  timezoneID
+}) {
+  if (isDayEvent(drag.event)) {
+    return null;
+  }
+  const startMinutes = getTimeGridStartMinutes({
+    drag,
+    hour,
+    pointerOffsetMinutes,
+    snapMinutes
+  });
+  const start = instantFromDateAndMinutes(date, startMinutes, timezoneID);
+  return {
+    end: start + (drag.event.end - drag.event.start),
+    event: drag.event,
+    start
+  };
+}
+function hasChanged({
+  end,
+  event,
+  start
+}) {
+  return event.start !== start || event.end !== end;
+}
+function getDragEventClientY(dragEvent, fallback) {
+  return Number.isFinite(dragEvent.clientY) ? dragEvent.clientY : fallback;
+}
+function applyDragPreview(drag, targetLeft, targetTop) {
+  drag.previewElement.style.left = `${targetLeft}px`;
+  drag.previewElement.style.top = `${targetTop}px`;
+}
+function resetDragPreview(drag) {
+  drag.sourceElement.style.opacity = drag.initialOpacity;
+  drag.previewElement.remove();
+}
+function createDragPreviewElement(event, sourceElement, sourceRect) {
+  const preview = sourceElement.cloneNode(true);
+  if (!(preview instanceof HTMLElement)) {
+    throw new Error("Schedule event preview must be an HTMLElement.");
+  }
+  preview.setAttribute("aria-hidden", "true");
+  preview.setAttribute(
+    "data-testid",
+    `schedule-event-move-preview-${event.id}`
+  );
+  preview.style.position = "fixed";
+  preview.style.inset = "auto";
+  preview.style.left = `${sourceRect.left}px`;
+  preview.style.top = `${sourceRect.top}px`;
+  preview.style.width = `${sourceRect.width}px`;
+  preview.style.height = `${sourceRect.height}px`;
+  preview.style.margin = "0";
+  preview.style.opacity = "0.45";
+  preview.style.pointerEvents = "none";
+  preview.style.transform = "none";
+  preview.style.zIndex = "1000";
+  document.body.append(preview);
+  return preview;
+}
+function createScheduleEventMovePlugin({
+  dragRef,
+  onMove,
+  snapMinutes = DEFAULT_SNAP_MINUTES
+}) {
+  const normalizedSnapMinutes = Number.isFinite(snapMinutes) && snapMinutes > 0 ? Math.max(1, Math.floor(snapMinutes)) : DEFAULT_SNAP_MINUTES;
+  return {
+    getEventProps({
+      event,
+      layout,
+      timezoneID
+    }) {
+      if (layout !== "month" && (layout !== "timeGrid" || isDayEvent(event))) {
+        return {};
+      }
+      return {
+        draggable: true,
+        onDragEnd: () => {
+          if (dragRef.current != null) {
+            resetDragPreview(dragRef.current);
+          }
+          dragRef.current = null;
+        },
+        onDragStart: (dragEvent) => {
+          const element = dragEvent.currentTarget;
+          const sourceRect = element.getBoundingClientRect();
+          const isTimedTimeGridEvent = layout === "timeGrid" && !isDayEvent(event);
+          const eventStartTime = isDayEvent(event) ? null : Temporal.Instant.fromEpochMilliseconds(event.start).toZonedDateTimeISO(timezoneID).toPlainTime();
+          const eventStartMinutes = eventStartTime == null ? 0 : eventStartTime.hour * 60 + eventStartTime.minute;
+          let offsetMinutes = eventStartMinutes;
+          if (isTimedTimeGridEvent) {
+            const durationMinutes = Math.max(
+              15,
+              (event.end - event.start) / MILLISECONDS_PER_MINUTE
+            );
+            offsetMinutes = Math.max(
+              0,
+              (getDragEventClientY(dragEvent, sourceRect.top) - sourceRect.top) / Math.max(1, sourceRect.height) * durationMinutes
+            );
+          }
+          dragEvent.dataTransfer.setData("text/plain", event.id);
+          dragEvent.dataTransfer.setDragImage(element, 0, 0);
+          dragRef.current = {
+            event,
+            initialOpacity: element.style.opacity,
+            offsetMinutes,
+            previewElement: createDragPreviewElement(
+              event,
+              element,
+              sourceRect
+            ),
+            sourceElement: element,
+            sourceRect
+          };
+          element.style.opacity = "0.25";
+        }
+      };
+    },
+    getMonthCellProps({
+      date,
+      timezoneID
+    }) {
+      return {
+        onDragOver: (dragEvent) => {
+          if (dragRef.current != null) {
+            dragEvent.preventDefault();
+            const rect = dragEvent.currentTarget.getBoundingClientRect();
+            applyDragPreview(dragRef.current, rect.left + 4, rect.top + 30);
+          }
+        },
+        onDrop: (dragEvent) => {
+          const drag = dragRef.current;
+          if (drag == null) {
+            return;
+          }
+          dragEvent.preventDefault();
+          const change = moveEventToDate(drag.event, date, timezoneID);
+          if (hasChanged(change)) {
+            onMove(change);
+          }
+          resetDragPreview(drag);
+          dragRef.current = null;
+        }
+      };
+    },
+    getTimeGridCellProps({
+      date,
+      hour,
+      hourHeight,
+      timezoneID
+    }) {
+      return {
+        onDragOver: (dragEvent) => {
+          if (dragRef.current != null && !isDayEvent(dragRef.current.event)) {
+            dragEvent.preventDefault();
+            const rect = dragEvent.currentTarget.getBoundingClientRect();
+            const pointerOffsetMinutes = (getDragEventClientY(dragEvent, rect.top) - rect.top) / Math.max(1, hourHeight) * 60;
+            const startMinutes = getTimeGridStartMinutes({
+              drag: dragRef.current,
+              hour,
+              pointerOffsetMinutes,
+              snapMinutes: normalizedSnapMinutes
+            });
+            const top = rect.top + (startMinutes - hour * 60) / 60 * hourHeight + 2;
+            applyDragPreview(dragRef.current, rect.left + 2, top);
+          }
+        },
+        onDrop: (dragEvent) => {
+          const drag = dragRef.current;
+          if (drag == null || isDayEvent(drag.event)) {
+            return;
+          }
+          dragEvent.preventDefault();
+          const rect = dragEvent.currentTarget.getBoundingClientRect();
+          const pointerOffsetMinutes = (getDragEventClientY(dragEvent, rect.top) - rect.top) / Math.max(1, hourHeight) * 60;
+          const change = moveEventToDateTime({
+            date,
+            drag,
+            hour,
+            pointerOffsetMinutes,
+            snapMinutes: normalizedSnapMinutes,
+            timezoneID
+          });
+          if (change != null && hasChanged(change)) {
+            onMove(change);
+          }
+          resetDragPreview(drag);
+          dragRef.current = null;
+        }
+      };
+    }
+  };
+}
+function useScheduleEventMovePlugin(options) {
+  const optionsRef = useLatest_default(options);
+  const dragRef = useRef(null);
+  const onMove = useCallback(
+    (change) => {
+      optionsRef.current.onMove(change);
+    },
+    [optionsRef]
+  );
+  return useMemo(() => {
+    return createScheduleEventMovePlugin({
+      dragRef,
+      onMove,
+      snapMinutes: options.snapMinutes
+    });
+  }, [dragRef, onMove, options.snapMinutes]);
+}
+var MIN_DURATION_MINUTES = 15;
+var DEFAULT_SNAP_MINUTES2 = 15;
+var MILLISECONDS_PER_MINUTE2 = 6e4;
+var resizeHandle = cva({
+  base: {
+    position: "absolute",
+    insetInline: 0,
+    h: "3",
+    cursor: "ns-resize",
+    touchAction: "none",
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "-2px"
+    }
+  },
+  variants: {
+    edge: {
+      start: {
+        insetBlockStart: 0
+      },
+      end: {
+        insetBlockEnd: 0
+      }
+    }
+  }
+});
+var resizeHandleClassNames = {
+  end: resizeHandle({ edge: "end" }),
+  start: resizeHandle({ edge: "start" })
+};
+function getDurationMinutes(start, end) {
+  return (end - start) / MILLISECONDS_PER_MINUTE2;
+}
+function getSnappedDeltaMinutes(deltaPixels, hourHeight, snapMinutes) {
+  const rawMinutes = deltaPixels / hourHeight * 60;
+  return Math.round(rawMinutes / snapMinutes) * snapMinutes;
+}
+function getResizeRange(state, clientY) {
+  const deltaMinutes = getSnappedDeltaMinutes(
+    clientY - state.initialPointerY,
+    state.hourHeight,
+    state.snapMinutes
+  );
+  const delta = deltaMinutes * MILLISECONDS_PER_MINUTE2;
+  const minDuration = MIN_DURATION_MINUTES * MILLISECONDS_PER_MINUTE2;
+  if (state.edge === "start") {
+    return {
+      end: state.event.end,
+      start: Math.min(state.event.end - minDuration, state.event.start + delta)
+    };
+  }
+  return {
+    end: Math.max(state.event.start + minDuration, state.event.end + delta),
+    start: state.event.start
+  };
+}
+function getPreviewHeight(state, range) {
+  return `${Math.max(
+    36,
+    getDurationMinutes(range.start, range.end) / 60 * state.hourHeight - 5
+  )}px`;
+}
+function getPreviewTop(state, range) {
+  const initialTop = Number.parseFloat(state.initialTop || "0");
+  if (state.edge === "end") {
+    return state.initialTop;
+  }
+  const deltaMinutes = getDurationMinutes(state.event.start, range.start);
+  return `${initialTop + deltaMinutes / 60 * state.hourHeight}px`;
+}
+function applyPreview(state, range) {
+  state.eventElement.style.height = getPreviewHeight(state, range);
+  state.eventElement.style.top = getPreviewTop(state, range);
+}
+function ScheduleEventResizeHandle({
+  edge,
+  event,
+  hourHeight,
+  onResize,
+  snapMinutes
+}) {
+  const resizeStateRef = useRef(null);
+  const pointerListenersRef = useRef(null);
+  const removePointerListeners = useCallback(() => {
+    const listeners2 = pointerListenersRef.current;
+    if (listeners2 == null) {
+      return;
+    }
+    window.removeEventListener("pointermove", listeners2.move);
+    window.removeEventListener("pointerup", listeners2.up);
+    window.removeEventListener("pointercancel", listeners2.cancel);
+    pointerListenersRef.current = null;
+  }, []);
+  const finishResize = useCallback((clientY, isCommit) => {
+    const state = resizeStateRef.current;
+    if (state == null) {
+      return;
+    }
+    const range = getResizeRange(state, clientY);
+    if (isCommit) {
+      if (range.start !== state.event.start || range.end !== state.event.end) {
+        state.onResize({
+          end: range.end,
+          event: state.event,
+          start: range.start
+        });
+      }
+    } else {
+      state.eventElement.style.height = state.initialHeight;
+      state.eventElement.style.top = state.initialTop;
+    }
+    resizeStateRef.current = null;
+  }, []);
+  const handlePointerMove = useCallback((event2) => {
+    const state = resizeStateRef.current;
+    if (state == null) {
+      return;
+    }
+    applyPreview(state, getResizeRange(state, event2.clientY));
+  }, []);
+  const handlePointerUp = useCallback(
+    (event2) => {
+      removePointerListeners();
+      finishResize(event2.clientY, true);
+    },
+    [finishResize, removePointerListeners]
+  );
+  const handlePointerCancel = useCallback(
+    (event2) => {
+      removePointerListeners();
+      finishResize(event2.clientY, false);
+    },
+    [finishResize, removePointerListeners]
+  );
+  const handlePointerDown = useCallback(
+    (pointerEvent) => {
+      pointerEvent.preventDefault();
+      pointerEvent.stopPropagation();
+      const eventElement = pointerEvent.currentTarget.parentElement;
+      if (!(eventElement instanceof HTMLElement)) {
+        return;
+      }
+      resizeStateRef.current = {
+        edge,
+        event,
+        eventElement,
+        hourHeight,
+        initialHeight: eventElement.style.height,
+        initialPointerY: pointerEvent.clientY,
+        initialTop: eventElement.style.top,
+        onResize,
+        snapMinutes
+      };
+      pointerListenersRef.current = {
+        cancel: handlePointerCancel,
+        move: handlePointerMove,
+        up: handlePointerUp
+      };
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", handlePointerUp);
+      window.addEventListener("pointercancel", handlePointerCancel);
+    },
+    [
+      edge,
+      event,
+      handlePointerCancel,
+      handlePointerMove,
+      handlePointerUp,
+      hourHeight,
+      onResize,
+      snapMinutes
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (keyEvent) => {
+      const direction = keyEvent.key === "ArrowDown" ? 1 : keyEvent.key === "ArrowUp" ? -1 : 0;
+      if (direction === 0) {
+        return;
+      }
+      keyEvent.preventDefault();
+      keyEvent.stopPropagation();
+      const delta = direction * snapMinutes * MILLISECONDS_PER_MINUTE2;
+      const minDuration = MIN_DURATION_MINUTES * MILLISECONDS_PER_MINUTE2;
+      const range = edge === "start" ? {
+        end: event.end,
+        start: Math.min(event.end - minDuration, event.start + delta)
+      } : {
+        end: Math.max(event.start + minDuration, event.end + delta),
+        start: event.start
+      };
+      if (range.start !== event.start || range.end !== event.end) {
+        onResize({ event, ...range });
+      }
+    },
+    [edge, event, onResize, snapMinutes]
+  );
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": `${edge === "start" ? "Resize start of" : "Resize end of"} ${event.title}`,
+      "aria-orientation": "vertical",
+      "aria-valuemax": event.end,
+      "aria-valuemin": event.start,
+      "aria-valuenow": edge === "start" ? event.start : event.end,
+      className: resizeHandleClassNames[edge],
+      "data-testid": `schedule-event-resize-${edge}-handle-${event.id}`,
+      onClick: (event2) => event2.stopPropagation(),
+      onKeyDown: handleKeyDown,
+      onPointerDown: handlePointerDown,
+      role: "slider",
+      tabIndex: 0
+    }
+  );
+}
+function ScheduleEventResizeHandles({
+  event,
+  hourHeight,
+  onResize,
+  snapMinutes
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ScheduleEventResizeHandle,
+      {
+        edge: "start",
+        event,
+        hourHeight,
+        onResize,
+        snapMinutes
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScheduleEventResizeHandle,
+      {
+        edge: "end",
+        event,
+        hourHeight,
+        onResize,
+        snapMinutes
+      }
+    )
+  ] });
+}
+function createScheduleEventResizePlugin({
+  onResize,
+  snapMinutes = DEFAULT_SNAP_MINUTES2
+}) {
+  const normalizedSnapMinutes = Number.isFinite(snapMinutes) && snapMinutes > 0 ? Math.max(1, Math.floor(snapMinutes)) : DEFAULT_SNAP_MINUTES2;
+  return {
+    renderTimeGridEventContent({
+      event,
+      hourHeight
+    }) {
+      if (isDayEvent(event)) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        ScheduleEventResizeHandles,
+        {
+          event,
+          hourHeight,
+          onResize,
+          snapMinutes: normalizedSnapMinutes
+        }
+      );
+    }
+  };
+}
+function useScheduleEventResizePlugin(options) {
+  const optionsRef = useLatest_default(options);
+  const onResize = useCallback(
+    (change) => {
+      optionsRef.current.onResize(change);
+    },
+    [optionsRef]
+  );
+  return useMemo(
+    () => createScheduleEventResizePlugin({
+      onResize,
+      snapMinutes: options.snapMinutes
+    }),
+    [onResize, options.snapMinutes]
+  );
+}
+var styles4 = {
+  layout: css({
+    minW: "80",
+    maxW: "96"
+  }),
+  dot: css({
+    w: "3",
+    h: "3"
+  }),
+  dateValue: css({
+    display: "flex",
+    flexDirection: "column"
+  }),
+  footerActions: css({
+    display: "flex",
+    justifyContent: "flex-end"
+  })
+};
+function getEventDateLabel(event, timezoneID) {
+  const startDate = isDayEvent(event) ? event.start : plainDateFromInstant(event.start, timezoneID);
+  return formatDate(startDate);
+}
+function ScheduleEventPopoverContent({
+  event,
+  onClose,
+  onDelete,
+  onEdit,
+  onRespond
+}) {
+  const { categoryMap, timezoneID } = useScheduleContext();
+  const [response, setResponse] = useState(null);
+  const category = getCategory(categoryMap, event);
+  const dotClass = scheduleEventRecipe({ color: category.color }).dot;
+  return /* @__PURE__ */ jsx(
+    Layout,
+    {
+      className: styles4.layout,
+      content: /* @__PURE__ */ jsx(LayoutContent, { isScrollable: false, padding: 3, children: /* @__PURE__ */ jsxs(MetadataList, { children: [
+        /* @__PURE__ */ jsx(
+          MetadataListItem,
+          {
+            icon: CalendarDays,
+            isIconOnly: true,
+            label: "Date and time",
+            children: /* @__PURE__ */ jsxs("span", { className: styles4.dateValue, children: [
+              /* @__PURE__ */ jsx(Text, { children: getEventDateLabel(event, timezoneID) }),
+              /* @__PURE__ */ jsx(Text, { color: "secondary", type: "supporting", children: getEventTimeLabel(event, timezoneID) })
+            ] })
+          }
+        ),
+        event.location != null && event.location !== "" ? /* @__PURE__ */ jsx(MetadataListItem, { icon: MapPin, isIconOnly: true, label: "Location", children: event.location }) : null,
+        event.description != null && event.description !== "" ? /* @__PURE__ */ jsx(MetadataListItem, { icon: AlignLeft, isIconOnly: true, label: "Description", children: event.description }) : null,
+        /* @__PURE__ */ jsx(MetadataListItem, { icon: Tag, isIconOnly: true, label: "Category", children: category.label })
+      ] }) }),
+      "data-testid": "schedule-event-popover",
+      footer: /* @__PURE__ */ jsx(LayoutFooter, { label: "Your response", padding: 3, children: /* @__PURE__ */ jsx("div", { className: styles4.footerActions, children: /* @__PURE__ */ jsxs(
+        ToggleButtonGroup,
+        {
+          label: "Your response",
+          onChange: (value) => {
+            setResponse(value);
+            onRespond?.(event, value);
+          },
+          size: "sm",
+          type: "single",
+          value: response,
+          children: [
+            /* @__PURE__ */ jsx(ToggleButton, { label: "Not Going", value: "not-going" }),
+            /* @__PURE__ */ jsx(ToggleButton, { label: "Maybe", value: "maybe" }),
+            /* @__PURE__ */ jsx(
+              ToggleButton,
+              {
+                "data-testid": "schedule-event-popover-response-going",
+                label: "Going",
+                value: "going"
+              }
+            )
+          ]
+        }
+      ) }) }),
+      header: /* @__PURE__ */ jsx(
+        LayoutHeader,
+        {
+          align: "center",
+          endContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+            onEdit != null ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                "data-testid": "schedule-event-popover-edit",
+                icon: Pencil,
+                isIconOnly: true,
+                label: "Edit event",
+                onClick: () => onEdit(event),
+                size: "sm",
+                variant: "ghost"
+              }
+            ) : null,
+            onDelete != null ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                "data-testid": "schedule-event-popover-delete",
+                icon: Trash2,
+                isIconOnly: true,
+                label: "Delete event",
+                onClick: () => onDelete(event),
+                size: "sm",
+                variant: "ghost"
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "data-testid": "schedule-event-popover-close",
+                icon: X,
+                isIconOnly: true,
+                label: "Close",
+                onClick: onClose,
+                size: "sm",
+                variant: "ghost"
+              }
+            )
+          ] }),
+          padding: 3,
+          startContent: /* @__PURE__ */ jsx("span", { className: cx(dotClass, styles4.dot) }),
+          title: event.title
+        }
+      ),
+      height: "auto"
+    }
+  );
+}
+function createScheduleEventPopoverPlugin(options) {
+  const { renderContent } = options;
+  return {
+    renderEventPopover(event, controls) {
+      const typedEvent = event;
+      if (renderContent != null) {
+        return renderContent({ event: typedEvent, ...controls });
+      }
+      return /* @__PURE__ */ jsx(
+        ScheduleEventPopoverContent,
+        {
+          event: typedEvent,
+          onClose: controls.close
+        }
+      );
+    }
+  };
+}
+function useScheduleEventPopoverPlugin(options = {}) {
+  const { renderContent } = options;
+  return useMemo(
+    () => createScheduleEventPopoverPlugin({ renderContent }),
+    [renderContent]
+  );
+}
 function SchedulePaginationControls({
   onViewDateChange
 }) {
@@ -2280,6 +3474,7 @@ function ScheduleWeeklyView({
   return /* @__PURE__ */ jsx(ScheduleFrame, { title, titleLabel: title, children: /* @__PURE__ */ jsx(
     TimeGridView,
     {
+      allDayEventLimit: options.allDayEventLimit,
       days,
       hourHeight: options.hourHeight,
       maxHour: options.maxHour,
@@ -2288,6 +3483,7 @@ function ScheduleWeeklyView({
   ) });
 }
 function createScheduleWeeklyView({
+  allDayEventLimit = 3,
   hourHeight = 100,
   maxHour = 24,
   minHour = 0,
@@ -2316,7 +3512,7 @@ function createScheduleWeeklyView({
       label: "Previous week",
       range: getWeekRange(date.addDays(-7))
     }),
-    options: { hourHeight, maxHour, minHour, weekStartsOn }
+    options: { allDayEventLimit, hourHeight, maxHour, minHour, weekStartsOn }
   };
 }
 function setStartOfWeek2(date, weekStartsOn) {
@@ -2324,6 +3520,6 @@ function setStartOfWeek2(date, weekStartsOn) {
   return date.add({ days: -daysSinceWeekStart });
 }
 
-export { Schedule, ScheduleContext, createEventFromISO, createScheduleDayView, createScheduleListView, createScheduleMonthlyView, createScheduleWeeklyView, defaultSchedulePlugins, useScheduleContext, useSchedulePaginationPlugin, useScheduleViewSelectorPlugin };
-//# sourceMappingURL=chunk-GSTINE4X.js.map
-//# sourceMappingURL=chunk-GSTINE4X.js.map
+export { Schedule, ScheduleContext, ScheduleEventPopoverContent, createEventFromISO, createScheduleDayView, createScheduleListView, createScheduleMonthlyView, createScheduleWeeklyView, defaultSchedulePlugins, useScheduleContext, useScheduleEventMovePlugin, useScheduleEventPopoverPlugin, useScheduleEventResizePlugin, useSchedulePaginationPlugin, useScheduleViewSelectorPlugin };
+//# sourceMappingURL=chunk-CZUMVOPH.js.map
+//# sourceMappingURL=chunk-CZUMVOPH.js.map