@flipdish/ui-library 0.21.0 → 0.22.0

package/dist/components/organisms/Calendar/index.js

@@ -1,519 +1,19 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronLeft, ChevronRight, Copy01, Trash01, Edit01, Calendar as Calendar$2, Clock, BellRinging01 } from '@flipdish/ui-icons';
-import { Avatar, AvatarAddButton } from '@flipdish/ui-library/components/atoms/Avatar';
-import { Button } from '@flipdish/ui-library/components/atoms/Button';
-import { ButtonUtility } from '@flipdish/ui-library/components/atoms/UtilityButton';
 import { cx } from '@flipdish/ui-library/utilities/cx';
-import { useResolvedTestId, TestIdProvider, useTestIdPrefix, joinTestId, slugifyTestId } from '@flipdish/ui-library/utilities/testIdUtils';
-import { getLocalTimeZone, today, now, parseAbsoluteToLocal, startOfWeek, startOfMonth, endOfMonth, endOfWeek, toCalendarDate, isSameMonth, toZoned, isSameDay, isToday, CalendarDateTime, CalendarDate } from '@internationalized/date';
+import { useResolvedTestId, TestIdProvider } from '@flipdish/ui-library/utilities/testIdUtils';
+import { getLocalTimeZone, today, now, parseAbsoluteToLocal, startOfWeek } from '@internationalized/date';
 import { useLocale, useDateFormatter } from '@react-aria/i18n';
