@super-calendar/native 2.4.0 → 2.5.0

package/dist/index.d.mts

@@ -465,12 +465,38 @@ interface ResourceTimelineProps<T = unknown> {
   renderEvent?: ComponentType<ResourceEventArgs<T>>;
   /** Tap an event. */
   onPressEvent?: (event: CalendarEvent$1<T>) => void;
+  /**
+   * Long-press an event. When `onDragEvent` is also set, a long-press picks the
+   * bar up to move instead, so this fires only for non-draggable bars.
+   */
+  onLongPressEvent?: (event: CalendarEvent$1<T>) => void;
   /**
    * Enables drag-to-move and edge-resize along the time axis: long-press a bar to
    * move it, or drag its right edge to resize. Called with the proposed new
    * start/end; return `false` to reject the drop (it snaps back).
    */
   onDragEvent?: (event: CalendarEvent$1<T>, start: Date, end: Date) => void | boolean;
+  /** Tap empty lane space; called with the snapped time and the lane's resource. */
+  onPressCell?: (at: Date, resource: Resource) => void;
+  /**
+   * Long-press empty lane space. When `onCreateEvent` is also set, the long-press
+   * starts the create drag instead, so this fires only without it.
+   */
+  onLongPressCell?: (at: Date, resource: Resource) => void;
+  /**
+   * Long-press empty lane space, then drag along the time axis to sweep out a new
+   * event; called with the swept start/end and the lane's resource.
+   */
+  onCreateEvent?: (start: Date, end: Date, resource: Resource) => void;
+  /**
+   * Shade the hours outside this window, per lane. Same shape as the Calendar's
+   * `businessHours` plus the lane's resource, so per-resource opening hours work
+   * (return `null` for a fully closed lane). A date-only function is accepted.
+   */
+  businessHours?: (date: Date, resource: Resource) => {
+    start: number;
+    end: number;
+  } | null;
   /** Snap dragged events to this many minutes (default 15). */
   dragStepMinutes?: number;
 }
