50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T38c4,"use client"; import { useRef, useMemo, useCallback, useState, useEffect, useLayoutEffect, } from "react"; import { createPortal } from "react-dom"; import { addDays, addWeeks, isWeekend, startOfDay, startOfMonth, } from "date-fns"; import { cn } from "@/lib/utils"; import { useMonthEventDrag } from "@/hooks/use-month-event-drag"; import { useMonthEventResize } from "@/hooks/use-month-event-resize"; import { useVerticalScroll } from "@/hooks/use-vertical-scroll"; import { useEventKeyboard } from "@/hooks/use-event-keyboard"; import { MONTH_VIEW_ROWS, generateConsecutiveWeeks, generateWeekRow, } from "@/lib/event-utils"; import { isMultiDayEvent } from "@/lib/event-utils"; import { MonthViewGrid } from "./month-view-grid"; import { MonthViewEventBar } from "./month-view-event-bar"; import { MonthViewEventItem } from "./month-view-event-item"; import { EventContextMenu } from "./event-context-menu"; import { CalendarPopoverBoundaryProvider } from "./calendar-popover-context"; import { CalendarLoadingBar } from "./calendar-loading-bar"; import { useCalendar, useCalendarConfig, useCalendarViewSync, } from "./calendar-provider"; import type { CalendarEvent } from "./calendar-types"; import type { MonthViewProps } from "./week-view-types"; import type { MonthWeekRow } from "@/lib/event-utils"; /** Base buffer rows on each side (extends dynamically with scroll distance) */ const BUFFER_ROWS = 2; interface ContextMenuState { x: number; y: number; event: CalendarEvent; } /** * Month grid calendar. Date, events, selection and view settings come from * the surrounding CalendarProvider. */ export function MonthView({ showEventPopover = true, onEventPopoverExpand, className, }: MonthViewProps) { const { view, currentDate, events, viewSettings, weekStartsOn, selectedEvent, selectEvent, clearSelection, updateEvent, goToDate, showDay, loading, } = useCalendar(); const { locale } = useCalendarConfig(); const { reportView, reportDisplayMonth, closeEventPopover } = useCalendarViewSync(); /** * Whether the provider navigates by month. False for the commit before it * adopts this view (on mount, or right after a switch it doesn't follow). */ const isProviderInSync = view === "month"; const boundaryRef = useRef(null); const headerRef = useRef(null); const gridRef = useRef(null); const selectedEventId = selectedEvent?.id; const { showWeekends, showWeekNumbers } = viewSettings; const [contextMenu, setContextMenu] = useState(null); const weekRows = useMemo( () => generateConsecutiveWeeks( currentDate, MONTH_VIEW_ROWS, weekStartsOn, locale, ), [currentDate, weekStartsOn, locale], ); // Derive the display month from the center of the visible rows. // This determines the header title and adjacent-month dimming. const displayMonth = useMemo(() => { const middleRow = weekRows[Math.floor(weekRows.length / 2)]; if (!middleRow) return startOfMonth(currentDate); // Use the Thursday of the middle row (ISO convention for determining the week's month) const midDate = middleRow.days[Math.min(4, middleRow.days.length - 1)].date; return startOfMonth(midDate); }, [weekRows, currentDate]); // Tell the provider which view is on screen. `reportView` changes with the // provider's state, so this also re-checks after every switch. A layout // effect: the provider adopts month view before the first paint. useLayoutEffect(() => { reportView({ view: "month" }); }, [reportView]); // Report the display month to the provider (header and sidebar sync). Not // while it is adopting this view: the date is about to change. useEffect(() => { if (!isProviderInSync) return; reportDisplayMonth(displayMonth); }, [isProviderInSync, displayMonth, reportDisplayMonth]); // Weekday columns in display order, starting on `weekStartsOn`, named in // the calendar's locale ("Sun", "Mon") like the rows' days const dayNames = useMemo(() => { const firstWeek = weekRows[0]?.days ?? []; const visibleDays = showWeekends ? firstWeek : firstWeek.filter((day) => !isWeekend(day.date)); return visibleDays.map((day) => day.dayName); }, [weekRows, showWeekends]); const colCount = dayNames.length; const gridTemplateColumns = showWeekNumbers ? `2rem repeat(${colCount}, minmax(0, 1fr))` : `repeat(${colCount}, minmax(0, 1fr))`; const handleEventClick = useCallback( (event: CalendarEvent) => selectEvent(event.id), [selectEvent], ); const { dragState, handleDragPointerDown } = useMonthEventDrag({ gridRef, events, onEventChange: updateEvent, onEventClick: handleEventClick, }); const { resizeState, handleResizePointerDown } = useMonthEventResize({ gridRef, events, onEventChange: updateEvent, }); const isDragging = dragState?.isDragging ?? false; const dragEventId = isDragging ? dragState?.eventId : undefined; const isResizing = resizeState?.isResizing ?? false; const resizeEventId = isResizing ? resizeState?.eventId : undefined; const scrollContainerRef = useRef(null); const visibleRowCount = weekRows.length; const [rowHeight, setRowHeight] = useState(0); // Measure row height from container useEffect(() => { const el = scrollContainerRef.current; if (!el || visibleRowCount === 0) return; const observer = new ResizeObserver(() => { setRowHeight(el.clientHeight / visibleRowCount); }); observer.observe(el); return () => observer.disconnect(); }, [visibleRowCount]); const scrollNavigatedRef = useRef(false); const handleScrollNavigate = useCallback( (rowsDelta: number) => { scrollNavigatedRef.current = true; const newDate = addWeeks(currentDate, rowsDelta); goToDate(newDate); }, [currentDate, goToDate], ); const { scrollOffset, slideOffset, isAnimating, triggerSlideAnimation } = useVerticalScroll({ containerRef: scrollContainerRef, rowHeight, onNavigate: handleScrollNavigate, disabled: isDragging || isResizing, }); // Detect external currentDate changes (button/keyboard nav) and trigger slide animation const prevDateRef = useRef(currentDate); const wasProviderInSyncRef = useRef(isProviderInSync); useEffect(() => { const wasProviderInSync = wasProviderInSyncRef.current; wasProviderInSyncRef.current = isProviderInSync; if (scrollNavigatedRef.current) { scrollNavigatedRef.current = false; prevDateRef.current = currentDate; return; } const prevDate = prevDateRef.current; prevDateRef.current = currentDate; if (prevDate.getTime() === currentDate.getTime()) return; // Dates set while the provider adopts this view (an undone switch, such // as "+N more" without a week view to open) are not navigation if (!wasProviderInSync || !isProviderInSync) return; // Calculate how many weeks changed const weeksDelta = Math.round( (currentDate.getTime() - prevDate.getTime()) / (7 * 24 * 60 * 60 * 1000), ); if (weeksDelta !== 0) { triggerSlideAnimation(weeksDelta); } }, [currentDate, isProviderInSync, triggerSlideAnimation]); /** Whether a day is in one of the on-screen week rows */ const isDayVisible = useCallback( (date: Date) => { const firstRow = weekRows[0]; const lastRow = weekRows[weekRows.length - 1]; if (!firstRow || !lastRow) return false; const first = startOfDay(firstRow.days[0].date); const afterLast = addDays( startOfDay(lastRow.days[lastRow.days.length - 1].date), 1, ); return date >= first && date < afterLast; }, [weekRows], ); /** Scrolls a row toward a day just off screen (keyboard moves go a week at most) */ const revealDay = useCallback( (date: Date) => { const firstDay = weekRows[0]?.days[0]?.date ?? currentDate; goToDate(addWeeks(currentDate, date < firstDay ? -1 : 1)); }, [weekRows, currentDate, goToDate], ); const handleEventKeyDown = useEventKeyboard({ containerRef: boundaryRef, isDayVisible, revealDay, }); // Symmetric buffer: extends in both directions (mirrors week view's dynamicBuffer) const extraScrollRows = rowHeight > 0 ? Math.ceil(Math.abs(scrollOffset) / rowHeight) : 0; const dynamicBuffer = BUFFER_ROWS + extraScrollRows; // Build buffered week rows: dynamicBuffer above + MONTH_VIEW_ROWS + dynamicBuffer below const bufferedWeekRows = useMemo(() => { if (weekRows.length === 0) return weekRows; const rows: MonthWeekRow[] = []; const firstDate = weekRows[0].days[0].date; for (let i = dynamicBuffer; i > 0; i--) { rows.push(generateWeekRow(addWeeks(firstDate, -i), weekStartsOn, locale)); } rows.push(...weekRows); const lastDate = weekRows[weekRows.length - 1].days[0].date; for (let i = 1; i <= dynamicBuffer; i++) { rows.push(generateWeekRow(addWeeks(lastDate, i), weekStartsOn, locale)); } return rows; }, [weekRows, dynamicBuffer, weekStartsOn, locale]); // Base offset hides the top buffer; scrollOffset + slideOffset shift within const baseTranslateY = -(dynamicBuffer * rowHeight); const transformY = baseTranslateY + scrollOffset + slideOffset; const scrollStyle: React.CSSProperties = { transform: `translateY(${transformY}px)`, transition: isAnimating ? "transform 200ms ease-out" : undefined, }; // During resize, substitute the resized event's dates so the grid // recalculates layout in real-time (live preview with reflow). // Keep isAllDay true so the event stays rendered as a bar even when // resized down to a single day. const displayEvents = useMemo(() => { if (!isResizing || !resizeState) return events; return events.map((ev) => ev.id === resizeState.eventId ? { ...ev, start: resizeState.currentStart, end: resizeState.currentEnd, isAllDay: true, } : ev, ); }, [events, isResizing, resizeState]); const handleContextMenu = useCallback( (e: React.MouseEvent, event: CalendarEvent) => { e.preventDefault(); setContextMenu({ x: e.clientX, y: e.clientY, event }); }, [], ); const handleRootClick = useCallback( (e: React.MouseEvent) => { const target = e.target as HTMLElement; if ( target.closest("[data-radix-popper-content-wrapper]") || target.closest("button") || target.closest("[role='button']") ) { return; } clearSelection(); }, [clearSelection], ); return (

{/* Day-of-week header — right-aligned to match day number positions */}

{showWeekNumbers && (

)} {dayNames.map((name) => (

{name}

))} {loading && }

{/* Month grid — fills remaining space */}

{/* Context menu */} {contextMenu && ( setContextMenu(null)} onEventChange={updateEvent} /> )} {/* Floating drag copy — portaled to body, follows cursor */} {isDragging && dragState && createPortal(

{dragState.event.isAllDay || isMultiDayEvent(dragState.event) ? ( ) : ( )}

, document.body, )}

); } 53:T1af8,"use client"; import { useRef, useState, useEffect, useMemo } from "react"; import { startOfDay } from "date-fns"; import { cn } from "@/lib/utils"; import type { CalendarEvent } from "./calendar-types"; import type { MonthWeekRow } from "@/lib/event-utils"; import { calculateMonthCellLayout, getMonthSlotCount } from "@/lib/event-utils"; import { MonthViewDayCell } from "./month-view-day-cell"; /** Default cell height in px before ResizeObserver measures the real height */ const DEFAULT_CELL_HEIGHT = 120; export interface MonthViewGridProps { weekRows: MonthWeekRow[]; events: CalendarEvent[]; currentMonth: Date; showWeekNumbers?: boolean; showWeekends?: boolean; onEventClick?: (event: CalendarEvent) => void; onContextMenu?: (e: React.MouseEvent, event: CalendarEvent) => void; onMoreClick?: (date: Date) => void; onDayNumberClick?: (date: Date) => void; onBackgroundClick?: () => void; onDragPointerDown?: ( e: React.PointerEvent, event: CalendarEvent, ) => void; onResizePointerDown?: ( e: React.PointerEvent, event: CalendarEvent, edge: "left" | "right", ) => void; selectedEventId?: string; /** ID of the event currently being dragged (renders as ghost) */ dragEventId?: string; /** ID of the event currently being resized (renders as selected) */ resizeEventId?: string; /** Target date for drag placeholder */ dragTargetDate?: Date; /** The event being dragged (for placeholder rendering) */ dragEvent?: CalendarEvent; /** Whether the selected event shows its details popover */ showEventPopover?: boolean; onEventChange?: (event: CalendarEvent) => void; /** Callback for the popover's expand button (hidden when absent) */ onEventPopoverExpand?: () => void; /** Callback to close the popover (clears the selection) */ /** Closes the given event's popover (clears it only while it is still selected) */ onEventPopoverClose?: (eventId: string) => void; /** Number of rows visible in the viewport (for row height calculation) */ visibleRowCount?: number; /** Index in `weekRows` of the first on-screen row (the rest are scroll buffer) */ visibleRowStart?: number; /** CSS style for scroll transform */ scrollStyle?: React.CSSProperties; /** Forwarded ref for the grid container (used by drag hook) */ gridRef?: React.RefObject; className?: string; } export function MonthViewGrid({ weekRows, events, currentMonth, showWeekNumbers = false, showWeekends = true, onEventClick, onContextMenu, onMoreClick, onDayNumberClick, onBackgroundClick, onDragPointerDown, onResizePointerDown, selectedEventId, dragEventId, resizeEventId, dragTargetDate, dragEvent, showEventPopover, onEventChange, onEventPopoverExpand, onEventPopoverClose, visibleRowCount, visibleRowStart = 0, scrollStyle, gridRef, className, }: MonthViewGridProps) { const localRef = useRef(null); const containerRef = gridRef ?? localRef; const [cellHeight, setCellHeight] = useState(DEFAULT_CELL_HEIGHT); const rowCountForHeight = visibleRowCount ?? weekRows.length; useEffect(() => { const el = containerRef.current; if (!el) return; const observer = new ResizeObserver(() => { if (rowCountForHeight === 0) return; setCellHeight(el.clientHeight / rowCountForHeight); }); observer.observe(el); return () => { observer.disconnect(); }; }, [containerRef, rowCountForHeight]); const maxSlots = getMonthSlotCount(cellHeight); const cellLayouts = useMemo( () => calculateMonthCellLayout(weekRows, events, maxSlots), [weekRows, events, maxSlots], ); const columnCount = showWeekends ? 7 : 5; return (

{weekRows.map((weekRow, rowIndex) => { // Rows above and below the screen are scroll buffer: inert, so // their events can't be tabbed to or read out const isOnScreen = rowIndex >= visibleRowStart && rowIndex < visibleRowStart + (visibleRowCount ?? weekRows.length); const visibleDays = showWeekends ? weekRow.days : weekRow.days.filter( (d) => d.date.getDay() !== 0 && d.date.getDay() !== 6, ); const weekNumberCol = showWeekNumbers ? "2rem " : ""; const dayCols = `repeat(${columnCount}, minmax(0, 1fr))`; const gridTemplateColumns = `${weekNumberCol}${dayCols}`; return (

{showWeekNumbers && (

{weekRow.weekNumber}

)} {visibleDays.map((day) => { const key = startOfDay(day.date).toISOString(); const layout = cellLayouts.get(key); return ( ); })}

); })}

); } 54:T2f0e,"use client"; import { isSameMonth, isSameDay, format, differenceInCalendarDays, addDays, startOfDay, } from "date-fns"; import type { Locale } from "date-fns"; import { cn } from "@/lib/utils"; import { useToday } from "@/hooks/use-now"; import type { CalendarEvent, EventColor } from "./calendar-types"; import type { MonthCellSlot } from "@/lib/event-utils"; import { formatCellDate, formatFullDate, isMultiDayEvent, } from "@/lib/event-utils"; import { Popover, PopoverAnchor } from "@/components/ui/popover"; import { EventDetailPopover } from "./event-detail-popover"; import { useCalendarConfig } from "./calendar-provider"; import { MonthViewEventItem } from "./month-view-event-item"; import { MonthViewEventBar } from "./month-view-event-bar"; export interface MonthViewDayCellProps { date: Date; currentMonth: Date; barSlots: MonthCellSlot[]; eventSlots: MonthCellSlot[]; totalEvents: number; onEventClick?: (event: CalendarEvent) => void; onContextMenu?: (e: React.MouseEvent, event: CalendarEvent) => void; onMoreClick?: (date: Date) => void; onDayNumberClick?: (date: Date) => void; onBackgroundClick?: () => void; onDragPointerDown?: ( e: React.PointerEvent, event: CalendarEvent, ) => void; onResizePointerDown?: ( e: React.PointerEvent, event: CalendarEvent, edge: "left" | "right", ) => void; selectedEventId?: string; dragEventId?: string; /** ID of the event currently being resized (renders as selected) */ resizeEventId?: string; dragTargetDate?: Date; dragEvent?: CalendarEvent; /** Whether the selected event shows its details popover */ showEventPopover?: boolean; onEventChange?: (event: CalendarEvent) => void; /** Callback for the popover's expand button (hidden when absent) */ onEventPopoverExpand?: () => void; /** Callback to close the popover (clears the selection) */ /** Closes the given event's popover (clears it only while it is still selected) */ onEventPopoverClose?: (eventId: string) => void; className?: string; } /** Returns the full month name for first-of-month labels */ function getMonthName(date: Date, locale: Locale): string { return format(date, "MMMM", { locale }); } /** Border color for drag placeholder outline */ const placeholderBorderStyles: Record = { red: "border-event-red-border", orange: "border-event-orange-border", yellow: "border-event-yellow-border", green: "border-event-green-border", blue: "border-event-blue-border", purple: "border-event-purple-border", gray: "border-event-gray-border", }; export function MonthViewDayCell({ date, currentMonth, barSlots, eventSlots, onEventClick, onContextMenu, onMoreClick, onDayNumberClick, onBackgroundClick, onDragPointerDown, onResizePointerDown, selectedEventId, dragEventId, resizeEventId, dragTargetDate, dragEvent, showEventPopover, onEventChange, onEventPopoverExpand, onEventPopoverClose, className, }: MonthViewDayCellProps) { const dayNumber = date.getDate(); const { locale } = useCalendarConfig(); // `null` on the server and during hydration, so no cell is marked as today const today = useToday(); const todayDate = today !== null && isSameDay(date, today); const isAdjacentMonth = !isSameMonth(date, currentMonth); const isWeekend = date.getDay() === 0 || date.getDay() === 6; const isFirstOfMonth = dayNumber === 1; // Find the selected event in this cell's slots (for cell-level popover). // For multi-day bars that span across week rows, only show the popover // on the cell matching the event's true start date to avoid duplicates. const selectedCellEvent = selectedEventId && showEventPopover && !dragEventId && !resizeEventId ? (() => { for (const slot of barSlots) { if ( slot.type === "event-bar" && slot.isStart && slot.event.id === selectedEventId && isSameDay(startOfDay(slot.event.start), date) ) return slot.event; } for (const slot of eventSlots) { if (slot.type === "event-item" && slot.event.id === selectedEventId) return slot.event; } return null; })() : null; const showPlaceholder = dragEventId && dragTargetDate && dragEvent && isSameDay(date, dragTargetDate); const placeholderBorder = dragEvent ? placeholderBorderStyles[dragEvent.color ?? "blue"] : "border-event-blue-border"; // Calculate placeholder span for multi-day events const isMultiDay = dragEvent ? dragEvent.isAllDay || isMultiDayEvent(dragEvent) : false; const placeholderSpan = dragEvent ? isMultiDay ? differenceInCalendarDays( dragEvent.isAllDay ? addDays(startOfDay(dragEvent.end), 1) : dragEvent.end, dragEvent.start, ) : 1 : 1; function handleBackgroundClick(e: React.MouseEvent) { if ( (e.target as HTMLElement).closest("[role=button]") || (e.target as HTMLElement).closest("button") ) return; onBackgroundClick?.(); } /** The cell's day in full ("Tuesday, October 31"), its accessible name */ const fullDate = formatFullDate(date, locale); const cellContent = (

{/* Day number — right-aligned like Notion Calendar */}

{/* Spanning bars + multi-day drag placeholder */} {(barSlots.length > 0 || (showPlaceholder && isMultiDay)) && (

{/* Multi-day drag placeholder — absolute overlay */} {showPlaceholder && isMultiDay && (

)} {barSlots.map((slot, index) => { if (slot.type === "event-bar") { if (slot.isStart) { if (slot.colSpan > 1) { const barEl = (

); return barEl; } return (

); } // Continuation cell — invisible placeholder (bar rendered from start cell) return (

); } // spacer — maintains vertical alignment with bars on other days return

; })}

)} {/* Timed events — overflow-hidden to clip excess */}

