@super-calendar/dom 2.0.0

package/dist/index.mjs

@@ -0,0 +1,1319 @@
+import { LegendList } from "@legendapp/list/react";
+import { addDays, addMinutes, addMonths, endOfMonth, format, isSameDay, isSameMonth, startOfDay, startOfMonth } from "date-fns";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { bandRounding, buildMonthGrid, buildMonthGrid as buildMonthGrid$1, cellRangeFromDrag, closedHourBands, compareDayEvents, darkColors, dayBadgeKind, daySelectionState, eventAccessibilityLabel, eventChipLayout, eventTimeLabel, formatHour, getIsToday, getViewDays, getViewDays as getViewDays$1, groupEventsByDay, isAllDayEvent, isAllDayEvent as isAllDayEvent$1, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWithinDateRange, layoutDayEvents, layoutDayEvents as layoutDayEvents$1, lightColors, monthVisibleCount, nextDateRange, rangeBandKind, titleNumberOfLines, useDateRange, useMonthGrid } from "@super-calendar/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/theme.ts
+const METRICS = {
+	cellHeight: 48,
+	dayBadgeSize: 34,
+	rangeBandHeight: 32,
+	fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
+};
+const defaultDomTheme = {
+	...lightColors,
+	...METRICS
+};
+const darkDomTheme = {
+	...darkColors,
+	...METRICS
+};
+/** Merge a partial override onto a base theme (defaults to {@link defaultDomTheme}). */
+function mergeDomTheme(overrides, base = defaultDomTheme) {
+	return overrides ? {
+		...base,
+		...overrides
+	} : base;
+}
+//#endregion
+//#region src/Agenda.tsx
+function DefaultAgendaRow({ event, isAllDay, ampm = false, theme }) {
+	const time = eventTimeLabel({
+		mode: "schedule",
+		isAllDay,
+		start: event.start,
+		end: event.end,
+		ampm,
+		showTime: true
+	}) ?? "";
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			padding: "6px 10px",
+			borderRadius: 8,
+			background: theme.eventBackground,
+			color: theme.eventText
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				fontWeight: 600,
+				fontSize: 14
+			},
+			children: event.title
+		}), time ? /* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: 13,
+				opacity: .75
+			},
+			children: time
+		}) : null]
+	});
+}
+/**
+* A vertical, day-grouped list of events: the schedule view, with plain DOM
+* elements. Events are sorted by start and grouped under a date header per day;
+* the consumer controls which events (and therefore which dates) are shown. The
+* react-dom counterpart of the React Native `Agenda`.
+*/
+function Agenda({ events, locale, ampm = false, activeDate, theme: themeOverrides, height = 480, renderEvent, onPressEvent, onPressDay, className, style }) {
+	const theme = useMemo(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+	const Renderer = renderEvent;
+	const rows = useMemo(() => {
+		const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
+		const out = [];
+		let currentDay = null;
+		sorted.forEach((event, index) => {
+			if (!currentDay || !isSameDay(event.start, currentDay)) {
+				currentDay = startOfDay(event.start);
+				out.push({
+					kind: "header",
+					date: currentDay,
+					key: `h-${currentDay.toISOString()}`
+				});
+			}
+			out.push({
+				kind: "event",
+				event,
+				key: `e-${event.start.toISOString()}-${index}`
+			});
+		});
+		return out;
+	}, [events]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: {
+			fontFamily: theme.fontFamily,
+			color: theme.text,
+			...style
+		},
+		children: [/* @__PURE__ */ jsx(LegendList, {
+			data: rows,
+			keyExtractor: (row) => row.key,
+			recycleItems: false,
+			estimatedItemSize: 44,
+			style: {
+				height,
+				overflowY: "auto"
+			},
+			renderItem: ({ item }) => {
+				if (item.kind === "header") {
+					const highlighted = activeDate ? isSameDay(item.date, activeDate) : getIsToday(item.date);
+					const label = format(item.date, "EEEE, d LLLL", locale ? { locale } : void 0);
+					const color = highlighted ? theme.todayBackground : theme.textMuted;
+					return onPressDay ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onPressDay(item.date),
+						style: {
+							...headerStyle,
+							color,
+							border: "none",
+							background: "transparent",
+							cursor: "pointer",
+							font: "inherit",
+							textAlign: "left"
+						},
+						children: label
+					}) : /* @__PURE__ */ jsx("div", {
+						style: {
+							...headerStyle,
+							color
+						},
+						children: label
+					});
+				}
+				const event = item.event;
+				const isAllDay = isAllDayEvent$1(event);
+				const onPress = () => onPressEvent?.(event);
+				const args = {
+					event,
+					mode: "schedule",
+					isAllDay,
+					ampm,
+					onPress
+				};
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onPress,
+					style: {
+						display: "block",
+						width: "100%",
+						textAlign: "left",
+						border: "none",
+						background: "transparent",
+						cursor: "pointer",
+						font: "inherit",
+						padding: "2px 12px"
+					},
+					children: Renderer ? /* @__PURE__ */ jsx(Renderer, { ...args }) : /* @__PURE__ */ jsx(DefaultAgendaRow, {
+						...args,
+						theme
+					})
+				});
+			}
+		}), rows.length === 0 ? /* @__PURE__ */ jsx("div", {
+			style: {
+				padding: "16px 12px",
+				color: theme.textMuted,
+				fontSize: 14
+			},
+			children: "No events"
+		}) : null]
+	});
+}
+const headerStyle = {
+	display: "block",
+	width: "100%",
+	padding: "12px 12px 4px",
+	fontSize: 13,
+	fontWeight: 600
+};
+//#endregion
+//#region src/MonthView.tsx
+const DATE_ROW = 24;
+const CHIP_HEIGHT = 18;
+const CHIP_GAP = 2;
+const CELL_PAD = 4;
+function dayCellStyle(day, theme) {
+	return {
+		position: "relative",
+		height: theme.cellHeight,
+		border: "none",
+		background: day.isWeekend && !day.isInRange ? theme.weekendBackground : "transparent",
+		font: "inherit",
+		fontSize: 15,
+		color: day.isDisabled ? theme.textDisabled : theme.text,
+		cursor: day.isDisabled ? "default" : "pointer",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		padding: 0,
+		WebkitTapHighlightColor: "transparent"
+	};
+}
+/**
+* The range band behind a day, rendered as its own layer so it can be a centered
+* rounded strip (the default) or fill the whole cell (`fillCell`). Returns null
+* for days with no band. Endpoints get the leading/trailing pill rounding.
+*/
+function rangeBandStyle(day, theme, fillCell) {
+	const kind = rangeBandKind(day, fillCell);
+	if (kind === "none") return null;
+	const fill = kind === "fill";
+	const inset = fill ? 0 : Math.max(0, (theme.cellHeight - theme.rangeBandHeight) / 2);
+	const radius = fill ? 0 : theme.rangeBandHeight / 2;
+	const rounding = bandRounding(kind);
+	const cap = `calc(50% - ${theme.dayBadgeSize / 2}px)`;
+	const style = {
+		position: "absolute",
+		left: rounding.start ? cap : 0,
+		right: rounding.end ? cap : 0,
+		top: inset,
+		bottom: inset,
+		background: theme.rangeBackground,
+		zIndex: 0
+	};
+	if (rounding.start) {
+		style.borderTopLeftRadius = radius;
+		style.borderBottomLeftRadius = radius;
+	}
+	if (rounding.end) {
+		style.borderTopRightRadius = radius;
+		style.borderBottomRightRadius = radius;
+	}
+	return style;
+}
+function badgeStyle(day, theme, hovered) {
+	const badge = dayBadgeKind(day, day.isToday);
+	const filled = badge !== "none";
+	const background = filled ? badge === "today" ? theme.todayBackground : theme.selectedBackground : hovered ? theme.hoverBackground : "transparent";
+	return {
+		position: "relative",
+		zIndex: 1,
+		width: theme.dayBadgeSize,
+		height: theme.dayBadgeSize,
+		borderRadius: "50%",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		background,
+		color: filled ? day.isToday ? theme.todayText : theme.selectedText : "inherit"
+	};
+}
+function eventCellStyle(day, theme, height) {
+	return {
+		position: "relative",
+		minHeight: height,
+		minWidth: 0,
+		border: "none",
+		borderTop: `1px solid ${theme.gridLine}`,
+		background: day.isWeekend && !day.isInRange ? theme.weekendBackground : "transparent",
+		color: day.isDisabled ? theme.textDisabled : theme.text,
+		cursor: day.isDisabled ? "default" : "pointer",
+		display: "flex",
+		flexDirection: "column",
+		gap: CHIP_GAP,
+		padding: CELL_PAD,
+		boxSizing: "border-box",
+		textAlign: "left",
+		WebkitTapHighlightColor: "transparent"
+	};
+}
+function compactBadgeStyle(day, theme) {
+	const badge = dayBadgeKind(day, day.isToday);
+	const filled = badge !== "none";
+	return {
+		position: "relative",
+		zIndex: 1,
+		alignSelf: "flex-end",
+		width: DATE_ROW - 2,
+		height: DATE_ROW - 2,
+		borderRadius: "50%",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: 13,
+		background: filled ? badge === "today" ? theme.todayBackground : theme.selectedBackground : "transparent",
+		color: filled ? day.isToday ? theme.todayText : theme.selectedText : "inherit"
+	};
+}
+const chipButtonStyle = {
+	position: "relative",
+	zIndex: 1,
+	border: "none",
+	padding: 0,
+	margin: 0,
+	background: "transparent",
+	cursor: "pointer",
+	textAlign: "left",
+	fontFamily: "inherit"
+};
+function chipStyle(theme) {
+	return {
+		display: "block",
+		height: CHIP_HEIGHT,
+		lineHeight: `${CHIP_HEIGHT}px`,
+		padding: "0 6px",
+		borderRadius: 4,
+		background: theme.eventBackground,
+		color: theme.eventText,
+		fontSize: 11,
+		fontWeight: 600,
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis"
+	};
+}
+function moreButtonStyle(theme) {
+	return {
+		position: "relative",
+		zIndex: 1,
+		border: "none",
+		background: "transparent",
+		cursor: "pointer",
+		textAlign: "left",
+		padding: "0 6px",
+		height: CHIP_HEIGHT,
+		lineHeight: `${CHIP_HEIGHT}px`,
+		fontSize: 11,
+		fontWeight: 600,
+		fontFamily: "inherit",
+		color: theme.textMuted
+	};
+}
+/** A single static month grid, rendered with plain DOM elements. */
+function MonthView({ date, weekStartsOn = 0, events, eventsByDay: eventsByDayProp, renderEvent, maxVisibleEventCount = 3, moreLabel = "{moreCount} More", onPressEvent, onPressMore, selectedRange, selectedDates, showAdjacentMonths = true, fillCellOnSelection = false, showTitle = true, showWeekdays = true, locale, theme: themeOverrides, minDate, maxDate, isDateDisabled, onPressDay, keyboardDayNavigation = false, className, style }) {
+	const theme = useMemo(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+	const eventsMode = events !== void 0;
+	const dayRoving = !eventsMode || keyboardDayNavigation;
+	const eventsByDay = useMemo(() => {
+		if (eventsByDayProp) return eventsByDayProp;
+		const map = groupEventsByDay(events ?? []);
+		for (const list of map.values()) list.sort(compareDayEvents);
+		return map;
+	}, [eventsByDayProp, events]);
+	const Chip = renderEvent;
+	const eventRowHeight = 32 + maxVisibleEventCount * 20;
+	const { weeks, weekdays } = useMemo(() => buildMonthGrid$1(date, {
+		weekStartsOn,
+		selectedRange,
+		selectedDates,
+		minDate,
+		maxDate,
+		isDateDisabled,
+		locale
+	}), [
+		date,
+		weekStartsOn,
+		selectedRange,
+		selectedDates,
+		minDate,
+		maxDate,
+		isDateDisabled,
+		locale
+	]);
+	const initialFocus = useMemo(() => {
+		const inMonth = (d) => !!d && isSameMonth(d, date);
+		if (inMonth(selectedRange?.start)) return startOfDay(selectedRange.start);
+		const picked = selectedDates?.find(inMonth);
+		if (picked) return startOfDay(picked);
+		const today = /* @__PURE__ */ new Date();
+		return isSameMonth(today, date) ? startOfDay(today) : startOfMonth(date);
+	}, [
+		date,
+		selectedRange,
+		selectedDates
+	]);
+	const [focusedDate, setFocusedDate] = useState(initialFocus);
+	const initialFocusRef = useRef(initialFocus);
+	initialFocusRef.current = initialFocus;
+	useEffect(() => setFocusedDate(initialFocusRef.current), [format(date, "yyyy-MM")]);
+	const [hoveredKey, setHoveredKey] = useState(null);
+	const gridRef = useRef(null);
+	const focusKey = format(focusedDate, "yyyy-MM-dd");
+	const onKeyDown = (e) => {
+		let next = null;
+		if (e.key === "ArrowLeft") next = addDays(focusedDate, -1);
+		else if (e.key === "ArrowRight") next = addDays(focusedDate, 1);
+		else if (e.key === "ArrowUp") next = addDays(focusedDate, -7);
+		else if (e.key === "ArrowDown") next = addDays(focusedDate, 7);
+		else if (e.key === "Home") next = startOfMonth(date);
+		else if (e.key === "End") next = endOfMonth(date);
+		else return;
+		e.preventDefault();
+		if (!isSameMonth(next, date)) return;
+		setFocusedDate(next);
+		const key = format(next, "yyyy-MM-dd");
+		gridRef.current?.querySelector(`[data-day="${key}"]`)?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: {
+			fontFamily: theme.fontFamily,
+			color: theme.text,
+			...style
+		},
+		children: [
+			showTitle ? /* @__PURE__ */ jsx("div", {
+				style: {
+					fontSize: 17,
+					fontWeight: 700,
+					padding: "10px 14px 6px"
+				},
+				children: format(date, "MMMM yyyy", locale ? { locale } : void 0)
+			}) : null,
+			showWeekdays ? /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+					borderBottom: `1px solid ${theme.gridLine}`,
+					padding: "6px 0"
+				},
+				children: weekdays.map((wd) => /* @__PURE__ */ jsx("span", {
+					style: {
+						textAlign: "center",
+						fontSize: 12,
+						fontWeight: 600,
+						color: theme.textMuted
+					},
+					children: wd.label
+				}, wd.label))
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				ref: gridRef,
+				role: "grid",
+				"aria-label": format(date, "MMMM yyyy", locale ? { locale } : void 0),
+				onKeyDown: dayRoving ? onKeyDown : void 0,
+				children: weeks.map((week) => /* @__PURE__ */ jsx("div", {
+					role: "row",
+					style: {
+						display: "grid",
+						gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
+					},
+					children: week.days.map((day) => {
+						const hidden = !showAdjacentMonths && !day.isCurrentMonth;
+						const cellHeight = eventsMode ? eventRowHeight : theme.cellHeight;
+						if (hidden) return /* @__PURE__ */ jsx("div", {
+							role: "gridcell",
+							"aria-hidden": true,
+							style: { height: cellHeight }
+						}, day.id);
+						const band = rangeBandStyle(day, theme, fillCellOnSelection);
+						const label = format(day.date, "EEEE, d MMMM yyyy", locale ? { locale } : void 0);
+						if (eventsMode) {
+							const dayEvents = eventsByDay.get(startOfDay(day.date).toISOString()) ?? [];
+							const visible = monthVisibleCount(dayEvents.length, {
+								full: maxVisibleEventCount,
+								withMore: Math.max(maxVisibleEventCount - 1, 1)
+							});
+							const shown = dayEvents.slice(0, visible);
+							const rest = dayEvents.slice(visible);
+							const overflow = rest.length > 0;
+							const dayLabel = format(day.date, "d MMMM", locale ? { locale } : void 0);
+							return /* @__PURE__ */ jsxs("div", {
+								role: "gridcell",
+								"data-day": day.id,
+								tabIndex: keyboardDayNavigation ? day.id === focusKey ? 0 : -1 : void 0,
+								"aria-disabled": day.isDisabled || void 0,
+								"aria-label": label,
+								style: eventCellStyle(day, theme, cellHeight),
+								onClick: day.isDisabled ? void 0 : () => onPressDay?.(day.date),
+								onKeyDown: keyboardDayNavigation && !day.isDisabled ? (e) => {
+									if (e.target !== e.currentTarget) return;
+									if (e.key === "Enter" || e.key === " ") {
+										e.preventDefault();
+										onPressDay?.(day.date);
+									}
+								} : void 0,
+								children: [
+									band ? /* @__PURE__ */ jsx("span", {
+										"data-band": true,
+										"aria-hidden": true,
+										style: band
+									}) : null,
+									/* @__PURE__ */ jsx("span", {
+										style: compactBadgeStyle(day, theme),
+										children: day.label
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										style: {
+											display: "flex",
+											flexDirection: "column",
+											gap: CHIP_GAP
+										},
+										children: [shown.map((event) => {
+											const onPress = () => onPressEvent?.(event);
+											return /* @__PURE__ */ jsx("button", {
+												type: "button",
+												onClick: (e) => {
+													e.stopPropagation();
+													onPress();
+												},
+												style: chipButtonStyle,
+												title: event.title,
+												"aria-label": `${event.title}, ${dayLabel}`,
+												children: Chip ? /* @__PURE__ */ jsx(Chip, {
+													event,
+													onPress
+												}) : /* @__PURE__ */ jsx("span", {
+													style: chipStyle(theme),
+													children: event.title
+												})
+											}, `${event.start.toISOString()}:${event.title}`);
+										}), overflow ? /* @__PURE__ */ jsx("button", {
+											type: "button",
+											onClick: (e) => {
+												e.stopPropagation();
+												onPressMore?.(rest, day.date);
+											},
+											style: moreButtonStyle(theme),
+											"aria-label": `${rest.length} more events, ${dayLabel}`,
+											children: moreLabel.replace("{moreCount}", String(rest.length))
+										}) : null]
+									})
+								]
+							}, day.id);
+						}
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							role: "gridcell",
+							"data-day": day.id,
+							tabIndex: day.id === focusKey ? 0 : -1,
+							"aria-disabled": day.isDisabled || void 0,
+							"aria-label": label,
+							"aria-pressed": day.isSelected || day.isInRange,
+							style: dayCellStyle(day, theme),
+							onClick: day.isDisabled ? void 0 : () => onPressDay?.(day.date),
+							onMouseEnter: day.isDisabled ? void 0 : () => setHoveredKey(day.id),
+							onMouseLeave: () => setHoveredKey((k) => k === day.id ? null : k),
+							children: [band ? /* @__PURE__ */ jsx("span", {
+								"data-band": true,
+								"aria-hidden": true,
+								style: band
+							}) : null, /* @__PURE__ */ jsx("span", {
+								style: badgeStyle(day, theme, hoveredKey === day.id),
+								children: day.label
+							})]
+						}, day.id);
+					})
+				}, week.id))
+			})
+		]
+	});
+}
+//#endregion
+//#region src/TimeGrid.tsx
+const HOURS = Array.from({ length: 24 }, (_, h) => h);
+const GUTTER_WIDTH = 56;
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const DOM_TITLE_LINE_HEIGHT = 16;
+const DOM_TIME_LINE_HEIGHT = 30;
+const DOM_BOX_PADDING_V = 2;
+function DefaultDomEvent({ event, mode, isAllDay, boxHeight, ampm = false, theme }) {
+	const timeLabel = eventTimeLabel({
+		mode,
+		isAllDay,
+		start: event.start,
+		end: event.end,
+		ampm,
+		showTime: true
+	});
+	const { titleMaxLines, showTime } = eventChipLayout({
+		boxHeightPx: boxHeight,
+		mode,
+		hasTime: !isAllDay && timeLabel != null,
+		titleLineHeightPx: DOM_TITLE_LINE_HEIGHT,
+		timeLineHeightPx: DOM_TIME_LINE_HEIGHT,
+		paddingYPx: DOM_BOX_PADDING_V
+	});
+	const oneLine = titleNumberOfLines(mode, isAllDay) === 1;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			height: "100%",
+			boxSizing: "border-box",
+			overflow: "hidden",
+			padding: `${DOM_BOX_PADDING_V}px 6px`,
+			borderRadius: 6,
+			background: theme.eventBackground,
+			color: theme.eventText,
+			fontSize: 12,
+			lineHeight: `${DOM_TITLE_LINE_HEIGHT}px`
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				fontWeight: 600,
+				overflow: "hidden",
+				...oneLine ? { whiteSpace: "nowrap" } : {
+					wordBreak: "break-word",
+					...titleMaxLines > 0 ? { maxHeight: titleMaxLines * DOM_TITLE_LINE_HEIGHT } : null
+				}
+			},
+			children: event.title
+		}), showTime ? /* @__PURE__ */ jsx("div", {
+			style: {
+				opacity: .75,
+				overflow: "hidden",
+				maxHeight: DOM_TIME_LINE_HEIGHT
+			},
+			children: timeLabel
+		}) : null]
+	});
+}
+/**
+* A day / week / N-day time grid rendered with plain DOM elements. Events are
+* positioned with the library's pure `layoutDayEvents`, so overlap columns and
+* multi-day clipping match the React Native renderer. Supports Ctrl/⌘-scroll and
+* two-finger pinch to zoom, and pointer drag to move / resize events.
+*/
+function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStartsOn = 0, hourHeight: initialHourHeight = 48, scrollOffsetMinutes = 480, zoomable = true, minHourHeight = 24, maxHourHeight = 160, dragStepMinutes = 15, ampm = false, timeslots = 1, businessHours, showNowIndicator = true, showAllDayEventCell = true, locale, theme: themeOverrides, height = 600, renderEvent, hourComponent, onPressEvent, onPressDateHeader, onPressCell, onCreateEvent, onDragStart, onDragEvent, className, style }) {
+	const theme = useMemo(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+	const scrollRef = useRef(null);
+	const dfns = locale ? { locale } : void 0;
+	const snapHours = dragStepMinutes / 60;
+	const [hourHeight, setHourHeight] = useState(initialHourHeight);
+	useEffect(() => setHourHeight(initialHourHeight), [initialHourHeight]);
+	const hourHeightRef = useRef(hourHeight);
+	hourHeightRef.current = hourHeight;
+	const [drag, setDrag] = useState(null);
+	const dragRef = useRef(null);
+	const dragOrigin = useRef(null);
+	const applyDrag = (next) => {
+		dragRef.current = next;
+		setDrag(next);
+	};
+	const [createBox, setCreateBox] = useState(null);
+	const createOrigin = useRef(null);
+	const cellEnabled = !!onPressCell || !!onCreateEvent;
+	const days = useMemo(() => getViewDays$1(mode, date, weekStartsOn, numberOfDays), [
+		mode,
+		date,
+		weekStartsOn,
+		numberOfDays
+	]);
+	const allDayByDay = useMemo(() => days.map((day) => {
+		const dayStart = startOfDay(day);
+		const dayEnd = addDays(dayStart, 1);
+		return events.filter((e) => isAllDayEvent$1(e) && e.start < dayEnd && e.end > dayStart);
+	}), [days, events]);
+	const hasAllDay = allDayByDay.some((list) => list.length > 0);
+	useEffect(() => {
+		if (scrollRef.current) scrollRef.current.scrollTop = scrollOffsetMinutes / 60 * hourHeightRef.current;
+	}, [scrollOffsetMinutes]);
+	useEffect(() => {
+		const el = scrollRef.current;
+		if (!el || !zoomable) return;
+		const onWheel = (e) => {
+			if (!e.ctrlKey && !e.metaKey) return;
+			e.preventDefault();
+			setHourHeight((h) => clamp(h * (1 - e.deltaY * .0015), minHourHeight, maxHourHeight));
+		};
+		el.addEventListener("wheel", onWheel, { passive: false });
+		return () => el.removeEventListener("wheel", onWheel);
+	}, [
+		zoomable,
+		minHourHeight,
+		maxHourHeight
+	]);
+	const pinch = useRef(/* @__PURE__ */ new Map());
+	const pinchBase = useRef(null);
+	const onBodyPointerDown = (e) => {
+		if (!zoomable || e.pointerType !== "touch") return;
+		pinch.current.set(e.pointerId, e.clientY);
+		if (pinch.current.size === 2) {
+			const ys = [...pinch.current.values()];
+			pinchBase.current = {
+				dist: Math.abs(ys[0] - ys[1]),
+				height: hourHeight
+			};
+		}
+	};
+	const onBodyPointerMove = (e) => {
+		if (!pinch.current.has(e.pointerId)) return;
+		pinch.current.set(e.pointerId, e.clientY);
+		if (pinch.current.size === 2 && pinchBase.current) {
+			const ys = [...pinch.current.values()];
+			const ratio = Math.abs(ys[0] - ys[1]) / (pinchBase.current.dist || 1);
+			setHourHeight(clamp(pinchBase.current.height * ratio, minHourHeight, maxHourHeight));
+		}
+	};
+	const onBodyPointerUp = (e) => {
+		pinch.current.delete(e.pointerId);
+		if (pinch.current.size < 2) pinchBase.current = null;
+	};
+	const Renderer = renderEvent;
+	const totalHeight = 24 * hourHeight;
+	const beginDrag = (e, event, key, kind, startHours, durationHours) => {
+		if (!onDragEvent) return;
+		e.stopPropagation();
+		try {
+			e.target.setPointerCapture?.(e.pointerId);
+		} catch {}
+		dragOrigin.current = {
+			pointerY: e.clientY,
+			startHours,
+			durationHours
+		};
+		applyDrag({
+			key,
+			kind,
+			startHours,
+			durationHours,
+			moved: false
+		});
+		onDragStart?.(event);
+	};
+	const cancelDrag = () => {
+		applyDrag(null);
+		dragOrigin.current = null;
+	};
+	const moveDrag = (e) => {
+		const d = dragRef.current;
+		if (!d || !dragOrigin.current) return;
+		const dHours = (e.clientY - dragOrigin.current.pointerY) / hourHeightRef.current;
+		const snap = (v) => Math.round(v / snapHours) * snapHours;
+		if (d.kind === "move") {
+			const startHours = clamp(snap(dragOrigin.current.startHours + dHours), 0, 24 - d.durationHours);
+			applyDrag({
+				...d,
+				startHours,
+				moved: true
+			});
+		} else {
+			const durationHours = clamp(snap(dragOrigin.current.durationHours + dHours), snapHours, 24 - d.startHours);
+			applyDrag({
+				...d,
+				durationHours,
+				moved: true
+			});
+		}
+	};
+	const endDrag = (e, day, event, onPress) => {
+		const d = dragRef.current;
+		if (!d) return;
+		try {
+			e.target.releasePointerCapture?.(e.pointerId);
+		} catch {}
+		if (!d.moved) {
+			applyDrag(null);
+			onPress();
+			return;
+		}
+		const base = startOfDay(day);
+		const start = addMinutes(base, Math.round(d.startHours * 60));
+		const end = addMinutes(base, Math.round((d.startHours + d.durationHours) * 60));
+		onDragEvent?.(event, start, end);
+		applyDrag(null);
+		dragOrigin.current = null;
+	};
+	const pxFromTop = (el, clientY) => clientY - el.getBoundingClientRect().top;
+	const beginCreate = (e, dayIndex) => {
+		if (!cellEnabled || e.pointerType === "touch") return;
+		if (e.target !== e.currentTarget || e.button > 0) return;
+		const el = e.currentTarget;
+		const startPx = pxFromTop(el, e.clientY);
+		try {
+			el.setPointerCapture?.(e.pointerId);
+		} catch {}
+		createOrigin.current = {
+			el,
+			dayIndex,
+			startPx
+		};
+		setCreateBox({
+			dayIndex,
+			topPx: startPx,
+			heightPx: 0
+		});
+	};
+	const moveCreate = (e) => {
+		const o = createOrigin.current;
+		if (!o) return;
+		const cur = pxFromTop(o.el, e.clientY);
+		setCreateBox({
+			dayIndex: o.dayIndex,
+			topPx: Math.min(o.startPx, cur),
+			heightPx: Math.abs(cur - o.startPx)
+		});
+	};
+	const endCreate = (e) => {
+		const o = createOrigin.current;
+		if (!o) return;
+		try {
+			o.el.releasePointerCapture?.(e.pointerId);
+		} catch {}
+		const endPx = pxFromTop(o.el, e.clientY);
+		const day = days[o.dayIndex];
+		const moved = Math.abs(endPx - o.startPx) > 4;
+		const h = hourHeightRef.current;
+		if (moved && onCreateEvent) {
+			const range = cellRangeFromDrag(day, o.startPx, endPx, h, 0, dragStepMinutes);
+			if (range) onCreateEvent(range.start, range.end);
+		} else if (onPressCell) {
+			const at = cellRangeFromDrag(day, o.startPx, o.startPx, h, 0, dragStepMinutes);
+			if (at) onPressCell(at.start);
+		}
+		createOrigin.current = null;
+		setCreateBox(null);
+	};
+	const cancelCreate = () => {
+		createOrigin.current = null;
+		setCreateBox(null);
+	};
+	const positionedByDay = useMemo(() => days.map((day) => layoutDayEvents$1(events, day)), [days, events]);
+	const bandsByDay = useMemo(() => days.map((day) => closedHourBands(day, businessHours)), [days, businessHours]);
+	const gridLines = useMemo(() => {
+		const hourLines = `repeating-linear-gradient(to bottom, transparent 0, transparent ${hourHeight - 1}px, ${theme.gridLine} ${hourHeight - 1}px, ${theme.gridLine} ${hourHeight}px)`;
+		if (timeslots <= 1) return hourLines;
+		const slotHeight = hourHeight / timeslots;
+		return `${hourLines}, repeating-linear-gradient(to bottom, transparent 0, transparent ${slotHeight - 1}px, ${theme.gridLine}80 ${slotHeight - 1}px, ${theme.gridLine}80 ${slotHeight}px)`;
+	}, [
+		hourHeight,
+		timeslots,
+		theme.gridLine
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: {
+			fontFamily: theme.fontFamily,
+			color: theme.text,
+			display: "flex",
+			flexDirection: "column",
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					borderBottom: `1px solid ${theme.gridLine}`
+				},
+				children: [/* @__PURE__ */ jsx("div", { style: {
+					width: GUTTER_WIDTH,
+					flex: "none"
+				} }), days.map((day) => {
+					const today = getIsToday(day);
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						tabIndex: onPressDateHeader ? 0 : -1,
+						"aria-hidden": onPressDateHeader ? void 0 : true,
+						onClick: onPressDateHeader ? () => onPressDateHeader(day) : void 0,
+						style: {
+							flex: 1,
+							border: "none",
+							background: "transparent",
+							font: "inherit",
+							color: theme.textMuted,
+							cursor: onPressDateHeader ? "pointer" : "default",
+							padding: "6px 0",
+							display: "flex",
+							flexDirection: "column",
+							alignItems: "center",
+							gap: 2
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: 11,
+								fontWeight: 600
+							},
+							children: format(day, "EEE", dfns)
+						}), /* @__PURE__ */ jsx("span", {
+							style: {
+								width: 28,
+								height: 28,
+								borderRadius: "50%",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								fontSize: 15,
+								fontWeight: 600,
+								background: today ? theme.todayBackground : "transparent",
+								color: today ? theme.todayText : theme.text
+							},
+							children: format(day, "d", dfns)
+						})]
+					}, day.toISOString());
+				})]
+			}),
+			showAllDayEventCell && hasAllDay ? /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					borderBottom: `1px solid ${theme.gridLine}`
+				},
+				children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						width: GUTTER_WIDTH,
+						flex: "none",
+						fontSize: 10,
+						color: theme.textMuted,
+						textAlign: "right",
+						padding: "4px 6px 0 0"
+					},
+					children: "all-day"
+				}), allDayByDay.map((list, i) => {
+					const dayStart = startOfDay(days[i]);
+					const dayEnd = addDays(dayStart, 1);
+					return /* @__PURE__ */ jsx("div", {
+						style: {
+							flex: 1,
+							minWidth: 0,
+							borderLeft: "1px solid transparent",
+							padding: "2px 1px",
+							display: "flex",
+							flexDirection: "column",
+							gap: 2
+						},
+						children: list.map((event) => {
+							const args = {
+								event,
+								mode,
+								isAllDay: true,
+								continuesBefore: event.start < dayStart,
+								continuesAfter: event.end > dayEnd,
+								ampm,
+								onPress: () => onPressEvent?.(event)
+							};
+							return /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => onPressEvent?.(event),
+								"aria-label": eventAccessibilityLabel({
+									title: event.title,
+									isAllDay: true,
+									start: event.start,
+									end: event.end,
+									ampm
+								}),
+								style: {
+									border: "none",
+									padding: 0,
+									background: "transparent",
+									cursor: "pointer",
+									textAlign: "left",
+									height: 22
+								},
+								children: Renderer ? /* @__PURE__ */ jsx(Renderer, { ...args }) : /* @__PURE__ */ jsx(DefaultDomEvent, {
+									...args,
+									theme
+								})
+							}, `${event.start.toISOString()}:${event.title}`);
+						})
+					}, days[i].toISOString());
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollRef,
+				onPointerDown: onBodyPointerDown,
+				onPointerMove: onBodyPointerMove,
+				onPointerUp: onBodyPointerUp,
+				onPointerCancel: onBodyPointerUp,
+				style: {
+					overflowY: "auto",
+					height,
+					position: "relative",
+					touchAction: zoomable ? "pan-y" : "auto"
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						height: totalHeight,
+						position: "relative"
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							width: GUTTER_WIDTH,
+							flex: "none",
+							position: "relative"
+						},
+						children: HOURS.map((h) => /* @__PURE__ */ jsx("div", {
+							style: {
+								position: "absolute",
+								top: h * hourHeight - 6,
+								right: 6,
+								fontSize: 10,
+								color: theme.textMuted
+							},
+							children: hourComponent ? hourComponent(h, ampm) : h === 0 ? "" : formatHour(h, { ampm })
+						}, h))
+					}), days.map((day, dayIndex) => {
+						const positioned = positionedByDay[dayIndex];
+						const showNow = showNowIndicator && isSameCalendarDay(day, /* @__PURE__ */ new Date());
+						const nowDate = /* @__PURE__ */ new Date();
+						const nowTop = (nowDate.getHours() * 60 + nowDate.getMinutes()) / 60 * hourHeight;
+						const bands = bandsByDay[dayIndex];
+						const ghost = createBox?.dayIndex === dayIndex ? createBox : null;
+						return /* @__PURE__ */ jsxs("div", {
+							onPointerDown: cellEnabled ? (e) => beginCreate(e, dayIndex) : void 0,
+							onPointerMove: cellEnabled ? moveCreate : void 0,
+							onPointerUp: cellEnabled ? endCreate : void 0,
+							onPointerCancel: cellEnabled ? cancelCreate : void 0,
+							style: {
+								flex: 1,
+								position: "relative",
+								borderLeft: `1px solid ${theme.gridLine}`
+							},
+							children: [
+								bands.map((b) => /* @__PURE__ */ jsx("div", {
+									"aria-hidden": true,
+									style: {
+										position: "absolute",
+										left: 0,
+										right: 0,
+										top: b.start * hourHeight,
+										height: (b.end - b.start) * hourHeight,
+										background: theme.outsideHoursBackground,
+										pointerEvents: "none",
+										zIndex: 0
+									}
+								}, b.start)),
+								/* @__PURE__ */ jsx("div", {
+									"aria-hidden": true,
+									style: {
+										position: "absolute",
+										inset: 0,
+										pointerEvents: "none",
+										zIndex: 0,
+										backgroundImage: gridLines
+									}
+								}),
+								positioned.map((pe, idx) => {
+									const key = `${dayIndex}:${idx}`;
+									const active = drag?.key === key ? drag : null;
+									const startHours = active ? active.startHours : pe.startHours;
+									const durationHours = active ? active.durationHours : pe.durationHours;
+									const top = startHours * hourHeight;
+									const boxHeight = Math.max(durationHours * hourHeight, 14);
+									const widthPct = 100 / pe.columns;
+									const onPress = () => onPressEvent?.(pe.event);
+									const args = {
+										event: pe.event,
+										mode,
+										isAllDay: false,
+										boxHeight,
+										continuesBefore: pe.continuesBefore,
+										continuesAfter: pe.continuesAfter,
+										ampm,
+										onPress
+									};
+									const draggable = !!onDragEvent;
+									return /* @__PURE__ */ jsxs("div", {
+										role: "button",
+										tabIndex: 0,
+										"aria-label": eventAccessibilityLabel({
+											title: pe.event.title,
+											isAllDay: false,
+											start: pe.event.start,
+											end: pe.event.end,
+											ampm
+										}),
+										onKeyDown: (e) => {
+											if (e.key === "Enter" || e.key === " ") {
+												e.preventDefault();
+												onPress();
+											}
+										},
+										onPointerDown: draggable ? (e) => beginDrag(e, pe.event, key, "move", pe.startHours, pe.durationHours) : void 0,
+										onPointerMove: draggable ? moveDrag : void 0,
+										onPointerUp: draggable ? (e) => endDrag(e, day, pe.event, onPress) : void 0,
+										onPointerCancel: draggable ? cancelDrag : void 0,
+										onClick: draggable ? void 0 : onPress,
+										style: {
+											position: "absolute",
+											top,
+											height: boxHeight,
+											left: `calc(${pe.column * widthPct}% + 1px)`,
+											width: `calc(${widthPct}% - 2px)`,
+											cursor: draggable ? "grab" : "pointer",
+											touchAction: draggable ? "none" : "auto",
+											zIndex: active ? 3 : 1,
+											opacity: active ? .85 : 1
+										},
+										children: [Renderer ? /* @__PURE__ */ jsx(Renderer, { ...args }) : /* @__PURE__ */ jsx(DefaultDomEvent, {
+											...args,
+											theme
+										}), draggable ? /* @__PURE__ */ jsx("div", {
+											onPointerDown: (e) => {
+												e.stopPropagation();
+												beginDrag(e, pe.event, key, "resize", pe.startHours, pe.durationHours);
+											},
+											style: {
+												position: "absolute",
+												left: 0,
+												right: 0,
+												bottom: 0,
+												height: 8,
+												cursor: "ns-resize",
+												touchAction: "none"
+											}
+										}) : null]
+									}, idx);
+								}),
+								showNow ? /* @__PURE__ */ jsxs("div", {
+									style: {
+										position: "absolute",
+										top: nowTop,
+										left: 0,
+										right: 0,
+										height: 0,
+										zIndex: 2,
+										pointerEvents: "none"
+									},
+									children: [/* @__PURE__ */ jsx("div", { style: {
+										height: 2,
+										background: theme.nowIndicator
+									} }), /* @__PURE__ */ jsx("div", { style: {
+										position: "absolute",
+										left: -3,
+										top: -3,
+										width: 8,
+										height: 8,
+										borderRadius: "50%",
+										background: theme.nowIndicator
+									} })]
+								}) : null,
+								ghost ? /* @__PURE__ */ jsx("div", {
+									"aria-hidden": true,
+									style: {
+										position: "absolute",
+										left: 1,
+										right: 1,
+										top: ghost.topPx,
+										height: Math.max(ghost.heightPx, 2),
+										background: theme.rangeBackground,
+										border: `1px solid ${theme.selectedBackground}`,
+										borderRadius: 6,
+										opacity: .7,
+										pointerEvents: "none",
+										zIndex: 2
+									}
+								}) : null
+							]
+						}, day.toISOString());
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/Calendar.tsx
+/**
+* Batteries-included entry point for the react-dom renderer: it picks the right
+* view for `mode`. `month` renders a single {@link MonthView}; `schedule` renders
+* an {@link Agenda}; the time-grid modes render a {@link TimeGrid}. For a
+* scrolling month picker, use {@link MonthList} directly.
+*/
+function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays, locale, theme, height, className, style, onPressEvent, ampm, hourHeight, scrollOffsetMinutes, timeslots, businessHours, showNowIndicator, showAllDayEventCell, dragStepMinutes, onPressCell, onCreateEvent, onDragStart, onDragEvent, onPressDateHeader, renderTimeEvent, hourComponent, maxVisibleEventCount, moreLabel, showAdjacentMonths, fillCellOnSelection, selectedRange, selectedDates, minDate, maxDate, isDateDisabled, keyboardDayNavigation, onPressDay, onPressMore, renderMonthEvent, renderScheduleEvent }) {
+	if (mode === "schedule") return /* @__PURE__ */ jsx(Agenda, {
+		events: events ?? [],
+		locale,
+		ampm,
+		theme,
+		height,
+		activeDate: date,
+		className,
+		style,
+		renderEvent: renderScheduleEvent,
+		onPressEvent,
+		onPressDay
+	});
+	if (mode === "month") return /* @__PURE__ */ jsx(MonthView, {
+		date,
+		events: events ?? [],
+		weekStartsOn,
+		locale,
+		theme,
+		className,
+		style,
+		maxVisibleEventCount,
+		moreLabel,
+		showAdjacentMonths,
+		fillCellOnSelection,
+		selectedRange,
+		selectedDates,
+		minDate,
+		maxDate,
+		isDateDisabled,
+		keyboardDayNavigation,
+		onPressDay,
+		onPressEvent,
+		onPressMore,
+		renderEvent: renderMonthEvent
+	});
+	return /* @__PURE__ */ jsx(TimeGrid, {
+		date,
+		mode,
+		events,
+		weekStartsOn,
+		numberOfDays,
+		locale,
+		theme,
+		height,
+		className,
+		style,
+		ampm,
+		hourHeight,
+		scrollOffsetMinutes,
+		timeslots,
+		businessHours,
+		showNowIndicator,
+		showAllDayEventCell,
+		dragStepMinutes,
+		onPressEvent,
+		onPressCell,
+		onCreateEvent,
+		onDragStart,
+		onDragEvent,
+		onPressDateHeader,
+		renderEvent: renderTimeEvent,
+		hourComponent
+	});
+}
+//#endregion
+//#region src/MonthList.tsx
+/**
+* A vertically scrolling, virtualized list of months: the date picker. Built on
+* Legend List's DOM renderer and the library's headless grid logic. Selection is
+* controlled, pass `selectedRange` (or `selectedDates`) and handle `onPressDay`.
+*/
+function MonthList({ date, pastMonths = 1, futureMonths = 12, weekStartsOn = 0, events, renderEvent, maxVisibleEventCount, moreLabel, onPressEvent, onPressMore, selectedRange, selectedDates, fillCellOnSelection = false, locale, theme: themeOverrides, height = 480, minDate, maxDate, isDateDisabled, keyboardDayNavigation, onPressDay, className, style }) {
+	const theme = useMemo(() => mergeDomTheme(themeOverrides), [themeOverrides]);
+	const months = useMemo(() => {
+		const first = startOfMonth(addMonths(date, -pastMonths));
+		const count = pastMonths + futureMonths + 1;
+		return Array.from({ length: count }, (_, i) => addMonths(first, i));
+	}, [
+		date,
+		pastMonths,
+		futureMonths
+	]);
+	const weekdays = useMemo(() => buildMonthGrid$1(date, {
+		weekStartsOn,
+		locale
+	}).weekdays, [
+		date,
+		weekStartsOn,
+		locale
+	]);
+	const eventsByDay = useMemo(() => {
+		if (!events) return void 0;
+		const map = groupEventsByDay(events);
+		for (const list of map.values()) list.sort(compareDayEvents);
+		return map;
+	}, [events]);
+	const extraData = useMemo(() => [
+		selectedRange,
+		selectedDates,
+		events
+	], [
+		selectedRange,
+		selectedDates,
+		events
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		style: {
+			fontFamily: theme.fontFamily,
+			color: theme.text,
+			...style
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
+				borderBottom: `1px solid ${theme.gridLine}`,
+				padding: "8px 0"
+			},
+			children: weekdays.map((wd) => /* @__PURE__ */ jsx("span", {
+				style: {
+					textAlign: "center",
+					fontSize: 12,
+					fontWeight: 600,
+					color: theme.textMuted
+				},
+				children: wd.label
+			}, wd.label))
+		}), /* @__PURE__ */ jsx(LegendList, {
+			data: months,
+			extraData,
+			keyExtractor: (m) => m.toISOString(),
+			recycleItems: false,
+			estimatedItemSize: theme.cellHeight * 7 + 40,
+			initialScrollIndex: pastMonths,
+			style: {
+				height,
+				overflowY: "auto"
+			},
+			renderItem: ({ item }) => /* @__PURE__ */ jsx(MonthView, {
+				date: item,
+				weekStartsOn,
+				events,
+				eventsByDay,
+				renderEvent,
+				maxVisibleEventCount,
+				moreLabel,
+				onPressEvent,
+				onPressMore,
+				selectedRange,
+				selectedDates,
+				fillCellOnSelection,
+				showAdjacentMonths: false,
+				showWeekdays: false,
+				locale,
+				theme: themeOverrides,
+				minDate,
+				maxDate,
+				isDateDisabled,
+				keyboardDayNavigation,
+				onPressDay
+			})
+		})]
+	});
+}
+//#endregion
+export { Agenda, Calendar, MonthList, MonthView, TimeGrid, buildMonthGrid, darkDomTheme, daySelectionState, defaultDomTheme, getViewDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isWithinDateRange, layoutDayEvents, mergeDomTheme, nextDateRange, useDateRange, useMonthGrid };