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:T51ad,"use client"; import { addDays, differenceInCalendarDays, eachDayOfInterval, format, isSameDay, } from "date-fns"; import type { Locale } from "date-fns"; import * as React from "react"; import { cn } from "@/lib/utils"; import { formatHourLabel, getPeriodStart, getVisibleDayCount, getWeekViewStepDays, isMultiDayEvent, } from "@/lib/event-utils"; import { useHorizontalScroll } from "@/hooks/use-horizontal-scroll"; import { useEventKeyboard } from "@/hooks/use-event-keyboard"; import { useEventDrag } from "@/hooks/use-event-drag"; import { useEventResize } from "@/hooks/use-event-resize"; import { useAllDayResize } from "@/hooks/use-all-day-resize"; import { useToday } from "@/hooks/use-now"; import { useTimeZoneLabel } from "@/hooks/use-timezone-label"; import type { CalendarEvent, HourCycle, HourSlot, TimeGridProps, TimeGridView, WeekDay, } from "./week-view-types"; import { useCalendar, useCalendarConfig, useCalendarViewSync, } from "./calendar-provider"; import { WeekViewAllDayRow } from "./week-view-all-day-row"; import { CalendarDayHeaders } from "./calendar-day-headers"; import { WeekViewGrid } from "./week-view-grid"; import { WeekViewTimeAxis } from "./week-view-time-axis"; import { WeekViewTimeIndicator } from "./week-view-time-indicator"; import { CalendarPopoverBoundaryProvider } from "./calendar-popover-context"; import { CalendarLoadingBar } from "./calendar-loading-bar"; /** Minimum height of each hour row in pixels */ const MIN_HOUR_HEIGHT = 48; /** Width of the time axis column in pixels (4rem = 64px) */ export const TIME_AXIS_WIDTH = 64; /** Buffer days per view mode (each side, for horizontal scroll) */ const BUFFER_DAYS_BY_VIEW: Record = { day: 1, week: 7, }; /** Buffer extension step size per view mode */ const BUFFER_STEP_BY_VIEW: Record = { day: 1, week: 7, }; /** Days the day view moves when a drag or resize is held at its side edge */ const DAY_VIEW_EDGE_NAV_DAYS = 7; /** * Generates an array of WeekDay objects starting from the given date. * Note: isToday is added separately from the shared `useToday` clock, so it * stays correct across midnight and is never computed on the server */ function generateWeekDays( startDate: Date, count: number, locale: Locale, ): Omit[] { const end = addDays(startDate, count - 1); return eachDayOfInterval({ start: startDate, end }).map((date) => ({ date, dayName: format(date, "EEE", { locale }), dayNumber: date.getDate(), })); } /** * Generates an extended array of days including buffer days on both sides * for smooth horizontal scroll transitions */ function generateBufferedDays( startDate: Date, bufferDays: number, visibleDays: number, locale: Locale, ): Omit[] { const bufferStart = addDays(startDate, -bufferDays); const bufferEnd = addDays(startDate, visibleDays + bufferDays - 1); return eachDayOfInterval({ start: bufferStart, end: bufferEnd }).map( (date) => ({ date, dayName: format(date, "EEE", { locale }), dayNumber: date.getDate(), }), ); } /** * Generates an HourSlot for each visible hour, from `dayStartHour` up to * (not including) `dayEndHour` */ function generateHours( dayStartHour: number, dayEndHour: number, hourCycle: HourCycle, locale: Locale, ): HourSlot[] { return Array.from({ length: dayEndHour - dayStartHour }, (_, i) => { const hour = dayStartHour + i; return { hour, label: formatHourLabel(hour, hourCycle, locale) }; }); } /** Marks the day matching `today` (none while `today` is unknown). */ function withIsToday( days: Omit[], today: Date | null, ): WeekDay[] { return days.map((day) => ({ ...day, isToday: today !== null && isSameDay(day.date, today), })); } /** * Hourly time grid behind DayView and WeekView: day headers, the all-day * row, the time axis and the timed-event columns, with horizontal scroll * navigation. `view` sets the column count (one day, or `numberOfDays`); * date, events and selection come from the surrounding CalendarProvider, * which adopts `view` and `numberOfDays` while it doesn't control them. * * Changing `view` re-lays out the same grid instead of remounting it, so * driving it from the provider (``) keeps the * vertical scroll position across day/week switches. * * Renders the same markup on the server and during hydration: everything that * depends on the viewer's clock (today, the current-time line, past events) * reads the shared `useNow` clock, which is unknown until hydration finishes. */ export function TimeGrid({ view, numberOfDays: numberOfDaysProp, showEventPopover = true, onEventPopoverExpand, scrollToHour, className, }: TimeGridProps) { const { view: providerView, currentDate, events, selectedEvent, highlightedDate, selectEvent, clearSelection, addEventFromRange, updateEvent, goToDate, goToPrev, goToNext, numberOfDays: providerNumberOfDays, weekStartsOn, loading, } = useCalendar(); const { snapMinutes, dayStartHour, dayEndHour, hourCycle, locale } = useCalendarConfig(); const { reportView, reportVisibleDays, closeEventPopover } = useCalendarViewSync(); const numberOfDays = numberOfDaysProp ?? providerNumberOfDays; /** Day columns this grid pins the provider to (none in day view) */ const fixedNumberOfDays = view === "week" ? numberOfDaysProp : undefined; /** * Whether the provider navigates by this grid's type and day count. False * for the commit before it adopts them (on mount, or right after a switch * this grid doesn't follow). */ const isProviderInSync = providerView === view && (fixedNumberOfDays === undefined || providerNumberOfDays === fixedNumberOfDays); // `null` on the server and during hydration const today = useToday(); const selectedEventId = selectedEvent?.id; const VISIBLE_DAYS = getVisibleDayCount(view, numberOfDays); const visibleHourCount = dayEndHour - dayStartHour; // A drag held at the grid's side edge moves by one prev/next step const edgeNavigationDays = view === "day" ? DAY_VIEW_EDGE_NAV_DAYS : getWeekViewStepDays(numberOfDays); const BUFFER_DAYS = BUFFER_DAYS_BY_VIEW[view]; const BUFFER_STEP = BUFFER_STEP_BY_VIEW[view]; const scrollContainerRef = React.useRef(null); const dayColumnsScrollRef = React.useRef(null); const allDayScrollRef = React.useRef(null); const allDayScrollContentRef = React.useRef(null); // Visible days starting from currentDate const baseDays = React.useMemo( () => generateWeekDays(currentDate, VISIBLE_DAYS, locale), [currentDate, VISIBLE_DAYS, locale], ); const days = withIsToday(baseDays, today); const hours = React.useMemo( () => generateHours(dayStartHour, dayEndHour, hourCycle, locale), [dayStartHour, dayEndHour, hourCycle, locale], ); const allDayEvents = React.useMemo( () => events.filter((e) => e.isAllDay || isMultiDayEvent(e)), [events], ); const timedEvents = React.useMemo( () => events.filter((e) => !e.isAllDay && !isMultiDayEvent(e)), [events], ); // Compute day column width and dynamic hour height from container const [dayColumnWidth, setDayColumnWidth] = React.useState(0); const [hourHeight, setHourHeight] = React.useState(MIN_HOUR_HEIGHT); const [contextMenuOpen, setContextMenuOpen] = React.useState(false); const [isAllDayResizing, setIsAllDayResizing] = React.useState(false); // Empty on the server and during hydration, the viewer's zone afterwards const timeZoneLabel = useTimeZoneLabel(); React.useEffect(() => { const updateDimensions = () => { const container = scrollContainerRef.current; if (!container) return; const availableWidth = container.clientWidth - TIME_AXIS_WIDTH; setDayColumnWidth(availableWidth / VISIBLE_DAYS); setHourHeight( Math.max(MIN_HOUR_HEIGHT, container.clientHeight / visibleHourCount), ); }; updateDimensions(); const observer = new ResizeObserver(updateDimensions); if (scrollContainerRef.current) { observer.observe(scrollContainerRef.current); } return () => observer.disconnect(); }, [VISIBLE_DAYS, visibleHourCount]); /** Whether `scrollToHour` has been applied; it only applies once */ const hasScrolledToHourRef = React.useRef(false); // Scroll to `scrollToHour` before the first paint. A grid mounted hidden // (e.g. in an inactive tab) has no height yet, so wait until it has one. React.useLayoutEffect(() => { if (scrollToHour === undefined || hasScrolledToHourRef.current) return; const container = scrollContainerRef.current; if (!container) return; const applyScroll = () => { if (hasScrolledToHourRef.current || container.clientHeight === 0) return; hasScrolledToHourRef.current = true; // Same row height the grid settles on (see updateDimensions above) const rowHeight = Math.max( MIN_HOUR_HEIGHT, container.clientHeight / visibleHourCount, ); const hour = Math.min(Math.max(scrollToHour, dayStartHour), dayEndHour); container.scrollTop = (hour - dayStartHour) * rowHeight; }; applyScroll(); if (hasScrolledToHourRef.current) return; const observer = new ResizeObserver(applyScroll); observer.observe(container); return () => observer.disconnect(); }, [scrollToHour, dayStartHour, dayEndHour, visibleHourCount]); // Track whether navigation was initiated by scroll (to avoid double-animation) const scrollNavigatedRef = React.useRef(false); const prevDateRef = React.useRef(currentDate); const wasProviderInSyncRef = React.useRef(isProviderInSync); // 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 this grid before the first paint. React.useLayoutEffect(() => { reportView({ view, numberOfDays: fixedNumberOfDays }); }, [view, fixedNumberOfDays, reportView]); const handleNavigate = React.useCallback( (daysDelta: number) => { scrollNavigatedRef.current = true; goToDate(addDays(currentDate, daysDelta)); }, [currentDate, goToDate], ); const handleDragNavigate = React.useCallback( (daysDelta: number) => { goToDate(addDays(currentDate, daysDelta)); }, [currentDate, goToDate], ); const handleEventClick = React.useCallback( (event: CalendarEvent) => selectEvent(event.id), [selectEvent], ); const visibleDayDates = React.useMemo(() => days.map((d) => d.date), [days]); const { resizeState, handleResizePointerDown } = useEventResize({ hourHeight, scrollContainerRef, events: timedEvents, days: visibleDayDates, dayColumnWidth, timeAxisWidth: TIME_AXIS_WIDTH, snapMinutes, dayStartHour, dayEndHour, edgeNavigationDays, onEventChange: updateEvent, onEventClick: handleEventClick, onResizeNavigate: handleDragNavigate, }); const { dragState, handleEventPointerDown } = useEventDrag({ hourHeight, scrollContainerRef, events: timedEvents, days: visibleDayDates, dayColumnWidth, timeAxisWidth: TIME_AXIS_WIDTH, snapMinutes, dayStartHour, dayEndHour, edgeNavigationDays, onEventChange: updateEvent, onEventClick: handleEventClick, onDragNavigate: handleDragNavigate, }); const { scrollOffset, slideOffset, isAnimating, triggerSlideAnimation } = useHorizontalScroll({ containerRef: scrollContainerRef, dayColumnWidth, onNavigate: handleNavigate, disabled: dragState?.isDragging || resizeState?.isResizing || isAllDayResizing || contextMenuOpen, }); // Compute how many days the scroll has shifted from center const scrollDaysDelta = dayColumnWidth > 0 ? Math.round(-scrollOffset / dayColumnWidth) : 0; // Report visible days to the provider in real-time as scroll crosses day // boundaries. Not while it is adopting this grid: it sets them itself, and // these would be the days of the date it is moving away from. React.useEffect(() => { if (!isProviderInSync) return; const start = addDays(currentDate, scrollDaysDelta); const end = addDays(start, VISIBLE_DAYS - 1); reportVisibleDays(eachDayOfInterval({ start, end })); }, [ isProviderInSync, currentDate, scrollDaysDelta, reportVisibleDays, VISIBLE_DAYS, ]); // Dynamic buffer: extends in BUFFER_STEP chunks based on scroll distance const extraScrollDays = dayColumnWidth > 0 && BUFFER_STEP > 0 ? Math.ceil(Math.abs(scrollOffset) / dayColumnWidth / BUFFER_STEP) * BUFFER_STEP : 0; const dynamicBuffer = BUFFER_DAYS + extraScrollDays; const totalDays = dynamicBuffer + VISIBLE_DAYS + dynamicBuffer; // Extended buffered days for scroll (grows dynamically with scroll distance) const bufferedBaseDays = React.useMemo( () => generateBufferedDays(currentDate, dynamicBuffer, VISIBLE_DAYS, locale), [currentDate, dynamicBuffer, VISIBLE_DAYS, locale], ); const bufferedDays = withIsToday(bufferedBaseDays, today); const bufferedDayDates = React.useMemo( () => bufferedBaseDays.map((d) => d.date), [bufferedBaseDays], ); const { allDayResizeState, handleAllDayResizePointerDown } = useAllDayResize({ days: bufferedDayDates, dayColumnWidth, allDayContainerRef: allDayScrollContentRef, events: allDayEvents, onEventChange: updateEvent, onEventClick: handleEventClick, }); React.useEffect(() => { setIsAllDayResizing(allDayResizeState?.isResizing ?? false); }, [allDayResizeState?.isResizing]); // Trigger slide animation when currentDate changes externally (not from scroll) React.useEffect(() => { const wasProviderInSync = wasProviderInSyncRef.current; wasProviderInSyncRef.current = isProviderInSync; if (scrollNavigatedRef.current) { scrollNavigatedRef.current = false; prevDateRef.current = currentDate; return; } const prevDate = prevDateRef.current; const daysDiff = differenceInCalendarDays(currentDate, prevDate); prevDateRef.current = currentDate; if (daysDiff === 0) return; // Dates set while the provider adopts this grid (its starting date, or an // undone switch) are not navigation if (!wasProviderInSync || !isProviderInSync) return; triggerSlideAnimation(daysDiff); }, [currentDate, isProviderInSync, triggerSlideAnimation]); // The base translateX centers on the visible days (skip dynamicBuffer columns) const baseTranslateX = -(dynamicBuffer * dayColumnWidth); const transformX = baseTranslateX + scrollOffset + slideOffset; const scrollStyle: React.CSSProperties = { width: `${(totalDays / VISIBLE_DAYS) * 100}%`, transform: `translateX(${transformX}px)`, transition: isAnimating ? `transform ${200}ms ease-out` : "none", }; // Ref for the popover collision boundary (constrains popovers within the calendar area) const calendarBoundaryRef = React.useRef(null); // Ref for the header (weekday columns + all-day row) to measure its height for popover top inset const calendarHeaderRef = React.useRef(null); const isDayVisible = React.useCallback( (date: Date) => visibleDayDates.some((day) => isSameDay(day, date)), [visibleDayDates], ); const revealDay = React.useCallback( (date: Date) => goToDate(getPeriodStart(date, view, weekStartsOn, numberOfDays)), [goToDate, view, weekStartsOn, numberOfDays], ); const handleEventKeyDown = useEventKeyboard({ containerRef: calendarBoundaryRef, scrollContainerRef, isDayVisible, revealDay, }); return (

{ const target = e.target as HTMLElement; if (target.closest("[data-radix-popper-content-wrapper]")) return; clearSelection(); }} > {/* Header - day columns and all-day row with synchronized scroll */}