@@ -492,6 +518,6 @@ interface ResourceTimelineProps<T = unknown> {
  * />
  * ```
  */
-declare function ResourceTimeline<T = unknown>({ date, orientation, resources, events, resourceId, startHour, endHour, hourWidth, hourHeight, rowHeight, labelWidth, ampm, renderEvent, onPressEvent, onDragEvent, dragStepMinutes }: ResourceTimelineProps<T>): ReactElement;
+declare function ResourceTimeline<T = unknown>({ date, orientation, resources, events, resourceId, startHour, endHour, hourWidth, hourHeight, rowHeight, labelWidth, ampm, renderEvent, onPressEvent, onLongPressEvent, onDragEvent, onPressCell, onLongPressCell, onCreateEvent, businessHours, dragStepMinutes }: ResourceTimelineProps<T>): ReactElement;
 //#endregion
 export { Agenda, type AgendaProps, type AgendaSlot, type BusinessHours, Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type CalendarSlot, type CalendarTheme, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, type DateRange, type DateSelectionConstraints, type DaySelectionState, DefaultEvent, DefaultMonthEvent, type EventAccessibilityLabelContext, type EventAccessibilityLabeler, type EventDragHandler, type EventDragStartHandler, type EventKeyExtractor, type HourRenderer, type ICalEvent, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, type MonthListSlot, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type MonthViewSlot, type PartialCalendarTheme, type PositionedEvent, type RecurrenceFrequency, type RecurrenceRule, type RenderEvent, type RenderEventArgs, type ResolvedSlot, type Resource, type ResourceEventArgs, ResourceTimeline, type ResourceTimelineProps, type SlotDefault, type SlotStyleProps, TimeGrid, type TimeGridMode, type TimeGridProps, type TimeGridSlot, type ToICalendarOptions, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, type WeekdayFormat, buildMonthGrid, buildMonthWeeks, darkTheme, daySelectionState, defaultTheme, eventsInTimeZone, expandRecurringEvents, getIsToday, getViewDays, getWeekDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, layoutDayEvents, mergeTheme, minutesIntoDay, nextDateRange, parseICalendar, toICalendar, toZonedTime, useCalendarTheme, useDateRange, useMonthGrid, weekdayFormatToken };

package/dist/index.d.ts

@@ -465,12 +465,38 @@ interface ResourceTimelineProps<T = unknown> {
   renderEvent?: ComponentType<ResourceEventArgs<T>>;
   /** Tap an event. */
   onPressEvent?: (event: CalendarEvent$1<T>) => void;
+  /**
+   * Long-press an event. When `onDragEvent` is also set, a long-press picks the
+   * bar up to move instead, so this fires only for non-draggable bars.
+   */
+  onLongPressEvent?: (event: CalendarEvent$1<T>) => void;
   /**
    * Enables drag-to-move and edge-resize along the time axis: long-press a bar to
    * move it, or drag its right edge to resize. Called with the proposed new
    * start/end; return `false` to reject the drop (it snaps back).
    */
   onDragEvent?: (event: CalendarEvent$1<T>, start: Date, end: Date) => void | boolean;
+  /** Tap empty lane space; called with the snapped time and the lane's resource. */
+  onPressCell?: (at: Date, resource: Resource) => void;
+  /**
+   * Long-press empty lane space. When `onCreateEvent` is also set, the long-press
+   * starts the create drag instead, so this fires only without it.
+   */
+  onLongPressCell?: (at: Date, resource: Resource) => void;
+  /**
+   * Long-press empty lane space, then drag along the time axis to sweep out a new
+   * event; called with the swept start/end and the lane's resource.
+   */
+  onCreateEvent?: (start: Date, end: Date, resource: Resource) => void;
+  /**
+   * Shade the hours outside this window, per lane. Same shape as the Calendar's
+   * `businessHours` plus the lane's resource, so per-resource opening hours work
+   * (return `null` for a fully closed lane). A date-only function is accepted.
+   */
+  businessHours?: (date: Date, resource: Resource) => {
+    start: number;
+    end: number;
+  } | null;
   /** Snap dragged events to this many minutes (default 15). */
   dragStepMinutes?: number;
 }
@@ -492,6 +518,6 @@ interface ResourceTimelineProps<T = unknown> {
  * />
  * ```
  */
-declare function ResourceTimeline<T = unknown>({ date, orientation, resources, events, resourceId, startHour, endHour, hourWidth, hourHeight, rowHeight, labelWidth, ampm, renderEvent, onPressEvent, onDragEvent, dragStepMinutes }: ResourceTimelineProps<T>): ReactElement;
+declare function ResourceTimeline<T = unknown>({ date, orientation, resources, events, resourceId, startHour, endHour, hourWidth, hourHeight, rowHeight, labelWidth, ampm, renderEvent, onPressEvent, onLongPressEvent, onDragEvent, onPressCell, onLongPressCell, onCreateEvent, businessHours, dragStepMinutes }: ResourceTimelineProps<T>): ReactElement;
 //#endregion
 export { Agenda, type AgendaProps, type AgendaSlot, type BusinessHours, Calendar, type CalendarEvent, type CalendarMode, type CalendarProps, type CalendarSlot, type CalendarTheme, CalendarThemeProvider, DEFAULT_HOUR_HEIGHT, type DateRange, type DateSelectionConstraints, type DaySelectionState, DefaultEvent, DefaultMonthEvent, type EventAccessibilityLabelContext, type EventAccessibilityLabeler, type EventDragHandler, type EventDragStartHandler, type EventKeyExtractor, type HourRenderer, type ICalEvent, type ICalendarEvent, type MonthGrid, type MonthGridDay, type MonthGridWeek, type MonthGridWeekday, MonthList, type MonthListProps, type MonthListSlot, MonthPager, type MonthPagerProps, MonthView, type MonthViewProps, type MonthViewSlot, type PartialCalendarTheme, type PositionedEvent, type RecurrenceFrequency, type RecurrenceRule, type RenderEvent, type RenderEventArgs, type ResolvedSlot, type Resource, type ResourceEventArgs, ResourceTimeline, type ResourceTimelineProps, type SlotDefault, type SlotStyleProps, TimeGrid, type TimeGridMode, type TimeGridProps, type TimeGridSlot, type ToICalendarOptions, type UseDateRangeOptions, type UseMonthGridOptions, type WeekStartsOn, type WeekdayFormat, buildMonthGrid, buildMonthWeeks, darkTheme, daySelectionState, defaultTheme, eventsInTimeZone, expandRecurringEvents, getIsToday, getViewDays, getWeekDays, isAllDayEvent, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, layoutDayEvents, mergeTheme, minutesIntoDay, nextDateRange, parseICalendar, toICalendar, toZonedTime, useCalendarTheme, useDateRange, useMonthGrid, weekdayFormatToken };

package/dist/index.js

@@ -402,7 +402,7 @@ const styles$2 = react_native.StyleSheet.create({
 });
 //#endregion
 //#region src/components/TimeGrid.tsx
-const isWeb = react_native.Platform.OS === "web";
+const isWeb$1 = react_native.Platform.OS === "web";
 const MINUTES_PER_HOUR$1 = 60;
 const HOURS_PER_DAY = 24;
 const MINUTES_PER_DAY = MINUTES_PER_HOUR$1 * HOURS_PER_DAY;
@@ -417,7 +417,7 @@ const MIN_EVENT_HEIGHT = 32;
 const EVENT_GAP = 2;
 const DRAG_ACTIVATE_MS = 300;
 const MOVE_ACTIVATE_MS$1 = 500;
-const DRAG_ACTIVATE_PX = 8;
+const DRAG_ACTIVATE_PX$1 = 8;
 const RESIZE_HANDLE_HEIGHT = 14;
 const DEFAULT_DRAG_STEP_MINUTES = 15;
 const HOUR_LABEL_TOP_INSET = 12;
@@ -516,7 +516,7 @@ function AnimatedEventBox({ positioned, cellHeight, minHour, left, width, dayWid
 			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$1);
+		return isWeb$1 ? pan.activeOffsetX([-8, DRAG_ACTIVATE_PX$1]).activeOffsetY([-8, DRAG_ACTIVATE_PX$1]) : pan.activateAfterLongPress(MOVE_ACTIVATE_MS$1);
 	}, [
 		draggable,
 		snapMinutes,
@@ -732,14 +732,14 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		},
 		onEndDrag: (event) => {
 			isDragging.value = false;
-			if (!isWeb && isActiveShared.value) {
+			if (!isWeb$1 && 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) {
+			if (!isWeb$1 && isActiveShared.value) {
 				scrollY.value = event.contentOffset.y;
 				(0, react_native_reanimated.runOnJS)(onSettleOffset)(event.contentOffset.y);
 			}
@@ -749,7 +749,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		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;
+		if (isWeb$1 || !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), [
@@ -872,7 +872,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 			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);
+		return isWeb$1 ? pan.activeOffsetY([-8, DRAG_ACTIVATE_PX$1]) : pan.activateAfterLongPress(DRAG_ACTIVATE_MS);
 	}, [
 		createEnabled,
 		dayCount,
@@ -891,7 +891,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		createCancelled
 	]);
 	const backgroundGesture = (0, react.useMemo)(() => {
-		const tap = isWeb && onPressCell != null ? react_native_gesture_handler.Gesture.Tap().onEnd((event) => {
+		const tap = isWeb$1 && 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);
@@ -904,7 +904,7 @@ function TimetablePageInner({ mode, numberOfDays, date, events, cellHeight, hour
 		tapCell
 	]);
 	(0, react.useEffect)(() => {
-		if (!isWeb || !createEnabled) return;
+		if (!isWeb$1 || !createEnabled) return;
 		const doc = globalThis.document;
 		if (!doc) return;
 		const handler = (event) => {
@@ -1110,7 +1110,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		offsetSeedRef.current = y;
 	}, []);
 	const committedCellHeight = (0, react_native_reanimated.useSharedValue)(hourHeight);
-	useWebGridZoom(isWeb, containerRef, cellHeight, committedCellHeight, minHourHeight, maxHourHeight);
+	useWebGridZoom(isWeb$1, 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,
@@ -1140,7 +1140,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		weekEndsOn
 	]);
 	const handleViewableItemsChanged = (0, react.useCallback)((info) => {
-		if (isWeb) return;
+		if (isWeb$1) return;
 		const settled = info.viewableItems.find((token) => token.isViewable);
 		if (settled?.index == null) return;
 		if (pendingScrollIndexRef.current != null) {
@@ -1164,7 +1164,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		});
 	}, [activeIndex]);
 	(0, react.useEffect)(() => {
-		if (!isWeb) return;
+		if (!isWeb$1) return;
 		const root = containerRef.current;
 		if (!root) return;
 		const restoreVisiblePage = () => {
@@ -1191,7 +1191,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		};
 	}, [activeIndex, pageHeight]);
 	(0, react.useEffect)(() => {
-		if (!isWeb) return;
+		if (!isWeb$1) return;
 		const root = containerRef.current;
 		if (!root) return;
 		const onScrollCapture = (event) => {
@@ -1208,7 +1208,7 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 		return () => root.removeEventListener("scroll", onScrollCapture, true);
 	}, []);
 	(0, react.useEffect)(() => {
-		if (!isWeb) return;
+		if (!isWeb$1) return;
 		const root = containerRef.current;
 		if (!root) return;
 		const lockHorizontal = () => {
@@ -1374,14 +1374,14 @@ function TimeGridInner({ mode, numberOfDays = 1, weekEndsOn, date, events, cellH
 					},
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_legendapp_list_react_native.LegendList, {
 						ref: listRef,
-						style: isWeb ? [styles$1.pagerList, styles$1.webNoScroll] : styles$1.pagerList,
+						style: isWeb$1 ? [styles$1.pagerList, styles$1.webNoScroll] : styles$1.pagerList,
 						data: pageDates,
 						extraData: listExtraData,
 						horizontal: true,
 						recycleItems: false,
 						keyExtractor: keyExtractorList,
 						getFixedItemSize,
-						...isWeb ? null : {
+						...isWeb$1 ? null : {
 							scrollEnabled: swipeEnabled,
 							pagingEnabled: !freeSwipe,
 							snapToIndices: freeSwipe ? snapToIndices : void 0
@@ -1795,7 +1795,9 @@ function Calendar({ events, mode, date, onChangeDate, onChangeDateRange, onPress
 //#endregion
 //#region src/components/ResourceTimeline.tsx
 const MOVE_ACTIVATE_MS = 250;
+const DRAG_ACTIVATE_PX = 8;
 const MINUTES_PER_HOUR = 60;
+const isWeb = react_native.Platform.OS === "web";
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
 const GUTTER_WIDTH = 56;
 function DefaultBar({ event, width, height }) {
@@ -1828,7 +1830,7 @@ function DefaultBar({ event, width, height }) {
 		}) : null]
 	});
 }
-function ResourceBar({ pe, vertical, hourSize, left, top, width, height, rendererSize, snapMinutes, Renderer, onPress, onDragEvent, theme }) {
+function ResourceBar({ pe, vertical, hourSize, left, top, width, height, rendererSize, snapMinutes, Renderer, onPress, onLongPress, onDragEvent, theme }) {
 	const moveX = (0, react_native_reanimated.useSharedValue)(0);
 	const resizeW = (0, react_native_reanimated.useSharedValue)(0);
 	const latest = (0, react.useRef)({
@@ -1959,6 +1961,7 @@ function ResourceBar({ pe, vertical, hourSize, left, top, width, height, rendere
 			gesture: moveGesture,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
 				onPress,
+				onLongPress,
 				accessibilityRole: "button",
 				accessibilityLabel: pe.event.title,
 				accessibilityActions: barActions,
@@ -1982,6 +1985,115 @@ function ResourceBar({ pe, vertical, hourSize, left, top, width, height, rendere
 		})]
 	});
 }
+function LaneInteractionLayer({ resource, vertical, hourSize, startHour, date, snapMinutes, onPressCell, onLongPressCell, onCreateEvent, theme }) {
+	const ghostStart = (0, react_native_reanimated.useSharedValue)(0);
+	const ghostSize = (0, react_native_reanimated.useSharedValue)(0);
+	const ghostVisible = (0, react_native_reanimated.useSharedValue)(0);
+	const timeAt = (0, react.useCallback)((px) => (0, _super_calendar_core.cellRangeFromDrag)(date, px, px, hourSize, startHour, snapMinutes)?.start, [
+		date,
+		hourSize,
+		startHour,
+		snapMinutes
+	]);
+	const commitCreate = (0, react.useCallback)((fromPx, toPx) => {
+		const range = (0, _super_calendar_core.cellRangeFromDrag)(date, fromPx, toPx, hourSize, startHour, snapMinutes);
+		if (range) onCreateEvent?.(range.start, range.end, resource);
+	}, [
+		date,
+		hourSize,
+		startHour,
+		snapMinutes,
+		onCreateEvent,
+		resource
+	]);
+	const pressAt = (0, react.useCallback)((px) => {
+		const at = timeAt(px);
+		if (at) onPressCell?.(at, resource);
+	}, [
+		timeAt,
+		onPressCell,
+		resource
+	]);
+	const laneGesture = (0, react.useMemo)(() => {
+		const pan = onCreateEvent ? react_native_gesture_handler.Gesture.Pan().onStart((e) => {
+			ghostStart.value = vertical ? e.y : e.x;
+			ghostSize.value = 0;
+			ghostVisible.value = 1;
+		}).onUpdate((e) => {
+			ghostSize.value = (vertical ? e.y : e.x) - ghostStart.value;
+		}).onEnd((e, success) => {
+			ghostVisible.value = 0;
+			if (success) (0, react_native_reanimated.runOnJS)(commitCreate)(ghostStart.value, vertical ? e.y : e.x);
+		}).onFinalize(() => {
+			ghostVisible.value = 0;
+		}) : null;
+		const activatedPan = pan ? isWeb ? vertical ? pan.activeOffsetY([-8, DRAG_ACTIVATE_PX]) : pan.activeOffsetX([-8, DRAG_ACTIVATE_PX]) : pan.activateAfterLongPress(MOVE_ACTIVATE_MS) : null;
+		const tap = isWeb && onPressCell ? react_native_gesture_handler.Gesture.Tap().onEnd((e) => {
+			(0, react_native_reanimated.runOnJS)(pressAt)(vertical ? e.y : e.x);
+		}) : null;
+		if (activatedPan && tap) return react_native_gesture_handler.Gesture.Exclusive(activatedPan, tap);
+		return activatedPan ?? tap;
+	}, [
+		onCreateEvent,
+		onPressCell,
+		vertical,
+		commitCreate,
+		pressAt,
+		ghostStart,
+		ghostSize,
+		ghostVisible
+	]);
+	const ghostStyle = (0, react_native_reanimated.useAnimatedStyle)(() => {
+		const stepPx = snapMinutes / MINUTES_PER_HOUR * hourSize;
+		const snap = (v) => stepPx > 0 ? Math.round(v / stepPx) * stepPx : v;
+		const a = snap(ghostStart.value);
+		const b = snap(ghostStart.value + ghostSize.value);
+		const from = Math.min(a, b);
+		const size = Math.max(Math.abs(b - a), 2);
+		return vertical ? {
+			opacity: ghostVisible.value,
+			top: from,
+			height: size
+		} : {
+			opacity: ghostVisible.value,
+			left: from,
+			width: size
+		};
+	}, [
+		vertical,
+		hourSize,
+		snapMinutes
+	]);
+	const pxOf = (e) => vertical ? e.nativeEvent.locationY : e.nativeEvent.locationX;
+	const handlePress = onPressCell ? (e) => pressAt(pxOf(e)) : void 0;
+	const handleLongPress = onLongPressCell && !onCreateEvent ? (e) => {
+		const at = timeAt(pxOf(e));
+		if (at) onLongPressCell(at, resource);
+	} : void 0;
+	const layer = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
+		testID: "resource-cell-layer",
+		style: react_native.StyleSheet.absoluteFill,
+		onPress: handlePress,
+		onLongPress: handleLongPress,
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no"
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [laneGesture ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_gesture_handler.GestureDetector, {
+		gesture: laneGesture,
+		children: layer
+	}) : layer, onCreateEvent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+		testID: "resource-create-ghost",
+		pointerEvents: "none",
+		style: [
+			vertical ? styles.vcreateGhost : styles.hcreateGhost,
+			{
+				backgroundColor: theme.colors.eventBackground,
+				borderColor: theme.colors.todayBackground
+			},
+			ghostStyle
+		]
+	}) : null] });
+}
 /**
 * A horizontal resource timeline: rows are resources (rooms, people, machines)
 * and the x-axis is one day's hours. Events sit in their resource's row, and
@@ -2000,9 +2112,11 @@ function ResourceBar({ pe, vertical, hourSize, left, top, width, height, rendere
 * />
 * ```
 */
-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, renderEvent, onPressEvent, onDragEvent, dragStepMinutes = 15 }) {
+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, renderEvent, onPressEvent, onLongPressEvent, onDragEvent, onPressCell, onLongPressCell, onCreateEvent, businessHours, dragStepMinutes = 15 }) {
 	const theme = require_MonthList.useCalendarTheme();
 	const Renderer = renderEvent ?? DefaultBar;
+	const cellEnabled = !!onPressCell || !!onLongPressCell || !!onCreateEvent;
+	const bandsFor = (resource) => businessHours ? (0, _super_calendar_core.closedHourBands)(date, (d) => businessHours(d, resource), startHour, endHour) : [];
 	const hours = (0, react.useMemo)(() => Array.from({ length: Math.max(0, endHour - startHour) }, (_, i) => startHour + i), [startHour, endHour]);
 	const trackWidth = (endHour - startHour) * hourWidth;
 	const byResource = (0, react.useMemo)(() => {
@@ -2055,58 +2169,84 @@ function ResourceTimeline({ date, orientation = "horizontal", resources, events,
 								{ borderLeftColor: theme.colors.gridLine },
 								theme.containers.resourceRow
 							],
-							children: [hours.slice(1).map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-								pointerEvents: "none",
-								style: [styles.vgridLine, {
-									top: (h - startHour) * hourHeight,
-									backgroundColor: theme.colors.gridLine
-								}]
-							}, h)), positioned.map((pe, idx) => {
-								const top = clamp(pe.startHours - startHour, 0, endHour - startHour) * hourHeight;
-								const bottomPx = clamp(pe.startHours + pe.durationHours - startHour, 0, endHour - startHour) * hourHeight;
-								const height = Math.max(bottomPx - top, 2);
-								const lanePct = 100 / pe.columns;
-								const left = `${pe.column * lanePct}%`;
-								const width = `${lanePct}%`;
-								const onPress = () => onPressEvent?.(pe.event);
-								if (onDragEvent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResourceBar, {
-									pe,
+							children: [
+								bandsFor(resource).map((b) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+									pointerEvents: "none",
+									testID: "resource-hours-shade",
+									style: [styles.vshadeBand, {
+										top: (b.start - startHour) * hourHeight,
+										height: (b.end - b.start) * hourHeight,
+										backgroundColor: theme.colors.outsideHoursBackground
+									}]
+								}, `shade-${b.start}`)),
+								hours.slice(1).map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+									pointerEvents: "none",
+									style: [styles.vgridLine, {
+										top: (h - startHour) * hourHeight,
+										backgroundColor: theme.colors.gridLine
+									}]
+								}, h)),
+								cellEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LaneInteractionLayer, {
+									resource,
 									vertical: true,
 									hourSize: hourHeight,
-									left,
-									top,
-									width,
-									height,
-									rendererSize: {
-										width: 0,
-										height
-									},
+									startHour,
+									date,
 									snapMinutes: dragStepMinutes,
-									Renderer,
-									onPress,
-									onDragEvent,
+									onPressCell,
+									onLongPressCell,
+									onCreateEvent,
 									theme
-								}, idx);
-								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
-									onPress,
-									accessibilityRole: "button",
-									accessibilityLabel: pe.event.title,
-									style: {
-										position: "absolute",
+								}) : null,
+								positioned.map((pe, idx) => {
+									const top = clamp(pe.startHours - startHour, 0, endHour - startHour) * hourHeight;
+									const bottomPx = clamp(pe.startHours + pe.durationHours - startHour, 0, endHour - startHour) * hourHeight;
+									const height = Math.max(bottomPx - top, 2);
+									const lanePct = 100 / pe.columns;
+									const left = `${pe.column * lanePct}%`;
+									const width = `${lanePct}%`;
+									const onPress = () => onPressEvent?.(pe.event);
+									if (onDragEvent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResourceBar, {
+										pe,
+										vertical: true,
+										hourSize: hourHeight,
 										left,
-										width,
 										top,
+										width,
 										height,
-										padding: 1
-									},
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, {
-										event: pe.event,
-										width: 0,
-										height,
-										onPress
-									})
-								}, idx);
-							})]
+										rendererSize: {
+											width: 0,
+											height
+										},
+										snapMinutes: dragStepMinutes,
+										Renderer,
+										onPress,
+										onLongPress: onLongPressEvent ? () => onLongPressEvent(pe.event) : void 0,
+										onDragEvent,
+										theme
+									}, idx);
+									return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
+										onPress,
+										onLongPress: onLongPressEvent ? () => onLongPressEvent(pe.event) : void 0,
+										accessibilityRole: "button",
+										accessibilityLabel: pe.event.title,
+										style: {
+											position: "absolute",
+											left,
+											width,
+											top,
+											height,
+											padding: 1
+										},
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, {
+											event: pe.event,
+											width: 0,
+											height,
+											onPress
+										})
+									}, idx);
+								})
+							]
 						}, resource.id);
 					})]
 				})