-import { useMemo, useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
-import { Calendar as Calendar$1, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody } from 'react-aria-components';
-import { CalendarCell } from '../DatePicker/components/cell.js';
-import { CalendarColumnHeader } from './components/calendar-column-header.js';
-import { CalendarDwViewCell } from './components/calendar-dw-view-cell.js';
-import { CalendarDwViewEvent } from './components/calendar-dw-view-event.js';
+import { useMemo, useState, useEffect } from 'react';
+import { DayView } from './components/calendar-day-view.js';
 import { CalendarHeader } from './components/calendar-header.js';
-import { CalendarMonthViewCell } from './components/calendar-month-view-cell.js';
-import { CalendarMonthViewEvent } from './components/calendar-month-view-event.js';
-import { CalendarRowLabel } from './components/calendar-row-label.js';
-import { CalendarTimeMarker } from './components/calendar-time-marker.js';
+import { MonthView } from './components/calendar-month-view.js';
+import { WeekView } from './components/calendar-week-view.js';
 
-const SLOT_HEIGHT = 48;
 const viewOptions = [
     { value: 'day', label: 'Day view', addon: '⌘D' },
     { value: 'week', label: 'Week view', addon: '⌘W' },
     { value: 'month', label: 'Month view', addon: '⌘M' },
 ];
-const getStartOfDay = (date, timeZone) => {
-    const zoned = date instanceof CalendarDate ? toZoned(date, timeZone) : date;
-    return zoned.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
-};
-const getEndOfDay = (date, timeZone) => {
-    const zoned = date instanceof CalendarDate ? toZoned(date, timeZone) : date;
-    return zoned.set({ hour: 23, minute: 59, second: 59, millisecond: 999 });
-};
-const getDaysInVisibleMonthGrid = (anchorDate, locale) => {
-    const monthStart = startOfMonth(anchorDate);
-    const monthEnd = endOfMonth(anchorDate);
-    const weekStart = startOfWeek(monthStart, locale);
-    const weekEnd = endOfWeek(monthEnd, locale);
-    const days = [];
-    let day = weekStart;
-    while (day.compare(weekEnd) <= 0) {
-        days.push(day);
-        day = day.add({ days: 1 });
-    }
-    return days;
-};
-const getEventsForDay = (allEvents, targetDate, timeZone) => {
-    const dayStart = getStartOfDay(targetDate, timeZone);
-    const dayEnd = getEndOfDay(targetDate, timeZone);
-    return allEvents
-        .filter((event) => {
-        // Check if event interval overlaps with the day interval
-        return event.start.compare(dayEnd) < 0 && event.end.compare(dayStart) > 0;
-    })
-        .sort((a, b) => a.start.compare(b.start));
-};
-const PositionedEvent = ({ event, dayStart, timeZone, slotHeight, overlapIndex, setSelectedDate, timeFormatter }) => {
-    const prefix = useTestIdPrefix();
-    const eventTestId = prefix ? joinTestId(prefix, `event-${slugifyTestId(event.id)}`) : undefined;
-    const formatTime = (dateTime) => timeFormatter.format(dateTime.toDate());
-    const startZoned = event.start;
-    const endZoned = event.end;
-    // Clamp event start/end times to the visible day boundaries for height calculation
-    const dayEnd = getEndOfDay(dayStart, timeZone); // Calculate dayEnd based on dayStart
-    const clampedStart = startZoned.compare(dayStart) < 0 ? dayStart : startZoned;
-    const clampedEnd = endZoned.compare(dayEnd) > 0 ? dayEnd : endZoned;
-    const startMinutes = clampedStart.hour * 60 + clampedStart.minute;
-    const endMinutes = clampedEnd.hour * 60 + clampedEnd.minute;
-    const durationMinutes = Math.max(15, endMinutes - startMinutes);
-    // Position based on 30-min slots (slotHeight = 24px)
-    const top = (startMinutes / 30) * slotHeight;
-    const height = Math.max(slotHeight / 2, (durationMinutes / 30) * slotHeight); // Min height 15min
-    // Basic overlap handling - simple horizontal offset
-    // const horizontalOffset = overlapIndex * 10;
-    const horizontalOffset = 0;
-    const displayTime = durationMinutes > 30;
-    const supportingText = displayTime ? formatTime(startZoned) : undefined;
-    return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: This is a static element that is used to position the event
-    // biome-ignore lint/a11y/useKeyWithClickEvents: This is a static element that is used to position the event
-    jsx("div", { className: "absolute w-full px-1.5 py-1.5", style: {
-            top: `${top}px`,
-            height: `${height}px`,
-            left: `${horizontalOffset}px`,
-            zIndex: overlapIndex,
-        }, onClick: () => setSelectedDate(toCalendarDate(startZoned)), children: jsx(CalendarDwViewEvent, { label: event.title, supportingText: supportingText, color: event.color, withDot: event.dot, "data-testid": eventTestId }) }, event.id));
-};
-const MonthView = ({ currentMonthDate, selectedDate, zonedEvents, locale, timeZone, setSelectedDate, fullDateFormatter, shortWeekdayFormatter, timeFormatter, // Needed for formatTime inside
-className, }) => {
-    const prefix = useTestIdPrefix();
-    const eventTestId = (eventId) => (prefix ? joinTestId(prefix, `event-${slugifyTestId(eventId)}`) : undefined);
-    const monthStart = startOfMonth(currentMonthDate);
-    const monthEnd = endOfMonth(currentMonthDate);
-    const weekStart = startOfWeek(monthStart, locale);
-    const weekEnd = endOfWeek(monthEnd, locale);
-    const formatTimeForMonth = (dateTime) => timeFormatter.format(dateTime.toDate());
-    const days = useMemo(() => getDaysInVisibleMonthGrid(currentMonthDate, locale), [currentMonthDate, locale]);
-    const weekdays = useMemo(() => {
-        const firstDay = startOfWeek(today(timeZone), locale);
-        return Array.from({ length: 7 }).map((_, i) => shortWeekdayFormatter.format(firstDay.add({ days: i }).toDate(timeZone)));
-    }, [locale, timeZone, shortWeekdayFormatter]); // Dependencies are passed in
-    const visibleEvents = zonedEvents.filter((event) => {
-        const eventStartDay = toCalendarDate(event.start);
-        const eventEndDay = toCalendarDate(event.end);
-        return eventStartDay.compare(weekEnd) <= 0 && eventEndDay.compare(weekStart) >= 0;
-    });
-    // Pre-calculate events for each day in the visible grid
-    const eventsByDay = useMemo(() => {
-        const map = new Map();
-        days.forEach((day) => {
-            const dateKey = day.toString();
-            const dayEvents = getEventsForDay(visibleEvents, day, timeZone);
-            map.set(dateKey, dayEvents);
-        });
-        return map;
-    }, [days, visibleEvents, timeZone]); // Dependencies: days array, visible events, timezone
-    const MAX_EVENTS_PER_CELL = 3;
-    const todayCalDate = today(timeZone);
-    const targetDateForFooter = selectedDate || (isSameMonth(currentMonthDate, todayCalDate) ? todayCalDate : null);
-    let eventsForFooter = [];
-    if (targetDateForFooter) {
-        const targetZoned = toZoned(targetDateForFooter, timeZone);
-        const targetZonedStart = getStartOfDay(targetZoned, timeZone);
-        const targetZonedEnd = getEndOfDay(targetZoned, timeZone);
-        eventsForFooter = zonedEvents
-            .filter((event) => {
-            const eventStartDay = toCalendarDate(event.start);
-            const eventEndDay = toCalendarDate(event.end);
-            return (isSameDay(eventStartDay, targetDateForFooter) ||
-                isSameDay(eventEndDay, targetDateForFooter) ||
-                (event.start.compare(targetZonedEnd) < 0 && event.end.compare(targetZonedStart) > 0));
-        })
-            .sort((a, b) => a.start.compare(b.start));
-    }
-    /**
-     * Calculates how many days an event should visually span from a given start date.
-     *
-     * Multi-day events are rendered as a single element that spans multiple cells.
-     * To avoid duplicate rendering:
-     * - Events render only on their start day
-     * - Multi-week events re-render at the start of each new week they span
-     *
-     * @returns Number of days to span, or null if event should not render on this day
-     */
-    const calculateEventSpan = useCallback((event, currentDate) => {
-        const eventStartDay = toCalendarDate(event.start);
-        const eventEndDay = toCalendarDate(event.end);
-        const startsOnThisDay = isSameDay(currentDate, eventStartDay);
-        // Determine if we should render this event on the current date
-        if (!startsOnThisDay && eventStartDay.compare(currentDate) < 0) {
-            // Event started on a previous day
-            const currentDayIndex = days.findIndex((d) => isSameDay(d, currentDate));
-            const weekStartIndex = Math.floor(currentDayIndex / 7) * 7;
-            const weekStartDate = days[weekStartIndex];
-            if (!weekStartDate)
-                return null;
-            const isFirstDayOfWeek = isSameDay(currentDate, weekStartDate);
-            // Only render at week boundaries for multi-week events
-            if (!isFirstDayOfWeek) {
-                return null; // Already rendered earlier in this week
-            }
-        }
-        // Calculate span: count days from current date until event ends or week ends
-        const currentDayIndex = days.findIndex((d) => isSameDay(d, currentDate));
-        const weekEndIndex = Math.floor(currentDayIndex / 7) * 7 + 6;
-        let spanDays = 1;
-        let checkDay = currentDate.add({ days: 1 });
-        let checkDayIndex = currentDayIndex + 1;
-        while (checkDayIndex <= weekEndIndex && checkDay.compare(eventEndDay) <= 0) {
-            spanDays++;
-            checkDay = checkDay.add({ days: 1 });
-            checkDayIndex++;
-        }
-        return spanDays;
-    }, [days]);
-    /**
-     * Creates an optimized layout for multi-day events using a row-packing algorithm.
-     *
-     * Key concepts:
-     * 1. Each event is assigned to a "row" (vertical position within a day cell)
-     * 2. Events spanning multiple days create invisible "placeholder" cells to reserve space
-     * 3. Row assignment uses a greedy algorithm to minimize wasted vertical space
-     * 4. Multi-week events can use different rows in each week for optimal packing
-     *
-     * Example: If Event A (Mon-Wed) is in row 0, Event B (Thu-Fri) can also use row 0
-     * because they don't overlap, preventing wasted space.
-     */
-    const eventRenderMap = useMemo(() => {
-        const renderMap = new Map();
-        // Initialize empty arrays for each day
-        // biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
-        days.forEach((day) => renderMap.set(day.toString(), []));
-        // Tracking state for the algorithm
-        const eventRowAssignments = new Map(); // eventId -> row number
-        const rowOccupancyByDay = new Map(); // dateKey -> [row0: Set<eventId>, row1: Set<eventId>, ...]
-        // biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
-        days.forEach((day) => rowOccupancyByDay.set(day.toString(), []));
-        // Checks if an event is starting at a week boundary (for multi-week events)
-        const isWeekBoundaryStart = (dayIndex, eventStartDay, currentDay) => {
-            const startsOnCurrentDay = isSameDay(currentDay, eventStartDay);
-            if (startsOnCurrentDay)
-                return false;
-            const weekStartIndex = Math.floor(dayIndex / 7) * 7;
-            const weekStartDate = days[weekStartIndex];
-            if (!weekStartDate)
-                return false;
-            return isSameDay(currentDay, weekStartDate);
-        };
-        // Finds the first available row for an event across all days it spans
-        const findAvailableRow = (startDayIndex, span) => {
-            let row = 0;
-            while (true) {
-                let isAvailable = true;
-                // Check if this row is free for all days in the span
-                for (let offset = 0; offset < span; offset++) {
-                    const dayIndex = startDayIndex + offset;
-                    const day = days[dayIndex];
-                    if (!day)
-                        break;
-                    const dayKey = day.toString();
-                    const occupancy = rowOccupancyByDay.get(dayKey);
-                    if ((occupancy?.[row]?.size ?? 0) > 0) {
-                        isAvailable = false;
-                        break;
-                    }
-                }
-                if (isAvailable)
-                    return row;
-                row++;
-            }
-        };
-        // Marks a row as occupied for all days an event spans
-        const markRowAsOccupied = (startDayIndex, span, row, eventId) => {
-            for (let offset = 0; offset < span; offset++) {
-                const dayIndex = startDayIndex + offset;
-                const day = days[dayIndex];
-                if (!day)
-                    break;
-                const dayKey = day.toString();
-                const occupancy = rowOccupancyByDay.get(dayKey);
-                if (!occupancy)
-                    break;
-                let cell = occupancy[row];
-                if (!cell) {
-                    cell = new Set();
-                    occupancy[row] = cell;
-                }
-                cell.add(eventId);
-            }
-        };
-        // Main logic: Process each day and assign rows to events
-        days.forEach((day, dayIndex) => {
-            const dateKey = day.toString();
-            const eventsOnThisDay = eventsByDay.get(dateKey) || [];
-            eventsOnThisDay.forEach((event) => {
-                const span = calculateEventSpan(event, day);
-                if (span === null)
-                    return; // Event doesn't render on this day
-                const eventStartDay = toCalendarDate(event.start);
-                const isNewWeekSegment = isWeekBoundaryStart(dayIndex, eventStartDay, day);
-                const hasExistingRow = eventRowAssignments.has(event.id);
-                // Determine row: reuse existing row within same week, or find new row for new week segments
-                let row;
-                if (hasExistingRow && !isNewWeekSegment) {
-                    // biome-ignore lint/style/noNonNullAssertion: guarded by hasExistingRow (eventRowAssignments.has(event.id)) above
-                    row = eventRowAssignments.get(event.id);
-                }
-                else {
-                    row = findAvailableRow(dayIndex, span);
-                    eventRowAssignments.set(event.id, row);
-                }
-                // Mark occupancy and add event cell
-                markRowAsOccupied(dayIndex, span, row, event.id);
-                renderMap.get(dateKey)?.push({ event, span, isPlaceholder: false, row });
-                // Add invisible placeholder cells for subsequent days
-                for (let offset = 1; offset < span; offset++) {
-                    const nextDayIndex = dayIndex + offset;
-                    const nextDay = days[nextDayIndex];
-                    if (!nextDay)
-                        break;
-                    const nextDayKey = nextDay.toString();
-                    renderMap.get(nextDayKey)?.push({ event, span: 0, isPlaceholder: true, row });
-                }
-            });
-        });
-        // Sort events by row for consistent rendering order
-        // biome-ignore lint/suspicious/useIterableCallbackReturn: This is a side effect
-        renderMap.forEach((events) => events.sort((a, b) => a.row - b.row));
-        return renderMap;
-    }, [calculateEventSpan, days, eventsByDay]);
-    return (jsxs("div", { className: cx('flex flex-1 flex-col', className), children: [jsx("div", { className: "grid grid-cols-7", children: weekdays.map((weekday, index) => (
-                // biome-ignore lint/suspicious/noArrayIndexKey: This is a key for the column header
-                jsx(CalendarColumnHeader, { weekDay: weekday, className: "before:border-b" }, index))) }), jsx("div", { className: cx('grid flex-1 grid-cols-7', 
-                // 6 rows for >35 days (6 weeks), 5 rows for >28 days (5 weeks), 4 rows for <=28 days (4 weeks)
-                days.length > 35 ? 'grid-rows-6' : days.length > 28 ? 'grid-rows-5' : 'grid-rows-4'), children: days.map((date, index) => {
-                    const dateKey = date.toString();
-                    const isCurrentMonthFlag = isSameMonth(date, currentMonthDate);
-                    const isTodayFlag = isToday(date, timeZone);
-                    const isSelectedFlag = selectedDate ? isSameDay(date, selectedDate) : false;
-                    // Determine if it's the last row based on the number of weeks
-                    const isLastRow = days.length > 35 ? index >= 35 : days.length > 28 ? index >= 28 : index >= 21;
-                    const isLastColumn = (index + 1) % 7 === 0;
-                    // Retrieve events to render for this day
-                    const eventsToRender = eventRenderMap.get(dateKey) || [];
-                    const dayEvents = eventsByDay.get(dateKey) || [];
-                    const eventsToShow = eventsToRender.slice(0, MAX_EVENTS_PER_CELL);
-                    const remainingEventsCount = Math.max(0, dayEvents.length - MAX_EVENTS_PER_CELL);
-                    return (jsxs(CalendarMonthViewCell, { day: date.day, isDisabled: !isCurrentMonthFlag, state: isSelectedFlag ? 'selected' : isTodayFlag ? 'current' : 'default', className: cx(isLastRow && 'before:border-b-0', isLastColumn && 'before:border-r-0'), onClick: () => isCurrentMonthFlag && setSelectedDate(date), "data-testid": prefix ? joinTestId(prefix, `cell-${slugifyTestId(dateKey)}`) : undefined, children: [jsx("div", { className: "flex gap-1 max-md:pl-1 md:flex-col", children: eventsToShow.map(({ event, span, isPlaceholder }) => {
-                                    // If this is a placeholder, render an invisible element to take up space
-                                    if (isPlaceholder) {
-                                        return (jsx("div", { className: "pointer-events-none opacity-0", children: jsx(CalendarMonthViewEvent, { label: event.title, collapseOnMobile: true, color: event.color, withDot: event.dot }) }, `${event.id}-placeholder`));
-                                    }
-                                    // Regular event rendering
-                                    const eventStartDay = toCalendarDate(event.start);
-                                    const eventEndDay = toCalendarDate(event.end);
-                                    const startsToday = isSameDay(date, eventStartDay);
-                                    const endsToday = isSameDay(date, eventEndDay);
-                                    const continuesPrior = eventStartDay.compare(date) < 0;
-                                    const continuesAfter = eventEndDay.compare(date) > 0;
-                                    // Boundary checks compare times, not calendar days: an event starts "at day start"
-                                    // only when it begins at midnight, and ends "at day end" when it ends at midnight
-                                    // (exclusive-end convention) or at 23:59:59.999 (inclusive-end convention).
-                                    const eventStartsAtDayStart = event.start.compare(getStartOfDay(event.start, timeZone)) === 0;
-                                    const eventEndsAtDayEnd = event.end.compare(getStartOfDay(event.end, timeZone)) === 0 || event.end.compare(getEndOfDay(event.end, timeZone)) >= 0;
-                                    const isAllDayForCell = (continuesPrior && continuesAfter) ||
-                                        (startsToday && continuesAfter && eventStartsAtDayStart) ||
-                                        (continuesPrior && endsToday && eventEndsAtDayEnd) ||
-                                        (startsToday && endsToday && eventStartsAtDayStart && eventEndsAtDayEnd);
-                                    const supportingText = isAllDayForCell ? undefined : formatTimeForMonth(event.start);
-                                    // Apply custom width style for multi-day events
-                                    const spanStyle = span > 1
-                                        ? {
-                                            zIndex: 1,
-                                            width: `calc(${span * 100}% + ${(span - 1) * 16}px)`,
-                                        }
-                                        : undefined;
-                                    return (jsx("div", { style: spanStyle, className: cx(!isCurrentMonthFlag && 'opacity-50'), children: jsx(CalendarMonthViewEvent, { label: event.title, collapseOnMobile: true, supportingText: supportingText, color: event.color, withDot: event.dot, "data-testid": eventTestId(event.id) }) }, event.id));
-                                }) }), remainingEventsCount > 0 && (jsx("div", { className: "truncate text-xs font-semibold text-utility-neutral-500 max-md:pl-1", children: `${remainingEventsCount} more...` }))] }, dateKey));
-                }) }), targetDateForFooter && (jsxs("div", { className: "border-t border-secondary px-4 py-5 md:hidden", children: [jsx("h3", { className: "text-sm font-semibold text-primary", children: fullDateFormatter.format(targetDateForFooter.toDate(timeZone)) }), eventsForFooter.length > 0 && (jsx("div", { className: "mt-4 flex flex-col gap-1.5", children: eventsForFooter.slice(0, 3).map((event) => {
-                            // "All day" when the event covers the entire displayed day. Comparing against the
-                            // footer's target day (not the event's own end day) handles exclusive-end events
-                            // (end = next midnight) and multi-day events spanning this day.
-                            const dayStart = getStartOfDay(targetDateForFooter, timeZone);
-                            const dayEnd = getEndOfDay(targetDateForFooter, timeZone);
-                            const isAllDay = event.start.compare(dayStart) <= 0 && event.end.compare(dayEnd) >= 0;
-                            const supportingText = isAllDay ? 'All day' : formatTimeForMonth(event.start);
-                            return (jsx(CalendarMonthViewEvent, { label: event.title, supportingText: supportingText, color: event.color, withDot: event.dot, "data-testid": eventTestId(event.id) }, `footer-${event.id}`));
-                        }) })), eventsForFooter.length === 0 && jsx("p", { className: "mt-4 text-xs font-semibold text-quaternary", children: "No events for this day." }), eventsForFooter.length > 3 && jsx("p", { className: "mt-4 text-xs font-semibold text-quaternary", children: `${eventsForFooter.length - 3} more...` })] }))] }));
-};
-const MobileSingleDayGrid = ({ dayToDisplay, dayEvents, timeZone, setSelectedDate, timeFormatter, className }) => {
-    const dayStart = useMemo(() => getStartOfDay(dayToDisplay, timeZone), [dayToDisplay, timeZone]); // Calculate once
-    return (jsxs("div", { className: cx('relative flex-1', className), children: [Array.from({ length: 48 }).map((_, slotIndex) => (jsx(CalendarDwViewCell
-            // biome-ignore lint/suspicious/noArrayIndexKey: This is a key for the slot
-            , { className: cx('before:border-r-0', slotIndex === 47 && 'before:border-b-0') }, `mobile-slot-${dayToDisplay.toString()}-${slotIndex}`))), dayEvents.map((event, index) => {
-                const overlapIndex = dayEvents.filter((e, i) => i < index && event.start.compare(e.end) < 0 && event.end.compare(e.start) > 0).length;
-                const totalOverlapping = dayEvents.filter((e) => event.start.compare(e.end) < 0 && event.end.compare(e.start) > 0).length;
-                return (jsx(PositionedEvent, { event: event, dayStart: dayStart, timeZone: timeZone, slotHeight: SLOT_HEIGHT, overlapIndex: overlapIndex, totalOverlapping: totalOverlapping, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }, event.id));
-            })] }));
-};
-const WeekViewDay = ({ day, isLastDay, visibleEvents, timeZone, slotHeight, setSelectedDate, timeFormatter }) => {
-    const dateKey = day.toString();
-    const dayEvents = useMemo(() => getEventsForDay(visibleEvents, day, timeZone), [visibleEvents, day, timeZone]);
-    const dayStart = useMemo(() => getStartOfDay(day, timeZone), [day, timeZone]);
-    return (jsx("div", { className: "flex flex-col border-secondary", children: jsxs("div", { className: "relative flex-1 bg-primary", style: { minHeight: `${48 * slotHeight}px` }, children: [Array.from({ length: 48 }).map((_, slotIndex) => (jsx(CalendarDwViewCell
-                // biome-ignore lint/suspicious/noArrayIndexKey: fixed 48 half-hour slots — the index is a stable slot position
-                , { className: cx('last:before:border-b-0', isLastDay && 'before:border-r-0') }, `slot-${dateKey}-${slotIndex}`))), dayEvents.map((event, index) => {
-                    const overlapIndex = dayEvents.filter((e, i) => i < index && event.start.compare(e.end) < 0 && event.end.compare(e.start) > 0).length;
-                    const totalOverlapping = dayEvents.filter((e) => event.start.compare(e.end) < 0 && event.end.compare(e.start) > 0).length;
-                    return (jsx(PositionedEvent, { event: event, dayStart: dayStart, timeZone: timeZone, slotHeight: slotHeight, overlapIndex: overlapIndex, totalOverlapping: totalOverlapping, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }, event.id));
-                })] }) }));
-};
-const WeekView = ({ currentMonthDate, selectedDate, zonedEvents, locale, timeZone, currentTime, setSelectedDate, shortWeekdayFormatter, timeFormatter, hourOnlyFormatter, className, view, }) => {
-    const currentWeekStart = startOfWeek(currentMonthDate, locale);
-    const currentWeekEnd = endOfWeek(currentMonthDate, locale);
-    const localCurrentTime = currentTime;
-    const scrollContainerRef = useRef(null);
-    const formatTime = (dateTime) => timeFormatter.format(dateTime.toDate());
-    const showTimeMarker = localCurrentTime.compare(toZoned(currentWeekStart, timeZone)) >= 0 &&
-        localCurrentTime.compare(toZoned(currentWeekEnd, timeZone).add({ days: 1 })) < 0;
-    const days = [];
-    let dayIterator = currentWeekStart;
-    while (dayIterator.compare(currentWeekEnd) <= 0) {
-        days.push(dayIterator);
-        dayIterator = dayIterator.add({ days: 1 });
-    }
-    const hours = Array.from({ length: 24 }, (_, i) => i);
-    let timeMarkerTop = 0;
-    if (showTimeMarker) {
-        const startOfVisibleDay = getStartOfDay(localCurrentTime, timeZone);
-        const minutesFromTop = localCurrentTime.hour * 60 + localCurrentTime.minute - (startOfVisibleDay.hour * 60 + startOfVisibleDay.minute);
-        timeMarkerTop = (minutesFromTop / 30) * SLOT_HEIGHT;
-    }
-    const visibleEvents = zonedEvents.filter((event) => {
-        const eventStartDay = toCalendarDate(event.start);
-        const eventEndDay = toCalendarDate(event.end);
-        return eventStartDay.compare(currentWeekEnd) <= 0 && eventEndDay.compare(currentWeekStart) >= 0;
-    });
-    // Calculate earliest event time for the entire week or default to 8 AM
-    const earliestEventTimeInWeek = useMemo(() => {
-        if (visibleEvents.length === 0) {
-            // Default scroll target: 8 AM of the week start day
-            return toZoned(currentWeekStart, timeZone).set({ hour: 8 });
-        }
-        // Find the earliest start time across all visible events in the week
-        return visibleEvents.reduce((earliest, current) => {
-            return current.start.compare(earliest.start) < 0 ? current : earliest;
-        }).start;
-    }, [visibleEvents, currentWeekStart, timeZone]);
-    // Effect to scroll to the earliest event - Use useLayoutEffect
-    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to include currentMonthDate in the dependency array to recalculate the earliest event time when the week changes
-    useLayoutEffect(() => {
-        // Only scroll if the view is 'week' and the ref is attached
-        if (view === 'week' && scrollContainerRef.current && earliestEventTimeInWeek) {
-            const startMinutes = earliestEventTimeInWeek.hour * 60 + earliestEventTimeInWeek.minute;
-            // Calculate target scroll, ensuring it's not negative
-            let targetScrollTop = Math.max(0, (startMinutes / 30) * SLOT_HEIGHT);
-            // Optional: Add an offset
-            targetScrollTop = Math.max(0, targetScrollTop - SLOT_HEIGHT);
-            // No need for setTimeout with useLayoutEffect for initial scroll
-            if (scrollContainerRef.current) {
-                scrollContainerRef.current.scrollTop = targetScrollTop;
-            }
-        }
-        // Dependency array includes view and earliestEventTimeInWeek
-        // currentMonthDate determines the week, which affects earliestEventTimeInWeek calculation
-    }, [view, earliestEventTimeInWeek, currentMonthDate]);
-    return (jsxs("div", { className: cx('flex flex-1 flex-col overflow-auto', className), children: [jsx("div", { className: "sticky top-0 z-10 grid grid-cols-7 bg-primary pl-18 shadow-sm dark:border-b dark:border-secondary", children: days.map((day) => {
-                    const isTodayFlag = isToday(day, timeZone);
-                    const dayToHighlight = selectedDate && day.compare(currentWeekStart) >= 0 && day.compare(currentWeekEnd) <= 0 ? selectedDate : currentWeekStart;
-                    const isSelectedFlag = isSameDay(day, dayToHighlight);
-                    const weekDayShort = shortWeekdayFormatter.format(day.toDate(timeZone));
-                    return (jsx(CalendarColumnHeader, { onClick: () => setSelectedDate(day), weekDay: weekDayShort, day: day.day, state: isSelectedFlag ? 'selected' : isTodayFlag ? 'current' : 'default', className: "cursor-pointer first:before:-left-px first:before:border-l" }, `mobile-header-${day.toString()}`));
-                }) }), jsxs("div", { ref: scrollContainerRef, tabIndex: 0, className: "relative flex flex-1 overflow-y-auto", children: [jsx("div", { className: "flex h-max w-18 flex-col border-r border-secondary", children: hours.map((hour) => {
-                            const time = new CalendarDateTime(currentWeekStart.year, currentWeekStart.month, currentWeekStart.day, hour);
-                            const timeString = hourOnlyFormatter.format(toZoned(time, timeZone).toDate());
-                            return jsx(CalendarRowLabel, { children: timeString }, `time-${hour}`);
-                        }) }), jsx("div", { className: "grid flex-1 grid-cols-7", children: days.map((day, index) => {
-                            const isLastDay = index === days.length - 1;
-                            return (jsx(WeekViewDay, { day: day, isLastDay: isLastDay, visibleEvents: visibleEvents, timeZone: timeZone, slotHeight: SLOT_HEIGHT, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }, day.toString()));
-                        }) }), showTimeMarker && jsx(CalendarTimeMarker, { style: { top: `${timeMarkerTop}px` }, children: formatTime(localCurrentTime) })] })] }));
-};
-const DayView = ({ dayToDisplay, zonedEvents, locale, timeZone, currentTime, setSelectedDate, shortWeekdayFormatter, timeFormatter, hourOnlyFormatter, selectedDate, className, view, }) => {
-    const currentWeekStart = startOfWeek(dayToDisplay, locale);
-    const currentWeekEnd = endOfWeek(dayToDisplay, locale);
-    const localCurrentTime = currentTime;
-    const formatTime = (dateTime) => timeFormatter.format(dateTime.toDate());
-    const showTimeMarker = isSameDay(toCalendarDate(localCurrentTime), dayToDisplay);
-    const hours = Array.from({ length: 24 }, (_, i) => i);
-    let timeMarkerTop = 0;
-    if (showTimeMarker) {
-        const minutesFromDayStart = localCurrentTime.hour * 60 + localCurrentTime.minute;
-        timeMarkerTop = (minutesFromDayStart / 30) * SLOT_HEIGHT;
-    }
-    const visibleEvents = useMemo(() => getEventsForDay(zonedEvents, dayToDisplay, timeZone), [zonedEvents, dayToDisplay, timeZone]);
-    const highlightedDates = useMemo(() => {
-        const datesWithEvents = new Set();
-        zonedEvents.forEach((event) => {
-            let currentDate = toCalendarDate(event.start);
-            const endDate = toCalendarDate(event.end);
-            // Iterate through each day the event spans
-            while (currentDate.compare(endDate) <= 0) {
-                datesWithEvents.add(currentDate.toString());
-                currentDate = currentDate.add({ days: 1 });
-            }
-        });
-        return datesWithEvents;
-    }, [zonedEvents]);
-    const days = [];
-    let dayIterator = currentWeekStart;
-    while (dayIterator.compare(currentWeekEnd) <= 0) {
-        days.push(dayIterator);
-        dayIterator = dayIterator.add({ days: 1 });
-    }
-    const scrollContainerRef = useRef(null);
-    // Calculate earliest event time or default to 8 AM
-    const earliestEventTime = useMemo(() => {
-        if (visibleEvents.length === 0) {
-            // Default scroll target: 8 AM of the displayed day
-            return toZoned(dayToDisplay, timeZone).set({ hour: 8 });
-        }
-        // Find the earliest start time among visible events
-        return visibleEvents.reduce((earliest, current) => {
-            return current.start.compare(earliest.start) < 0 ? current : earliest;
-        }).start;
-    }, [visibleEvents, dayToDisplay, timeZone]);
-    // Effect to scroll to the earliest event - Use useLayoutEffect
-    // biome-ignore lint/correctness/useExhaustiveDependencies: We need to include view, earliestEventTime, and dayToDisplay in the dependency array to re-trigger on changes
-    useLayoutEffect(() => {
-        // Only scroll if the view is 'day' and the ref is attached
-        if (view === 'day' && scrollContainerRef.current && earliestEventTime) {
-            const startMinutes = earliestEventTime.hour * 60 + earliestEventTime.minute;
-            // Calculate target scroll, ensuring it's not negative
-            let targetScrollTop = Math.max(0, (startMinutes / 30) * SLOT_HEIGHT);
-            // Optional: Add an offset to show some context before the first event (e.g., scroll up by one slot height)
-            targetScrollTop = Math.max(0, targetScrollTop - SLOT_HEIGHT);
-            // No need for setTimeout with useLayoutEffect for initial scroll
-            if (scrollContainerRef.current) {
-                scrollContainerRef.current.scrollTop = targetScrollTop;
-            }
-        }
-        // Dependency array includes view, earliestEventTime, and dayToDisplay to re-trigger on changes
-    }, [view, earliestEventTime, dayToDisplay]);
-    return (jsxs("div", { className: cx('flex flex-1 flex-col overflow-auto', className), children: [jsx("div", { className: "sticky top-0 z-20 grid grid-cols-7 bg-primary shadow-sm lg:hidden dark:border-b dark:border-secondary", children: days.map((day) => {
-                    const isTodayFlag = isToday(day, timeZone);
-                    const dayToHighlight = selectedDate && day.compare(currentWeekStart) >= 0 && day.compare(currentWeekEnd) <= 0 ? selectedDate : currentWeekStart;
-                    const isSelectedFlag = isSameDay(day, dayToHighlight);
-                    const weekDayShort = shortWeekdayFormatter.format(day.toDate(timeZone));
-                    return (jsx(CalendarColumnHeader, { onClick: () => setSelectedDate(day), weekDay: weekDayShort, day: day.day, state: isSelectedFlag ? 'selected' : isTodayFlag ? 'current' : 'default', className: "cursor-pointer" }, `mobile-header-${day.toString()}`));
-                }) }), jsxs("div", { className: "flex h-full flex-1", children: [jsxs("div", { ref: scrollContainerRef, tabIndex: 0, className: "relative flex h-full flex-1 overflow-auto", children: [jsx("div", { className: "flex h-max w-14 flex-col border-r border-secondary md:w-18", children: hours.map((hour) => {
-                                    const time = new CalendarDateTime(dayToDisplay.year, dayToDisplay.month, dayToDisplay.day, hour);
-                                    const timeString = hourOnlyFormatter.format(toZoned(time, timeZone).toDate());
-                                    return jsx(CalendarRowLabel, { children: timeString }, `time-${hour}`);
-                                }) }), jsx(MobileSingleDayGrid, { dayToDisplay: dayToDisplay, dayEvents: visibleEvents, timeZone: timeZone, locale: locale, currentTime: currentTime, setSelectedDate: setSelectedDate, timeFormatter: timeFormatter }), showTimeMarker && jsx(CalendarTimeMarker, { style: { top: `${timeMarkerTop}px` }, children: formatTime(localCurrentTime) })] }), jsxs("div", { className: "sticky top-0 hidden h-full w-82 flex-col overflow-auto border-l border-secondary mask-b-from-94% lg:flex", children: [jsxs(Calendar$1, { "aria-label": "Calendar", className: "px-6 py-5", value: selectedDate, onChange: (value) => setSelectedDate(value), children: [jsxs("div", { className: "mb-3 flex items-center justify-between", children: [jsx(Button, { slot: "previous", iconLeading: ChevronLeft, size: "sm", color: "tertiary", className: "size-8" }), jsx(Heading, { className: "text-sm font-semibold text-fg-secondary" }), jsx(Button, { slot: "next", iconLeading: ChevronRight, size: "sm", color: "tertiary", className: "size-8" })] }), jsxs(CalendarGrid, { weekdayStyle: "short", className: "w-max", children: [jsx(CalendarGridHeader, { className: "border-b-4 border-transparent", children: (day) => (jsx(CalendarHeaderCell, { className: "p-0", children: jsx("div", { className: "flex size-10 items-center justify-center text-sm font-medium text-secondary", children: day.slice(0, 2) }) })) }), jsx(CalendarGridBody, { className: "[&_td]:p-0 [&_tr]:border-b-4 [&_tr]:border-transparent [&_tr:last-of-type]:border-none", children: (date) => jsx(CalendarCell, { date: date, isHighlighted: highlightedDates.has(date.toString()) }) })] })] }), jsxs("div", { className: "flex flex-col gap-5 border-t border-secondary px-6 py-5", children: [jsxs("div", { className: "flex flex-col gap-2", children: [jsxs("section", { className: "flex w-full justify-between", children: [jsx("p", { className: "text-md font-semibold text-primary", children: "Product demo" }), jsxs("div", { className: "-mt-2 -mr-2 flex gap-0.5", children: [jsx(ButtonUtility, { size: "xs", color: "tertiary", tooltip: "Copy link", icon: Copy01 }), jsx(ButtonUtility, { size: "xs", color: "tertiary", tooltip: "Delete", icon: Trash01 }), jsx(ButtonUtility, { size: "xs", color: "tertiary", tooltip: "Edit", icon: Edit01 })] })] }), jsxs("section", { className: "flex flex-col gap-1.5", children: [jsxs("div", { className: "flex items-center gap-1.5", children: [jsx(Calendar$2, { className: "size-4 stroke-[2.25px] text-fg-quaternary" }), jsx("p", { className: "text-sm text-tertiary", children: "Friday, Jan 10, 2027" })] }), jsxs("div", { className: "flex items-center gap-1.5", children: [jsx(Clock, { className: "size-4 stroke-[2.25px] text-fg-quaternary" }), jsx("p", { className: "text-sm text-tertiary", children: "1:30 PM - 3:30 PM" })] }), jsxs("div", { className: "flex items-center gap-1.5", children: [jsx(BellRinging01, { className: "size-4 stroke-[2.25px] text-fg-quaternary" }), jsx("p", { className: "text-sm text-tertiary", children: "10 min before" })] })] })] }), jsxs("div", { className: "flex flex-col gap-3", children: [jsxs("section", { className: "flex gap-2", children: [jsxs("section", { className: "flex flex-row -space-x-2", children: [jsx(Avatar, { className: "ring-[1.5px] ring-bg-primary", src: "https://www.untitledui.com/images/avatars/sienna-hewitt?fm=webp&q=80", alt: "Sienna Hewitt", size: "sm" }), jsx(Avatar, { className: "ring-[1.5px] ring-bg-primary", src: "https://www.untitledui.com/images/avatars/ammar-foley?fm=webp&q=80", alt: "Ammar Foley", size: "sm" }), jsx(Avatar, { className: "ring-[1.5px] ring-bg-primary", src: "https://www.untitledui.com/images/avatars/pippa-wilkinson?fm=webp&q=80", alt: "Pippa Wilkinson", size: "sm" }), jsx(Avatar, { className: "ring-[1.5px] ring-bg-primary", src: "https://www.untitledui.com/images/avatars/olly-schroeder?fm=webp&q=80", alt: "Olly Schroeder", size: "sm" }), jsx(Avatar, { className: "ring-[1.5px] ring-bg-primary", src: "https://www.untitledui.com/images/avatars/mathilde-lewis?fm=webp&q=80", alt: "Mathilde Lewis", size: "sm" }), jsx(Avatar, { className: "ring-[1.5px] ring-bg-primary", initials: "OR", size: "sm" })] }), jsx(AvatarAddButton, { size: "sm" })] }), jsxs("section", { className: "flex items-center gap-2", children: [jsx("p", { className: "text-sm font-semibold text-primary", children: "6 guests" }), jsx("span", { className: "h-[13px] border-l border-primary" }), jsx("p", { className: "text-sm text-tertiary", children: "5 yes" }), jsx("span", { className: "h-[13px] border-l border-primary" }), jsx("p", { className: "text-sm text-tertiary", children: "1 awaiting" })] })] }), jsxs("section", { className: "flex flex-col gap-2", children: [jsx("p", { className: "text-sm font-semibold text-primary", children: "About this event" }), jsxs("div", { className: "text-sm text-tertiary", children: [jsx("p", { children: "Sienna is inviting you to a scheduled Zoom meeting." }), jsx("br", {}), jsx("p", { children: "Topic: Product demo for the new dashboard and Q&A session." }), jsx("br", {}), jsxs("p", { className: "wrap-break-word whitespace-normal", children: ["Join Zoom Meeting:\u00A0", jsx("span", { className: "break-all underline", children: "https://us02web.zoom.us/j/86341969512" }), "\u00A0"] }), jsx("br", {}), jsx("p", { children: "Meeting ID: 863 4196 9512" })] })] })] })] })] })] }));
-};
 /**
  * A scheduling calendar that renders a list of events across month, week, and
  * day views, with built-in navigation, a current-time marker, and a responsive