{ ( dayColumnsScrollRef as React.MutableRefObject ).current = el; ( calendarHeaderRef as React.MutableRefObject ).current = el; }} className="overflow-hidden" >

{/* Timezone label - rendered outside scroll container */}

{timeZoneLabel}

{/* Under the day columns, along the header's bottom border */} {loading && }

{/* Scrollable grid area \u2014 also serves as the collision boundary for popovers */}

); } 53:Tdc8,"use client"; import { isSameDay } from "date-fns"; import { cn } from "@/lib/utils"; import { useTimeZoneLabel } from "@/hooks/use-timezone-label"; import type { WeekViewDayColumnsProps } from "./week-view-types"; /** * Day column headers showing day names and date numbers * Includes timezone label on the left (unless standalone mode) * Highlights the current day */ export function CalendarDayHeaders({ days, standalone, highlightedDate, className, }: WeekViewDayColumnsProps) { // Empty on the server and during hydration, the viewer's zone afterwards const timezone = useTimeZoneLabel(); // Standalone mode: just render the day columns (used inside scroll container) if (standalone) { // Visual only (including the off-screen buffer days): each day column // in the grid is labeled with its full date return (

{days.map((day) => (

{day.dayName} {day.dayNumber}

))}

); } return (

{/* Timezone label */}

{timezone}

{/* Day columns */}

{days.map((day) => (

{day.dayName} {day.dayNumber}

))}

); } 54:T34d2,"use client"; import type React from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; import { isSameDay } from "date-fns"; import { useCallback } from "react"; import { calculateAllDayEventRows } from "@/lib/event-utils"; import { AllDayEventItem } from "./calendar-event-item"; import { useCalendarPopoverBoundary } from "./calendar-popover-context"; import type { CalendarEvent, EventItemPopoverProps, WeekViewAllDayRowProps, } from "./week-view-types"; const ALL_DAY_EVENT_HEIGHT = 24; const ALL_DAY_ROW_GAP = 2; /** * All-day row for displaying all-day events * Shows "All-day" label on the left with day columns */ export function WeekViewAllDayRow({ days, allDayEvents = [], onEventClick, selectedEventId, scrollStyle, allDayResizeState, onAllDayResizePointerDown, allDayScrollContentRef, onEventChange, onContextMenuOpenChange, showEventPopover, onEventPopoverExpand, onEventPopoverClose, onPrevWeek, onNextWeek, visibleStartIndex, visibleCount, dayColumnWidth, highlightedDate, className, }: WeekViewAllDayRowProps) { const allEventRows = calculateAllDayEventRows(allDayEvents, days); // Filter out events entirely within buffer columns so they don't peek // through due to sub-pixel rendering at the scroll boundary. const visibleEnd = visibleStartIndex != null && visibleCount != null ? visibleStartIndex + visibleCount - 1 : days.length - 1; const eventRows = visibleStartIndex != null ? allEventRows.filter( ({ startColumn, endColumn }) => endColumn >= visibleStartIndex && startColumn <= visibleEnd, ) : allEventRows; const maxRow = eventRows.length > 0 ? Math.max(...eventRows.map((r) => r.row)) + 1 : 0; const contentHeight = maxRow > 0 ? maxRow * (ALL_DAY_EVENT_HEIGHT + ALL_DAY_ROW_GAP) + 8 : 32; const isMoveDrag = allDayResizeState?.isResizing && allDayResizeState.edge === "move"; return (

{/* All-day label */}

All-day

{/* Day columns for all-day events - wrapped for scroll sync */}

{/* Background grid */}

{days.map((day) => { const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6; return (

); })}

{/* Events */}

{eventRows.map(({ event, startColumn, endColumn, row }) => { const isBeingResized = allDayResizeState?.eventId === event.id && allDayResizeState.isResizing; const isBeingMoved = isBeingResized && allDayResizeState.edge === "move"; // For move: ghost stays at original, event renders at target // For resize: event renders at target (current columns) const displayStartColumn = isBeingResized ? isBeingMoved ? startColumn : allDayResizeState.currentStartColumn : startColumn; const displayEndColumn = isBeingResized ? isBeingMoved ? endColumn : allDayResizeState.currentEndColumn : endColumn; return ( ); })} {/* Placeholder at target position during move */} {isMoveDrag && (() => { const movedRow = eventRows.find( (r) => r.event.id === allDayResizeState.eventId, ); if (!movedRow) return null; return ( ); })()}

{/* Floating drag copy via portal */} {isMoveDrag && allDayResizeState.clientX != null && allDayResizeState.clientY != null && (() => { const movedRow = eventRows.find( (r) => r.event.id === allDayResizeState.eventId, ); if (!movedRow) return null; const span = movedRow.endColumn - movedRow.startColumn + 1; const colWidthPx = dayColumnWidth ?? 100; const floatingWidth = span * colWidthPx; const offsetX = allDayResizeState.cursorOffsetX ?? 0; return createPortal(

, document.body, ); })()}

); } interface AllDayEventRowProps extends EventItemPopoverProps { event: CalendarEvent; startColumn: number; endColumn: number; row: number; totalColumns: number; days: WeekViewAllDayRowProps["days"]; onEventClick?: (event: CalendarEvent) => void; isSelected?: boolean; onAllDayResizePointerDown?: WeekViewAllDayRowProps["onAllDayResizePointerDown"]; originalStartColumn: number; originalEndColumn: number; isBeingResized?: boolean; isBeingMoved?: boolean; /** Callback when an event is changed (e.g. color change from context menu) */ onEventChange?: (event: CalendarEvent) => void; /** Callback when context menu open state changes */ onContextMenuOpenChange?: (open: boolean) => void; /** Index of the first visible column (for sticky-title offset) */ visibleStartIndex?: number; } function AllDayEventRow({ event, startColumn, endColumn, row, totalColumns, days, onEventClick, isSelected, onAllDayResizePointerDown, originalStartColumn, originalEndColumn, isBeingResized, isBeingMoved, onEventChange, onContextMenuOpenChange, showEventPopover, onEventPopoverExpand, onEventPopoverClose, onPrevWeek, onNextWeek, visibleStartIndex, }: AllDayEventRowProps) { const { view } = useCalendarPopoverBoundary(); const isDayView = view === "day"; const left = (startColumn / totalColumns) * 100; // Day view uses a smaller right gap than week view so events nearly fill // the column but still show a sliver of the grid \u2014 matching Notion Calendar. const columnWidth = 100 / totalColumns; const rightGap = isDayView ? columnWidth * 0.02 : columnWidth * 0.08; const width = ((endColumn - startColumn + 1) / totalColumns) * 100 - rightGap; const top = row * (ALL_DAY_EVENT_HEIGHT + ALL_DAY_ROW_GAP); // During resize, both edges are always visible so force rounding on both sides const spanStart = isBeingResized || isSameDay(event.start, days[startColumn].date); const spanEnd = isBeingResized || isSameDay(event.end, days[endColumn].date); /** * In day view with buffer days (3 columns: buffer | visible | buffer), * the visible column is index 1. Multi-day events that start in the left * buffer (column 0) have their title off-screen. Calculate the percentage * offset needed to push the title into the visible area. * * CSS `padding-left` percentages are relative to the **containing block's * width** (the wrapper div), not the grid container. We must convert from * container-relative coordinates to wrapper-relative coordinates: * offset = (visibleStart% - left%) \u00D7 (100 / width%) */ const visibleColumnIndex = visibleStartIndex ?? 1; const visibleStartPercent = (visibleColumnIndex / totalColumns) * 100; const hiddenContainerPercent = isDayView ? Math.max(0, visibleStartPercent - left) : 0; /** Small extra nudge (in container %) so the title doesn't sit flush * against the visible column edge \u2014 gives it a bit of breathing room. */ const TITLE_NUDGE_PERCENT = 0.1; const titleOffsetPercent = hiddenContainerPercent > 0 && width > 0 ? ((hiddenContainerPercent + TITLE_NUDGE_PERCENT) / width) * 100 : 0; const handleResizePointerDown = useCallback( ( e: React.PointerEvent, ev: CalendarEvent, edge: "left" | "right" | "move", ) => { onAllDayResizePointerDown?.( e, ev, edge, originalStartColumn, originalEndColumn, ); }, [onAllDayResizePointerDown, originalStartColumn, originalEndColumn], ); return (

); } /** Placeholder border-only outline rendered at the target position during move */ function AllDayPlaceholderRow({ event, startColumn, endColumn, row, totalColumns, }: { event: CalendarEvent; startColumn: number; endColumn: number; row: number; totalColumns: number; }) { const columnWidth = 100 / totalColumns; const left = (startColumn / totalColumns) * 100; const rightGap = columnWidth * 0.08; const width = ((endColumn - startColumn + 1) / totalColumns) * 100 - rightGap; const top = row * (ALL_DAY_EVENT_HEIGHT + ALL_DAY_ROW_GAP); return (

); } 55:T56dd,"use client"; import React from "react"; import { createPortal } from "react-dom"; import { isSameDay, startOfDay, addDays } from "date-fns"; import { cn } from "@/lib/utils"; import { isPrimaryPress, usePointerGesture } from "@/hooks/use-pointer-gesture"; import { calculatePositionedEvents, formatFullDate, getNewEventRange, } from "@/lib/event-utils"; import { CalendarEventItem } from "./calendar-event-item"; import { useCalendarPopoverBoundary } from "./calendar-popover-context"; import { useCalendarConfig } from "./calendar-provider"; import type { CalendarEvent, EventDragState, EventItemPopoverProps, EventResizeState, PositionedEvent, WeekViewGridProps, } from "./week-view-types"; /** * Max pointer travel (px) between pointerdown and click for a click on an * empty slot to create an event. Matches the drag threshold in * use-event-drag so a press that moves far enough to count as a drag never * also creates an event. */ const CREATE_CLICK_TOLERANCE_PX = 4; /** Pointer position recorded when a mouse or pen press lands on an empty day column */ interface PendingCreateClick { clientX: number; clientY: number; } /** * Main grid displaying hour/day intersection cells with events * Each cell represents one hour in one day */ export function WeekViewGrid({ days, hours, hourHeight, events = [], onEventClick, selectedEventId, onEventCreate, dragState, onEventDragPointerDown, resizeState, onEventResizePointerDown, onEventChange, onContextMenuOpenChange, showEventPopover, onEventPopoverExpand, onEventPopoverClose, onPrevWeek, onNextWeek, highlightedDate, visibleStartIndex = 0, visibleCount, className, }: WeekViewGridProps) { const { view } = useCalendarPopoverBoundary(); const config = useCalendarConfig(); const isDayView = view === "day"; const gridRef = React.useRef(null); /** Set only by a mouse or pen press directly on empty column space */ const pendingCreateRef = React.useRef(null); const [gridWidth, setGridWidth] = React.useState(0); const { startGesture } = usePointerGesture({ containerRef: gridRef }); React.useEffect(() => { const el = gridRef.current; if (!el) return; const observer = new ResizeObserver((entries) => { for (const entry of entries) { setGridWidth(entry.contentRect.width); } }); observer.observe(el); return () => observer.disconnect(); }, []); /** Creates an event in a column at a viewport Y position */ const createEventAt = React.useCallback( (column: HTMLElement, columnDate: Date, clientY: number) => { if (!onEventCreate) return; // The column's top edge is `dayStartHour`, not midnight const columnTop = column.getBoundingClientRect().top; const minutesFromMidnight = config.dayStartHour * 60 + ((clientY - columnTop) / hourHeight) * 60; onEventCreate(getNewEventRange(columnDate, minutesFromMidnight, config)); }, [onEventCreate, hourHeight, config], ); /** * Capture phase runs before event items stop pointerdown propagation, so * a press that starts on an event (drag, resize, select) always clears any * pending create left over from an earlier press. */ const handleColumnPointerDownCapture = React.useCallback(() => { pendingCreateRef.current = null; }, []); const handleColumnPointerDown = React.useCallback( (e: React.PointerEvent, columnDate: Date) => { if (e.target !== e.currentTarget) return; // Touch creates with a long press, so a swipe over empty space still // scrolls and a tap only clears the selection if (e.pointerType === "touch") { startGesture(e, ({ clientY, element }) => createEventAt(element, columnDate, clientY), ); return; } if (!isPrimaryPress(e)) return; pendingCreateRef.current = { clientX: e.clientX, clientY: e.clientY }; }, [startGesture, createEventAt], ); /** * Creates an event when a press started and ended on empty space in the * same column without moving. With an event selected the click is left to * bubble so WeekView's background click deselects instead. */ const handleColumnClick = React.useCallback( (e: React.MouseEvent, columnDate: Date) => { const pending = pendingCreateRef.current; pendingCreateRef.current = null; if (!pending || !onEventCreate) return; if (e.target !== e.currentTarget) return; if (selectedEventId) return; const movedX = Math.abs(e.clientX - pending.clientX); const movedY = Math.abs(e.clientY - pending.clientY); if ( movedX > CREATE_CLICK_TOLERANCE_PX || movedY > CREATE_CLICK_TOLERANCE_PX ) { return; } e.stopPropagation(); createEventAt(e.currentTarget, columnDate, e.clientY); }, [onEventCreate, selectedEventId, createEventAt], ); return (

{/* Background grid */}

{hours.map((hourSlot) => days.map((day) => { const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6; return (

); }), )}

{/* Column highlight layer — brief background fade for "+N more" navigation */} {highlightedDate && (

{days.map((day) => (

))}

)} {/* Events layer */}

{days.map((day, index) => { const isOnScreen = index >= visibleStartIndex && index < visibleStartIndex + (visibleCount ?? days.length); /** * Day view uses a smaller right gap than week view so events * nearly fill the column but still show a sliver of the grid * line — matching Notion Calendar's day-view styling. */ const rightGap = isDayView ? 2 : 8; const positionedEvents = calculatePositionedEvents( events, day, config, rightGap, ); return ( ); })}

{/* Resize placeholder overlay — rendered at grid level for cross-day support */} {resizeState?.isResizing && !isSameDay( resizeState.currentStartDate, resizeState.currentEndDate, ) && ( )} {/* Drag placeholder overlay — rendered at grid level for cross-column support */} {dragState?.isDragging && ( )} {/* Floating dragging copy — rendered at grid level so it can move freely */} {dragState?.isDragging && ( )}

); } interface DragPlaceholderOverlayProps { days: WeekViewGridProps["days"]; hourHeight: number; dragState: EventDragState; } function DragPlaceholderOverlay({ days, hourHeight, dragState, }: DragPlaceholderOverlayProps) { // Find the target column index using dragState.currentDate const targetColumnIndex = days.findIndex((d) => isSameDay(d.date, dragState.currentDate), ); if (targetColumnIndex === -1) return null; // Build a minimal PositionedEvent from the drag state event const placeholderPositioned: PositionedEvent = { event: dragState.event, top: 0, height: 0, left: 0, width: 92, column: 0, totalColumns: 1, }; return (

{days.map((day, i) => { if (i !== targetColumnIndex) { return

; } return (

); })}

); } interface ResizePlaceholderOverlayProps { days: WeekViewGridProps["days"]; hourHeight: number; resizeState: EventResizeState; } function ResizePlaceholderOverlay({ days, hourHeight, resizeState, }: ResizePlaceholderOverlayProps) { if (resizeState.effectiveEdge === "bottom") { return ( ); } return ( ); } function BottomEdgeOverlay({ days, hourHeight, resizeState, }: ResizePlaceholderOverlayProps) { const endDay = resizeState.currentEndDate; const startColIndex = days.findIndex((d) => isSameDay(d.date, resizeState.currentStartDate), ); const endColIndex = days.findIndex((d) => isSameDay(d.date, endDay)); if (startColIndex === -1 || endColIndex === -1) return null; if (endColIndex <= startColIndex) return null; return (

{days.map((day, i) => { // Skip start column (handled by DayEventsColumn) and columns outside range if (i <= startColIndex || i > endColIndex) { return

; } const isEndColumn = i === endColIndex; const segmentPosition = isEndColumn ? ("end" as const) : ("middle" as const); const midnight = startOfDay(day.date); const overrideStart = midnight; const overrideEnd = isEndColumn ? resizeState.currentEnd : addDays(midnight, 1); const positioned: PositionedEvent = { event: resizeState.event, top: 0, height: 0, left: 0, width: 92, column: 0, totalColumns: 1, segmentPosition, }; return (

); })}

); } function TopEdgeOverlay({ days, hourHeight, resizeState, }: ResizePlaceholderOverlayProps) { const startDay = resizeState.currentStartDate; const startColIndex = days.findIndex((d) => isSameDay(d.date, startDay)); const endColIndex = days.findIndex((d) => isSameDay(d.date, resizeState.currentEndDate), ); if (startColIndex === -1 || endColIndex === -1) return null; if (endColIndex <= startColIndex) return null; return (

{days.map((day, i) => { // Skip end column (handled by DayEventsColumn) and columns outside range if (i < startColIndex || i >= endColIndex) { return

; } const isStartColumn = i === startColIndex; const segmentPosition = isStartColumn ? ("start" as const) : ("middle" as const); const midnight = startOfDay(day.date); const overrideStart = isStartColumn ? resizeState.currentStart : midnight; const overrideEnd = addDays(midnight, 1); const positioned: PositionedEvent = { event: resizeState.event, top: 0, height: 0, left: 0, width: 92, column: 0, totalColumns: 1, segmentPosition, }; return (

); })}

); } interface FloatingDragCopyProps { days: WeekViewGridProps["days"]; hourHeight: number; dragState: EventDragState; gridWidth: number; } function FloatingDragCopy({ days, hourHeight, dragState, gridWidth, }: FloatingDragCopyProps) { const floatingPositioned: PositionedEvent = { event: dragState.event, top: 0, height: 0, left: 0, width: 92, column: 0, totalColumns: 1, }; const durationMinutes = (dragState.currentEnd.getTime() - dragState.currentStart.getTime()) / 60000; const heightPx = (durationMinutes / 60) * hourHeight; const columnWidthPx = (days.length > 0 ? gridWidth / days.length : 200) * 0.92; return createPortal(

, document.body, ); } interface DayEventsColumnProps extends EventItemPopoverProps { columnDate: Date; /** Accessible name: the column's full date */ label: string; /** * Whether the column is on screen. Off-screen scroll buffer columns are * inert, so their events can't be tabbed to or read out. */ isOnScreen: boolean; events: ReturnType; hourHeight: number; onEventClick?: (event: CalendarEvent) => void; selectedEventId?: string; dragState?: EventDragState; onEventDragPointerDown?: WeekViewGridProps["onEventDragPointerDown"]; resizeState?: EventResizeState; onEventResizePointerDown?: WeekViewGridProps["onEventResizePointerDown"]; onEventChange?: (event: CalendarEvent) => void; onContextMenuOpenChange?: (open: boolean) => void; onColumnPointerDownCapture?: () => void; onColumnPointerDown?: ( e: React.PointerEvent, columnDate: Date, ) => void; onColumnClick?: ( e: React.MouseEvent, columnDate: Date, ) => void; } function renderColumnGhost( positionedEvent: PositionedEvent, hourHeight: number, ) { return ( ); } function DayEventsColumn({ columnDate, label, isOnScreen, events, hourHeight, onEventClick, selectedEventId, dragState, onEventDragPointerDown, resizeState, onEventResizePointerDown, onEventChange, onContextMenuOpenChange, showEventPopover, onEventPopoverExpand, onEventPopoverClose, onPrevWeek, onNextWeek, onColumnPointerDownCapture, onColumnPointerDown, onColumnClick, }: DayEventsColumnProps) { return (

onColumnPointerDown?.(e, columnDate)} onClick={(e) => onColumnClick?.(e, columnDate)} > {events.map((positionedEvent) => { const eventId = positionedEvent.event.id; const isBeingDragged = dragState?.isDragging && dragState.eventId === eventId; if (isBeingDragged) { return renderColumnGhost(positionedEvent, hourHeight); } const isBeingResized = resizeState?.isResizing && resizeState.eventId === eventId; if (isBeingResized) { const { effectiveEdge, currentStartDate, currentEndDate } = resizeState; const isCrossDay = !isSameDay(currentStartDate, currentEndDate); // Determine if this column is the anchor column const isAnchorColumn = (effectiveEdge === "bottom" && isSameDay(columnDate, currentStartDate)) || (effectiveEdge === "top" && isSameDay(columnDate, currentEndDate)); // Check if this column is within the new range at all const colTime = columnDate.getTime(); const inRange = colTime >= currentStartDate.getTime() && colTime <= currentEndDate.getTime(); // Non-anchor columns with original segments: render as ghost // Columns outside new range with original segments: render as ghost if (!isAnchorColumn || !inRange) { return renderColumnGhost(positionedEvent, hourHeight); } // Anchor column rendering let displayStart: Date; let displayEnd: Date; let segmentPosition: "start" | "middle" | "end" | "full"; if (!isCrossDay) { // Same day: show currentStart to currentEnd displayStart = resizeState.currentStart; displayEnd = resizeState.currentEnd; segmentPosition = "full"; } else if (effectiveEdge === "bottom") { // Anchor is start column: show currentStart to end-of-day displayStart = resizeState.currentStart; displayEnd = addDays(startOfDay(columnDate), 1); segmentPosition = "start"; } else { // Anchor is end column: show start-of-day to currentEnd displayStart = startOfDay(columnDate); displayEnd = resizeState.currentEnd; segmentPosition = "end"; } const resizePositioned = { ...positionedEvent, segmentPosition }; return ( {renderColumnGhost(positionedEvent, hourHeight)} ); } return ( ); })}

); } 56:T4c2,"use client"; import { cn } from "@/lib/utils"; import type { WeekViewTimeAxisProps } from "./week-view-types"; /** * Left sidebar displaying hourly time labels using CSS Grid * Uses same grid row structure as main grid for guaranteed alignment * Width matches the timezone/all-day label column (4rem) */ export function WeekViewTimeAxis({ hours, hourHeight, className, }: WeekViewTimeAxisProps) { return ( // Hour labels are visual only: each event's label already reads its time

{hours.map((hourSlot, index) => (

{/* Show label at top of each cell, skip the first row (it would sit on the grid's top edge) */} {index > 0 && ( {hourSlot.label} )}

))}

); } 57:Tf09,"use client"; import { format } from "date-fns"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useNow } from "@/hooks/use-now"; import { useCalendarConfig } from "./calendar-provider"; import type { WeekViewTimeIndicatorProps } from "./week-view-types"; /** * Current time indicator showing time badge and horizontal lines * - Time badge with current time (e.g., "5:48PM", or "17:48" on a 24-hour clock) on the left * - Thick line on today's column * - Thin line on other day columns * Moves on every minute boundary via the shared `useNow` clock. Renders * nothing on the server and during hydration, where the time is unknown, * and outside the visible hours (`dayStartHour` to `dayEndHour`). */ export function WeekViewTimeIndicator({ days, hourHeight, scrollDays, scrollStyle, behindSelection, className, }: WeekViewTimeIndicatorProps) { const currentTime = useNow(); const { dayStartHour, dayEndHour, hourCycle, locale } = useCalendarConfig(); // Check if today is visible in the current week const isTodayVisible = days.some((day) => day.isToday); if (!currentTime || !isTodayVisible) { return null; } // Calculate position based on current time, from the grid's top edge const minutesSinceMidnight = currentTime.getHours() * 60 + currentTime.getMinutes(); const visibleStartMinutes = dayStartHour * 60; if ( minutesSinceMidnight < visibleStartMinutes || minutesSinceMidnight >= dayEndHour * 60 ) { return null; } const topPosition = ((minutesSinceMidnight - visibleStartMinutes) / 60) * hourHeight; // "5:48PM" on a 12-hour clock, "17:48" on a 24-hour clock const formattedTime = hourCycle === 24 ? format(currentTime, "HH:mm", { locale }) : format(currentTime, "h:mma", { locale }).toUpperCase(); const lineDays = scrollDays ?? days; const lineTodayIndex = lineDays.findIndex((d) => d.isToday); const linesContent = (

{lineDays.map((day, index) => ( {index === lineTodayIndex && (

)}

))}

); return (

{/* Time badge - positioned in the time axis area */}

{formattedTime}

{/* Horizontal lines across day columns */} {scrollStyle ? (

{linesContent}

) : ( linesContent )}

); } 58:T2c3e,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { isPrimaryPress, suppressNextClick, usePointerGesture, } from "@/hooks/use-pointer-gesture"; import type { AllDayResizeState, CalendarEvent, PointerGestureStart, } from "@/components/week-view-types"; interface UseAllDayResizeOptions { days: Date[]; dayColumnWidth: number; allDayContainerRef: React.RefObject; events: CalendarEvent[]; onEventChange?: (event: CalendarEvent) => void; onEventClick?: (event: CalendarEvent) => void; } interface UseAllDayResizeReturn { allDayResizeState: AllDayResizeState | null; handleAllDayResizePointerDown: ( e: React.PointerEvent, event: CalendarEvent, edge: "left" | "right" | "move", startColumn: number, endColumn: number, ) => void; } const DRAG_THRESHOLD_PX = 4; function clamp(value: number, min: number, max: number): number { if (value < min) return min; if (value > max) return max; return value; } interface ResizeInfo { eventId: string; event: CalendarEvent; /** Pointer driving the gesture; moves from other pointers are ignored */ pointerId: number; /** "mouse", "pen" or "touch" */ pointerType: string; edge: "left" | "right" | "move"; startClientX: number; isResizing: boolean; originalStartColumn: number; originalEndColumn: number; /** Column index where the gesture started (used for move delta) */ startColumnIndex: number; /** Offset from cursor to event left edge when the gesture started (px) */ cursorOffsetX: number; /** Offset from cursor to event top edge when the gesture started (px) */ cursorOffsetY: number; /** Latest start column, committed to the parent on pointerup */ currentStartColumn: number; /** Latest end column, committed to the parent on pointerup */ currentEndColumn: number; } export function useAllDayResize({ days, dayColumnWidth, allDayContainerRef, events, onEventChange, onEventClick, }: UseAllDayResizeOptions): UseAllDayResizeReturn { const [allDayResizeState, setAllDayResizeState] = useState(null); const { startGesture } = usePointerGesture({ containerRef: allDayContainerRef, }); const resizeRef = useRef(null); const onEventChangeRef = useRef(onEventChange); const onEventClickRef = useRef(onEventClick); const eventsRef = useRef(events); const daysRef = useRef(days); const dayColumnWidthRef = useRef(dayColumnWidth); useEffect(() => { onEventChangeRef.current = onEventChange; }, [onEventChange]); useEffect(() => { onEventClickRef.current = onEventClick; }, [onEventClick]); useEffect(() => { eventsRef.current = events; }, [events]); useEffect(() => { daysRef.current = days; }, [days]); useEffect(() => { dayColumnWidthRef.current = dayColumnWidth; }, [dayColumnWidth]); 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", resize.edge === "move" ? "grabbing" : "col-resize", ); } const container = allDayContainerRef.current; if (!container) return; const rect = container.getBoundingClientRect(); const colWidth = dayColumnWidthRef.current; const currentDays = daysRef.current; const columnIndex = clamp( Math.floor((e.clientX - rect.left) / colWidth), 0, currentDays.length - 1, ); let newStartColumn = resize.originalStartColumn; let newEndColumn = resize.originalEndColumn; if (resize.edge === "move") { const span = resize.originalEndColumn - resize.originalStartColumn; const delta = columnIndex - resize.startColumnIndex; newStartColumn = clamp( resize.originalStartColumn + delta, 0, currentDays.length - 1 - span, ); newEndColumn = newStartColumn + span; } else if (resize.edge === "right") { newEndColumn = Math.max(columnIndex, resize.originalStartColumn); } else { newStartColumn = Math.min(columnIndex, resize.originalEndColumn); } resize.currentStartColumn = newStartColumn; resize.currentEndColumn = newEndColumn; setAllDayResizeState({ eventId: resize.eventId, event: resize.event, originalStartColumn: resize.originalStartColumn, originalEndColumn: resize.originalEndColumn, currentStartColumn: newStartColumn, currentEndColumn: newEndColumn, edge: resize.edge, isResizing: true, ...(resize.edge === "move" ? { clientX: e.clientX, clientY: e.clientY, cursorOffsetX: resize.cursorOffsetX, cursorOffsetY: resize.cursorOffsetY, } : {}), }); }; handlePointerUpRef.current = (e: PointerEvent) => { const resize = resizeRef.current; if (!resize || e.pointerId !== resize.pointerId) return; cleanup(); resizeRef.current = null; setAllDayResizeState(null); // Touch selects on release, after the gesture, rather than on press if (resize.pointerType === "touch") { onEventClickRef.current?.(resize.event); } if (!resize.isResizing) return; // A move swaps the pressed bar for a ghost, so the browser's click // lands on the row and would clear the selection 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; const currentDays = daysRef.current; const newStartDate = currentDays[resize.currentStartColumn]; const newEndDate = currentDays[resize.currentEndColumn]; if (!newStartDate || !newEndDate) return; // Preserve time-of-day from original event const newStart = new Date(newStartDate); newStart.setHours( event.start.getHours(), event.start.getMinutes(), event.start.getSeconds(), event.start.getMilliseconds(), ); const newEnd = new Date(newEndDate); newEnd.setHours( event.end.getHours(), event.end.getMinutes(), event.end.getSeconds(), event.end.getMilliseconds(), ); // Move preserves the original isAllDay flag (duration unchanged). // Resize determines isAllDay by whether the span exceeds 24h. const isMove = resize.edge === "move"; const MS_IN_24H = 24 * 60 * 60 * 1000; const isLongerThan24h = newEnd.getTime() - newStart.getTime() > MS_IN_24H; const isAllDay = isMove ? event.isAllDay === true : isLongerThan24h; onEventChangeRef.current?.({ ...event, start: newStart, end: newEnd, isAllDay, }); }; // The browser took the pointer over (e.g. for a system gesture): drop // the gesture without committing it handlePointerCancelRef.current = (e: PointerEvent) => { const resize = resizeRef.current; if (!resize || e.pointerId !== resize.pointerId) return; cleanup(); resizeRef.current = null; setAllDayResizeState(null); }; }, [allDayContainerRef, cleanup]); const beginResize = useCallback( ( { clientX, pointerId, pointerType }: PointerGestureStart, event: CalendarEvent, edge: "left" | "right" | "move", startColumn: number, endColumn: number, ) => { // Mouse and pen select the event immediately if (pointerType !== "touch") onEventClickRef.current?.(event); // Compute the column under the cursor at the start for move delta const container = allDayContainerRef.current; let startColumnIndex = startColumn; let cursorOffsetX = 0; const cursorOffsetY = 0; if (container) { const rect = container.getBoundingClientRect(); const colWidth = dayColumnWidthRef.current; startColumnIndex = clamp( Math.floor((clientX - rect.left) / colWidth), 0, daysRef.current.length - 1, ); // Compute offset from cursor to the event element's top-left const eventLeft = rect.left + startColumn * colWidth; cursorOffsetX = clientX - eventLeft; } resizeRef.current = { eventId: event.id, event, pointerId, pointerType, edge, startClientX: clientX, isResizing: false, originalStartColumn: startColumn, originalEndColumn: endColumn, startColumnIndex, cursorOffsetX, cursorOffsetY, currentStartColumn: startColumn, currentEndColumn: endColumn, }; setAllDayResizeState({ eventId: event.id, event, originalStartColumn: startColumn, originalEndColumn: endColumn, currentStartColumn: startColumn, currentEndColumn: endColumn, edge, isResizing: false, }); if (handlePointerMoveRef.current) { window.addEventListener("pointermove", handlePointerMoveRef.current); } if (handlePointerUpRef.current) { window.addEventListener("pointerup", handlePointerUpRef.current); } if (handlePointerCancelRef.current) { window.addEventListener( "pointercancel", handlePointerCancelRef.current, ); } }, [allDayContainerRef], ); const handleAllDayResizePointerDown = useCallback( ( e: React.PointerEvent, event: CalendarEvent, edge: "left" | "right" | "move", startColumn: number, endColumn: number, ) => { if (!isPrimaryPress(e)) return; e.stopPropagation(); startGesture(e, (start) => beginResize(start, event, edge, startColumn, endColumn), ); }, [startGesture, beginResize], ); useEffect(() => { return cleanup; }, [cleanup]); return { allDayResizeState, handleAllDayResizePointerDown }; } 59:T391d,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { usePointerGesture, suppressNextClick, } from "@/hooks/use-pointer-gesture"; import { snapToGrid } from "@/lib/event-utils"; import type { CalendarEvent, EventDragState, PointerGestureStart, } from "@/components/week-view-types"; interface UseEventDragOptions { hourHeight: number; scrollContainerRef: React.RefObject; events: CalendarEvent[]; days: Date[]; dayColumnWidth: number; timeAxisWidth: number; /** Minute step the dragged start snaps to */ snapMinutes: number; /** First visible hour: the top of the grid, and the earliest start */ dayStartHour: number; /** Hour the grid ends at: the latest end */ dayEndHour: number; /** Days `onDragNavigate` moves when the cursor is held at a side edge */ edgeNavigationDays: number; onEventChange?: (event: CalendarEvent) => void; onEventClick?: (event: CalendarEvent) => void; onDragNavigate?: (daysDelta: number) => void; } interface UseEventDragReturn { dragState: EventDragState | null; handleEventPointerDown: ( e: React.PointerEvent, event: CalendarEvent, ) => void; } const DRAG_THRESHOLD_PX = 4; const EDGE_ZONE_PX = 40; const EDGE_NAV_DELAY_MS = 500; const EDGE_NAV_REPEAT_MS = 800; const AUTO_SCROLL_ZONE_PX = 60; const AUTO_SCROLL_MAX_SPEED = 12; function addMinutesToDate(date: Date, minutes: number): Date { const result = new Date(date); result.setHours(0, 0, 0, 0); result.setMinutes(minutes); return result; } function clamp(value: number, min: number, max: number): number { if (value < min) return min; if (value > max) return max; return value; } interface DragInfo { eventId: string; event: CalendarEvent; /** Pointer driving the drag; moves from other pointers are ignored */ pointerId: number; /** "mouse", "pen" or "touch" */ pointerType: string; startClientY: number; startClientX: number; offsetWithinEvent: number; offsetWithinEventX: number; isDragging: boolean; durationMinutes: number; /** Latest snapped start, committed to the parent on pointerup */ currentStart: Date; /** Latest snapped end, committed to the parent on pointerup */ currentEnd: Date; } export function useEventDrag({ hourHeight, scrollContainerRef, events, days, dayColumnWidth, timeAxisWidth, snapMinutes, dayStartHour, dayEndHour, edgeNavigationDays, onEventChange, onEventClick, onDragNavigate, }: UseEventDragOptions): UseEventDragReturn { const [dragState, setDragState] = useState(null); const { startGesture } = usePointerGesture({ containerRef: scrollContainerRef, }); const dragRef = useRef(null); const onEventChangeRef = useRef(onEventChange); const onEventClickRef = useRef(onEventClick); const onDragNavigateRef = useRef(onDragNavigate); const eventsRef = useRef(events); const hourHeightRef = useRef(hourHeight); const daysRef = useRef(days); const dayColumnWidthRef = useRef(dayColumnWidth); const timeAxisWidthRef = useRef(timeAxisWidth); const snapMinutesRef = useRef(snapMinutes); const dayStartHourRef = useRef(dayStartHour); const dayEndHourRef = useRef(dayEndHour); const edgeNavigationDaysRef = useRef(edgeNavigationDays); useEffect(() => { onEventChangeRef.current = onEventChange; }, [onEventChange]); useEffect(() => { onEventClickRef.current = onEventClick; }, [onEventClick]); useEffect(() => { onDragNavigateRef.current = onDragNavigate; }, [onDragNavigate]); useEffect(() => { eventsRef.current = events; }, [events]); useEffect(() => { hourHeightRef.current = hourHeight; }, [hourHeight]); useEffect(() => { daysRef.current = days; }, [days]); useEffect(() => { dayColumnWidthRef.current = dayColumnWidth; }, [dayColumnWidth]); useEffect(() => { timeAxisWidthRef.current = timeAxisWidth; }, [timeAxisWidth]); useEffect(() => { snapMinutesRef.current = snapMinutes; }, [snapMinutes]); useEffect(() => { dayStartHourRef.current = dayStartHour; }, [dayStartHour]); useEffect(() => { dayEndHourRef.current = dayEndHour; }, [dayEndHour]); useEffect(() => { edgeNavigationDaysRef.current = edgeNavigationDays; }, [edgeNavigationDays]); // Edge navigation timer refs const edgeNavTimerRef = useRef | null>(null); const edgeNavDirectionRef = useRef(null); // Auto-scroll RAF ref const autoScrollRAFRef = useRef(null); const autoScrollSpeedRef = useRef(0); // Store handlers in refs to break the 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 cancelEdgeNav = useCallback(() => { if (edgeNavTimerRef.current !== null) { clearTimeout(edgeNavTimerRef.current); edgeNavTimerRef.current = null; } edgeNavDirectionRef.current = null; }, []); const cancelAutoScroll = useCallback(() => { if (autoScrollRAFRef.current !== null) { cancelAnimationFrame(autoScrollRAFRef.current); autoScrollRAFRef.current = null; } autoScrollSpeedRef.current = 0; }, []); 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, ); } cancelEdgeNav(); cancelAutoScroll(); }, [cancelEdgeNav, cancelAutoScroll]); // Auto-scroll loop const startAutoScrollLoop = useCallback(() => { if (autoScrollRAFRef.current !== null) return; const tick = () => { const container = scrollContainerRef.current; if (!container) return; const speed = autoScrollSpeedRef.current; if (speed === 0) { autoScrollRAFRef.current = null; return; } container.scrollTop += speed; autoScrollRAFRef.current = requestAnimationFrame(tick); }; autoScrollRAFRef.current = requestAnimationFrame(tick); }, [scrollContainerRef]); const scheduleEdgeNav = useCallback( (direction: number) => { if (edgeNavDirectionRef.current === direction) return; cancelEdgeNav(); edgeNavDirectionRef.current = direction; const fireNav = () => { onDragNavigateRef.current?.(direction); edgeNavTimerRef.current = setTimeout(fireNav, EDGE_NAV_REPEAT_MS); }; edgeNavTimerRef.current = setTimeout(fireNav, EDGE_NAV_DELAY_MS); }, [cancelEdgeNav], ); // Initialize the handlers once (stable references via refs) useEffect(() => { handlePointerMoveRef.current = (e: PointerEvent) => { const drag = dragRef.current; if (!drag || e.pointerId !== drag.pointerId) return; const deltaY = Math.abs(e.clientY - drag.startClientY); const deltaX = Math.abs(e.clientX - drag.startClientX); if ( !drag.isDragging && deltaY < DRAG_THRESHOLD_PX && deltaX < DRAG_THRESHOLD_PX ) return; if (!drag.isDragging) { drag.isDragging = true; } const container = scrollContainerRef.current; if (!container) return; const containerRect = container.getBoundingClientRect(); const scrollTop = container.scrollTop; const absoluteY = e.clientY - containerRect.top + scrollTop - drag.offsetWithinEvent; const absoluteX = e.clientX - containerRect.left - drag.offsetWithinEventX; // The grid's top edge is `dayStartHour`, not midnight const visibleStartMinutes = dayStartHourRef.current * 60; const visibleEndMinutes = dayEndHourRef.current * 60; const rawMinutes = visibleStartMinutes + (absoluteY / hourHeightRef.current) * 60; const snappedStartMinutes = snapToGrid( rawMinutes, snapMinutesRef.current, ); const clampedStart = Math.max( visibleStartMinutes, Math.min(snappedStartMinutes, visibleEndMinutes - drag.durationMinutes), ); // Column detection — based on raw cursor position over the grid const colWidth = dayColumnWidthRef.current; const visibleDays = daysRef.current; const gridLeftEdge = containerRect.left + timeAxisWidthRef.current; const cursorInGrid = e.clientX - gridLeftEdge; const columnIndex = clamp( Math.floor(cursorInGrid / colWidth), 0, visibleDays.length - 1, ); const targetDay = visibleDays[columnIndex]; const currentStart = addMinutesToDate(targetDay, clampedStart); const currentEnd = addMinutesToDate( targetDay, clampedStart + drag.durationMinutes, ); drag.currentStart = currentStart; drag.currentEnd = currentEnd; setDragState({ eventId: drag.eventId, event: drag.event, originalStart: drag.event.start, originalEnd: drag.event.end, currentStart, currentEnd, currentDate: targetDay, isDragging: true, cursorY: absoluteY, cursorX: absoluteX, clientX: e.clientX - drag.offsetWithinEventX, clientY: e.clientY - drag.offsetWithinEvent, }); // Edge-of-view week navigation // Trigger when cursor is within EDGE_ZONE_PX of the grid boundary OR past it const cursorXInGrid = e.clientX - gridLeftEdge; const gridWidth = colWidth * visibleDays.length; if (cursorXInGrid < EDGE_ZONE_PX) { scheduleEdgeNav(-edgeNavigationDaysRef.current); } else if (cursorXInGrid > gridWidth - EDGE_ZONE_PX) { scheduleEdgeNav(edgeNavigationDaysRef.current); } else { cancelEdgeNav(); } // Auto-scroll at top/bottom edges const cursorYInContainer = e.clientY - containerRect.top; const containerHeight = containerRect.height; if (cursorYInContainer < AUTO_SCROLL_ZONE_PX) { const dist = cursorYInContainer; autoScrollSpeedRef.current = -AUTO_SCROLL_MAX_SPEED * (1 - dist / AUTO_SCROLL_ZONE_PX); startAutoScrollLoop(); } else if (cursorYInContainer > containerHeight - AUTO_SCROLL_ZONE_PX) { const dist = containerHeight - cursorYInContainer; autoScrollSpeedRef.current = AUTO_SCROLL_MAX_SPEED * (1 - dist / AUTO_SCROLL_ZONE_PX); startAutoScrollLoop(); } else { cancelAutoScroll(); } }; handlePointerUpRef.current = (e: PointerEvent) => { const drag = dragRef.current; if (!drag || e.pointerId !== drag.pointerId) return; cleanup(); dragRef.current = null; setDragState(null); // Touch selects on release, after the drag, rather than on press if (drag.pointerType === "touch") onEventClickRef.current?.(drag.event); if (!drag.isDragging) return; suppressNextClick(drag.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 === drag.eventId); if (!event) return; onEventChangeRef.current?.({ ...event, start: drag.currentStart, end: drag.currentEnd, }); }; // 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); }; }, [ scrollContainerRef, cleanup, scheduleEdgeNav, cancelEdgeNav, cancelAutoScroll, startAutoScrollLoop, ]); const beginDrag = useCallback( ( { clientX, clientY, pointerId, pointerType, element, }: PointerGestureStart, event: CalendarEvent, ) => { // Mouse and pen select the event immediately if (pointerType !== "touch") onEventClickRef.current?.(event); const container = scrollContainerRef.current; if (!container) return; // Compute offset within the event element const targetRect = element.getBoundingClientRect(); const offsetWithinEvent = clientY - targetRect.top; const offsetWithinEventX = clientX - targetRect.left; const startMinutes = event.start.getHours() * 60 + event.start.getMinutes(); const endMinutes = event.end.getHours() * 60 + event.end.getMinutes(); const durationMinutes = endMinutes - startMinutes; dragRef.current = { eventId: event.id, event, pointerId, pointerType, startClientY: clientY, startClientX: clientX, offsetWithinEvent, offsetWithinEventX, isDragging: false, durationMinutes, currentStart: event.start, currentEnd: event.end, }; setDragState({ eventId: event.id, event, originalStart: event.start, originalEnd: event.end, currentStart: event.start, currentEnd: event.end, currentDate: event.start, isDragging: false, cursorY: 0, cursorX: 0, clientX: 0, clientY: 0, }); if (handlePointerMoveRef.current) { window.addEventListener("pointermove", handlePointerMoveRef.current); } if (handlePointerUpRef.current) { window.addEventListener("pointerup", handlePointerUpRef.current); } if (handlePointerCancelRef.current) { window.addEventListener( "pointercancel", handlePointerCancelRef.current, ); } }, [scrollContainerRef], ); const handleEventPointerDown = useCallback( (e: React.PointerEvent, event: CalendarEvent) => { startGesture(e, (start) => beginDrag(start, event)); }, [startGesture, beginDrag], ); // Cleanup on unmount useEffect(() => { return cleanup; }, [cleanup]); return { dragState, handleEventPointerDown }; } 5a:T454a,"use client"; import { isSameDay, startOfDay } from "date-fns"; import { useCallback, useEffect, useRef, useState } from "react"; import { isPrimaryPress, suppressNextClick, usePointerGesture, } from "@/hooks/use-pointer-gesture"; import { snapToGrid } from "@/lib/event-utils"; import type { CalendarEvent, EventResizeState, PointerGestureStart, } from "@/components/week-view-types"; interface UseEventResizeOptions { hourHeight: number; scrollContainerRef: React.RefObject; events: CalendarEvent[]; days: Date[]; dayColumnWidth: number; timeAxisWidth: number; /** Minute step the dragged edge snaps to, and the shortest duration */ snapMinutes: number; /** First visible hour: the top of the grid, and the earliest start */ dayStartHour: number; /** Hour the grid ends at: the latest end */ dayEndHour: number; /** Days `onResizeNavigate` moves when the cursor is held at a side edge */ edgeNavigationDays: number; onEventChange?: (event: CalendarEvent) => void; onEventClick?: (event: CalendarEvent) => void; onResizeNavigate?: (daysDelta: number) => void; } interface UseEventResizeReturn { resizeState: EventResizeState | null; handleResizePointerDown: ( e: React.PointerEvent, event: CalendarEvent, edge: "top" | "bottom", ) => void; } const DRAG_THRESHOLD_PX = 4; const AUTO_SCROLL_ZONE_PX = 60; const AUTO_SCROLL_MAX_SPEED = 12; const EDGE_ZONE_PX = 40; const EDGE_NAV_DELAY_MS = 500; const EDGE_NAV_REPEAT_MS = 800; function addMinutesToDate(date: Date, minutes: number): Date { const result = new Date(date); result.setHours(0, 0, 0, 0); result.setMinutes(minutes); return result; } function clamp(value: number, min: number, max: number): number { if (value < min) return min; if (value > max) return max; return value; } 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: "top" | "bottom"; startClientY: number; isResizing: boolean; originalStartMinutes: number; originalEndMinutes: number; originalStartDate: Date; originalEndDate: Date; /** Latest snapped start, committed to the parent on pointerup */ currentStart: Date; /** Latest snapped end, committed to the parent on pointerup */ currentEnd: Date; } export function useEventResize({ hourHeight, scrollContainerRef, events, days, dayColumnWidth, timeAxisWidth, snapMinutes, dayStartHour, dayEndHour, edgeNavigationDays, onEventChange, onEventClick, onResizeNavigate, }: UseEventResizeOptions): UseEventResizeReturn { const [resizeState, setResizeState] = useState(null); const { startGesture } = usePointerGesture({ containerRef: scrollContainerRef, }); const resizeRef = useRef(null); const onEventChangeRef = useRef(onEventChange); const onEventClickRef = useRef(onEventClick); const onResizeNavigateRef = useRef(onResizeNavigate); const eventsRef = useRef(events); const hourHeightRef = useRef(hourHeight); const daysRef = useRef(days); const dayColumnWidthRef = useRef(dayColumnWidth); const timeAxisWidthRef = useRef(timeAxisWidth); const snapMinutesRef = useRef(snapMinutes); const dayStartHourRef = useRef(dayStartHour); const dayEndHourRef = useRef(dayEndHour); const edgeNavigationDaysRef = useRef(edgeNavigationDays); useEffect(() => { onEventChangeRef.current = onEventChange; }, [onEventChange]); useEffect(() => { onEventClickRef.current = onEventClick; }, [onEventClick]); useEffect(() => { onResizeNavigateRef.current = onResizeNavigate; }, [onResizeNavigate]); useEffect(() => { eventsRef.current = events; }, [events]); useEffect(() => { hourHeightRef.current = hourHeight; }, [hourHeight]); useEffect(() => { daysRef.current = days; }, [days]); useEffect(() => { dayColumnWidthRef.current = dayColumnWidth; }, [dayColumnWidth]); useEffect(() => { timeAxisWidthRef.current = timeAxisWidth; }, [timeAxisWidth]); useEffect(() => { snapMinutesRef.current = snapMinutes; }, [snapMinutes]); useEffect(() => { dayStartHourRef.current = dayStartHour; }, [dayStartHour]); useEffect(() => { dayEndHourRef.current = dayEndHour; }, [dayEndHour]); useEffect(() => { edgeNavigationDaysRef.current = edgeNavigationDays; }, [edgeNavigationDays]); const autoScrollRAFRef = useRef(null); const autoScrollSpeedRef = useRef(0); const edgeNavTimerRef = useRef | null>(null); const edgeNavDirectionRef = useRef(null); 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 cancelAutoScroll = useCallback(() => { if (autoScrollRAFRef.current !== null) { cancelAnimationFrame(autoScrollRAFRef.current); autoScrollRAFRef.current = null; } autoScrollSpeedRef.current = 0; }, []); const cancelEdgeNav = useCallback(() => { if (edgeNavTimerRef.current !== null) { clearTimeout(edgeNavTimerRef.current); edgeNavTimerRef.current = null; } edgeNavDirectionRef.current = null; }, []); const scheduleEdgeNav = useCallback( (direction: number) => { if (edgeNavDirectionRef.current === direction) return; cancelEdgeNav(); edgeNavDirectionRef.current = direction; const fireNav = () => { onResizeNavigateRef.current?.(direction); edgeNavTimerRef.current = setTimeout(fireNav, EDGE_NAV_REPEAT_MS); }; edgeNavTimerRef.current = setTimeout(fireNav, EDGE_NAV_DELAY_MS); }, [cancelEdgeNav], ); 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, ); } cancelAutoScroll(); cancelEdgeNav(); }, [cancelAutoScroll, cancelEdgeNav]); const startAutoScrollLoop = useCallback(() => { if (autoScrollRAFRef.current !== null) return; const tick = () => { const container = scrollContainerRef.current; if (!container) return; const speed = autoScrollSpeedRef.current; if (speed === 0) { autoScrollRAFRef.current = null; return; } container.scrollTop += speed; autoScrollRAFRef.current = requestAnimationFrame(tick); }; autoScrollRAFRef.current = requestAnimationFrame(tick); }, [scrollContainerRef]); useEffect(() => { handlePointerMoveRef.current = (e: PointerEvent) => { const resize = resizeRef.current; if (!resize || e.pointerId !== resize.pointerId) return; const deltaY = Math.abs(e.clientY - resize.startClientY); if (!resize.isResizing && deltaY < DRAG_THRESHOLD_PX) return; if (!resize.isResizing) { resize.isResizing = true; } const container = scrollContainerRef.current; if (!container) return; const containerRect = container.getBoundingClientRect(); const scrollTop = container.scrollTop; const absoluteY = e.clientY - containerRect.top + scrollTop; // The grid's top edge is `dayStartHour`, not midnight const visibleStartMinutes = dayStartHourRef.current * 60; const visibleEndMinutes = dayEndHourRef.current * 60; const rawMinutes = visibleStartMinutes + (absoluteY / hourHeightRef.current) * 60; const snapStep = snapMinutesRef.current; const snappedMinutes = snapToGrid(rawMinutes, snapStep); // Shortest event a resize can make: one snap step const minDurationMinutes = snapStep; let newStartMinutes = resize.originalStartMinutes; let newEndMinutes = resize.originalEndMinutes; let startDate = resize.originalStartDate; let endDate = resize.originalEndDate; // Column detection (shared for both edges) const colWidth = dayColumnWidthRef.current; const visibleDays = daysRef.current; const gridLeftEdge = containerRect.left + timeAxisWidthRef.current; const cursorInGrid = e.clientX - gridLeftEdge; const columnIndex = clamp( Math.floor(cursorInGrid / colWidth), 0, visibleDays.length - 1, ); const targetDay = visibleDays[columnIndex]; // Unified anchor model: anchor is the opposite end of the grabbed edge const anchorDate = resize.edge === "bottom" ? resize.originalStartDate : resize.originalEndDate; const anchorMinutes = resize.edge === "bottom" ? resize.originalStartMinutes : resize.originalEndMinutes; const cursorTimestamp = targetDay.getTime() + snappedMinutes * 60000; const anchorTimestamp = anchorDate.getTime() + anchorMinutes * 60000; let effectiveEdge: "top" | "bottom"; if (cursorTimestamp > anchorTimestamp) { // Cursor is after anchor → effective bottom effectiveEdge = "bottom"; startDate = anchorDate; newStartMinutes = anchorMinutes; endDate = targetDay; newEndMinutes = clamp( snappedMinutes, visibleStartMinutes, visibleEndMinutes, ); // Cross-day edge case: cursor at minute 0 on day right after anchor → treat as end-of-anchor-day if (!isSameDay(targetDay, anchorDate)) { const dayAfterAnchor = new Date(anchorDate); dayAfterAnchor.setDate(dayAfterAnchor.getDate() + 1); dayAfterAnchor.setHours(0, 0, 0, 0); if (isSameDay(targetDay, dayAfterAnchor) && snappedMinutes === 0) { newEndMinutes = 1440; endDate = anchorDate; } } // Same-day: enforce min duration if (isSameDay(startDate, endDate)) { newEndMinutes = clamp( newEndMinutes, anchorMinutes + minDurationMinutes, 1440, ); } } else if (cursorTimestamp < anchorTimestamp) { // Cursor is before anchor → effective top effectiveEdge = "top"; endDate = anchorDate; newEndMinutes = anchorMinutes; startDate = targetDay; newStartMinutes = clamp( snappedMinutes, visibleStartMinutes, visibleEndMinutes, ); // Cross-day edge case: cursor at minute 1440 on day right before anchor → treat as start-of-anchor-day if (!isSameDay(targetDay, anchorDate)) { const dayBeforeAnchor = new Date(anchorDate); dayBeforeAnchor.setDate(dayBeforeAnchor.getDate() - 1); dayBeforeAnchor.setHours(0, 0, 0, 0); if (isSameDay(targetDay, dayBeforeAnchor) && snappedMinutes >= 1440) { newStartMinutes = 0; startDate = anchorDate; } } // Same-day: enforce min duration if (isSameDay(startDate, endDate)) { newStartMinutes = clamp( newStartMinutes, 0, anchorMinutes - minDurationMinutes, ); } } else { // Cursor at anchor → keep minimum duration in original edge direction (no flip) effectiveEdge = resize.edge; if (resize.edge === "bottom") { startDate = anchorDate; newStartMinutes = anchorMinutes; endDate = anchorDate; newEndMinutes = anchorMinutes + minDurationMinutes; } else { endDate = anchorDate; newEndMinutes = anchorMinutes; startDate = anchorDate; newStartMinutes = anchorMinutes - minDurationMinutes; } } const currentStart = addMinutesToDate(startDate, newStartMinutes); const currentEnd = addMinutesToDate(endDate, newEndMinutes); resize.currentStart = currentStart; resize.currentEnd = currentEnd; setResizeState({ eventId: resize.eventId, event: resize.event, originalStart: resize.event.start, originalEnd: resize.event.end, currentStart, currentEnd, edge: resize.edge, effectiveEdge, isResizing: true, currentEndDate: endDate, currentStartDate: startDate, }); // Auto-scroll at top/bottom edges const cursorYInContainer = e.clientY - containerRect.top; const containerHeight = containerRect.height; if (cursorYInContainer < AUTO_SCROLL_ZONE_PX) { const dist = cursorYInContainer; autoScrollSpeedRef.current = -AUTO_SCROLL_MAX_SPEED * (1 - dist / AUTO_SCROLL_ZONE_PX); startAutoScrollLoop(); } else if (cursorYInContainer > containerHeight - AUTO_SCROLL_ZONE_PX) { const dist = containerHeight - cursorYInContainer; autoScrollSpeedRef.current = AUTO_SCROLL_MAX_SPEED * (1 - dist / AUTO_SCROLL_ZONE_PX); startAutoScrollLoop(); } else { cancelAutoScroll(); } // Edge-of-view week navigation const cursorXInGrid = e.clientX - gridLeftEdge; const gridWidth = colWidth * visibleDays.length; if (cursorXInGrid < EDGE_ZONE_PX) { scheduleEdgeNav(-edgeNavigationDaysRef.current); } else if (cursorXInGrid > gridWidth - EDGE_ZONE_PX) { scheduleEdgeNav(edgeNavigationDaysRef.current); } else { cancelEdgeNav(); } }; handlePointerUpRef.current = (e: PointerEvent) => { const resize = resizeRef.current; if (!resize || e.pointerId !== resize.pointerId) return; cleanup(); resizeRef.current = null; setResizeState(null); // Touch selects on release, after the resize, rather than on press if (resize.pointerType === "touch") { onEventClickRef.current?.(resize.event); } 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; const MS_IN_24H = 24 * 60 * 60 * 1000; const isLongerThan24h = resize.currentEnd.getTime() - resize.currentStart.getTime() > MS_IN_24H; onEventChangeRef.current?.({ ...event, start: resize.currentStart, end: resize.currentEnd, isAllDay: isLongerThan24h, }); }; // 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); }; }, [ scrollContainerRef, cleanup, cancelAutoScroll, startAutoScrollLoop, scheduleEdgeNav, cancelEdgeNav, ]); const beginResize = useCallback( ( { clientY, pointerId, pointerType }: PointerGestureStart, event: CalendarEvent, edge: "top" | "bottom", ) => { // Mouse and pen select the event immediately if (pointerType !== "touch") onEventClickRef.current?.(event); const originalStartMinutes = event.start.getHours() * 60 + event.start.getMinutes(); const originalEndMinutes = event.end.getHours() * 60 + event.end.getMinutes(); const originalStartDate = startOfDay(event.start); const originalEndDate = startOfDay(event.end); resizeRef.current = { eventId: event.id, event, pointerId, pointerType, edge, startClientY: clientY, isResizing: false, originalStartMinutes, originalEndMinutes, originalStartDate, originalEndDate, currentStart: event.start, currentEnd: event.end, }; setResizeState({ eventId: event.id, event, originalStart: event.start, originalEnd: event.end, currentStart: event.start, currentEnd: event.end, edge, effectiveEdge: edge, isResizing: false, currentEndDate: originalEndDate, currentStartDate: originalStartDate, }); 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: "top" | "bottom", ) => { if (!isPrimaryPress(e)) return; e.stopPropagation(); startGesture(e, (start) => beginResize(start, event, edge)); }, [startGesture, beginResize], ); useEffect(() => { return cleanup; }, [cleanup]); return { resizeState, handleResizePointerDown }; } 5b:T123b,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { usePrefersReducedMotion } from "@/hooks/use-media-query"; interface UseHorizontalScrollOptions { containerRef: React.RefObject; dayColumnWidth: number; onNavigate: (daysDelta: number) => void; disabled?: boolean; } interface UseHorizontalScrollReturn { scrollOffset: number; slideOffset: number; isScrolling: boolean; isAnimating: boolean; triggerSlideAnimation: (daysDelta: number) => void; } const SCROLL_END_DEBOUNCE_MS = 150; const SNAP_ANIMATION_MS = 200; export function useHorizontalScroll({ containerRef, dayColumnWidth, onNavigate, disabled, }: UseHorizontalScrollOptions): UseHorizontalScrollReturn { 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 (dayColumnWidth <= 0) return; const daysDelta = Math.round(offset / dayColumnWidth); if (prefersReducedMotion) { if (daysDelta !== 0) onNavigateRef.current(-daysDelta); setScrollOffset(0); setIsScrolling(false); accumulatedDelta.current = 0; return; } // If scroll distance < half a day-column width, snap back if (daysDelta === 0) { setIsAnimating(true); setScrollOffset(0); setTimeout(() => { setIsAnimating(false); setIsScrolling(false); }, SNAP_ANIMATION_MS); return; } // Snap to exact day boundary then navigate const targetOffset = daysDelta * dayColumnWidth; setIsAnimating(true); setScrollOffset(targetOffset); setTimeout(() => { onNavigateRef.current(-daysDelta); setScrollOffset(0); setIsAnimating(false); setIsScrolling(false); accumulatedDelta.current = 0; }, SNAP_ANIMATION_MS); }, [dayColumnWidth, prefersReducedMotion], ); // Programmatic slide animation for button/keyboard navigation // Uses slideOffset (not scrollOffset) so dynamicBuffer isn't affected // Does NOT call onNavigate — caller is responsible for having already changed the date const triggerSlideAnimation = useCallback( (daysDelta: number) => { if (dayColumnWidth <= 0 || isAnimating || isScrolling) return; if (prefersReducedMotion) return; // Start from the opposite direction to create slide effect const startOffset = daysDelta * dayColumnWidth; setSlideOffset(startOffset); // Force a reflow then animate to 0 requestAnimationFrame(() => { requestAnimationFrame(() => { setIsAnimating(true); setSlideOffset(0); setTimeout(() => { setIsAnimating(false); }, SNAP_ANIMATION_MS); }); }); }, [dayColumnWidth, isAnimating, isScrolling, prefersReducedMotion], ); useEffect(() => { const container = containerRef.current; if (!container) return; const handleWheel = (e: WheelEvent) => { if (disabled) return; // Only handle horizontal-dominant scrolls if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return; e.preventDefault(); setIsScrolling(true); // Negate deltaX: scroll right (positive deltaX) = move calendar left = navigate forward accumulatedDelta.current += -e.deltaX; 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, }; } 5c: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); } 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"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/time-grid.tsx","content":"$52","type":"registry:component"},{"path":"src/components/calendar-day-headers.tsx","content":"$53","type":"registry:component"},{"path":"src/components/week-view-all-day-row.tsx","content":"$54","type":"registry:component"},{"path":"src/components/week-view-grid.tsx","content":"$55","type":"registry:component"},{"path":"src/components/week-view-time-axis.tsx","content":"$56","type":"registry:component"},{"path":"src/components/week-view-time-indicator.tsx","content":"$57","type":"registry:component"},{"path":"src/hooks/use-all-day-resize.ts","content":"$58","type":"registry:hook"},{"path":"src/hooks/use-event-drag.ts","content":"$59","type":"registry:hook"},{"path":"src/hooks/use-event-resize.ts","content":"$5a","type":"registry:hook"},{"path":"src/hooks/use-horizontal-scroll.ts","content":"$5b","type":"registry:hook"},{"path":"src/hooks/use-media-query.ts","content":"$5c","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]