@@ -2163,52 +2303,78 @@ function ResourceTimeline({ date, orientation = "horizontal", resources, events,
 						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
 						style: { width: trackWidth },
-						children: [hours.slice(1).map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-							pointerEvents: "none",
-							style: [styles.gridLine, {
-								left: (h - startHour) * hourWidth,
-								backgroundColor: theme.colors.gridLine
-							}]
-						}, h)), positioned.map((pe, idx) => {
-							const left = clamp(pe.startHours - startHour, 0, endHour - startHour) * hourWidth;
-							const right = clamp(pe.startHours + pe.durationHours - startHour, 0, endHour - startHour) * hourWidth;
-							const width = Math.max(right - left, 2);
-							const laneHeight = rowHeight / pe.columns;
-							const onPress = () => onPressEvent?.(pe.event);
-							if (onDragEvent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResourceBar, {
-								pe,
+						children: [
+							bandsFor(resource).map((b) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+								pointerEvents: "none",
+								testID: "resource-hours-shade",
+								style: [styles.hshadeBand, {
+									left: (b.start - startHour) * hourWidth,
+									width: (b.end - b.start) * hourWidth,
+									backgroundColor: theme.colors.outsideHoursBackground
+								}]
+							}, `shade-${b.start}`)),
+							hours.slice(1).map((h) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+								pointerEvents: "none",
+								style: [styles.gridLine, {
+									left: (h - startHour) * hourWidth,
+									backgroundColor: theme.colors.gridLine
+								}]
+							}, h)),
+							cellEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LaneInteractionLayer, {
+								resource,
 								vertical: false,
 								hourSize: hourWidth,
-								left,
-								top: pe.column * laneHeight,
-								width,
-								height: laneHeight,
-								rendererSize: { width },
+								startHour,
+								date,
 								snapMinutes: dragStepMinutes,
-								Renderer,
-								onPress,
-								onDragEvent,
+								onPressCell,
+								onLongPressCell,
+								onCreateEvent,
 								theme
-							}, idx);
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
-								onPress,
-								accessibilityRole: "button",
-								accessibilityLabel: pe.event.title,
-								style: {
-									position: "absolute",
+							}) : null,
+							positioned.map((pe, idx) => {
+								const left = clamp(pe.startHours - startHour, 0, endHour - startHour) * hourWidth;
+								const right = clamp(pe.startHours + pe.durationHours - startHour, 0, endHour - startHour) * hourWidth;
+								const width = Math.max(right - left, 2);
+								const laneHeight = rowHeight / pe.columns;
+								const onPress = () => onPressEvent?.(pe.event);
+								if (onDragEvent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResourceBar, {
+									pe,
+									vertical: false,
+									hourSize: hourWidth,
 									left,
-									width,
 									top: pe.column * laneHeight,
-									height: laneHeight,
-									padding: 1
-								},
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, {
-									event: pe.event,
 									width,
-									onPress
-								})
-							}, idx);
-						})]
+									height: laneHeight,
+									rendererSize: { width },
+									snapMinutes: dragStepMinutes,
+									Renderer,
+									onPress,
+									onLongPress: onLongPressEvent ? () => onLongPressEvent(pe.event) : void 0,
+									onDragEvent,
+									theme
+								}, idx);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Pressable, {
+									onPress,
+									onLongPress: onLongPressEvent ? () => onLongPressEvent(pe.event) : void 0,
+									accessibilityRole: "button",
+									accessibilityLabel: pe.event.title,
+									style: {
+										position: "absolute",
+										left,
+										width,
+										top: pe.column * laneHeight,
+										height: laneHeight,
+										padding: 1
+									},
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Renderer, {
+										event: pe.event,
+										width,
+										onPress
+									})
+								}, idx);
+							})
+						]
 					})]
 				}, resource.id);
 			})]
@@ -2298,6 +2464,34 @@ const styles = react_native.StyleSheet.create({
 		left: 0,
 		right: 0,
 		height: react_native.StyleSheet.hairlineWidth
+	},
+	vcreateGhost: {
+		position: "absolute",
+		left: 2,
+		right: 2,
+		borderWidth: 1,
+		borderRadius: 6,
+		opacity: 0,
+		zIndex: 2
+	},
+	hcreateGhost: {
+		position: "absolute",
+		top: 2,
+		bottom: 2,
+		borderWidth: 1,
+		borderRadius: 6,
+		opacity: 0,
+		zIndex: 2
+	},
+	hshadeBand: {
+		position: "absolute",
+		top: 0,
+		bottom: 0
+	},
+	vshadeBand: {
+		position: "absolute",
+		left: 0,
+		right: 0
 	}
 });
 //#endregion