{/* Timed event drag placeholder — absolute overlay, doesn't push events */} {showPlaceholder && !isMultiDay && (

)} {eventSlots.map((slot, index) => { if (slot.type === "event-item") { const itemEl = ( ); return itemEl; } if (slot.type === "more") { return ( ); } return null; })}

); if (!selectedCellEvent) return cellContent; return ( { if (!open) onEventPopoverClose?.(selectedCellEvent.id); }} > {cellContent} onEventPopoverClose?.(selectedCellEvent.id)} onExpand={onEventPopoverExpand} side="right" align="start" /> ); } 55:T1db9,"use client"; import { cn } from "@/lib/utils"; import { useIsPast } from "@/hooks/use-now"; import { isPrimaryPress } from "@/hooks/use-pointer-gesture"; import { EventContentSlot, useCalendarConfig } from "./calendar-provider"; import { EVENT_FOCUS_RING_CLASS } from "./calendar-event-item"; import { getEventLabel } from "@/lib/event-utils"; import type { CalendarEvent, EventColor } from "./calendar-types"; /** Width in pixels of the resize hotzone at each edge */ const RESIZE_HOTZONE_PX = 6; /** * Box for custom `renderEventContent` output: above the background layers, * filling the bar (side insets match the default title's) */ const MONTH_BAR_SLOT_CLASS = "relative flex h-full min-w-0 flex-1 items-center overflow-hidden"; export interface MonthViewEventBarProps { event: CalendarEvent; colSpan: number; roundedLeft: boolean; roundedRight: boolean; isSelected?: boolean; isGhost?: boolean; /** Whether this is the copy following the pointer during a drag */ isDragging?: boolean; /** Whether the bar's edges are being dragged (passed to `renderEventContent`) */ isResizing?: boolean; onClick?: (event: CalendarEvent) => void; onContextMenu?: (e: React.MouseEvent, event: CalendarEvent) => void; onDragPointerDown?: ( e: React.PointerEvent, event: CalendarEvent, ) => void; onResizePointerDown?: ( e: React.PointerEvent, event: CalendarEvent, edge: "left" | "right", ) => void; className?: string; } const barColorStyles: Record< EventColor, { bg: string; bgHover: string; border: string; text: string } > = { red: { bg: "bg-event-red-bg", bgHover: "hover:bg-event-red-bg/70", border: "bg-event-red-border", text: "text-event-red", }, orange: { bg: "bg-event-orange-bg", bgHover: "hover:bg-event-orange-bg/70", border: "bg-event-orange-border", text: "text-event-orange", }, yellow: { bg: "bg-event-yellow-bg", bgHover: "hover:bg-event-yellow-bg/70", border: "bg-event-yellow-border", text: "text-event-yellow", }, green: { bg: "bg-event-green-bg", bgHover: "hover:bg-event-green-bg/70", border: "bg-event-green-border", text: "text-event-green", }, blue: { bg: "bg-event-blue-bg", bgHover: "hover:bg-event-blue-bg/70", border: "bg-event-blue-border", text: "text-event-blue", }, purple: { bg: "bg-event-purple-bg", bgHover: "hover:bg-event-purple-bg/70", border: "bg-event-purple-border", text: "text-event-purple", }, gray: { bg: "bg-event-gray-bg", bgHover: "hover:bg-event-gray-bg/70", border: "bg-event-gray-border", text: "text-event-gray", }, }; export function MonthViewEventBar({ event, roundedLeft, roundedRight, isSelected = false, isGhost, isDragging = false, isResizing = false, onClick, onContextMenu, onDragPointerDown, onResizePointerDown, className, }: MonthViewEventBarProps) { const color = event.color ?? "blue"; const styles = barColorStyles[color]; // `false` on the server and during hydration, so the markup matches const eventIsPast = useIsPast(event.end); const { hourCycle, locale } = useCalendarConfig(); function handleClick(e: React.MouseEvent) { e.stopPropagation(); onClick?.(event); } function handleContextMenu(e: React.MouseEvent) { e.preventDefault(); e.stopPropagation(); onContextMenu?.(e, event); } function handleBarMouseMove(e: React.MouseEvent) { if (!onResizePointerDown) return; const target = e.currentTarget as HTMLElement; const rect = target.getBoundingClientRect(); const offsetX = e.clientX - rect.left; const width = rect.width; if (roundedLeft && offsetX <= RESIZE_HOTZONE_PX) { target.style.setProperty("--cursor", "col-resize"); return; } if (roundedRight && offsetX >= width - RESIZE_HOTZONE_PX) { target.style.setProperty("--cursor", "col-resize"); return; } target.style.removeProperty("--cursor"); } function handlePointerDown(e: React.PointerEvent) { if (!isPrimaryPress(e)) return; e.stopPropagation(); if (onResizePointerDown) { const rect = e.currentTarget.getBoundingClientRect(); const offsetX = e.clientX - rect.left; const width = rect.width; if (roundedLeft && offsetX <= RESIZE_HOTZONE_PX) { onResizePointerDown(e, event, "left"); return; } if (roundedRight && offsetX >= width - RESIZE_HOTZONE_PX) { onResizePointerDown(e, event, "right"); return; } } onDragPointerDown?.(e, event); } function handleKeyDown(e: React.KeyboardEvent) { if (e.key !== "Enter" && e.key !== " ") return; e.preventDefault(); onClick?.(event); } return (

{/* Solid background layer to prevent transparency bleed-through */}

{/* Colored background layer - uses border color when selected */}

{/* Left border accent - only when roundedLeft and not selected */} {roundedLeft && !isSelected && (

)} {/* Event title */} {event.title} } />

); } 56:T1586,"use client"; import { cn } from "@/lib/utils"; import { useIsPast } from "@/hooks/use-now"; import { isPrimaryPress } from "@/hooks/use-pointer-gesture"; import { EventContentSlot, useCalendarConfig } from "./calendar-provider"; import { EVENT_FOCUS_RING_CLASS } from "./calendar-event-item"; import { formatTime, getEventLabel } from "@/lib/event-utils"; import type { CalendarEvent, EventColor } from "./calendar-types"; export interface MonthViewEventItemProps { event: CalendarEvent; isSelected?: boolean; isGhost?: boolean; /** Whether this is the copy following the pointer during a drag */ isDragging?: boolean; onClick?: (event: CalendarEvent) => void; onContextMenu?: (e: React.MouseEvent, event: CalendarEvent) => void; onDragPointerDown?: ( e: React.PointerEvent, event: CalendarEvent, ) => void; className?: string; } /** Left border color for each event color */ const borderColorStyles: Record = { red: "bg-event-red-border", orange: "bg-event-orange-border", yellow: "bg-event-yellow-border", green: "bg-event-green-border", blue: "bg-event-blue-border", purple: "bg-event-purple-border", gray: "bg-event-gray-border", }; /** Darker, more saturated color for event start time */ const timeColorStyles: Record = { red: "text-[#8C3030] dark:text-[#CC8585]", orange: "text-[#8C4420] dark:text-[#CC9575]", yellow: "text-[#8C6A1A] dark:text-[#CCAB65]", green: "text-[#2A6640] dark:text-[#75A090]", blue: "text-[#2A5080] dark:text-[#75A5CC]", purple: "text-[#5A3080] dark:text-[#A585CC]", gray: "text-[#505050] dark:text-[#AAAAAA]", }; /** Light tinted title color — near-white with a hint of the event color */ const titleColorStyles: Record = { red: "text-[#5C1A1A] dark:text-[#F0C4C4]", orange: "text-[#5C2E14] dark:text-[#F0D4BE]", yellow: "text-[#5C4410] dark:text-[#F0E0A8]", green: "text-[#1A4D26] dark:text-[#C4E8D0]", blue: "text-[#1A3A5C] dark:text-[#C4DAF0]", purple: "text-[#3D1F5C] dark:text-[#DCC8F0]", gray: "text-[#3A3A3A] dark:text-[#D8D8D8]", }; /** * Box for custom `renderEventContent` output: fills the line after the color * accent, inset like the default text */ const MONTH_ITEM_SLOT_CLASS = "flex h-full min-w-0 flex-1 items-center overflow-hidden px-1"; /** * Timed event in month view — transparent bg with colored dot, like Notion Calendar. * Hover shows muted gray background. */ export function MonthViewEventItem({ event, isSelected = false, isGhost, isDragging = false, onClick, onContextMenu, onDragPointerDown, className, }: MonthViewEventItemProps) { const color = event.color ?? "blue"; const borderColor = borderColorStyles[color]; const timeColor = timeColorStyles[color]; const titleColor = titleColorStyles[color]; // `false` on the server and during hydration, so the markup matches const eventIsPast = useIsPast(event.end); const { hourCycle, locale } = useCalendarConfig(); // "9 AM" / "2:30 PM", or "09:00" / "14:30" on a 24-hour clock const startTimeLabel = formatTime(event.start, hourCycle, locale); function handleClick(e: React.MouseEvent) { e.stopPropagation(); onClick?.(event); } function handleContextMenu(e: React.MouseEvent) { e.preventDefault(); e.stopPropagation(); onContextMenu?.(e, event); } function handlePointerDown(e: React.PointerEvent) { if (!isPrimaryPress(e)) return; e.stopPropagation(); onDragPointerDown?.(e, event); } function handleKeyDown(e: React.KeyboardEvent) { if (e.key !== "Enter" && e.key !== " ") return; e.preventDefault(); onClick?.(event); } return (

{/* Colored left border */}

{/* Time + Title */} {startTimeLabel}{" "} {event.title} } />

); } 57:T2199,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { addDays, differenceInCalendarDays } from "date-fns"; import { suppressNextClick, usePointerGesture, } from "@/hooks/use-pointer-gesture"; import { parseCellDate } from "@/lib/event-utils"; import type { CalendarEvent, PointerGestureStart, } from "@/components/calendar-types"; /** * State of an in-progress month-view event drag operation. * Simpler than the week-view drag state — only tracks day-level snapping. */ export interface MonthDragState { /** ID of the event being dragged */ eventId: string; /** The original event being dragged */ event: CalendarEvent; /** The date the event was originally on */ originalDate: Date; /** The date the cursor is currently over */ targetDate: Date; /** Whether the drag threshold has been met */ isDragging: boolean; /** Viewport X for fixed-position floating copy */ clientX: number; /** Viewport Y for fixed-position floating copy */ clientY: number; } interface UseMonthEventDragOptions { /** Ref to the grid container element (used for hit-testing cells) */ gridRef: React.RefObject; /** Current list of events */ events: CalendarEvent[]; /** Called when an event is modified (date shifted) */ onEventChange?: (event: CalendarEvent) => void; /** Called on pointerup to select the event (after the drop, if it moved) */ onEventClick?: (event: CalendarEvent) => void; } interface UseMonthEventDragReturn { /** Current drag state, or null when not dragging */ dragState: MonthDragState | null; /** Attach to event elements' onPointerDown */ handleDragPointerDown: ( e: React.PointerEvent, event: CalendarEvent, ) => void; } /** Minimum pixel distance before a click becomes a drag */ const DRAG_THRESHOLD_PX = 4; /** * Finds the date of the grid cell under the given viewport coordinates. * Uses elementsFromPoint so the browser handles CSS transforms * (vertical scroll offset, buffered rows) automatically. */ function getDateAtPoint( gridEl: HTMLElement, clientX: number, clientY: number, ): Date | null { const elements = document.elementsFromPoint(clientX, clientY); for (const el of elements) { const dateAttr = el.getAttribute("data-date"); if (dateAttr && gridEl.contains(el)) { return parseCellDate(dateAttr); } } return null; } interface DragInfo { eventId: string; event: CalendarEvent; /** Pointer driving the drag; moves from other pointers are ignored */ pointerId: number; /** "mouse", "pen" or "touch" */ pointerType: string; originalDate: Date; startClientX: number; startClientY: number; isDragging: boolean; /** Latest date under the cursor, committed to the parent on pointerup */ targetDate: Date; } export function useMonthEventDrag({ gridRef, events, onEventChange, onEventClick, }: UseMonthEventDragOptions): UseMonthEventDragReturn { const [dragState, setDragState] = useState(null); const { startGesture } = usePointerGesture({ containerRef: gridRef }); const dragRef = useRef(null); const onEventChangeRef = useRef(onEventChange); const onEventClickRef = useRef(onEventClick); const eventsRef = useRef(events); useEffect(() => { onEventChangeRef.current = onEventChange; }, [onEventChange]); useEffect(() => { onEventClickRef.current = onEventClick; }, [onEventClick]); useEffect(() => { eventsRef.current = events; }, [events]); // Store handlers in refs to break circular dependency const handlePointerMoveRef = useRef<((e: PointerEvent) => void) | null>(null); const handlePointerUpRef = useRef<((e: PointerEvent) => void) | null>(null); const handlePointerCancelRef = useRef<((e: PointerEvent) => void) | null>( null, ); const cleanup = useCallback(() => { if (handlePointerMoveRef.current) { window.removeEventListener("pointermove", handlePointerMoveRef.current); } if (handlePointerUpRef.current) { window.removeEventListener("pointerup", handlePointerUpRef.current); } if (handlePointerCancelRef.current) { window.removeEventListener( "pointercancel", handlePointerCancelRef.current, ); } }, []); // Initialize handlers once (stable references via refs) useEffect(() => { handlePointerMoveRef.current = (e: PointerEvent) => { const drag = dragRef.current; if (!drag || e.pointerId !== drag.pointerId) return; const deltaX = Math.abs(e.clientX - drag.startClientX); const deltaY = Math.abs(e.clientY - drag.startClientY); if ( !drag.isDragging && deltaX < DRAG_THRESHOLD_PX && deltaY < DRAG_THRESHOLD_PX ) return; if (!drag.isDragging) { drag.isDragging = true; } const grid = gridRef.current; if (!grid) return; const targetDate = getDateAtPoint(grid, e.clientX, e.clientY); if (!targetDate) return; drag.targetDate = targetDate; setDragState({ eventId: drag.eventId, event: drag.event, originalDate: drag.originalDate, targetDate, isDragging: true, clientX: e.clientX, clientY: e.clientY, }); }; handlePointerUpRef.current = (e: PointerEvent) => { const drag = dragRef.current; if (!drag || e.pointerId !== drag.pointerId) return; cleanup(); dragRef.current = null; setDragState(null); // Swallow the click that follows. Without a drag it would select the // event a second time; after one it lands on a shared ancestor of the // swapped-out item and would clear the selection made below. suppressNextClick(drag.pointerType); if (!drag.isDragging) { // No drag — select the event on pointerup (not pointerdown) so the // popover doesn't flash while the user is still holding the mouse. onEventClickRef.current?.(drag.event); return; } // Commit from the handler, never from inside a state updater: // updaters run during render, and calling the parent's setState // there triggers "Cannot update a component while rendering". const event = eventsRef.current.find((e) => e.id === drag.eventId); if (!event) return; const daysDelta = differenceInCalendarDays( drag.targetDate, drag.originalDate, ); if (daysDelta !== 0) { onEventChangeRef.current?.({ ...event, start: addDays(event.start, daysDelta), end: addDays(event.end, daysDelta), }); } // Select the event after drop so the detail popover opens onEventClickRef.current?.(drag.event); }; // The browser took the pointer over (e.g. for a system gesture): drop // the drag without committing it handlePointerCancelRef.current = (e: PointerEvent) => { const drag = dragRef.current; if (!drag || e.pointerId !== drag.pointerId) return; cleanup(); dragRef.current = null; setDragState(null); }; }, [gridRef, cleanup]); const beginDrag = useCallback( ( { clientX, clientY, pointerId, pointerType }: PointerGestureStart, event: CalendarEvent, ) => { dragRef.current = { eventId: event.id, event, pointerId, pointerType, originalDate: event.start, startClientX: clientX, startClientY: clientY, isDragging: false, targetDate: event.start, }; setDragState({ eventId: event.id, event, originalDate: event.start, targetDate: event.start, isDragging: false, clientX, clientY, }); if (handlePointerMoveRef.current) { window.addEventListener("pointermove", handlePointerMoveRef.current); } if (handlePointerUpRef.current) { window.addEventListener("pointerup", handlePointerUpRef.current); } if (handlePointerCancelRef.current) { window.addEventListener( "pointercancel", handlePointerCancelRef.current, ); } }, [], ); const handleDragPointerDown = useCallback( (e: React.PointerEvent, event: CalendarEvent) => { startGesture(e, (start) => beginDrag(start, event)); }, [startGesture, beginDrag], ); // Cleanup on unmount useEffect(() => { return cleanup; }, [cleanup]); return { dragState, handleDragPointerDown }; } 58:T20b1,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { startOfDay } from "date-fns"; import { isPrimaryPress, suppressNextClick, usePointerGesture, } from "@/hooks/use-pointer-gesture"; import { parseCellDate } from "@/lib/event-utils"; import type { CalendarEvent, PointerGestureStart, } from "@/components/calendar-types"; /** Minimum cursor movement before entering resize mode */ const DRAG_THRESHOLD_PX = 4; export interface MonthResizeState { eventId: string; event: CalendarEvent; edge: "left" | "right"; /** Whether the drag threshold has been met */ isResizing: boolean; /** The new start date during resize */ currentStart: Date; /** The new end date during resize */ currentEnd: Date; } interface ResizeInfo { eventId: string; event: CalendarEvent; /** Pointer driving the resize; moves from other pointers are ignored */ pointerId: number; /** "mouse", "pen" or "touch" */ pointerType: string; edge: "left" | "right"; startClientX: number; isResizing: boolean; /** Latest start date, committed to the parent on pointerup */ currentStart: Date; /** Latest end date, committed to the parent on pointerup */ currentEnd: Date; } interface UseMonthEventResizeOptions { /** Ref to the grid container (used for hit-testing cells via data-date) */ gridRef: React.RefObject; events: CalendarEvent[]; onEventChange?: (event: CalendarEvent) => void; } interface UseMonthEventResizeReturn { resizeState: MonthResizeState | null; handleResizePointerDown: ( e: React.PointerEvent, event: CalendarEvent, edge: "left" | "right", ) => void; } /** * Finds the date of the grid cell under the given viewport coordinates. * Uses data-date attributes on day cells via elementFromPoint. */ function getDateAtPoint( gridEl: HTMLElement, clientX: number, clientY: number, ): Date | null { // Use elementsFromPoint to find the cell under the cursor const elements = document.elementsFromPoint(clientX, clientY); for (const el of elements) { const dateAttr = el.getAttribute("data-date"); if (dateAttr && gridEl.contains(el)) { return parseCellDate(dateAttr); } } return null; } export function useMonthEventResize({ gridRef, events, onEventChange, }: UseMonthEventResizeOptions): UseMonthEventResizeReturn { const [resizeState, setResizeState] = useState(null); const { startGesture } = usePointerGesture({ containerRef: gridRef }); const resizeRef = useRef(null); const onEventChangeRef = useRef(onEventChange); const eventsRef = useRef(events); useEffect(() => { onEventChangeRef.current = onEventChange; }, [onEventChange]); useEffect(() => { eventsRef.current = events; }, [events]); const handlePointerMoveRef = useRef<((e: PointerEvent) => void) | null>(null); const handlePointerUpRef = useRef<((e: PointerEvent) => void) | null>(null); const handlePointerCancelRef = useRef<((e: PointerEvent) => void) | null>( null, ); const cleanup = useCallback(() => { if (handlePointerMoveRef.current) { window.removeEventListener("pointermove", handlePointerMoveRef.current); } if (handlePointerUpRef.current) { window.removeEventListener("pointerup", handlePointerUpRef.current); } if (handlePointerCancelRef.current) { window.removeEventListener( "pointercancel", handlePointerCancelRef.current, ); } document.body.style.removeProperty("--cursor"); }, []); useEffect(() => { handlePointerMoveRef.current = (e: PointerEvent) => { const resize = resizeRef.current; if (!resize || e.pointerId !== resize.pointerId) return; const deltaX = Math.abs(e.clientX - resize.startClientX); if (!resize.isResizing && deltaX < DRAG_THRESHOLD_PX) return; if (!resize.isResizing) { resize.isResizing = true; document.body.style.setProperty("--cursor", "col-resize"); } const grid = gridRef.current; if (!grid) return; const targetDate = getDateAtPoint(grid, e.clientX, e.clientY); if (!targetDate) return; const event = resize.event; let newStart = event.start; let newEnd = event.end; if (resize.edge === "right") { // Right edge: extend/shrink end date. End must be >= start. const targetDay = startOfDay(targetDate); const startDay = startOfDay(event.start); if (targetDay >= startDay) { // For all-day events, end stores the last visible day (inclusive). // The layout adds +1 for span calculation, so we just use targetDay. // For timed events, preserve the time-of-day from the original end. newEnd = event.isAllDay ? targetDay : new Date( targetDay.getTime() + (event.end.getTime() - startOfDay(event.end).getTime()), ); } } else { // Left edge: extend/shrink start date. Start must be <= end. const targetDay = startOfDay(targetDate); const endDay = startOfDay(event.end); if (targetDay <= endDay) { newStart = new Date( targetDay.getTime() + (event.start.getTime() - startOfDay(event.start).getTime()), ); } } resize.currentStart = newStart; resize.currentEnd = newEnd; setResizeState({ eventId: resize.eventId, event: resize.event, edge: resize.edge, isResizing: true, currentStart: newStart, currentEnd: newEnd, }); }; handlePointerUpRef.current = (e: PointerEvent) => { const resize = resizeRef.current; if (!resize || e.pointerId !== resize.pointerId) return; cleanup(); resizeRef.current = null; setResizeState(null); if (!resize.isResizing) return; suppressNextClick(resize.pointerType); // Commit from the handler, never from inside a state updater: // updaters run during render, and calling the parent's setState // there triggers "Cannot update a component while rendering". const event = eventsRef.current.find((e) => e.id === resize.eventId); if (!event) return; onEventChangeRef.current?.({ ...event, start: resize.currentStart, end: resize.currentEnd, }); }; // The browser took the pointer over (e.g. for a system gesture): drop // the resize without committing it handlePointerCancelRef.current = (e: PointerEvent) => { const resize = resizeRef.current; if (!resize || e.pointerId !== resize.pointerId) return; cleanup(); resizeRef.current = null; setResizeState(null); }; }, [gridRef, cleanup]); const beginResize = useCallback( ( { clientX, pointerId, pointerType }: PointerGestureStart, event: CalendarEvent, edge: "left" | "right", ) => { resizeRef.current = { eventId: event.id, event, pointerId, pointerType, edge, startClientX: clientX, isResizing: false, currentStart: event.start, currentEnd: event.end, }; setResizeState({ eventId: event.id, event, edge, isResizing: false, currentStart: event.start, currentEnd: event.end, }); if (handlePointerMoveRef.current) { window.addEventListener("pointermove", handlePointerMoveRef.current); } if (handlePointerUpRef.current) { window.addEventListener("pointerup", handlePointerUpRef.current); } if (handlePointerCancelRef.current) { window.addEventListener( "pointercancel", handlePointerCancelRef.current, ); } }, [], ); const handleResizePointerDown = useCallback( ( e: React.PointerEvent, event: CalendarEvent, edge: "left" | "right", ) => { if (!isPrimaryPress(e)) return; e.stopPropagation(); startGesture(e, (start) => beginResize(start, event, edge)); }, [startGesture, beginResize], ); useEffect(() => { return cleanup; }, [cleanup]); return { resizeState, handleResizePointerDown }; } 59:T45d,import * as React from "react"; /** Matches when the viewer asked the system to minimize animation */ const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)"; function getServerSnapshot(): boolean { return false; } /** * Subscribes to a CSS media query and returns whether it currently matches. * * Returns `false` during server rendering and hydration, then the live value. */ export function useMediaQuery(query: string): boolean { const subscribe = React.useCallback( (onChange: () => void) => { const mql = window.matchMedia(query); mql.addEventListener("change", onChange); return () => mql.removeEventListener("change", onChange); }, [query], ); const getSnapshot = React.useCallback( () => window.matchMedia(query).matches, [query], ); return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); } /** * Whether the viewer prefers reduced motion. `false` during server * rendering and hydration, then the live value. */ export function usePrefersReducedMotion(): boolean { return useMediaQuery(REDUCED_MOTION_QUERY); } 5a:T134c,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { usePrefersReducedMotion } from "@/hooks/use-media-query"; interface UseVerticalScrollOptions { /** Ref to the scrollable container element */ containerRef: React.RefObject; /** Height of a single row in pixels */ rowHeight: number; /** Called when scroll settles — receives the number of rows scrolled */ onNavigate: (rowsDelta: number) => void; /** Disable scroll handling (e.g., during drag) */ disabled?: boolean; } interface UseVerticalScrollReturn { /** Current scroll offset in pixels (for translateY) */ scrollOffset: number; /** Slide animation offset in pixels (for button/keyboard nav) */ slideOffset: number; /** Whether the user is actively scrolling */ isScrolling: boolean; /** Whether a snap/slide animation is in progress */ isAnimating: boolean; /** Trigger a slide animation for programmatic navigation */ triggerSlideAnimation: (rowsDelta: number) => void; } /** Debounce time after last wheel event before snapping */ const SCROLL_END_DEBOUNCE_MS = 150; /** Duration of snap/slide CSS transition */ const SNAP_ANIMATION_MS = 200; export function useVerticalScroll({ containerRef, rowHeight, onNavigate, disabled, }: UseVerticalScrollOptions): UseVerticalScrollReturn { const [scrollOffset, setScrollOffset] = useState(0); const [slideOffset, setSlideOffset] = useState(0); const [isScrolling, setIsScrolling] = useState(false); const [isAnimating, setIsAnimating] = useState(false); // Snaps and slides jump straight to their end instead of animating const prefersReducedMotion = usePrefersReducedMotion(); const scrollEndTimer = useRef>(null); const accumulatedDelta = useRef(0); const onNavigateRef = useRef(onNavigate); useEffect(() => { onNavigateRef.current = onNavigate; }, [onNavigate]); const snapAndNavigate = useCallback( (offset: number) => { if (rowHeight <= 0) return; const rowsDelta = Math.round(offset / rowHeight); if (prefersReducedMotion) { if (rowsDelta !== 0) onNavigateRef.current(-rowsDelta); setScrollOffset(0); setIsScrolling(false); accumulatedDelta.current = 0; return; } // If scroll distance < half a row, snap back if (rowsDelta === 0) { setIsAnimating(true); setScrollOffset(0); setTimeout(() => { setIsAnimating(false); setIsScrolling(false); }, SNAP_ANIMATION_MS); return; } // Snap to exact row boundary then navigate const targetOffset = rowsDelta * rowHeight; setIsAnimating(true); setScrollOffset(targetOffset); setTimeout(() => { onNavigateRef.current(-rowsDelta); setScrollOffset(0); setIsAnimating(false); setIsScrolling(false); accumulatedDelta.current = 0; }, SNAP_ANIMATION_MS); }, [rowHeight, prefersReducedMotion], ); // Programmatic slide animation for button/keyboard navigation const triggerSlideAnimation = useCallback( (rowsDelta: number) => { if (rowHeight <= 0 || isAnimating || isScrolling) return; if (prefersReducedMotion) return; const startOffset = rowsDelta * rowHeight; setSlideOffset(startOffset); requestAnimationFrame(() => { requestAnimationFrame(() => { setIsAnimating(true); setSlideOffset(0); setTimeout(() => { setIsAnimating(false); }, SNAP_ANIMATION_MS); }); }); }, [rowHeight, isAnimating, isScrolling, prefersReducedMotion], ); useEffect(() => { const container = containerRef.current; if (!container) return; const handleWheel = (e: WheelEvent) => { if (disabled) return; // Only handle vertical-dominant scrolls if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return; e.preventDefault(); setIsScrolling(true); // Negate deltaY: scroll down (positive deltaY) = move calendar up = navigate forward accumulatedDelta.current += -e.deltaY; setScrollOffset(accumulatedDelta.current); // Reset debounce timer if (scrollEndTimer.current) { clearTimeout(scrollEndTimer.current); } scrollEndTimer.current = setTimeout(() => { snapAndNavigate(accumulatedDelta.current); accumulatedDelta.current = 0; }, SCROLL_END_DEBOUNCE_MS); }; container.addEventListener("wheel", handleWheel, { passive: false }); return () => { container.removeEventListener("wheel", handleWheel); if (scrollEndTimer.current) { clearTimeout(scrollEndTimer.current); } }; }, [containerRef, snapAndNavigate, disabled]); return { scrollOffset, slideOffset, isScrolling, isAnimating, triggerSlideAnimation, }; } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"date-fns"}]]}]}]]}],["$","$L50",null,{"namespace":"@calendarcn","registryDependencies":["@calendarcn/calendar-core","@calendarcn/event-details","popover"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/month-view.tsx","content":"$52","type":"registry:component"},{"path":"src/components/month-view-grid.tsx","content":"$53","type":"registry:component"},{"path":"src/components/month-view-day-cell.tsx","content":"$54","type":"registry:component"},{"path":"src/components/month-view-event-bar.tsx","content":"$55","type":"registry:component"},{"path":"src/components/month-view-event-item.tsx","content":"$56","type":"registry:component"},{"path":"src/hooks/use-month-event-drag.ts","content":"$57","type":"registry:hook"},{"path":"src/hooks/use-month-event-resize.ts","content":"$58","type":"registry:hook"},{"path":"src/hooks/use-media-query.ts","content":"$59","type":"registry:hook"},{"path":"src/hooks/use-vertical-scroll.ts","content":"$5a","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]