@super-calendar/dom 2.3.2 → 2.5.0

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { LegendList } from "@legendapp/list/react";
-import { addDays, addMinutes, addMonths, endOfMonth, format, isSameDay, isSameMonth, startOfDay, startOfMonth } from "date-fns";
+import { addDays, addMinutes, addMonths, endOfDay, endOfMonth, endOfWeek, format, getISOWeek, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek } from "date-fns";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
-import { bandRounding, buildMonthGrid, buildMonthGrid as buildMonthGrid$1, cellRangeFromDrag, closedHourBands, compareDayEvents, darkColors, dayBadgeKind, daySelectionState, eventAccessibilityLabel, eventChipLayout, eventTimeLabel, expandRecurringEvents, formatHour, getIsToday, getViewDays, getViewDays as getViewDays$1, groupEventsByDay, isAllDayEvent, isAllDayEvent as isAllDayEvent$1, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, layoutDayEvents, layoutDayEvents as layoutDayEvents$1, lightColors, monthVisibleCount, nextDateRange, nextDateRange as nextDateRange$1, parseICalendar, rangeBandKind, titleNumberOfLines, toICalendar, useDateRange, useMonthGrid, weekdayFormatToken, weekdayFormatToken as weekdayFormatToken$1 } from "@super-calendar/core";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { bandRounding, buildMonthGrid, buildMonthGrid as buildMonthGrid$1, cellRangeFromDrag, closedHourBands, compareDayEvents, darkColors, dayBadgeKind, daySelectionState, eventAccessibilityLabel, eventChipLayout, eventTimeLabel, eventsInTimeZone, expandRecurringEvents, expandRecurringEvents as expandRecurringEvents$1, formatHour, getIsToday, getViewDays, getViewDays as getViewDays$1, groupEventsByDay, isAllDayEvent, isAllDayEvent as isAllDayEvent$1, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, layoutDayEvents, layoutDayEvents as layoutDayEvents$1, lightColors, monthVisibleCount, nextDateRange, nextDateRange as nextDateRange$1, parseICalendar, rangeBandKind, titleNumberOfLines, toICalendar, useDateRange, useMonthGrid, weekdayFormatToken, weekdayFormatToken as weekdayFormatToken$1 } from "@super-calendar/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/slots.ts
 /** Join truthy class names (a dependency-free clsx-lite). */
 function cn(...parts) {
@@ -727,9 +727,20 @@ function MonthView({ date, weekStartsOn = 0, weekdayFormat = "short", events, ev
 }
 //#endregion
 //#region src/TimeGrid.tsx
-const HOURS = Array.from({ length: 24 }, (_, h) => h);
-const GUTTER_WIDTH = 56;
+const GUTTER_WIDTH$1 = 56;
 const clamp$1 = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const VISUALLY_HIDDEN = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0
+};
 const DOM_TITLE_LINE_HEIGHT = 16;
 const DOM_TIME_LINE_HEIGHT = 30;
 const DOM_BOX_PADDING_V = 2;
@@ -800,6 +811,17 @@ function DefaultDomEvent({ event, mode, isAllDay, boxHeight, ampm = false, theme
 		}) : null]
 	});
 }
+const NOW_TICK_MS = 6e4;
+function useNow(enabled) {
+	const [now, setNow] = useState(() => /* @__PURE__ */ new Date());
+	useEffect(() => {
+		if (!enabled) return;
+		setNow(/* @__PURE__ */ new Date());
+		const id = setInterval(() => setNow(/* @__PURE__ */ new Date()), NOW_TICK_MS);
+		return () => clearInterval(id);
+	}, [enabled]);
+	return now;
+}
 /**
 * 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
@@ -811,7 +833,7 @@ function DefaultDomEvent({ event, mode, isAllDay, boxHeight, ampm = false, theme
 * <TimeGrid mode="week" date={new Date()} events={events} />
 * ```
 */
