@super-calendar/native 2.0.0

package/dist/index.js

@@ -0,0 +1,1700 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+const require_MonthList = require("./MonthList-BCfN-UGz.js");
+let date_fns = require("date-fns");
+let react = require("react");
+let react_native_reanimated = require("react-native-reanimated");
+react_native_reanimated = __toESM(react_native_reanimated);
+let _super_calendar_core = require("@super-calendar/core");
+let _legendapp_list_react_native = require("@legendapp/list/react-native");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_native_gesture_handler = require("react-native-gesture-handler");
+//#region src/components/Agenda.tsx
+/**
+* A vertical, day-grouped list of events (no time grid). Events are sorted by
+* start, grouped under a date header per day. The consumer controls which
+* events (and therefore which date range) are shown.
+*/
+function Agenda({ events, locale, renderEvent, keyExtractor, onPressEvent, onLongPressEvent, onPressDay, activeDate, itemSeparatorComponent }) {
+	const theme = require_MonthList.useCalendarTheme();
+	const RenderEventComponent = renderEvent;
+	const rows = (0, react.useMemo)(() => {
+		const sorted = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
+		const out = [];
+		let currentDay = null;
+		sorted.forEach((event, index) => {
+			if (!currentDay || !(0, date_fns.isSameDay)(event.start, currentDay)) {
+				currentDay = (0, date_fns.startOfDay)(event.start);
+				out.push({
+					kind: "header",
+					date: currentDay,
+					key: `h-${currentDay.toISOString()}`
+				});
+			}
+			out.push({
+				kind: "event",
+				event,
+				index,
+				key: `e-${keyExtractor(event, index)}`
+			});
+		});
+		return out;
+	}, [events, keyExtractor]);
+	const keyExtractorRow = (0, react.useCallback)((row) => row.key, []);
+	const renderItem = (0, react.useCallback)(({ item }) => {
+		if (item.kind === "header") {
+			const isHighlighted = activeDate ? (0, date_fns.isSameDay)(item.date, activeDate) : (0, _super_calendar_core.getIsToday)(item.date);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+				style: [styles$3.header, { color: isHighlighted ? theme.colors.todayBackground : theme.colors.textMuted }],
+				onPress: onPressDay ? () => onPressDay(item.date) : void 0,
+				accessibilityRole: onPressDay ? "button" : "header",
+				children: (0, date_fns.format)(item.date, "EEEE, d LLLL", { locale })
+			});
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			style: styles$3.eventRow,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderEventComponent, {
+				event: item.event,
+				mode: "schedule",
+				isAllDay: (0, _super_calendar_core.isAllDayEvent)(item.event),
+				onPress: () => onPressEvent(item.event),
+				onLongPress: onLongPressEvent ? () => onLongPressEvent(item.event) : void 0
+			})
+		});
+	}, [
+		theme,
+		locale,
+		activeDate,
+		onPressDay,
+		onPressEvent,
+		onLongPressEvent,
+		RenderEventComponent
+	]);
+	if (rows.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+		style: [styles$3.empty, { color: theme.colors.textMuted }],
+		children: "No events"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_legendapp_list_react_native.LegendList, {
+		style: styles$3.list,
+		data: rows,
+		keyExtractor: keyExtractorRow,
+		renderItem,
+		ItemSeparatorComponent: itemSeparatorComponent ?? void 0,
+		recycleItems: false
+	});
+}
+const styles$3 = react_native.StyleSheet.create({
+	list: { flex: 1 },
+	header: {
+		fontSize: 13,
+		fontWeight: "600",
+		paddingTop: 12,
+		paddingBottom: 4,
+		paddingHorizontal: 12
+	},
+	eventRow: {
+		paddingHorizontal: 12,
+		paddingVertical: 2
+	},
+	empty: {
+		fontSize: 14,
+		paddingVertical: 16,
+		paddingHorizontal: 12
+	}
+});
+//#endregion
+//#region src/components/DefaultEvent.tsx
+const BOX_PADDING_V = 2;
+const TIME_LINE_HEIGHT = 30;
+const FALLBACK_TITLE_LINE_HEIGHT = 16;
+const numericStyle = (value, fallback) => typeof value === "number" ? value : fallback;
+/**
+* The built-in event renderer: a filled, rounded box showing the event title
+* and (on the day/week grid, when the box is tall enough) its time range. The
+* title fills the box in whole lines, never a half-cut last line, and clips
+* without an ellipsis unless `ellipsizeTitle` is set. The time is secondary: it
+* only shows once a full line is free beneath the title. Pass your own
+* `renderEvent` to `<Calendar>` to replace it entirely.
+*/
+function DefaultEvent({ event, mode, boxHeight, isAllDay, ampm = false, showTime = true, ellipsizeTitle = false, allDayLabel, cellStyle, onPress, onLongPress }) {
+	const theme = require_MonthList.useCalendarTheme();
+	const isAllDayEvent = isAllDay ?? false;
+	const timeLabel = (0, _super_calendar_core.eventTimeLabel)({
+		mode,
+		isAllDay: isAllDayEvent,
+		start: event.start,
+		end: event.end,
+		ampm,
+		showTime,
+		allDayLabel
+	});
+	const ellipsizeMode = (0, _super_calendar_core.titleEllipsizeMode)(ellipsizeTitle);
+	const titleLineHeight = numericStyle(theme.text.eventTitle.lineHeight, FALLBACK_TITLE_LINE_HEIGHT);
+	const accessibilityLabel = (0, _super_calendar_core.eventAccessibilityLabel)({
+		title: event.title,
+		isAllDay: isAllDayEvent,
+		start: event.start,
+		end: event.end,
+		ampm,
+		allDayLabel
+	});
+	const fixedTitleLines = (0, _super_calendar_core.titleNumberOfLines)(mode, isAllDayEvent);
+	const isSchedule = mode === "schedule";
+	const layout = (0, react_native_reanimated.useDerivedValue)(() => (0, _super_calendar_core.eventChipLayout)({
+		boxHeightPx: boxHeight?.value,
+		mode,
+		hasTime: timeLabel != null,
+		titleLineHeightPx: titleLineHeight,
+		timeLineHeightPx: TIME_LINE_HEIGHT,
+		paddingYPx: BOX_PADDING_V
+	}), [
+		boxHeight,
+		mode,
+		timeLabel,
+		titleLineHeight
+	]);
+	const titleClipStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
+		const lines = layout.value.titleMaxLines;
+		return { maxHeight: lines > 0 ? lines * titleLineHeight : void 0 };
+	}, [layout, titleLineHeight]);
+	const timeStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
+		return { display: layout.value.showTime ? "flex" : "none" };
+	}, [layout]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.TouchableOpacity, {
+		style: [
+			styles$2.box,
+			isSchedule && styles$2.scheduleBox,
+			{ backgroundColor: theme.colors.eventBackground },
+			event.disabled && styles$2.disabled,
+			cellStyle
+		],
+		onPress,
+		onLongPress,
+		activeOpacity: .7,
+		accessibilityRole: "button",
+		accessibilityLabel,
+		accessibilityState: { disabled: event.disabled ?? false },
+		children: [event.title ? fixedTitleLines == null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+			style: [styles$2.titleClip, titleClipStyle],
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+				style: [
+					theme.text.eventTitle,
+					isSchedule && styles$2.scheduleTitle,
+					{ color: theme.colors.eventText }
+				],
+				ellipsizeMode,
+				allowFontScaling: false,
+				children: event.title
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+			style: [
+				theme.text.eventTitle,
+				styles$2.title,
+				isSchedule && styles$2.scheduleTitle,
+				{ color: theme.colors.eventText }
+			],
+			numberOfLines: fixedTitleLines,
+			ellipsizeMode,
+			allowFontScaling: false,
+			children: event.title
+		}) : null, timeLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+			style: timeStyle,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+				style: [
+					styles$2.time,
+					isSchedule && styles$2.scheduleTime,
+					{ color: theme.colors.eventText }
+				],
+				numberOfLines: 2,
+				ellipsizeMode,
+				allowFontScaling: false,
+				children: timeLabel
+			})
+		}) : null]
+	});
+}
+const styles$2 = react_native.StyleSheet.create({
+	box: {
+		flexGrow: 1,
+		flexShrink: 1,
+		flexBasis: "auto",
+		borderRadius: 6,
+		paddingVertical: BOX_PADDING_V,
+		paddingHorizontal: 4,
+		overflow: "hidden"
+	},
+	scheduleBox: {
+		borderRadius: 8,
+		paddingVertical: 6,
+		paddingHorizontal: 10
+	},
+	scheduleTitle: {
+		fontSize: 14,
+		fontWeight: "600",
+		lineHeight: 18
+	},
+	scheduleTime: {
+		fontSize: 13,
+		lineHeight: 18,
+		opacity: .75
+	},
+	titleClip: { overflow: "hidden" },
+	title: { flexShrink: 1 },
+	time: {
+		fontSize: 11,
+		lineHeight: 15
+	},
+	disabled: { opacity: .5 }
+});
+//#endregion
+//#region src/utils/useWebGridZoom.ts
+const ZOOM_SENSITIVITY = .002;
+/**
+* Web-only: zoom the time grid with Ctrl/Cmd + scroll, standing in for the pinch
+* gesture that web has no equivalent of. `target` is the grid's host node — on
+* web a React Native View ref resolves to its DOM element. No-op off web, when
+* `enabled` is false, or before the node mounts. Plain scroll is left untouched.
+*/
+function useWebGridZoom(enabled, target, cellHeight, committedCellHeight, minHeight, maxHeight) {
+	(0, react.useEffect)(() => {
+		if (react_native.Platform.OS !== "web" || !enabled) return;
+		const node = target.current;
+		if (!node) return;
+		const handler = (event) => {
+			if (!event.ctrlKey && !event.metaKey) return;
+			event.preventDefault();
+			const next = Math.min(maxHeight, Math.max(minHeight, cellHeight.value * Math.exp(-event.deltaY * ZOOM_SENSITIVITY)));
+			cellHeight.value = next;
+			committedCellHeight.value = next;
+		};
+		node.addEventListener("wheel", handler, { passive: false });
+		return () => node.removeEventListener("wheel", handler);
+	}, [
+		enabled,
+		target,
+		cellHeight,
+		committedCellHeight,
+		minHeight,
+		maxHeight
+	]);
+}
+//#endregion
+//#region src/components/AllDayLane.tsx
+/**
+* The all-day lane that sits above the scrolling time grid. All-day events are
+* excluded from the timed columns (see `layoutDayEvents`) and shown here,
+* stacked under their day(s). Renders nothing when no day has an all-day event,
+* so timed-only calendars are unaffected.
+*/
+function AllDayLane({ days, events, mode, hourColumnWidth, dayWidth, renderEvent, keyExtractor, onPressEvent, onLongPressEvent }) {
+	const theme = require_MonthList.useCalendarTheme();
+	const RenderEventComponent = renderEvent;
+	const allDay = events.filter(_super_calendar_core.isAllDayEvent);
+	const perDay = days.map((day) => {
+		const start = (0, date_fns.startOfDay)(day);
+		const next = (0, date_fns.addDays)(start, 1);
+		return allDay.filter((event) => event.start < next && event.end > start);
+	});
+	if (perDay.every((list) => list.length === 0)) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+		style: [styles$1.lane, { borderBottomColor: theme.colors.gridLine }],
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			style: [styles$1.gutter, { width: hourColumnWidth }],
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+				style: [styles$1.label, { color: theme.colors.textMuted }],
+				allowFontScaling: false,
+				children: "all-day"
+			})
+		}), days.map((day, dayIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			style: [styles$1.column, { width: dayWidth }],
+			children: perDay[dayIndex].map((event, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+				style: styles$1.chip,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderEventComponent, {
+					event,
+					mode,
+					isAllDay: true,
+					onPress: () => onPressEvent(event),
+					onLongPress: onLongPressEvent ? () => onLongPressEvent(event) : void 0
+				})
+			}, keyExtractor(event, index)))
+		}, day.toISOString()))]
+	});
+}
+const styles$1 = react_native.StyleSheet.create({
+	lane: {
+		flexDirection: "row",
+		borderBottomWidth: react_native.StyleSheet.hairlineWidth
+	},
+	gutter: { justifyContent: "center" },
+	label: {
+		fontSize: 10,
+		textAlign: "right",
+		paddingRight: 6
+	},
+	column: {
+		paddingVertical: 2,
+		paddingHorizontal: 1,
+		gap: 2
+	},
+	chip: { minHeight: 18 }
+});
+//#endregion
+//#region src/components/TimeGrid.tsx
+const isWeb = react_native.Platform.OS === "web";
+const MINUTES_PER_HOUR = 60;
+const HOURS_PER_DAY = 24;
+const MINUTES_PER_DAY = MINUTES_PER_HOUR * HOURS_PER_DAY;
+const PAGE_WINDOW = 180;
+const PAGE_VIEWABILITY = { itemVisiblePercentThreshold: 90 };
+const DEFAULT_HOUR_HEIGHT = 48;
+const DEFAULT_MIN_HOUR_HEIGHT = 32;
+const DEFAULT_MAX_HOUR_HEIGHT = 160;
+const DEFAULT_HOUR_COLUMN_WIDTH = 56;
+const MIN_EVENT_HEIGHT = 32;
+const EVENT_GAP = 2;
+const DRAG_ACTIVATE_MS = 300;
+const MOVE_ACTIVATE_MS = 500;
+const DRAG_ACTIVATE_PX = 8;
+const RESIZE_HANDLE_HEIGHT = 14;
+const DEFAULT_DRAG_STEP_MINUTES = 15;
+const HOUR_LABEL_TOP_INSET = 12;
+const NOW_TICK_MS = 6e4;
+function useNow(enabled) {
+	const [now, setNow] = (0, react.useState)(() => /* @__PURE__ */ new Date());
+	(0, react.useEffect)(() => {
+		if (!enabled) return;
+		setNow(/* @__PURE__ */ new Date());
+		const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), NOW_TICK_MS);
+		return () => clearInterval(id);
+	}, [enabled]);
+	return now;
+}
+function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, dayWidth, dayIndex, dayCount, mode, renderEvent, snapMinutes, onPress, onLongPress, onDragEvent, onDragStart, showDragHandle }) {
+	const RenderEventComponent = renderEvent;
+	const theme = require_MonthList.useCalendarTheme();
+	const draggable = onDragEvent != null && !positioned.event.disabled;
+	const resizable = draggable && !positioned.continuesAfter;
+	const moveOffset = (0, react_native_reanimated.useSharedValue)(0);
+	const moveOffsetX = (0, react_native_reanimated.useSharedValue)(0);
+	const resizeDelta = (0, react_native_reanimated.useSharedValue)(0);
+	const boxHeight = (0, react_native_reanimated.useDerivedValue)(() => Math.max(positioned.durationHours * cellHeight.value + resizeDelta.value, MIN_EVENT_HEIGHT), [positioned.durationHours]);
+	const boxStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
+		top: (positioned.startHours - minHour) * cellHeight.value + moveOffset.value,
+		height: boxHeight.value,
+		transform: [{ translateX: moveOffsetX.value }]
+	}), [
+		positioned.startHours,
+		positioned.durationHours,
+		minHour
+	]);
+	(0, react.useEffect)(() => {
+		moveOffset.value = 0;
+		moveOffsetX.value = 0;
+		resizeDelta.value = 0;
+	}, [
+		positioned.startHours,
+		positioned.durationHours,
+		moveOffset,
+		moveOffsetX,
+		resizeDelta
+	]);
+	const latest = (0, react.useRef)({
+		event: positioned.event,
+		onDragEvent,
+		onDragStart
+	});
+	latest.current = {
+		event: positioned.event,
+		onDragEvent,
+		onDragStart
+	};
+	const snapBack = (0, react.useCallback)(() => {
+		moveOffset.value = 0;
+		moveOffsetX.value = 0;
+		resizeDelta.value = 0;
+	}, [
+		moveOffset,
+		moveOffsetX,
+		resizeDelta
+	]);
+	const commitDrag = (0, react.useCallback)((deltaStartMin, deltaEndMin) => {
+		const { event, onDragEvent: handler } = latest.current;
+		if (!handler) return;
+		const next = (0, _super_calendar_core.resolveDraggedBounds)(event.start, event.end, deltaStartMin, deltaEndMin, snapMinutes);
+		if (!next) {
+			snapBack();
+			return;
+		}
+		if (handler(event, next.start, next.end) === false) snapBack();
+	}, [snapMinutes, snapBack]);
+	const notifyDragStart = (0, react.useCallback)(() => {
+		latest.current.onDragStart?.(latest.current.event);
+	}, []);
+	const moveGesture = (0, react.useMemo)(() => {
+		const pan = react_native_gesture_handler.Gesture.Pan().enabled(draggable).onStart(() => {
+			(0, react_native_reanimated.runOnJS)(notifyDragStart)();
+		}).onUpdate((event) => {
+			moveOffset.value = event.translationY;
+			moveOffsetX.value = event.translationX;
+		}).onEnd((event) => {
+			const minuteDelta = (0, _super_calendar_core.snapDeltaMinutes)(event.translationY, cellHeight.value, snapMinutes);
+			const rawDayDelta = dayWidth > 0 ? Math.round(event.translationX / dayWidth) : 0;
+			const dayDelta = Math.min(Math.max(dayIndex + rawDayDelta, 0), dayCount - 1) - dayIndex;
+			if (minuteDelta === 0 && dayDelta === 0) {
+				moveOffset.value = 0;
+				moveOffsetX.value = 0;
+				return;
+			}
+			moveOffset.value = minuteDelta / MINUTES_PER_HOUR * cellHeight.value;
+			moveOffsetX.value = dayDelta * dayWidth;
+			const totalDelta = minuteDelta + dayDelta * MINUTES_PER_DAY;
+			(0, react_native_reanimated.runOnJS)(commitDrag)(totalDelta, totalDelta);
+		});
+		return isWeb ? pan.activeOffsetX([-8, DRAG_ACTIVATE_PX]).activeOffsetY([-8, DRAG_ACTIVATE_PX]) : pan.activateAfterLongPress(MOVE_ACTIVATE_MS);
+	}, [
+		draggable,
+		snapMinutes,
+		cellHeight,
+		moveOffset,
+		moveOffsetX,
+		dayWidth,
+		dayIndex,
+		dayCount,
+		commitDrag,
+		notifyDragStart
+	]);
+	const resizeGesture = (0, react.useMemo)(() => react_native_gesture_handler.Gesture.Pan().enabled(resizable).onStart(() => {
+		(0, react_native_reanimated.runOnJS)(notifyDragStart)();
+	}).onUpdate((event) => {
+		resizeDelta.value = event.translationY;
+	}).onEnd((event) => {
+		const delta = (0, _super_calendar_core.snapDeltaMinutes)(event.translationY, cellHeight.value, snapMinutes);
+		if (delta === 0) {
+			resizeDelta.value = 0;
+			return;
+		}
+		resizeDelta.value = delta / MINUTES_PER_HOUR * cellHeight.value;
+		(0, react_native_reanimated.runOnJS)(commitDrag)(0, delta);
+	}), [
+		resizable,
+		snapMinutes,
+		cellHeight,
+		resizeDelta,
+		commitDrag,
+		notifyDragStart
+	]);
+	const handlePress = () => onPress(positioned.event);
+	const handleLongPress = !draggable && onLongPress ? () => onLongPress(positioned.event) : void 0;
+	const box = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native_reanimated.default.View, {
+		style: [
+			styles.eventBox,
+			{
+				left,
+				width
+			},
+			boxStyle
+		],
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderEventComponent, {
+			event: positioned.event,
+			mode,
+			boxHeight,
+			continuesBefore: positioned.continuesBefore,
+			continuesAfter: positioned.continuesAfter,
+			onPress: handlePress,
+			onLongPress: handleLongPress
+		}), resizable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_gesture_handler.GestureDetector, {
+			gesture: resizeGesture,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+				style: styles.resizeHandle,
+				children: showDragHandle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles.resizeGrip, { backgroundColor: theme.colors.eventText }] }) : null
+			})
+		}) : null]
+	});
+	if (!draggable) return box;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_gesture_handler.GestureDetector, {
+		gesture: moveGesture,
+		children: box
+	});
+}
+const HourRow = ({ hour, minHour, cellHeight, hourColumnWidth, label, ampm, hourComponent }) => {
+	const theme = require_MonthList.useCalendarTheme();
+	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ top: (hour - minHour) * cellHeight.value }), [hour, minHour]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native_reanimated.default.View, {
+		style: [
+			styles.hourRow,
+			styles.nonInteractive,
+			animatedStyle
+		],
+		children: [hourComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			style: { width: hourColumnWidth },
+			children: hourComponent(hour, ampm)
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+			style: [
+				theme.text.hourLabel,
+				styles.hourLabel,
+				{
+					width: hourColumnWidth,
+					color: theme.colors.textMuted
+				}
+			],
+			allowFontScaling: false,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [styles.hourLine, { backgroundColor: theme.colors.gridLine }] })]
+	});
+};
+const TimeslotLine = ({ hour, minHour, fraction, cellHeight, hourColumnWidth }) => {
+	const theme = require_MonthList.useCalendarTheme();
+	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ top: (hour - minHour + fraction) * cellHeight.value }), [
+		hour,
+		minHour,
+		fraction
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, { style: [
+		styles.timeslotLine,
+		styles.nonInteractive,
+		{
+			left: hourColumnWidth,
+			backgroundColor: theme.colors.gridLine
+		},
+		animatedStyle
+	] });
+};
+const NowIndicator = ({ cellHeight, nowHours, minHour, left, width, color }) => {
+	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ top: (nowHours - minHour) * cellHeight.value }), [nowHours, minHour]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, { style: [
+		styles.nowIndicator,
+		styles.nonInteractive,
+		{
+			left,
+			width,
+			backgroundColor: color
+		},
+		animatedStyle
+	] });
+};
+const ShadeBand = ({ cellHeight, startHour, endHour, minHour, left, width, color }) => {
+	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
+		top: (startHour - minHour) * cellHeight.value,
+		height: (endHour - startHour) * cellHeight.value
+	}), [
+		startHour,
+		endHour,
+		minHour
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+		testID: "business-hours-shade",
+		style: [
+			styles.shadeBand,
+			styles.nonInteractive,
+			{
+				left,
+				width,
+				backgroundColor: color
+			},
+			animatedStyle
+		]
+	});
+};
+function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hourHeight, committedCellHeight, scrollY, isActive, initialScrollY, onSettleOffset, weekStartsOn, weekEndsOn, width, hourColumnWidth, minHour, maxHour, ampm, timeslots, isRTL, showAllDayEventCell, showVerticalScrollIndicator, verticalScrollEnabled, hourComponent, calendarCellStyle, minHourHeight, maxHourHeight, showNowIndicator, businessHours, renderEvent, keyExtractor, snapMinutes, showDragHandle, onPressEvent, onLongPressEvent, onDragEvent, onDragStart, onPressCell, onLongPressCell, onCreateEvent }) {
+	const theme = require_MonthList.useCalendarTheme();
+	const scrollRef = (0, react_native_reanimated.useAnimatedRef)();
+	const heightSource = isActive ? cellHeight : committedCellHeight;
+	const isDragging = (0, react_native_reanimated.useSharedValue)(false);
+	const isActiveShared = (0, react_native_reanimated.useSharedValue)(isActive);
+	(0, react.useEffect)(() => {
+		isActiveShared.value = isActive;
+	}, [isActive, isActiveShared]);
+	const scrollHandler = (0, react_native_reanimated.useAnimatedScrollHandler)({
+		onScroll: (event) => {
+			if (isActiveShared.value && isDragging.value) scrollY.value = event.contentOffset.y;
+		},
+		onBeginDrag: () => {
+			isDragging.value = true;
+		},
+		onEndDrag: (event) => {
+			isDragging.value = false;
+			if (!isWeb && isActiveShared.value) {
+				scrollY.value = event.contentOffset.y;
+				(0, react_native_reanimated.runOnJS)(onSettleOffset)(event.contentOffset.y);
+			}
+		},
+		onMomentumEnd: (event) => {
+			isDragging.value = false;
+			if (!isWeb && isActiveShared.value) {
+				scrollY.value = event.contentOffset.y;
+				(0, react_native_reanimated.runOnJS)(onSettleOffset)(event.contentOffset.y);
+			}
+		}
+	});
+	(0, react_native_reanimated.useAnimatedReaction)(() => scrollY.value, (current, previous) => {
+		if (!isActiveShared.value && current !== previous) (0, react_native_reanimated.scrollTo)(scrollRef, 0, current, false);
+	});
+	(0, react_native_reanimated.useAnimatedReaction)(() => isActiveShared.value, (active, previous) => {
+		if (isWeb || !active || active === previous) return;
+		(0, react_native_reanimated.scrollTo)(scrollRef, 0, scrollY.value, false);
+	});
+	const days = (0, react.useMemo)(() => (0, _super_calendar_core.getViewDays)(mode, date, weekStartsOn, numberOfDays, isRTL, weekEndsOn), [
+		mode,
+		date,
+		weekStartsOn,
+		numberOfDays,
+		isRTL,
+		weekEndsOn
+	]);
+	const dayWidth = (width - hourColumnWidth) / days.length;
+	const dayLeft = (dayIndex) => hourColumnWidth + dayIndex * dayWidth;
+	const dayLayouts = (0, react.useMemo)(() => days.map((day) => (0, _super_calendar_core.layoutDayEvents)(events, day)), [days, events]);
+	const cellDateFromTouch = (event) => {
+		const { locationX, locationY } = event.nativeEvent;
+		const day = days[days.length === 1 ? 0 : Math.floor(locationX / dayWidth)];
+		if (!day) return null;
+		const minutes = Math.round((minHour + locationY / heightSource.value) * MINUTES_PER_HOUR);
+		const pressed = new Date(day);
+		pressed.setHours(0, 0, 0, 0);
+		pressed.setMinutes(minutes);
+		return pressed;
+	};
+	const handleBackgroundPress = (event) => {
+		const date = onPressCell && cellDateFromTouch(event);
+		if (date) onPressCell?.(date);
+	};
+	const handleBackgroundLongPress = (event) => {
+		const date = onLongPressCell && cellDateFromTouch(event);
+		if (date) onLongPressCell?.(date);
+	};
+	const hoursRange = (0, react.useMemo)(() => Array.from({ length: maxHour - minHour }, (_, index) => minHour + index), [minHour, maxHour]);
+	const now = useNow(showNowIndicator && isActive);
+	const nowDayIndex = days.findIndex((day) => (0, _super_calendar_core.getIsToday)(day));
+	const nowHours = ((0, date_fns.getHours)(now) * MINUTES_PER_HOUR + (0, date_fns.getMinutes)(now)) / MINUTES_PER_HOUR;
+	const nowInWindow = nowHours >= minHour && nowHours <= maxHour;
+	const fullHeightStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ height: (maxHour - minHour) * heightSource.value }), [
+		minHour,
+		maxHour,
+		heightSource
+	]);
+	const pinchStartCellHeight = (0, react_native_reanimated.useSharedValue)(hourHeight);
+	const zoomGesture = (0, react.useMemo)(() => {
+		const pinch = react_native_gesture_handler.Gesture.Pinch().onStart(() => {
+			pinchStartCellHeight.value = cellHeight.value;
+		}).onUpdate((event) => {
+			cellHeight.value = Math.min(maxHourHeight, Math.max(minHourHeight, pinchStartCellHeight.value * event.scale));
+		}).onEnd(() => {
+			committedCellHeight.value = cellHeight.value;
+		});
+		return react_native_gesture_handler.Gesture.Simultaneous(pinch, react_native_gesture_handler.Gesture.Native());
+	}, [
+		cellHeight,
+		committedCellHeight,
+		pinchStartCellHeight,
+		minHourHeight,
+		maxHourHeight
+	]);
+	const createEnabled = onCreateEvent != null;
+	const createActive = (0, react_native_reanimated.useSharedValue)(0);
+	const createTop = (0, react_native_reanimated.useSharedValue)(0);
+	const createHeight = (0, react_native_reanimated.useSharedValue)(0);
+	const createLeft = (0, react_native_reanimated.useSharedValue)(0);
+	const createWidth = (0, react_native_reanimated.useSharedValue)(0);
+	const createStartY = (0, react_native_reanimated.useSharedValue)(0);
+	const createDayIndex = (0, react_native_reanimated.useSharedValue)(0);
+	const createCancelled = (0, react_native_reanimated.useSharedValue)(0);
+	const commitCreate = (0, react.useCallback)((startY, endY, dayIndex) => {
+		const day = days[dayIndex];
+		if (!day) return;
+		const range = (0, _super_calendar_core.cellRangeFromDrag)(day, startY, endY, heightSource.value, minHour, snapMinutes);
+		if (range) onCreateEvent?.(range.start, range.end);
+	}, [
+		days,
+		heightSource,
+		minHour,
+		snapMinutes,
+		onCreateEvent
+	]);
+	const tapCell = (0, react.useCallback)((x, y) => {
+		const day = days[days.length === 1 ? 0 : Math.floor(x / dayWidth)];
+		if (!day) return;
+		const minutes = Math.round((minHour + y / heightSource.value) * MINUTES_PER_HOUR);
+		const pressed = new Date(day);
+		pressed.setHours(0, 0, 0, 0);
+		pressed.setMinutes(minutes);
+		onPressCell?.(pressed);
+	}, [
+		days,
+		dayWidth,
+		minHour,
+		heightSource,
+		onPressCell
+	]);
+	const createGesture = (0, react.useMemo)(() => {
+		const pan = react_native_gesture_handler.Gesture.Pan().enabled(createEnabled).onStart((event) => {
+			const idx = days.length === 1 ? 0 : Math.floor(event.x / dayWidth);
+			createDayIndex.value = idx;
+			createStartY.value = event.y;
+			createLeft.value = hourColumnWidth + idx * dayWidth;
+			createWidth.value = dayWidth;
+			createTop.value = event.y;
+			createHeight.value = 0;
+			createActive.value = 1;
+			createCancelled.value = 0;
+		}).onUpdate((event) => {
+			if (createCancelled.value) return;
+			const stepPx = snapMinutes / MINUTES_PER_HOUR * heightSource.value;
+			const snap = (y) => stepPx > 0 ? Math.round(y / stepPx) * stepPx : y;
+			const startSnap = snap(createStartY.value);
+			const endSnap = snap(createStartY.value + event.translationY);
+			createTop.value = Math.min(startSnap, endSnap);
+			createHeight.value = Math.max(Math.abs(endSnap - startSnap), stepPx);
+		}).onEnd((event) => {
+			createActive.value = 0;
+			createHeight.value = 0;
+			if (createCancelled.value) return;
+			(0, react_native_reanimated.runOnJS)(commitCreate)(createStartY.value, createStartY.value + event.translationY, createDayIndex.value);
+		});
+		return isWeb ? pan.activeOffsetY([-8, DRAG_ACTIVATE_PX]) : pan.activateAfterLongPress(DRAG_ACTIVATE_MS);
+	}, [
+		createEnabled,
+		days.length,
+		dayWidth,
+		hourColumnWidth,
+		heightSource,
+		snapMinutes,
+		commitCreate,
+		createActive,
+		createTop,
+		createHeight,
+		createLeft,
+		createWidth,
+		createStartY,
+		createDayIndex,
+		createCancelled
+	]);
+	const backgroundGesture = (0, react.useMemo)(() => {
+		const tap = isWeb && onPressCell != null ? react_native_gesture_handler.Gesture.Tap().onEnd((event) => {
+			(0, react_native_reanimated.runOnJS)(tapCell)(event.x, event.y);
+		}) : null;
+		if (createEnabled && tap) return react_native_gesture_handler.Gesture.Exclusive(createGesture, tap);
+		if (createEnabled) return createGesture;
+		return tap;
+	}, [
+		createEnabled,
+		createGesture,
+		onPressCell,
+		tapCell
+	]);
+	(0, react.useEffect)(() => {
+		if (!isWeb || !createEnabled) return;
+		const doc = globalThis.document;
+		if (!doc) return;
+		const handler = (event) => {
+			if (event.key !== "Escape" || !createActive.value) return;
+			createCancelled.value = 1;
+			createActive.value = 0;
+			createHeight.value = 0;
+		};
+		doc.addEventListener("keydown", handler);
+		return () => doc.removeEventListener("keydown", handler);
+	}, [
+		createEnabled,
+		createActive,
+		createCancelled,
+		createHeight
+	]);
+	const createGhostStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
+		top: createTop.value,
+		height: createHeight.value,
+		left: createLeft.value,
+		width: createWidth.value,
+		opacity: createActive.value
+	}));
+	const cellLayer = onPressCell || onLongPressCell || createEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
+		style: [styles.cellPressLayer, { left: hourColumnWidth }],
+		onPress: onPressCell ? handleBackgroundPress : void 0,
+		onLongPress: !createEnabled && onLongPressCell ? handleBackgroundLongPress : void 0,
+		tabIndex: -1,
+		importantForAccessibility: "no",
+		accessibilityElementsHidden: true
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+		style: styles.container,
+		children: [showAllDayEventCell ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AllDayLane, {
+			days,
+			events,
+			mode,
+			hourColumnWidth,
+			dayWidth,
+			renderEvent,
+			keyExtractor,
+			onPressEvent,
+			onLongPressEvent
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_gesture_handler.GestureDetector, {
+			gesture: zoomGesture,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.ScrollView, {
+				ref: scrollRef,
+				showsVerticalScrollIndicator: showVerticalScrollIndicator,
+				scrollEnabled: verticalScrollEnabled,
+				onScroll: scrollHandler,
+				scrollEventThrottle: 16,
+				contentContainerStyle: { paddingTop: HOUR_LABEL_TOP_INSET },
+				contentOffset: {
+					x: 0,
+					y: initialScrollY
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native_reanimated.default.View, {
+					style: [styles.content, fullHeightStyle],
+					children: [
+						cellLayer && backgroundGesture ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_gesture_handler.GestureDetector, {
+							gesture: backgroundGesture,
+							children: cellLayer
+						}) : cellLayer,
+						days.map((day, dayIndex) => (0, _super_calendar_core.isWeekend)(day) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, { style: [
+							styles.weekendColumn,
+							styles.nonInteractive,
+							{ backgroundColor: theme.colors.weekendBackground },
+							{
+								left: dayLeft(dayIndex),
+								width: dayWidth
+							},
+							fullHeightStyle
+						] }, `weekend-${day.toISOString()}`) : null),
+						calendarCellStyle ? days.map((day, dayIndex) => {
+							const cellStyle = calendarCellStyle(day);
+							return cellStyle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, { style: [
+								styles.weekendColumn,
+								styles.nonInteractive,
+								{
+									left: dayLeft(dayIndex),
+									width: dayWidth
+								},
+								cellStyle,
+								fullHeightStyle
+							] }, `cell-${day.toISOString()}`) : null;
+						}) : null,
+						businessHours ? days.flatMap((day, dayIndex) => (0, _super_calendar_core.closedHourBands)(day, businessHours, minHour, maxHour).map((band, bandIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShadeBand, {
+							cellHeight: heightSource,
+							startHour: band.start,
+							endHour: band.end,
+							minHour,
+							left: dayLeft(dayIndex),
+							width: dayWidth,
+							color: theme.colors.outsideHoursBackground
+						}, `closed-${day.toISOString()}-${bandIndex}`))) : null,
+						days.map((day, dayIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, { style: [
+							styles.daySeparator,
+							styles.nonInteractive,
+							{ backgroundColor: theme.colors.gridLine },
+							{ left: dayLeft(dayIndex) },
+							fullHeightStyle
+						] }, `separator-${day.toISOString()}`)),
+						hoursRange.map((hour) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HourRow, {
+							hour,
+							minHour,
+							cellHeight: heightSource,
+							hourColumnWidth,
+							label: (0, _super_calendar_core.formatHour)(hour, { ampm }),
+							ampm,
+							hourComponent
+						}, hour)),
+						timeslots > 1 ? hoursRange.flatMap((hour) => Array.from({ length: timeslots - 1 }, (_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeslotLine, {
+							hour,
+							minHour,
+							fraction: (i + 1) / timeslots,
+							cellHeight: heightSource,
+							hourColumnWidth
+						}, `slot-${hour}-${i}`))) : null,
+						dayLayouts.flatMap((layout, dayIndex) => layout.filter((p) => p.startHours < maxHour && p.startHours + p.durationHours > minHour).map((positioned, eventIndex) => {
+							const columnWidth = dayWidth / positioned.columns;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedEventBox, {
+								positioned,
+								cellHeight: heightSource,
+								minHour,
+								left: dayLeft(dayIndex) + positioned.column * columnWidth,
+								width: columnWidth,
+								dayWidth,
+								dayIndex,
+								dayCount: days.length,
+								mode,
+								renderEvent,
+								snapMinutes,
+								showDragHandle,
+								onPress: onPressEvent,
+								onLongPress: onLongPressEvent,
+								onDragEvent,
+								onDragStart
+							}, `${dayIndex}:${keyExtractor(positioned.event, eventIndex)}`);
+						})),
+						showNowIndicator && nowDayIndex >= 0 && nowInWindow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NowIndicator, {
+							cellHeight: heightSource,
+							nowHours,
+							minHour,
+							left: dayLeft(nowDayIndex),
+							width: dayWidth,
+							color: theme.colors.nowIndicator
+						}) : null,
+						createEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, { style: [
+							styles.createGhost,
+							{ pointerEvents: "none" },
+							{
+								backgroundColor: theme.colors.eventBackground,
+								borderColor: theme.colors.todayBackground
+							},
+							createGhostStyle
+						] }) : null
+					]
+				})
+			})
+		})]
+	});
+}
+const TimetablePage = (0, react.memo)(TimetablePageInner);
+function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellHeight, hourHeight = 48, weekStartsOn, renderEvent, keyExtractor, scrollOffsetMinutes = 0, hourColumnWidth: hourColumnWidthProp = DEFAULT_HOUR_COLUMN_WIDTH, hideHours = false, timeslots = 1, showAllDayEventCell = true, calendarCellStyle, businessHours, showWeekNumber = false, headerComponent, minHour = 0, maxHour = HOURS_PER_DAY, ampm = false, isRTL = false, minHourHeight = DEFAULT_MIN_HOUR_HEIGHT, maxHourHeight = DEFAULT_MAX_HOUR_HEIGHT, showNowIndicator = true, locale, freeSwipe = false, swipeEnabled = true, showVerticalScrollIndicator = true, verticalScrollEnabled = true, weekNumberPrefix = "W", hourComponent, activeDate, resetPageOnPressCell = false, dragStepMinutes = DEFAULT_DRAG_STEP_MINUTES, showDragHandle = true, onPressEvent, onLongPressEvent, onDragEvent, onDragStart, onPressCell, onLongPressCell, onCreateEvent, onPressDateHeader, onChangeDate, renderHeader }) {
+	const clampedMinHour = Math.max(0, Math.min(minHour, HOURS_PER_DAY - 1));
+	const clampedMaxHour = Math.max(clampedMinHour + 1, Math.min(maxHour, HOURS_PER_DAY));
+	const hourColumnWidth = hideHours ? 0 : hourColumnWidthProp;
+	const { width, height } = (0, react_native.useWindowDimensions)();
+	const listRef = (0, react.useRef)(null);
+	const containerRef = (0, react.useRef)(null);
+	const suppressCaptureUntilRef = (0, react.useRef)(0);
+	const [pageHeight, setPageHeight] = (0, react.useState)(height);
+	const [containerWidth, setContainerWidth] = (0, react.useState)(width);
+	const [measured, setMeasured] = (0, react.useState)(false);
+	const weekAnchored = mode === "week" || mode === "custom" && weekEndsOn != null;
+	const step = weekAnchored ? 7 : (0, _super_calendar_core.viewDayCount)(mode, numberOfDays);
+	const seedDefaultY = Math.max(0, scrollOffsetMinutes / MINUTES_PER_HOUR - clampedMinHour) * hourHeight;
+	const scrollY = (0, react_native_reanimated.useSharedValue)(seedDefaultY);
+	const offsetSeedRef = (0, react.useRef)(null);
+	const captureOffsetSeed = (0, react.useCallback)((y) => {
+		offsetSeedRef.current = y;
+	}, []);
+	const committedCellHeight = (0, react_native_reanimated.useSharedValue)(hourHeight);
+	useWebGridZoom(isWeb, containerRef, cellHeight, committedCellHeight, minHourHeight, maxHourHeight);
+	const [anchorDate] = (0, react.useState)(date);
+	const anchor = (0, react.useMemo)(() => weekAnchored ? (0, date_fns.startOfWeek)(anchorDate, { weekStartsOn }) : (0, date_fns.startOfDay)(anchorDate), [
+		weekAnchored,
+		anchorDate,
+		weekStartsOn
+	]);
+	const pageDates = (0, react.useMemo)(() => Array.from({ length: 361 }, (_, i) => (0, date_fns.addDays)(anchor, (i - PAGE_WINDOW) * step)), [anchor, step]);
+	const activeIndex = (0, react.useCallback)((target) => {
+		const aligned = weekAnchored ? (0, date_fns.startOfWeek)(target, { weekStartsOn }) : (0, date_fns.startOfDay)(target);
+		return Math.floor((0, date_fns.differenceInCalendarDays)(aligned, anchor) / step) + PAGE_WINDOW;
+	}, [
+		anchor,
+		weekAnchored,
+		step,
+		weekStartsOn
+	])(date);
+	const viewedIndexRef = (0, react.useRef)(activeIndex);
+	const pendingScrollIndexRef = (0, react.useRef)(null);
+	const headerDays = (0, react.useMemo)(() => (0, _super_calendar_core.getViewDays)(mode, pageDates[activeIndex] ?? date, weekStartsOn, numberOfDays, isRTL, weekEndsOn), [
+		mode,
+		pageDates,
+		activeIndex,
+		date,
+		weekStartsOn,
+		numberOfDays,
+		isRTL,
+		weekEndsOn
+	]);
+	const handleViewableItemsChanged = (0, react.useCallback)((info) => {
+		if (isWeb) return;
+		const settled = info.viewableItems.find((token) => token.isViewable);
+		if (settled?.index == null) return;
+		if (pendingScrollIndexRef.current != null) {
+			if (settled.index === pendingScrollIndexRef.current) {
+				pendingScrollIndexRef.current = null;
+				viewedIndexRef.current = settled.index;
+			}
+			return;
+		}
+		if (settled.index === viewedIndexRef.current) return;
+		viewedIndexRef.current = settled.index;
+		if (settled.item) onChangeDate(settled.item);
+	}, [onChangeDate]);
+	(0, react.useEffect)(() => {
+		if (activeIndex === viewedIndexRef.current) return;
+		viewedIndexRef.current = activeIndex;
+		pendingScrollIndexRef.current = activeIndex;
+		listRef.current?.scrollToIndex({
+			index: activeIndex,
+			animated: false
+		});
+	}, [activeIndex]);
+	(0, react.useEffect)(() => {
+		if (!isWeb) return;
+		const root = containerRef.current;
+		if (!root) return;
+		const restoreVisiblePage = () => {
+			const vw = (root.ownerDocument?.defaultView ?? globalThis).innerWidth;
+			for (const el of root.querySelectorAll("*")) {
+				const style = getComputedStyle(el);
+				if (!((style.overflowY === "scroll" || style.overflowY === "auto") && el.scrollHeight > el.clientHeight + 20 && el.clientHeight > 100)) continue;
+				const rect = el.getBoundingClientRect();
+				if (rect.left > -50 && rect.right <= vw + 50) {
+					el.scrollTop = scrollY.value;
+					break;
+				}
+			}
+		};
+		suppressCaptureUntilRef.current = Date.now() + 400;
+		let raf2 = 0;
+		const raf1 = requestAnimationFrame(() => {
+			restoreVisiblePage();
+			raf2 = requestAnimationFrame(restoreVisiblePage);
+		});
+		return () => {
+			cancelAnimationFrame(raf1);
+			cancelAnimationFrame(raf2);
+		};
+	}, [activeIndex, pageHeight]);
+	(0, react.useEffect)(() => {
+		if (!isWeb) return;
+		const root = containerRef.current;
+		if (!root) return;
+		const onScrollCapture = (event) => {
+			if (Date.now() < suppressCaptureUntilRef.current) return;
+			const el = event.target;
+			if (!el || typeof el.scrollTop !== "number" || el.clientHeight <= 100) return;
+			const rect = el.getBoundingClientRect();
+			const vw = (root.ownerDocument?.defaultView ?? globalThis).innerWidth;
+			if (rect.left <= -50 || rect.right > vw + 50) return;
+			scrollY.value = el.scrollTop;
+			offsetSeedRef.current = el.scrollTop;
+		};
+		root.addEventListener("scroll", onScrollCapture, true);
+		return () => root.removeEventListener("scroll", onScrollCapture, true);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!isWeb) return;
+		const root = containerRef.current;
+		if (!root) return;
+		const lockHorizontal = () => {
+			for (const el of root.querySelectorAll("*")) {
+				if (el.scrollWidth <= el.clientWidth + 20 || el.clientWidth <= 100) continue;
+				const overflowX = getComputedStyle(el).overflowX;
+				if (overflowX === "auto" || overflowX === "scroll") {
+					el.style.overflowX = "hidden";
+					el.style.touchAction = "pan-y";
+				}
+			}
+		};
+		const raf = requestAnimationFrame(lockHorizontal);
+		return () => cancelAnimationFrame(raf);
+	}, [pageHeight]);
+	require_MonthList.useWebPagerKeys(swipeEnabled, (0, react.useCallback)((delta) => {
+		const target = pageDates[activeIndex + delta];
+		if (target) onChangeDate(target);
+	}, [
+		pageDates,
+		activeIndex,
+		onChangeDate
+	]));
+	const handlePressCell = (0, react.useMemo)(() => {
+		if (!onPressCell) return void 0;
+		if (!resetPageOnPressCell) return onPressCell;
+		return (cellDate) => {
+			onPressCell(cellDate);
+			listRef.current?.scrollToIndex({
+				index: activeIndex,
+				animated: true
+			});
+		};
+	}, [
+		onPressCell,
+		resetPageOnPressCell,
+		activeIndex
+	]);
+	const snapToIndices = (0, react.useMemo)(() => pageDates.map((_, index) => index), [pageDates]);
+	const keyExtractorList = (0, react.useCallback)((item) => item.toISOString(), []);
+	const getFixedItemSize = (0, react.useCallback)(() => containerWidth, [containerWidth]);
+	const renderItem = (0, react.useCallback)(({ item, index }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		style: {
+			width: containerWidth,
+			height: pageHeight
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimetablePage, {
+			mode,
+			numberOfDays,
+			date: item,
+			width: containerWidth,
+			events,
+			cellHeight,
+			hourHeight,
+			committedCellHeight,
+			scrollY,
+			isActive: index === activeIndex,
+			initialScrollY: offsetSeedRef.current ?? seedDefaultY,
+			onSettleOffset: captureOffsetSeed,
+			weekStartsOn,
+			weekEndsOn,
+			hourColumnWidth,
+			minHour: clampedMinHour,
+			maxHour: clampedMaxHour,
+			ampm,
+			timeslots,
+			isRTL,
+			showAllDayEventCell,
+			showVerticalScrollIndicator,
+			verticalScrollEnabled,
+			hourComponent,
+			calendarCellStyle,
+			businessHours,
+			minHourHeight,
+			maxHourHeight,
+			showNowIndicator,
+			renderEvent,
+			keyExtractor,
+			snapMinutes: Math.max(1, dragStepMinutes),
+			showDragHandle,
+			onPressEvent,
+			onLongPressEvent,
+			onDragEvent,
+			onDragStart,
+			onPressCell: handlePressCell,
+			onLongPressCell,
+			onCreateEvent
+		})
+	}), [
+		containerWidth,
+		pageHeight,
+		mode,
+		numberOfDays,
+		events,
+		cellHeight,
+		hourHeight,
+		committedCellHeight,
+		scrollY,
+		activeIndex,
+		seedDefaultY,
+		captureOffsetSeed,
+		weekStartsOn,
+		weekEndsOn,
+		hourColumnWidth,
+		clampedMinHour,
+		clampedMaxHour,
+		ampm,
+		timeslots,
+		isRTL,
+		showAllDayEventCell,
+		showVerticalScrollIndicator,
+		verticalScrollEnabled,
+		hourComponent,
+		calendarCellStyle,
+		businessHours,
+		minHourHeight,
+		maxHourHeight,
+		showNowIndicator,
+		renderEvent,
+		keyExtractor,
+		dragStepMinutes,
+		showDragHandle,
+		onPressEvent,
+		onLongPressEvent,
+		onDragEvent,
+		onDragStart,
+		handlePressCell,
+		onLongPressCell,
+		onCreateEvent
+	]);
+	const listExtraData = (0, react.useMemo)(() => ({
+		events,
+		activeIndex
+	}), [events, activeIndex]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+		ref: containerRef,
+		style: styles.container,
+		children: [
+			renderHeader ? renderHeader(headerDays) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultHeader, {
+				days: headerDays,
+				mode,
+				width: containerWidth,
+				hourColumnWidth,
+				showWeekNumber,
+				weekNumberPrefix,
+				locale,
+				activeDate,
+				onPressDateHeader
+			}),
+			headerComponent,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+				style: styles.pager,
+				onLayout: (event) => {
+					setPageHeight(event.nativeEvent.layout.height);
+					setContainerWidth(event.nativeEvent.layout.width);
+					setMeasured(true);
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_legendapp_list_react_native.LegendList, {
+					ref: listRef,
+					style: isWeb ? [styles.pagerList, styles.webNoScroll] : styles.pagerList,
+					data: pageDates,
+					extraData: listExtraData,
+					horizontal: true,
+					recycleItems: false,
+					keyExtractor: keyExtractorList,
+					getFixedItemSize,
+					...isWeb ? null : {
+						scrollEnabled: swipeEnabled,
+						pagingEnabled: !freeSwipe,
+						snapToIndices: freeSwipe ? snapToIndices : void 0
+					},
+					initialScrollIndex: activeIndex,
+					showsHorizontalScrollIndicator: false,
+					viewabilityConfig: PAGE_VIEWABILITY,
+					onViewableItemsChanged: handleViewableItemsChanged,
+					renderItem
+				}, measured ? "grid" : "grid-seed")
+			})
+		]
+	});
+}
+const TimeGrid = (0, react.memo)(TimeGridInner);
+const DefaultHeader = ({ days, mode, width, hourColumnWidth, showWeekNumber, weekNumberPrefix = "W", locale, activeDate, onPressDateHeader }) => {
+	const theme = require_MonthList.useCalendarTheme();
+	const dayWidth = (width - hourColumnWidth) / days.length;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+		style: [styles.headerRow, { borderBottomColor: theme.colors.gridLine }],
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			style: [styles.weekNumberGutter, { width: hourColumnWidth }],
+			children: showWeekNumber && hourColumnWidth > 0 && days[0] ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+				style: [theme.text.hourLabel, { color: theme.colors.textMuted }],
+				allowFontScaling: false,
+				children: `${weekNumberPrefix}${(0, date_fns.getISOWeek)(days[0])}`
+			}) : null
+		}), days.map((day) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DayHeader, {
+			day,
+			mode,
+			width: dayWidth,
+			locale,
+			activeDate,
+			onPressDateHeader
+		}, day.toISOString()))]
+	});
+};
+const DayHeader = ({ day, width, locale, activeDate, onPressDateHeader }) => {
+	const theme = require_MonthList.useCalendarTheme();
+	const isToday = (0, _super_calendar_core.getIsToday)(day);
+	const isHighlighted = activeDate ? (0, _super_calendar_core.isSameCalendarDay)(day, activeDate) : isToday;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.Pressable, {
+		style: [styles.dayHeader, { width }],
+		onPress: onPressDateHeader ? () => onPressDateHeader(day) : void 0,
+		disabled: !onPressDateHeader,
+		accessibilityRole: onPressDateHeader ? "button" : void 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+			style: [styles.dayHeaderWeekday, { color: theme.colors.textMuted }],
+			allowFontScaling: false,
+			children: (0, date_fns.format)(day, "EEE", { locale })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			style: [styles.dayHeaderBadge, isHighlighted && { backgroundColor: theme.colors.todayBackground }],
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
+				style: [styles.dayHeaderNumber, { color: isHighlighted ? theme.colors.todayText : theme.colors.text }],
+				allowFontScaling: false,
+				...isToday && { accessibilityLabel: `Today, ${day.getDate()}` },
+				children: day.getDate()
+			})
+		})]
+	});
+};
+const styles = react_native.StyleSheet.create({
+	pager: { flex: 1 },
+	pagerList: { flex: 1 },
+	container: { flex: 1 },
+	headerRow: {
+		flexDirection: "row",
+		alignItems: "center",
+		borderBottomWidth: react_native.StyleSheet.hairlineWidth
+	},
+	weekNumberGutter: {
+		alignItems: "center",
+		justifyContent: "flex-end"
+	},
+	dayHeader: {
+		alignItems: "center",
+		gap: 2,
+		paddingVertical: 6
+	},
+	dayHeaderWeekday: {
+		fontSize: 11,
+		fontWeight: "600"
+	},
+	dayHeaderBadge: {
+		width: 28,
+		height: 28,
+		borderRadius: 999,
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	dayHeaderNumber: {
+		fontSize: 15,
+		fontWeight: "600"
+	},
+	content: {
+		width: "100%",
+		position: "relative"
+	},
+	cellPressLayer: {
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		right: 0
+	},
+	createGhost: {
+		position: "absolute",
+		borderRadius: 6,
+		borderWidth: react_native.StyleSheet.hairlineWidth,
+		marginHorizontal: EVENT_GAP
+	},
+	weekendColumn: {
+		position: "absolute",
+		top: 0
+	},
+	shadeBand: { position: "absolute" },
+	daySeparator: {
+		position: "absolute",
+		top: 0,
+		width: react_native.StyleSheet.hairlineWidth
+	},
+	hourRow: {
+		position: "absolute",
+		left: 0,
+		right: 0,
+		flexDirection: "row",
+		alignItems: "flex-start"
+	},
+	hourLabel: {
+		marginTop: -6,
+		textAlign: "right",
+		paddingRight: 6
+	},
+	hourLine: {
+		flex: 1,
+		height: react_native.StyleSheet.hairlineWidth
+	},
+	timeslotLine: {
+		position: "absolute",
+		right: 0,
+		height: react_native.StyleSheet.hairlineWidth,
+		opacity: .5
+	},
+	resizeHandle: {
+		position: "absolute",
+		left: 0,
+		right: 0,
+		bottom: 0,
+		height: RESIZE_HANDLE_HEIGHT,
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	resizeGrip: {
+		width: 24,
+		height: 3,
+		borderRadius: 2,
+		opacity: .4
+	},
+	eventBox: {
+		position: "absolute",
+		overflow: "hidden",
+		padding: EVENT_GAP
+	},
+	nowIndicator: {
+		position: "absolute",
+		height: 2
+	},
+	nonInteractive: { pointerEvents: "none" },
+	webNoScroll: { overflow: "hidden" }
+});
+//#endregion
+//#region src/components/Calendar.tsx
+const defaultKeyExtractor = (event) => `${event.start.toISOString()}|${event.end.toISOString()}|${event.title ?? ""}`;
+function visibleRange(mode, date, weekStartsOn, numberOfDays, weekEndsOn) {
+	if (mode === "month") return [(0, date_fns.startOfWeek)((0, date_fns.startOfMonth)(date), { weekStartsOn }), (0, date_fns.endOfWeek)((0, date_fns.endOfMonth)(date), { weekStartsOn })];
+	const days = (0, _super_calendar_core.getViewDays)(mode, date, weekStartsOn, numberOfDays, false, weekEndsOn);
+	return [(0, date_fns.startOfDay)(days[0]), (0, date_fns.endOfDay)(days[days.length - 1])];
+}
+function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPressEvent, onLongPressEvent, onDragEvent, onDragStart, dragStepMinutes, showDragHandle, onPressDay, onLongPressDay, onPressMore, onPressCell, resetPageOnPressCell, onLongPressCell, onCreateEvent, onPressDateHeader, maxVisibleEventCount, sortedMonthView, moreLabel, showAdjacentMonths, disableMonthEventCellPress, weekStartsOn = 0, numberOfDays, weekEndsOn, renderEvent = DefaultEvent, eventCellStyle, calendarCellStyle, businessHours, keyExtractor = defaultKeyExtractor, theme, cellHeight: cellHeightProp, hourHeight = 48, minHourHeight, maxHourHeight, hourColumnWidth, hideHours, timeslots, showAllDayEventCell, showWeekNumber, weekNumberPrefix, hourComponent, showSixWeeks, swipeEnabled, showVerticalScrollIndicator, verticalScrollEnabled, headerComponent, minHour, maxHour, ampm, showTime, ellipsizeTitle, allDayLabel, scrollOffsetMinutes, showNowIndicator, locale, activeDate, isRTL, freeSwipe, renderTimeGridHeader, renderHeaderForMonthView, renderCustomDateForMonth, itemSeparatorComponent }) {
+	const mergedTheme = (0, react.useMemo)(() => require_MonthList.mergeTheme(theme), [theme]);
+	const internalCellHeight = (0, react_native_reanimated.useSharedValue)(hourHeight);
+	const cellHeight = cellHeightProp ?? internalCellHeight;
+	const handlePressEvent = (0, react.useCallback)((event) => {
+		if (!event.disabled) onPressEvent(event);
+	}, [onPressEvent]);
+	const handleLongPressEvent = (0, react.useMemo)(() => onLongPressEvent ? (event) => {
+		if (!event.disabled) onLongPressEvent(event);
+	} : void 0, [onLongPressEvent]);
+	const handleChangeDate = (0, react.useCallback)((next) => {
+		onChangeDate(next);
+		onChangeDateRange?.(visibleRange(mode, next, weekStartsOn, numberOfDays ?? 1, weekEndsOn));
+	}, [
+		onChangeDate,
+		onChangeDateRange,
+		mode,
+		weekStartsOn,
+		numberOfDays,
+		weekEndsOn
+	]);
+	const resolvedRenderEvent = (0, react.useMemo)(() => {
+		if (eventCellStyle == null && ampm == null && showTime == null && ellipsizeTitle == null && allDayLabel == null) return renderEvent;
+		const Base = renderEvent;
+		return function StyledEvent(props) {
+			const cellStyle = typeof eventCellStyle === "function" ? eventCellStyle(props.event) : eventCellStyle;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Base, {
+				...props,
+				cellStyle,
+				ampm,
+				showTime,
+				ellipsizeTitle,
+				allDayLabel
+			});
+		};
+	}, [
+		renderEvent,
+		eventCellStyle,
+		ampm,
+		showTime,
+		ellipsizeTitle,
+		allDayLabel
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MonthList.CalendarThemeProvider, {
+		value: mergedTheme,
+		children: mode === "month" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MonthList.MonthPager, {
+			date,
+			events,
+			maxVisibleEventCount,
+			weekStartsOn,
+			locale,
+			sortedMonthView,
+			moreLabel,
+			showAdjacentMonths,
+			disableMonthEventCellPress,
+			isRTL,
+			showSixWeeks,
+			activeDate,
+			renderHeaderForMonthView,
+			renderCustomDateForMonth,
+			calendarCellStyle,
+			renderEvent: resolvedRenderEvent,
+			keyExtractor,
+			onPressDay,
+			onLongPressDay,
+			onPressEvent: handlePressEvent,
+			onLongPressEvent: handleLongPressEvent,
+			onPressMore,
+			onChangeDate: handleChangeDate,
+			freeSwipe,
+			swipeEnabled
+		}) : mode === "schedule" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Agenda, {
+			events,
+			locale,
+			renderEvent: resolvedRenderEvent,
+			keyExtractor,
+			onPressEvent: handlePressEvent,
+			onLongPressEvent: handleLongPressEvent,
+			onPressDay,
+			activeDate,
+			itemSeparatorComponent
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimeGrid, {
+			mode,
+			numberOfDays,
+			weekEndsOn,
+			date,
+			events,
+			cellHeight,
+			hourHeight,
+			weekStartsOn,
+			renderEvent: resolvedRenderEvent,
+			keyExtractor,
+			scrollOffsetMinutes,
+			hourColumnWidth,
+			hideHours,
+			timeslots,
+			showAllDayEventCell,
+			calendarCellStyle,
+			businessHours,
+			showWeekNumber,
+			weekNumberPrefix,
+			hourComponent,
+			showVerticalScrollIndicator,
+			verticalScrollEnabled,
+			headerComponent,
+			minHour,
+			maxHour,
+			ampm,
+			minHourHeight,
+			maxHourHeight,
+			showNowIndicator,
+			locale,
+			activeDate,
+			isRTL,
+			freeSwipe,
+			swipeEnabled,
+			onPressEvent: handlePressEvent,
+			onLongPressEvent: handleLongPressEvent,
+			onDragEvent,
+			showDragHandle,
+			onDragStart,
+			dragStepMinutes,
+			onPressCell,
+			resetPageOnPressCell,
+			onLongPressCell,
+			onCreateEvent,
+			onPressDateHeader,
+			onChangeDate: handleChangeDate,
+			renderHeader: renderTimeGridHeader
+		})
+	});
+}
+//#endregion
+exports.Agenda = Agenda;
+exports.Calendar = Calendar;
+exports.CalendarThemeProvider = require_MonthList.CalendarThemeProvider;
+exports.DEFAULT_HOUR_HEIGHT = DEFAULT_HOUR_HEIGHT;
+exports.DefaultEvent = DefaultEvent;
+exports.DefaultMonthEvent = require_MonthList.DefaultMonthEvent;
+exports.MonthList = require_MonthList.MonthList;
+exports.MonthPager = require_MonthList.MonthPager;
+exports.MonthView = require_MonthList.MonthView;
+exports.TimeGrid = TimeGrid;
+Object.defineProperty(exports, "buildMonthGrid", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.buildMonthGrid;
+	}
+});
+Object.defineProperty(exports, "buildMonthWeeks", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.buildMonthWeeks;
+	}
+});
+exports.darkTheme = require_MonthList.darkTheme;
+Object.defineProperty(exports, "daySelectionState", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.daySelectionState;
+	}
+});
+exports.defaultTheme = require_MonthList.defaultTheme;
+Object.defineProperty(exports, "eventsInTimeZone", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.eventsInTimeZone;
+	}
+});
+Object.defineProperty(exports, "expandRecurringEvents", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.expandRecurringEvents;
+	}
+});
+Object.defineProperty(exports, "getIsToday", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.getIsToday;
+	}
+});
+Object.defineProperty(exports, "getViewDays", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.getViewDays;
+	}
+});
+Object.defineProperty(exports, "getWeekDays", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.getWeekDays;
+	}
+});
+Object.defineProperty(exports, "isAllDayEvent", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.isAllDayEvent;
+	}
+});
+Object.defineProperty(exports, "isDateSelectable", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.isDateSelectable;
+	}
+});
+Object.defineProperty(exports, "isRangeEndpoint", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.isRangeEndpoint;
+	}
+});
+Object.defineProperty(exports, "isSameCalendarDay", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.isSameCalendarDay;
+	}
+});
+Object.defineProperty(exports, "isWeekend", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.isWeekend;
+	}
+});
+Object.defineProperty(exports, "isWithinDateRange", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.isWithinDateRange;
+	}
+});
+Object.defineProperty(exports, "layoutDayEvents", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.layoutDayEvents;
+	}
+});
+exports.mergeTheme = require_MonthList.mergeTheme;
+Object.defineProperty(exports, "minutesIntoDay", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.minutesIntoDay;
+	}
+});
+Object.defineProperty(exports, "nextDateRange", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.nextDateRange;
+	}
+});
+Object.defineProperty(exports, "toZonedTime", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.toZonedTime;
+	}
+});
+exports.useCalendarTheme = require_MonthList.useCalendarTheme;
+Object.defineProperty(exports, "useDateRange", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.useDateRange;
+	}
+});
+Object.defineProperty(exports, "useMonthGrid", {
+	enumerable: true,
+	get: function() {
+		return _super_calendar_core.useMonthGrid;
+	}
+});