-function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStartsOn = 0, weekdayFormat = "short", 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, eventAccessibilityLabel: eventAccessibilityLabel$1, hourComponent, onPressEvent, onPressDateHeader, onPressCell, onCreateEvent, onDragStart, onDragEvent, className, style, classNames, styles }) {
+function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStartsOn = 0, weekdayFormat = "short", hourHeight: initialHourHeight = 48, scrollOffsetMinutes = 480, zoomable = true, minHourHeight = 24, maxHourHeight = 160, dragStepMinutes = 15, ampm = false, timeslots = 1, minHour = 0, maxHour = 24, hideHours = false, showWeekNumber = false, weekNumberPrefix = "W", keyboardEventNavigation = false, businessHours, showNowIndicator = true, showAllDayEventCell = true, locale, theme: themeOverrides, height = 600, renderEvent, eventAccessibilityLabel: eventAccessibilityLabel$1, hourComponent, onPressEvent, onPressDateHeader, onPressCell, onCreateEvent, onDragStart, onDragEvent, className, style, classNames, styles }) {
 	const theme = useMemo(() => mergeDomTheme(themeOverrides), [themeOverrides]);
 	const slot = createSlots({
 		classNames,
@@ -820,6 +842,12 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 	const scrollRef = useRef(null);
 	const dfns = locale ? { locale } : void 0;
 	const snapHours = dragStepMinutes / 60;
+	const windowStart = Math.max(0, Math.min(minHour, 23));
+	const windowEnd = Math.max(windowStart + 1, Math.min(maxHour, 24));
+	const windowHours = windowEnd - windowStart;
+	const gutterWidth = hideHours ? 0 : GUTTER_WIDTH$1;
+	const visibleHours = useMemo(() => Array.from({ length: windowHours }, (_, i) => windowStart + i), [windowStart, windowHours]);
+	const now = useNow(showNowIndicator);
 	const [hourHeight, setHourHeight] = useState(initialHourHeight);
 	useEffect(() => setHourHeight(initialHourHeight), [initialHourHeight]);
 	const hourHeightRef = useRef(hourHeight);
@@ -847,8 +875,8 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 	}), [days, events]);
 	const hasAllDay = allDayByDay.some((list) => list.length > 0);
 	useEffect(() => {
-		if (scrollRef.current) scrollRef.current.scrollTop = scrollOffsetMinutes / 60 * hourHeightRef.current;
-	}, [scrollOffsetMinutes]);
+		if (scrollRef.current) scrollRef.current.scrollTop = Math.max(0, (scrollOffsetMinutes / 60 - windowStart) * hourHeightRef.current);
+	}, [scrollOffsetMinutes, windowStart]);
 	useEffect(() => {
 		const el = scrollRef.current;
 		if (!el || !zoomable) return;
@@ -891,23 +919,30 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		if (pinch.current.size < 2) pinchBase.current = null;
 	};
 	const Renderer = renderEvent;
-	const totalHeight = 24 * hourHeight;
-	const beginDrag = (e, event, key, kind, startHours, durationHours) => {
+	const totalHeight = windowHours * hourHeight;
+	const beginDrag = (e, event, key, kind, startHours, durationHours, dayIndex) => {
 		if (!onDragEvent) return;
 		e.stopPropagation();
 		try {
 			e.target.setPointerCapture?.(e.pointerId);
 		} catch {}
+		const column = kind === "move" ? e.currentTarget.parentElement : null;
+		const dayWidth = column ? column.getBoundingClientRect().width : 0;
 		dragOrigin.current = {
+			pointerX: e.clientX,
 			pointerY: e.clientY,
 			startHours,
-			durationHours
+			durationHours,
+			dayIndex,
+			dayWidth
 		};
 		applyDrag({
 			key,
 			kind,
 			startHours,
 			durationHours,
+			dayDelta: 0,
+			dayOffsetPx: 0,
 			moved: false
 		});
 		onDragStart?.(event);
@@ -922,14 +957,19 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		const dHours = (e.clientY - dragOrigin.current.pointerY) / hourHeightRef.current;
 		const snap = (v) => Math.round(v / snapHours) * snapHours;
 		if (d.kind === "move") {
-			const startHours = clamp$1(snap(dragOrigin.current.startHours + dHours), 0, 24 - d.durationHours);
+			const startHours = clamp$1(snap(dragOrigin.current.startHours + dHours), windowStart, Math.max(windowStart, windowEnd - d.durationHours));
+			const o = dragOrigin.current;
+			const rawDayDelta = o.dayWidth > 0 ? Math.round((e.clientX - o.pointerX) / o.dayWidth) : 0;
+			const dayDelta = clamp$1(o.dayIndex + rawDayDelta, 0, days.length - 1) - o.dayIndex;
 			applyDrag({
 				...d,
 				startHours,
+				dayDelta,
+				dayOffsetPx: dayDelta * o.dayWidth,
 				moved: true
 			});
 		} else {
-			const durationHours = clamp$1(snap(dragOrigin.current.durationHours + dHours), snapHours, 24 - d.startHours);
+			const durationHours = clamp$1(snap(dragOrigin.current.durationHours + dHours), snapHours, Math.max(snapHours, windowEnd - d.startHours));
 			applyDrag({
 				...d,
 				durationHours,
@@ -948,7 +988,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 			onPress();
 			return;
 		}
-		const base = startOfDay(day);
+		const base = startOfDay(addDays(day, d.dayDelta));
 		const start = addMinutes(base, Math.round(d.startHours * 60));
 		const end = addMinutes(base, Math.round((d.startHours + d.durationHours) * 60));
 		onDragEvent?.(event, start, end);
@@ -996,10 +1036,10 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		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);
+			const range = cellRangeFromDrag(day, o.startPx, endPx, h, windowStart, dragStepMinutes);
 			if (range) onCreateEvent(range.start, range.end);
 		} else if (onPressCell) {
-			const at = cellRangeFromDrag(day, o.startPx, o.startPx, h, 0, dragStepMinutes);
+			const at = cellRangeFromDrag(day, o.startPx, o.startPx, h, windowStart, dragStepMinutes);
 			if (at) onPressCell(at.start);
 		}
 		createOrigin.current = null;
@@ -1010,7 +1050,72 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 		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 navByDay = useMemo(() => positionedByDay.map((list, day) => list.map((pe, idx) => ({
+		key: `${day}:${idx}`,
+		start: pe.startHours,
+		dur: pe.durationHours
+	})).filter((n) => !(n.start >= windowEnd || n.start + n.dur <= windowStart)).sort((a, b) => a.start - b.start)), [
+		positionedByDay,
+		windowStart,
+		windowEnd
+	]);
+	const nextEventKey = (currentKey, arrowKey) => {
+		let day = -1;
+		let pos = -1;
+		for (let d = 0; d < navByDay.length; d++) {
+			const p = navByDay[d].findIndex((n) => n.key === currentKey);
+			if (p !== -1) {
+				day = d;
+				pos = p;
+				break;
+			}
+		}
+		if (day === -1) return null;
+		const start = navByDay[day][pos].start;
+		const nearestInDay = (d) => {
+			let best = null;
+			let bestDiff = Number.POSITIVE_INFINITY;
+			for (const n of navByDay[d]) {
+				const diff = Math.abs(n.start - start);
+				if (diff < bestDiff) {
+					bestDiff = diff;
+					best = n.key;
+				}
+			}
+			return best;
+		};
+		switch (arrowKey) {
+			case "ArrowDown": return navByDay[day][Math.min(pos + 1, navByDay[day].length - 1)].key;
+			case "ArrowUp": return navByDay[day][Math.max(pos - 1, 0)].key;
+			case "ArrowRight":
+				for (let d = day + 1; d < navByDay.length; d++) {
+					const k = nearestInDay(d);
+					if (k) return k;
+				}
+				return null;
+			case "ArrowLeft":
+				for (let d = day - 1; d >= 0; d--) {
+					const k = nearestInDay(d);
+					if (k) return k;
+				}
+				return null;
+			case "Home": return navByDay[day][0].key;
+			case "End": return navByDay[day][navByDay[day].length - 1].key;
+			default: return null;
+		}
+	};
+	const onEventKeyDown = (currentKey, e) => {
+		const next = nextEventKey(currentKey, e.key);
+		if (!next) return;
+		e.preventDefault();
+		scrollRef.current?.querySelector(`[data-event-key="${next}"]`)?.focus();
+	};
+	const bandsByDay = useMemo(() => days.map((day) => closedHourBands(day, businessHours, windowStart, windowEnd)), [
+		days,
+		businessHours,
+		windowStart,
+		windowEnd
+	]);
 	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;
@@ -1036,41 +1141,57 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 					base: { display: "flex" },
 					themed: { borderBottom: `1px solid ${theme.gridLine}` }
 				}),
-				children: [/* @__PURE__ */ jsx("div", { style: {
-					width: GUTTER_WIDTH,
-					flex: "none"
-				} }), days.map((day) => {
+				children: [/* @__PURE__ */ jsx("div", {
+					...slot("weekNumber", {
+						base: {
+							width: gutterWidth,
+							flex: "none",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							overflow: "hidden"
+						},
+						themed: {
+							fontSize: 10,
+							color: theme.textMuted
+						}
+					}),
+					children: showWeekNumber && gutterWidth > 0 && days[0] ? `${weekNumberPrefix}${getISOWeek(days.find((d) => d.getDay() === 4) ?? days[0])}` : null
+				}), 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,
-						...dataState({ "data-today": today }),
-						...slot("columnHeader", {
-							base: {
-								flex: 1,
-								border: "none",
-								background: "transparent",
-								font: "inherit",
-								cursor: onPressDateHeader ? "pointer" : "default",
-								display: "flex",
-								flexDirection: "column",
-								alignItems: "center",
-								gap: 2
-							},
-							themed: {
-								color: theme.textMuted,
-								padding: "6px 0"
-							}
+					const dateLabel = format(day, "EEEE, d MMMM yyyy", dfns);
+					const headerProps = slot("columnHeader", {
+						base: {
+							flex: 1,
+							border: "none",
+							background: "transparent",
+							font: "inherit",
+							cursor: onPressDateHeader ? "pointer" : "default",
+							display: "flex",
+							flexDirection: "column",
+							alignItems: "center",
+							gap: 2
+						},
+						themed: {
+							color: theme.textMuted,
+							padding: "6px 0"
+						}
+					});
+					const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx("span", {
+							style: VISUALLY_HIDDEN,
+							children: dateLabel
 						}),
-						children: [/* @__PURE__ */ jsx("span", {
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
 							...slot("columnHeaderWeekday", { themed: {
 								fontSize: 11,
 								fontWeight: 600
 							} }),
 							children: format(day, weekdayFormatToken$1(weekdayFormat), dfns)
-						}), /* @__PURE__ */ jsx("span", {
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
 							...dataState({ "data-today": today }),
 							...slot("columnHeaderDate", {
 								base: {
@@ -1089,7 +1210,18 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 								}
 							}),
 							children: format(day, "d", dfns)
-						})]
+						})
+					] });
+					return onPressDateHeader ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => onPressDateHeader(day),
+						...dataState({ "data-today": today }),
+						...headerProps,
+						children: inner
+					}, day.toISOString()) : /* @__PURE__ */ jsx("div", {
+						...dataState({ "data-today": today }),
+						...headerProps,
+						children: inner
 					}, day.toISOString());
 				})]
 			}),
@@ -1101,8 +1233,10 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 				children: [/* @__PURE__ */ jsx("div", {
 					...slot("allDayLabel", {
 						base: {
-							width: GUTTER_WIDTH,
+							width: gutterWidth,
 							flex: "none",
+							minWidth: 0,
+							overflow: "hidden",
 							textAlign: "right"
 						},
 						themed: {
@@ -1185,17 +1319,17 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 						height: totalHeight,
 						position: "relative"
 					},
-					children: [/* @__PURE__ */ jsx("div", {
+					children: [hideHours ? null : /* @__PURE__ */ jsx("div", {
 						...slot("hourGutter", { base: {
-							width: GUTTER_WIDTH,
+							width: gutterWidth,
 							flex: "none",
 							position: "relative"
 						} }),
-						children: HOURS.map((h) => /* @__PURE__ */ jsx("div", {
+						children: visibleHours.map((h) => /* @__PURE__ */ jsx("div", {
 							...slot("hourLabel", {
 								base: {
 									position: "absolute",
-									top: h * hourHeight - 6,
+									top: Math.max(0, (h - windowStart) * hourHeight - 6),
 									right: 6
 								},
 								themed: {
@@ -1207,9 +1341,9 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 						}, 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 nowHours = (now.getHours() * 60 + now.getMinutes()) / 60;
+						const showNow = showNowIndicator && isSameCalendarDay(day, now) && nowHours >= windowStart && nowHours <= windowEnd;
+						const nowTop = (nowHours - windowStart) * hourHeight;
 						const bands = bandsByDay[dayIndex];
 						const ghost = createBox?.dayIndex === dayIndex ? createBox : null;
 						return /* @__PURE__ */ jsxs("div", {
@@ -1239,7 +1373,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 											position: "absolute",
 											left: 0,
 											right: 0,
-											top: b.start * hourHeight,
+											top: (b.start - windowStart) * hourHeight,
 											height: (b.end - b.start) * hourHeight,
 											pointerEvents: "none",
 											zIndex: 0
@@ -1264,7 +1398,8 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 									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;
+									if (!active && (pe.startHours >= windowEnd || pe.startHours + pe.durationHours <= windowStart)) return null;
+									const top = (startHours - windowStart) * hourHeight;
 									const boxHeight = Math.max(durationHours * hourHeight, 14);
 									const widthPct = 100 / pe.columns;
 									const onPress = () => onPressEvent?.(pe.event);
@@ -1282,6 +1417,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 									return /* @__PURE__ */ jsxs("div", {
 										role: "button",
 										tabIndex: 0,
+										"data-event-key": keyboardEventNavigation ? key : void 0,
 										"aria-label": eventAccessibilityLabel$1 ? eventAccessibilityLabel$1(pe.event, {
 											mode,
 											isAllDay: false,
@@ -1297,9 +1433,11 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 											if (e.key === "Enter" || e.key === " ") {
 												e.preventDefault();
 												onPress();
+												return;
 											}
+											if (keyboardEventNavigation) onEventKeyDown(key, e);
 										},
-										onPointerDown: draggable ? (e) => beginDrag(e, pe.event, key, "move", pe.startHours, pe.durationHours) : void 0,
+										onPointerDown: draggable ? (e) => beginDrag(e, pe.event, key, "move", pe.startHours, pe.durationHours, dayIndex) : void 0,
 										onPointerMove: draggable ? moveDrag : void 0,
 										onPointerUp: draggable ? (e) => endDrag(e, day, pe.event, onPress) : void 0,
 										onPointerCancel: draggable ? cancelDrag : void 0,
@@ -1314,7 +1452,8 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 											cursor: draggable ? "grab" : "pointer",
 											touchAction: draggable ? "none" : "auto",
 											zIndex: active ? 3 : 1,
-											opacity: active ? .85 : 1
+											opacity: active ? .85 : 1,
+											...active && active.dayOffsetPx !== 0 ? { transform: `translateX(${active.dayOffsetPx}px)` } : null
 										} }),
 										children: [Renderer ? /* @__PURE__ */ jsx(Renderer, { ...args }) : /* @__PURE__ */ jsx(DefaultDomEvent, {
 											...args,
@@ -1323,7 +1462,7 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 										}), draggable ? /* @__PURE__ */ jsx("div", {
 											onPointerDown: (e) => {
 												e.stopPropagation();
-												beginDrag(e, pe.event, key, "resize", pe.startHours, pe.durationHours);
+												beginDrag(e, pe.event, key, "resize", pe.startHours, pe.durationHours, dayIndex);
 											},
 											style: {
 												position: "absolute",
@@ -1390,6 +1529,18 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 }
 //#endregion
 //#region src/Calendar.tsx
+const EMPTY_EVENTS = [];
+function expansionRange(mode, date, weekStartsOn, numberOfDays) {
+	if (mode === "month") return [startOfWeek(startOfMonth(date), { weekStartsOn }), endOfWeek(endOfMonth(date), { weekStartsOn })];
+	if (mode === "schedule") return [startOfDay(date), endOfDay(addMonths(date, 3))];
+	const days = getViewDays$1(mode, date, weekStartsOn, numberOfDays ?? 1);
+	return [startOfDay(days[0]), endOfDay(days[days.length - 1])];
+}
+function pageStep(mode, date, direction, weekStartsOn, numberOfDays) {
+	if (mode === "month") return addMonths(date, direction);
+	if (mode === "schedule") return addDays(date, direction * 7);
+	return addDays(date, direction * getViewDays$1(mode, date, weekStartsOn, numberOfDays ?? 1).length);
+}
 /**
 * Batteries-included entry point for the react-dom renderer: it picks the right
 * view for `mode`. `month` renders a single {@link MonthView}; `schedule` renders
@@ -1401,9 +1552,37 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 * <Calendar mode="week" date={new Date()} events={events} />
 * ```
 */
-function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays, locale, theme, height, className, style, onPressEvent, eventAccessibilityLabel, ampm, hourHeight, scrollOffsetMinutes, timeslots, businessHours, showNowIndicator, showAllDayEventCell, dragStepMinutes, onPressCell, onCreateEvent, onDragStart, onDragEvent, onPressDateHeader, renderTimeEvent, hourComponent, maxVisibleEventCount, moreLabel, showAdjacentMonths, weekdayFormat, fillCellOnSelection, selectedRange, selectedDates, minDate, maxDate, isDateDisabled, keyboardDayNavigation, onPressDay, onPressMore, renderMonthEvent, renderScheduleEvent, classNames, styles }) {
-	if (mode === "schedule") return /* @__PURE__ */ jsx(Agenda, {
-		events: events ?? [],
+function Calendar({ mode = "week", date, events, onChangeDate, weekStartsOn = 0, numberOfDays, locale, timeZone, theme, height, className, style, onPressEvent, eventAccessibilityLabel, ampm, hourHeight, scrollOffsetMinutes, timeslots, minHour, maxHour, hideHours, showWeekNumber, weekNumberPrefix, businessHours, showNowIndicator, showAllDayEventCell, dragStepMinutes, onPressCell, onCreateEvent, onDragStart, onDragEvent, onPressDateHeader, renderTimeEvent, hourComponent, keyboardEventNavigation, maxVisibleEventCount, moreLabel, showAdjacentMonths, weekdayFormat, fillCellOnSelection, selectedRange, selectedDates, minDate, maxDate, isDateDisabled, keyboardDayNavigation, onPressDay, onPressMore, renderMonthEvent, renderScheduleEvent, classNames, styles }) {
+	const displayEvents = useMemo(() => {
+		let out = events ?? EMPTY_EVENTS;
+		if (out.some((e) => e.recurrence)) {
+			let [start, end] = expansionRange(mode, date, weekStartsOn, numberOfDays);
+			if (timeZone) {
+				start = addDays(start, -1);
+				end = addDays(end, 1);
+			}
+			out = expandRecurringEvents$1(out, start, end);
+		}
+		if (timeZone) out = eventsInTimeZone(out, timeZone);
+		return out;
+	}, [
+		events,
+		mode,
+		date.getTime(),
+		weekStartsOn,
+		numberOfDays,
+		timeZone
+	]);
+	const handlePageKeys = (e) => {
+		if (!onChangeDate) return;
+		if (e.key === "PageDown") onChangeDate(pageStep(mode, date, 1, weekStartsOn, numberOfDays));
+		else if (e.key === "PageUp") onChangeDate(pageStep(mode, date, -1, weekStartsOn, numberOfDays));
+		else return;
+		e.preventDefault();
+	};
+	let view;
+	if (mode === "schedule") view = /* @__PURE__ */ jsx(Agenda, {
+		events: displayEvents,
 		locale,
 		ampm,
 		theme,
@@ -1418,9 +1597,9 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		onPressEvent,
 		onPressDay
 	});
-	if (mode === "month") return /* @__PURE__ */ jsx(MonthView, {
+	else if (mode === "month") view = /* @__PURE__ */ jsx(MonthView, {
 		date,
-		events: events ?? [],
+		events: displayEvents,
 		weekStartsOn,
 		weekdayFormat,
 		locale,
@@ -1446,10 +1625,10 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		renderEvent: renderMonthEvent,
 		eventAccessibilityLabel
 	});
-	return /* @__PURE__ */ jsx(TimeGrid, {
+	else view = /* @__PURE__ */ jsx(TimeGrid, {
 		date,
 		mode,
-		events,
+		events: displayEvents,
 		weekStartsOn,
 		weekdayFormat,
 		numberOfDays,
@@ -1464,6 +1643,11 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		hourHeight,
 		scrollOffsetMinutes,
 		timeslots,
+		minHour,
+		maxHour,
+		hideHours,
+		showWeekNumber,
+		weekNumberPrefix,
 		businessHours,
 		showNowIndicator,
 		showAllDayEventCell,
@@ -1476,7 +1660,13 @@ function Calendar({ mode = "week", date, events, weekStartsOn = 0, numberOfDays,
 		onPressDateHeader,
 		renderEvent: renderTimeEvent,
 		eventAccessibilityLabel,
-		hourComponent
+		hourComponent,
+		keyboardEventNavigation
+	});
+	return /* @__PURE__ */ jsx("div", {
+		style: { display: "contents" },
+		onKeyDown: handlePageKeys,
+		children: view
 	});
 }
 //#endregion
@@ -1834,7 +2024,9 @@ function DateRangePicker({ value, onChange, formatLabel = defaultRangeLabel, wee
 //#endregion
 //#region src/ResourceTimeline.tsx
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
-function DefaultBar({ event, boxProps, theme }) {
+const GUTTER_WIDTH = 56;
+function DefaultBar({ event, height, boxProps, theme }) {
+	const showTime = height != null ? height > 34 : true;
 	const time = eventTimeLabel({
 		mode: "day",
 		isAllDay: false,
@@ -1874,7 +2066,7 @@ function DefaultBar({ event, boxProps, theme }) {
 				textOverflow: "ellipsis"
 			},
 			children: event.title
-		}), time ? /* @__PURE__ */ jsx("div", {
+		}), time && showTime ? /* @__PURE__ */ jsx("div", {
 			style: {
 				opacity: .75,
 				fontSize: 11
@@ -1899,7 +2091,7 @@ function DefaultBar({ event, boxProps, theme }) {
 * />
 * ```
 */
-function ResourceTimeline({ date, resources, events, resourceId = (event) => event.resourceId, startHour = 0, endHour = 24, hourWidth = 80, rowHeight = 56, labelWidth = 140, ampm = false, theme: themeOverrides, renderEvent, onPressEvent, onDragEvent, dragStepMinutes = 15, className, style, classNames, styles }) {
+function ResourceTimeline({ date, orientation = "horizontal", resources, events, resourceId = (event) => event.resourceId, startHour = 0, endHour = 24, hourWidth = 80, hourHeight = 48, rowHeight = 56, labelWidth = 140, ampm = false, theme: themeOverrides, renderEvent, onPressEvent, onDragEvent, onPressCell, onCreateEvent, businessHours, dragStepMinutes = 15, className, style, classNames, styles }) {
 	const theme = useMemo(() => mergeDomTheme(themeOverrides), [themeOverrides]);
 	const slot = createSlots({
 		classNames,
@@ -1907,6 +2099,8 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 	});
 	const Renderer = renderEvent;
 	const snapHours = dragStepMinutes / 60;
+	const vertical = orientation === "vertical";
+	const hourSize = vertical ? hourHeight : hourWidth;
 	const [drag, setDrag] = useState(null);
 	const dragRef = useRef(null);
 	const origin = useRef(null);
@@ -1921,7 +2115,7 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 			e.target.setPointerCapture?.(e.pointerId);
 		} catch {}
 		origin.current = {
-			x: e.clientX,
+			x: vertical ? e.clientY : e.clientX,
 			startHours,
 			durationHours
 		};
@@ -1936,7 +2130,7 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 	const moveDrag = (e) => {
 		const d = dragRef.current;
 		if (!d || !origin.current) return;
-		const dHours = (e.clientX - origin.current.x) / hourWidth;
+		const dHours = ((vertical ? e.clientY : e.clientX) - origin.current.x) / hourSize;
 		const snap = (v) => Math.round(v / snapHours) * snapHours;
 		if (d.kind === "move") {
 			const startHours = clamp(snap(origin.current.startHours + dHours), startHour, endHour - d.durationHours);
@@ -1976,6 +2170,69 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 		applyDrag(null);
 		origin.current = null;
 	};
+	const [createBox, setCreateBox] = useState(null);
+	const createOrigin = useRef(null);
+	const cellEnabled = !!onPressCell || !!onCreateEvent;
+	const pxAlongAxis = (el, e) => {
+		const rect = el.getBoundingClientRect();
+		return vertical ? e.clientY - rect.top : e.clientX - rect.left;
+	};
+	const beginCreate = (e, resource) => {
+		if (!cellEnabled || e.pointerType === "touch") return;
+		if (e.target !== e.currentTarget || e.button > 0) return;
+		const el = e.currentTarget;
+		const startPx = pxAlongAxis(el, e);
+		try {
+			el.setPointerCapture?.(e.pointerId);
+		} catch {}
+		createOrigin.current = {
+			el,
+			resource,
+			startPx
+		};
+		if (onCreateEvent) setCreateBox({
+			resourceKey: resource.id,
+			startPx,
+			curPx: startPx
+		});
+	};
+	const moveCreate = (e) => {
+		const o = createOrigin.current;
+		if (!o || !onCreateEvent) return;
+		setCreateBox({
+			resourceKey: o.resource.id,
+			startPx: o.startPx,
+			curPx: pxAlongAxis(o.el, e)
+		});
+	};
+	const endCreate = (e) => {
+		const o = createOrigin.current;
+		if (!o) return;
+		try {
+			o.el.releasePointerCapture?.(e.pointerId);
+		} catch {}
+		const endPx = pxAlongAxis(o.el, e);
+		if (Math.abs(endPx - o.startPx) > 4 && onCreateEvent) {
+			const range = cellRangeFromDrag(date, o.startPx, endPx, hourSize, startHour, dragStepMinutes);
+			if (range) onCreateEvent(range.start, range.end, o.resource);
+		} else if (onPressCell) {
+			const at = cellRangeFromDrag(date, o.startPx, o.startPx, hourSize, startHour, dragStepMinutes);
+			if (at) onPressCell(at.start, o.resource);
+		}
+		createOrigin.current = null;
+		setCreateBox(null);
+	};
+	const cancelCreate = () => {
+		createOrigin.current = null;
+		setCreateBox(null);
+	};
+	const trackInteractionProps = (resource) => cellEnabled ? {
+		onPointerDown: (e) => beginCreate(e, resource),
+		onPointerMove: moveCreate,
+		onPointerUp: endCreate,
+		onPointerCancel: cancelCreate
+	} : null;
+	const bandsFor = (resource) => businessHours ? closedHourBands(date, (d) => businessHours(d, resource), startHour, endHour) : [];
 	const hours = useMemo(() => Array.from({ length: Math.max(0, endHour - startHour) }, (_, i) => startHour + i), [startHour, endHour]);
 	const trackWidth = (endHour - startHour) * hourWidth;
 	const byResource = useMemo(() => {
@@ -1991,6 +2248,211 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 		resourceId,
 		date
 	]);
+	if (vertical) {
+		const trackHeight = (endHour - startHour) * hourHeight;
+		const vGridLines = `repeating-linear-gradient(to bottom, transparent 0, transparent ${hourHeight - 1}px, ${theme.gridLine} ${hourHeight - 1}px, ${theme.gridLine} ${hourHeight}px)`;
+		return /* @__PURE__ */ jsxs("div", {
+			className,
+			style: {
+				fontFamily: theme.fontFamily,
+				color: theme.text,
+				overflowY: "auto",
+				...style
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				...slot("header", {
+					base: {
+						display: "flex",
+						position: "sticky",
+						top: 0,
+						zIndex: 2
+					},
+					themed: {
+						borderBottom: `1px solid ${theme.gridLine}`,
+						background: theme.surface
+					}
+				}),
+				children: [/* @__PURE__ */ jsx("div", { ...slot("corner", { base: {
+					width: GUTTER_WIDTH,
+					flex: "none"
+				} }) }), resources.map((resource) => /* @__PURE__ */ jsx("div", {
+					...slot("resourceLabel", {
+						base: {
+							flex: 1,
+							minWidth: 0,
+							padding: "6px 4px",
+							textAlign: "center",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+							boxSizing: "border-box"
+						},
+						themed: {
+							fontSize: 13,
+							fontWeight: 600,
+							borderLeft: `1px solid ${theme.gridLine}`
+						}
+					}),
+					children: resource.title ?? resource.id
+				}, resource.id))]
+			}), /* @__PURE__ */ jsxs("div", {
+				style: { display: "flex" },
+				children: [/* @__PURE__ */ jsx("div", {
+					...slot("timeAxis", { base: {
+						position: "relative",
+						width: GUTTER_WIDTH,
+						flex: "none",
+						height: trackHeight
+					} }),
+					children: hours.map((h) => /* @__PURE__ */ jsx("div", {
+						...slot("hourTick", {
+							base: {
+								position: "absolute",
+								top: Math.max(0, (h - startHour) * hourHeight - 6),
+								right: 6
+							},
+							themed: {
+								fontSize: 10,
+								color: theme.textMuted
+							}
+						}),
+						children: formatHour(h, { ampm })
+					}, h))
+				}), resources.map((resource) => {
+					const positioned = byResource.get(resource.id) ?? [];
+					return /* @__PURE__ */ jsx("div", {
+						...slot("row", {
+							base: {
+								flex: 1,
+								minWidth: 0
+							},
+							themed: { borderLeft: `1px solid ${theme.gridLine}` }
+						}),
+						children: /* @__PURE__ */ jsxs("div", {
+							...trackInteractionProps(resource),
+							...slot("track", { base: {
+								position: "relative",
+								height: trackHeight
+							} }),
+							children: [
+								bandsFor(resource).map((b) => /* @__PURE__ */ jsx("div", {
+									"aria-hidden": true,
+									...slot("businessHours", {
+										base: {
+											position: "absolute",
+											left: 0,
+											right: 0,
+											top: (b.start - startHour) * hourHeight,
+											height: (b.end - b.start) * hourHeight,
+											pointerEvents: "none",
+											zIndex: 0
+										},
+										themed: { background: theme.outsideHoursBackground }
+									})
+								}, b.start)),
+								/* @__PURE__ */ jsx("div", {
+									"aria-hidden": true,
+									...slot("gridLines", {
+										base: {
+											position: "absolute",
+											inset: 0,
+											pointerEvents: "none"
+										},
+										themed: { backgroundImage: vGridLines }
+									})
+								}),
+								positioned.map((pe, idx) => {
+									const key = `${resource.id}:${idx}`;
+									const active = drag?.key === key ? drag : null;
+									const startH = active ? active.startHours : pe.startHours;
+									const durH = active ? active.durationHours : pe.durationHours;
+									const top = clamp(startH - startHour, 0, endHour - startHour) * hourHeight;
+									const bottom = clamp(startH + durH - startHour, 0, endHour - startHour) * hourHeight;
+									const height = Math.max(bottom - top, 2);
+									const lanePct = 100 / pe.columns;
+									const onPress = () => onPressEvent?.(pe.event);
+									const args = {
+										event: pe.event,
+										width: 0,
+										height,
+										onPress
+									};
+									const draggable = !!onDragEvent;
+									return /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										onClick: draggable ? void 0 : onPress,
+										"aria-label": pe.event.title,
+										...dataState({ "data-dragging": !!active }),
+										onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
+										onPointerMove: draggable ? moveDrag : void 0,
+										onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
+										onPointerCancel: draggable ? cancelDrag : void 0,
+										...slot("event", { base: {
+											position: "absolute",
+											top,
+											height,
+											left: `${pe.column * lanePct}%`,
+											width: `${lanePct}%`,
+											padding: 1,
+											border: "none",
+											background: "transparent",
+											cursor: draggable ? "grab" : "pointer",
+											touchAction: draggable ? "none" : "auto",
+											font: "inherit",
+											textAlign: "left",
+											boxSizing: "border-box",
+											zIndex: active ? 3 : 1,
+											opacity: active ? .85 : 1
+										} }),
+										children: [Renderer ? /* @__PURE__ */ jsx(Renderer, { ...args }) : /* @__PURE__ */ jsx(DefaultBar, {
+											...args,
+											theme,
+											boxProps: slot("eventBox")
+										}), draggable ? /* @__PURE__ */ jsx("span", {
+											"aria-hidden": true,
+											onPointerDown: (e) => {
+												e.stopPropagation();
+												beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
+											},
+											style: {
+												position: "absolute",
+												left: 0,
+												right: 0,
+												bottom: 0,
+												height: 8,
+												cursor: "ns-resize",
+												touchAction: "none"
+											}
+										}) : null]
+									}, idx);
+								}),
+								createBox?.resourceKey === resource.id ? /* @__PURE__ */ jsx("div", {
+									"aria-hidden": true,
+									...slot("createGhost", {
+										base: {
+											position: "absolute",
+											left: 1,
+											right: 1,
+											top: Math.min(createBox.startPx, createBox.curPx),
+											height: Math.max(Math.abs(createBox.curPx - createBox.startPx), 2),
+											opacity: .7,
+											pointerEvents: "none",
+											zIndex: 2
+										},
+										themed: {
+											background: theme.rangeBackground,
+											border: `1px solid ${theme.selectedBackground}`,
+											borderRadius: 6
+										}
+									})
+								}) : null
+							]
+						})
+					}, resource.id);
+				})]
+			})]
+		});
+	}
 	const gridLines = `repeating-linear-gradient(to right, transparent 0, transparent ${hourWidth - 1}px, ${theme.gridLine} ${hourWidth - 1}px, ${theme.gridLine} ${hourWidth}px)`;
 	return /* @__PURE__ */ jsx("div", {
 		className,
@@ -2059,84 +2521,123 @@ function ResourceTimeline({ date, resources, events, resourceId = (event) => eve
 						}),
 						children: resource.title ?? resource.id
 					}), /* @__PURE__ */ jsxs("div", {
+						...trackInteractionProps(resource),
 						...slot("track", { base: {
 							position: "relative",
 							width: trackWidth
 						} }),
-						children: [/* @__PURE__ */ jsx("div", {
-							"aria-hidden": true,
-							...slot("gridLines", {
-								base: {
-									position: "absolute",
-									inset: 0,
-									pointerEvents: "none"
-								},
-								themed: { backgroundImage: gridLines }
-							})
-						}), positioned.map((pe, idx) => {
-							const key = `${resource.id}:${idx}`;
-							const active = drag?.key === key ? drag : null;
-							const startH = active ? active.startHours : pe.startHours;
-							const durH = active ? active.durationHours : pe.durationHours;
-							const left = clamp(startH - startHour, 0, endHour - startHour) * hourWidth;
-							const right = clamp(startH + durH - startHour, 0, endHour - startHour) * hourWidth;
-							const width = Math.max(right - left, 2);
-							const laneHeight = rowHeight / pe.columns;
-							const onPress = () => onPressEvent?.(pe.event);
-							const args = {
-								event: pe.event,
-								width,
-								onPress
-							};
-							const draggable = !!onDragEvent;
-							return /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: draggable ? void 0 : onPress,
-								"aria-label": pe.event.title,
-								...dataState({ "data-dragging": !!active }),
-								onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
-								onPointerMove: draggable ? moveDrag : void 0,
-								onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
-								onPointerCancel: draggable ? cancelDrag : void 0,
-								...slot("event", { base: {
-									position: "absolute",
-									left,
-									width,
-									top: pe.column * laneHeight,
-									height: laneHeight,
-									padding: 1,
-									border: "none",
-									background: "transparent",
-									cursor: draggable ? "grab" : "pointer",
-									touchAction: draggable ? "none" : "auto",
-									font: "inherit",
-									textAlign: "left",
-									boxSizing: "border-box",
-									zIndex: active ? 3 : 1,
-									opacity: active ? .85 : 1
-								} }),
-								children: [Renderer ? /* @__PURE__ */ jsx(Renderer, { ...args }) : /* @__PURE__ */ jsx(DefaultBar, {
-									...args,
-									theme,
-									boxProps: slot("eventBox")
-								}), draggable ? /* @__PURE__ */ jsx("span", {
-									"aria-hidden": true,
-									onPointerDown: (e) => {
-										e.stopPropagation();
-										beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
-									},
-									style: {
+						children: [
+							bandsFor(resource).map((b) => /* @__PURE__ */ jsx("div", {
+								"aria-hidden": true,
+								...slot("businessHours", {
+									base: {
 										position: "absolute",
 										top: 0,
 										bottom: 0,
-										right: 0,
-										width: 8,
-										cursor: "ew-resize",
-										touchAction: "none"
+										left: (b.start - startHour) * hourWidth,
+										width: (b.end - b.start) * hourWidth,
+										pointerEvents: "none",
+										zIndex: 0
+									},
+									themed: { background: theme.outsideHoursBackground }
+								})
+							}, b.start)),
+							/* @__PURE__ */ jsx("div", {
+								"aria-hidden": true,
+								...slot("gridLines", {
+									base: {
+										position: "absolute",
+										inset: 0,
+										pointerEvents: "none"
+									},
+									themed: { backgroundImage: gridLines }
+								})
+							}),
+							positioned.map((pe, idx) => {
+								const key = `${resource.id}:${idx}`;
+								const active = drag?.key === key ? drag : null;
+								const startH = active ? active.startHours : pe.startHours;
+								const durH = active ? active.durationHours : pe.durationHours;
+								const left = clamp(startH - startHour, 0, endHour - startHour) * hourWidth;
+								const right = clamp(startH + durH - startHour, 0, endHour - startHour) * hourWidth;
+								const width = Math.max(right - left, 2);
+								const laneHeight = rowHeight / pe.columns;
+								const onPress = () => onPressEvent?.(pe.event);
+								const args = {
+									event: pe.event,
+									width,
+									onPress
+								};
+								const draggable = !!onDragEvent;
+								return /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: draggable ? void 0 : onPress,
+									"aria-label": pe.event.title,
+									...dataState({ "data-dragging": !!active }),
+									onPointerDown: draggable ? (e) => beginDrag(e, key, "move", pe.startHours, pe.durationHours) : void 0,
+									onPointerMove: draggable ? moveDrag : void 0,
+									onPointerUp: draggable ? (e) => endDrag(e, pe.event, onPress) : void 0,
+									onPointerCancel: draggable ? cancelDrag : void 0,
+									...slot("event", { base: {
+										position: "absolute",
+										left,
+										width,
+										top: pe.column * laneHeight,
+										height: laneHeight,
+										padding: 1,
+										border: "none",
+										background: "transparent",
+										cursor: draggable ? "grab" : "pointer",
+										touchAction: draggable ? "none" : "auto",
+										font: "inherit",
+										textAlign: "left",
+										boxSizing: "border-box",
+										zIndex: active ? 3 : 1,
+										opacity: active ? .85 : 1
+									} }),
+									children: [Renderer ? /* @__PURE__ */ jsx(Renderer, { ...args }) : /* @__PURE__ */ jsx(DefaultBar, {
+										...args,
+										theme,
+										boxProps: slot("eventBox")
+									}), draggable ? /* @__PURE__ */ jsx("span", {
+										"aria-hidden": true,
+										onPointerDown: (e) => {
+											e.stopPropagation();
+											beginDrag(e, key, "resize", pe.startHours, pe.durationHours);
+										},
+										style: {
+											position: "absolute",
+											top: 0,
+											bottom: 0,
+											right: 0,
+											width: 8,
+											cursor: "ew-resize",
+											touchAction: "none"
+										}
+									}) : null]
+								}, idx);
+							}),
+							createBox?.resourceKey === resource.id ? /* @__PURE__ */ jsx("div", {
+								"aria-hidden": true,
+								...slot("createGhost", {
+									base: {
+										position: "absolute",
+										top: 1,
+										bottom: 1,
+										left: Math.min(createBox.startPx, createBox.curPx),
+										width: Math.max(Math.abs(createBox.curPx - createBox.startPx), 2),
+										opacity: .7,
+										pointerEvents: "none",
+										zIndex: 2
+									},
+									themed: {
+										background: theme.rangeBackground,
+										border: `1px solid ${theme.selectedBackground}`,
+										borderRadius: 6
 									}
-								}) : null]
-							}, idx);
-						})]
+								})
+							}) : null
+						]
 					})]
 				}, resource.id);
 			})]