@riverbankcms/sdk 0.138.0 → 0.139.0

package/dist/client/{EventCombined.client-a02TXUgg.mjs → EventCombined.client-dWqgd5ZO.mjs}

@@ -1,14 +1,30 @@
 "use client";
 import { D as clsx } from "./colorStyles-CrxJrPjJ.mjs";
-import { $ as getOrderedDayNames, B as buildEventRuntimeFilters, F as calendarWindowBounds, G as getCardOrientation, I as calendarWindowMonths$1, Jt as formatLocalScheduleDate, K as getContainerClass, M as calendarMonthDate, N as calendarPageResponseError, P as calendarQueryKey, Q as getDayOfWeek, R as planCalendarMonthRanges, V as getEventRuntimeFiltersKey, X as buildCalendarViewport, Xt as getLocalScheduleDate, Y as addMonths, Z as formatDateKey, nt as isToday, q as MONTH_NAMES, rt as shiftCalendarAnchorDate, ut as themeButtonClassName } from "./propsDecoder-CY9gGEF7.mjs";
-import { a as EventCardClient, i as EventPaginatedListView, n as useEventPagination, o as EventFilters, r as toError, s as formatEventTeacherLine, t as useEventFilters } from "./useEventFilters-1a1by4c8.mjs";
-import { o as formatEventRemainingPlaces, p as isEventFull, t as formatEventPrice } from "./pricing-xj7MPZlK.mjs";
-import { a as groupEventsByDate, i as formatTime, l as resolveEventLinkProps, t as formatDate } from "./dates-DCYhZBlW.mjs";
-import { n as useBlockApi } from "./context-DBzX85Xc.mjs";
+import { $ as getOrderedDayNames, B as buildEventRuntimeFilters, F as calendarWindowBounds, G as getCardOrientation, I as calendarWindowMonths$1, K as getContainerClass, M as calendarMonthDate, N as calendarPageResponseError, P as calendarQueryKey, Q as getDayOfWeek, R as planCalendarMonthRanges, V as getEventRuntimeFiltersKey, X as buildCalendarViewport, Y as addMonths, Yt as formatLocalScheduleDate, Z as formatDateKey, Zt as getLocalScheduleDate, nt as isToday, q as MONTH_NAMES, rt as shiftCalendarAnchorDate, tt as isSameCalendarDay, ut as themeButtonClassName } from "./propsDecoder-DYzafZb2.mjs";
+import { a as EventCardClient, i as EventPaginatedListView, n as useEventPagination, o as EventFilters, r as toError, s as formatEventTeacherLine, t as useEventFilters } from "./useEventFilters-oMoTw_JE.mjs";
+import { o as formatEventRemainingPlaces, p as isEventFull, t as formatEventPrice } from "./pricing-Uzw-GQ6Y.mjs";
+import { a as formatTime, d as resolveEventLinkProps, o as groupEventsByDate, s as resolveEventTimeZone, t as formatDate, u as resolveEventCta } from "./dates-wnPMiRl5.mjs";
+import { n as useBlockApi } from "./context-DvU_WUmd.mjs";
 import { t as createBodyThemePortalRoot } from "./themePortalRoot-AGs4cE7t.mjs";
 import { t as ModalShell } from "./ModalShell-CqkBvBIC.mjs";
 import React, { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region ../blocks/src/system/runtime/nodes/events/domain/duration.ts
+function formatEventDuration(event) {
+	const durationMinutes = Math.max(0, Math.round((Date.parse(event.endsAt) - Date.parse(event.startsAt)) / 6e4));
+	if (durationMinutes < 120 || durationMinutes % 60 !== 0) return `${durationMinutes} min`;
+	return `${durationMinutes / 60} hrs`;
+}
+//#endregion
+//#region ../blocks/src/system/runtime/nodes/events/domain/location.ts
+function formatEventLocation(event) {
+	switch (event.deliveryMode) {
+		case "online": return "Online";
+		case "hybrid": return event.venue ? `${event.venue.name} + online` : "Hybrid";
+		case "in_person": return event.venue?.name ?? "In person";
+	}
+}
+//#endregion
 //#region ../blocks/src/system/runtime/shared/components/TabBarFragment.tsx
 function clampIndex(idx, len) {
 	if (len <= 0) return 0;
@@ -201,6 +217,82 @@ function projectCalendarLoadState(state, months) {
 	return entries.some((entry) => !entry || entry.kind === "partial" || entry.kind === "loading") ? { kind: "loading" } : { kind: "idle" };
 }
 //#endregion
+//#region ../blocks/src/system/runtime/hooks/useCalendarToday.ts
+const SEARCH_STEP_MS = 3600 * 1e3;
+const MAX_BOUNDARY_SEARCH_MS = 72 * SEARCH_STEP_MS;
+const MAX_TIMER_DELAY_MS = 2147483647;
+const systemCalendarTodayClock = { now: () => /* @__PURE__ */ new Date() };
+/** Find the first instant after `now` whose site-local civil date differs. */
+function findNextCalendarDateBoundary(now, timeZone, resolveDate = getLocalScheduleDate) {
+	const currentDate = resolveDate(now, timeZone);
+	const lowerBound = now.getTime();
+	let upperBound = lowerBound + SEARCH_STEP_MS;
+	const searchLimit = lowerBound + MAX_BOUNDARY_SEARCH_MS;
+	while (upperBound <= searchLimit && isSameCalendarDay(resolveDate(new Date(upperBound), timeZone), currentDate)) upperBound += SEARCH_STEP_MS;
+	if (upperBound > searchLimit) return {
+		kind: "retry",
+		delayMs: SEARCH_STEP_MS
+	};
+	let lower = lowerBound;
+	let upper = upperBound;
+	while (upper - lower > 1) {
+		const midpoint = lower + Math.floor((upper - lower) / 2);
+		if (isSameCalendarDay(resolveDate(new Date(midpoint), timeZone), currentDate)) lower = midpoint;
+		else upper = midpoint;
+	}
+	return {
+		kind: "found",
+		instant: new Date(upper)
+	};
+}
+function useCalendarToday(context, clock = systemCalendarTodayClock) {
+	const [today, setToday] = useState(context.initialToday);
+	const now = clock.now;
+	const resolveDate = clock.resolveDate ?? getLocalScheduleDate;
+	const refreshToday = useCallback(() => {
+		const next = resolveDate(now(), context.timeZone);
+		setToday((current) => isSameCalendarDay(current, next) ? current : next);
+	}, [
+		context.timeZone,
+		now,
+		resolveDate
+	]);
+	useEffect(() => {
+		let timeoutId;
+		const scheduleBoundary = () => {
+			if (timeoutId !== void 0) clearTimeout(timeoutId);
+			const currentInstant = now();
+			const boundary = findNextCalendarDateBoundary(currentInstant, context.timeZone, resolveDate);
+			const boundaryDelay = boundary.kind === "found" ? boundary.instant.getTime() - currentInstant.getTime() : boundary.delayMs;
+			timeoutId = setTimeout(() => {
+				refreshToday();
+				scheduleBoundary();
+			}, Math.min(Math.max(1, boundaryDelay), MAX_TIMER_DELAY_MS));
+		};
+		const reconcileAndReschedule = () => {
+			refreshToday();
+			scheduleBoundary();
+		};
+		const handleVisibilityChange = () => {
+			if (document.visibilityState === "visible") reconcileAndReschedule();
+		};
+		reconcileAndReschedule();
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		window.addEventListener("focus", reconcileAndReschedule);
+		return () => {
+			if (timeoutId !== void 0) clearTimeout(timeoutId);
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+			window.removeEventListener("focus", reconcileAndReschedule);
+		};
+	}, [
+		context.timeZone,
+		now,
+		refreshToday,
+		resolveDate
+	]);
+	return today;
+}
+//#endregion
 //#region ../blocks/src/system/runtime/hooks/useCalendarEvents.ts
 /**
 * Hook for calendar event management with month-based caching
@@ -208,7 +300,7 @@ function projectCalendarLoadState(state, months) {
 * Uses the Block API Client for type-safe API calls.
 * Must be used within a BlockApiProvider.
 */
-function useCalendarViewport({ view = "month", startOfWeek = "monday", initialDate }) {
+function useCalendarViewport({ view = "month", startOfWeek = "monday", initialDate, today }) {
 	const [viewDate, setViewDate] = useState(initialDate);
 	const viewport = useMemo(() => buildCalendarViewport({
 		view,
@@ -234,8 +326,8 @@ function useCalendarViewport({ view = "month", startOfWeek = "monday", initialDa
 		goToPrevious,
 		goToNext,
 		goToToday: useCallback(() => {
-			setViewDate(initialDate);
-		}, [initialDate])
+			setViewDate(today);
+		}, [today])
 	};
 }
 /**
@@ -357,10 +449,12 @@ function useCalendarEventCache({ readProfile = "listing-card", viewDate, calenda
 	};
 }
 function useCalendarEvents({ readProfile, siteId: _siteId, calendarWindow, view = "month", startOfWeek = "monday", preloadMonths = 1, filters, stage, calendarContext }) {
+	const today = useCalendarToday(calendarContext);
 	const { viewDate, viewport, goToDate, goToPrevious, goToNext, goToToday } = useCalendarViewport({
 		view,
 		startOfWeek,
-		initialDate: calendarContext.initialToday
+		initialDate: calendarContext.initialToday,
+		today
 	});
 	const { events, loadState, retryCurrentView } = useCalendarEventCache({
 		readProfile,
@@ -374,6 +468,7 @@ function useCalendarEvents({ readProfile, siteId: _siteId, calendarWindow, view
 	return {
 		events,
 		viewDate,
+		today,
 		viewport,
 		loadState,
 		setViewDate: useCallback((date) => {
@@ -449,7 +544,7 @@ function useEventModal() {
 * Clicking an event opens the EventDetailModal.
 * Clicking "+N more" opens the DayEventsModal.
 */
-const CalendarDayCell = ({ date, events, isCurrentMonth, today: currentDate }) => {
+const CalendarDayCell = ({ date, events, isCurrentMonth, calendarTimeZone, today: currentDate }) => {
 	const { openEventModal, openDayModal } = useEventModal();
 	const today = isToday(date, currentDate);
 	const dayClasses = [
@@ -471,7 +566,7 @@ const CalendarDayCell = ({ date, events, isCurrentMonth, today: currentDate }) =
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "event-calendar-events",
 			children: [events.slice(0, 3).map((event) => {
-				const timeZone = event.timeZone ?? null;
+				const timeZone = resolveEventTimeZone(event, calendarTimeZone);
 				return /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					className: "event-calendar-event",
@@ -503,85 +598,202 @@ const CalendarDayCell = ({ date, events, isCurrentMonth, today: currentDate }) =
 	});
 };
 //#endregion
+//#region ../blocks/src/system/runtime/nodes/events/shared/CalendarDayHeaders.tsx
+function CalendarDayHeaders({ dayNames }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "event-calendar-day-headers",
+		children: dayNames.map((day) => /* @__PURE__ */ jsx("div", {
+			className: "event-calendar-day-header",
+			children: day
+		}, day))
+	});
+}
+//#endregion
+//#region ../blocks/src/system/runtime/nodes/events/shared/CalendarNavigationChevron.tsx
+function CalendarNavigationChevron({ direction }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "20",
+		height: "20",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			d: direction === "previous" ? "M15 19l-7-7 7-7" : "M9 5l7 7-7 7"
+		})
+	});
+}
+//#endregion
 //#region ../blocks/src/system/runtime/nodes/events/shared/AgendaEventCard.tsx
 /**
 * AgendaEventCard Component
 *
 * Rich event card for agenda/week view with category color, time, venue, pricing, and capacity.
 */
-const AgendaEventCard = ({ event, showCapacity, onClick }) => {
-	const eventLinkProps = resolveEventLinkProps(event);
+const AgendaEventCard = ({ event, showCapacity, showVenue = true, buttonVariant = "primary", buttonText, calendarTimeZone, onClick }) => {
+	if (onClick) return /* @__PURE__ */ jsx(AgendaModalCard, {
+		event,
+		showCapacity,
+		calendarTimeZone,
+		onClick
+	});
+	return /* @__PURE__ */ jsx(AgendaLinkCard, {
+		event,
+		showCapacity,
+		showVenue,
+		buttonVariant,
+		buttonText,
+		calendarTimeZone
+	});
+};
+function AgendaModalCard({ event, showCapacity, calendarTimeZone, onClick }) {
 	const categoryColor = event.eventCategory?.color || "rgb(var(--tb-accent))";
 	const price = formatEventPrice(event);
 	const capacity = showCapacity ? formatEventRemainingPlaces(event) : null;
 	const isFull = isEventFull(event);
-	const title = event.title;
-	const timeZone = event.timeZone ?? null;
 	const teacherLine = formatEventTeacherLine(event);
-	const cardContent = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "event-agenda-card-indicator",
-		style: { backgroundColor: categoryColor },
-		"aria-hidden": "true"
-	}), /* @__PURE__ */ jsxs("div", {
-		className: "event-agenda-card-content",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "event-agenda-card-header",
-			children: [/* @__PURE__ */ jsx("span", {
+	const timeZone = resolveEventTimeZone(event, calendarTimeZone);
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "event-agenda-card",
+		onClick: () => onClick(event),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "event-agenda-card-indicator",
+			style: { backgroundColor: categoryColor },
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "event-agenda-card-content",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "event-agenda-card-header",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "event-agenda-card-time",
+					children: formatTime(event.startsAt, { timeZone })
+				}), /* @__PURE__ */ jsx("span", {
+					className: "event-agenda-card-title",
+					children: event.title
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "event-agenda-card-details status-muted",
+				children: [
+					event.venue && /* @__PURE__ */ jsxs("span", {
+						className: "event-agenda-card-venue",
+						children: [/* @__PURE__ */ jsx(LocationIcon, {}), event.venue.name]
+					}),
+					teacherLine && /* @__PURE__ */ jsx("span", {
+						className: "event-agenda-card-teacher",
+						children: teacherLine
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "event-agenda-card-price",
+						children: price
+					}),
+					capacity && /* @__PURE__ */ jsx("span", {
+						className: `event-agenda-card-capacity ${isFull ? "event-agenda-card-capacity--full status-error" : ""}`,
+						children: capacity
+					})
+				]
+			})]
+		})]
+	});
+}
+function AgendaLinkCard({ event, showCapacity, showVenue, buttonVariant, buttonText, calendarTimeZone }) {
+	const eventLinkProps = resolveEventLinkProps(event);
+	const categoryColor = event.eventCategory?.color || "rgb(var(--tb-accent))";
+	const timeZone = resolveEventTimeZone(event, calendarTimeZone);
+	const teacherLine = formatEventTeacherLine(event);
+	const location = formatEventLocation(event);
+	const duration = formatEventDuration(event);
+	const price = formatEventPrice(event);
+	const capacity = showCapacity ? formatEventRemainingPlaces(event) : null;
+	const cta = resolveEventCta(event, buttonText);
+	const buttonClass = themeButtonClassName({
+		variant: buttonVariant,
+		size: "sm"
+	});
+	return /* @__PURE__ */ jsxs("article", {
+		className: "event-agenda-card event-agenda-card--agenda",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "event-agenda-card-indicator",
+				style: { backgroundColor: categoryColor },
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ jsx("time", {
 				className: "event-agenda-card-time",
+				dateTime: event.startsAt,
 				children: formatTime(event.startsAt, { timeZone })
-			}), /* @__PURE__ */ jsx("span", {
-				className: "event-agenda-card-title",
-				children: title
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "event-agenda-card-details",
-			children: [
-				event.venue && /* @__PURE__ */ jsxs("span", {
-					className: "event-agenda-card-venue",
-					children: [/* @__PURE__ */ jsxs("svg", {
-						className: "event-agenda-card-icon",
-						width: "14",
-						height: "14",
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "2",
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						children: [/* @__PURE__ */ jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }), /* @__PURE__ */ jsx("circle", {
-							cx: "12",
-							cy: "10",
-							r: "3"
-						})]
-					}), event.venue.name]
-				}),
-				teacherLine && /* @__PURE__ */ jsx("span", {
-					className: "event-agenda-card-teacher",
-					children: teacherLine
-				}),
-				/* @__PURE__ */ jsx("span", {
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "event-agenda-card-content",
+				children: [/* @__PURE__ */ jsx("h5", {
+					className: "event-agenda-card-title",
+					children: /* @__PURE__ */ jsx("a", {
+						...eventLinkProps,
+						children: event.title
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "event-agenda-card-details status-muted",
+					children: [
+						showVenue ? /* @__PURE__ */ jsxs("span", {
+							className: "event-agenda-card-location",
+							children: [/* @__PURE__ */ jsx(LocationIcon, {}), location]
+						}) : null,
+						/* @__PURE__ */ jsx("span", {
+							className: "event-agenda-card-duration",
+							children: duration
+						}),
+						teacherLine && /* @__PURE__ */ jsx("span", {
+							className: "event-agenda-card-teacher",
+							children: teacherLine
+						}),
+						capacity && /* @__PURE__ */ jsx("span", {
+							className: `event-agenda-card-capacity ${isEventFull(event) ? "event-agenda-card-capacity--full status-error" : ""}`,
+							children: capacity
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "event-agenda-card-action",
+				children: [/* @__PURE__ */ jsx("span", {
 					className: "event-agenda-card-price",
 					children: price
-				}),
-				capacity && /* @__PURE__ */ jsx("span", {
-					className: `event-agenda-card-capacity ${isFull ? "event-agenda-card-capacity--full" : ""}`,
-					children: capacity
-				})
-			]
-		})]
-	})] });
-	if (onClick) return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		className: "event-agenda-card",
-		onClick: () => onClick(event),
-		children: cardContent
+				}), cta.hidden ? /* @__PURE__ */ jsx("span", {
+					className: "event-agenda-card-status status-muted",
+					children: cta.label
+				}) : /* @__PURE__ */ jsx("a", {
+					href: cta.href,
+					target: cta.external ? "_blank" : void 0,
+					rel: cta.external ? "noopener noreferrer" : void 0,
+					className: `${buttonClass} event-agenda-card-cta`,
+					children: cta.label
+				})]
+			})
+		]
 	});
-	return /* @__PURE__ */ jsx("a", {
-		...eventLinkProps,
-		className: "event-agenda-card",
-		children: cardContent
+}
+function LocationIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: "event-agenda-card-icon",
+		width: "14",
+		height: "14",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }), /* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "10",
+			r: "3"
+		})]
 	});
-};
+}
 //#endregion
 //#region ../blocks/src/system/runtime/nodes/events/shared/WeekAgendaView.tsx
 /** Full day names for agenda headers */
@@ -606,14 +818,16 @@ function formatAgendaDayHeader(date) {
 /**
 * WeekAgendaView Component
 *
-* Displays a week of events in an agenda/list style with rich event details.
-* Shows all 7 days with date headers, empty days show "No events scheduled".
+* Displays populated days in a week as an agenda/list with rich event details.
+* A week without events has one empty state instead of seven repeated messages.
 */
-const WeekAgendaView = ({ days, events, showCapacity, emptyMessage = "No events scheduled", calendarTimeZone, today: currentDate }) => {
+const WeekAgendaView = ({ days, events, showCapacity, showVenue = true, emptyMessage = "No events scheduled", showEmptyState, calendarTimeZone, today: currentDate, buttonVariant = "primary", buttonText }) => {
 	const eventsByDate = groupEventsByDate(events, calendarTimeZone);
-	return /* @__PURE__ */ jsx("div", {
+	const populatedDays = days.filter((date) => (eventsByDate.get(formatDateKey(date))?.length ?? 0) > 0);
+	return /* @__PURE__ */ jsxs("div", {
 		className: "event-agenda-week",
-		children: days.map((date) => {
+		"data-agenda-state": populatedDays.length > 0 ? "populated" : showEmptyState ? "empty" : "loading",
+		children: [populatedDays.map((date) => {
 			const dateKey = formatDateKey(date);
 			const dayEvents = eventsByDate.get(dateKey) || [];
 			const today = isToday(date, currentDate);
@@ -630,22 +844,40 @@ const WeekAgendaView = ({ days, events, showCapacity, emptyMessage = "No events
 					})
 				}), /* @__PURE__ */ jsx("div", {
 					className: "event-agenda-day-content",
-					children: dayEvents.length === 0 ? /* @__PURE__ */ jsx("p", {
-						className: "event-agenda-day-empty",
-						children: emptyMessage
-					}) : /* @__PURE__ */ jsx("div", {
+					children: /* @__PURE__ */ jsx("div", {
 						className: "event-agenda-day-events",
 						children: dayEvents.map((event) => /* @__PURE__ */ jsx(AgendaEventCard, {
 							event,
-							showCapacity
+							showCapacity,
+							showVenue,
+							buttonVariant,
+							buttonText,
+							calendarTimeZone
 						}, event.occurrenceId || event.id))
 					})
 				})]
 			}, dateKey);
-		})
+		}), populatedDays.length === 0 && showEmptyState ? /* @__PURE__ */ jsx("p", {
+			className: "event-agenda-empty",
+			children: emptyMessage
+		}) : null]
 	});
 };
 //#endregion
+//#region ../blocks/src/system/runtime/nodes/events/shared/useHydrationReady.ts
+/**
+* The first client render must retain the server's data-dependent shell.
+* State becomes ready after hydration so subsequent loading transitions can
+* use the live calendar state without changing the server markup mid-hydrate.
+*/
+function useHydrationReady() {
+	const [ready, setReady] = useState(false);
+	useEffect(() => {
+		setReady(true);
+	}, []);
+	return ready;
+}
+//#endregion
 //#region ../blocks/src/system/runtime/nodes/events/shared/EventModalCloseButton.tsx
 function EventModalCloseButton({ closeButtonRef, onClose }) {
 	return /* @__PURE__ */ jsx("button", {
@@ -714,7 +946,7 @@ function EventDetailModal({ event, showCapacity, onClose, portalRoot, cardRole =
 * Uses AgendaEventCard with onClick prop to display events.
 * Clicking an event triggers onSelectEvent (typically opens EventDetailModal).
 */
-function DayEventsModal({ date, events, showCapacity, onClose, onSelectEvent, portalRoot }) {
+function DayEventsModal({ date, events, showCapacity, calendarTimeZone, onClose, onSelectEvent, portalRoot }) {
 	const formattedDate = formatDate(`${formatLocalScheduleDate(date)}T12:00:00Z`);
 	return /* @__PURE__ */ jsxs(ModalShell, {
 		title: formattedDate,
@@ -744,7 +976,8 @@ function DayEventsModal({ date, events, showCapacity, onClose, onSelectEvent, po
 			children: events.map((event) => /* @__PURE__ */ jsx(AgendaEventCard, {
 				event,
 				onClick: onSelectEvent,
-				showCapacity
+				showCapacity,
+				calendarTimeZone
 			}, event.occurrenceId || event.id))
 		})]
 	});
@@ -759,7 +992,7 @@ function DayEventsModal({ date, events, showCapacity, onClose, onSelectEvent, po
 * - EventDetailModal for single event view
 * - DayEventsModal for day events list (clicking an event switches to event modal)
 */
-function EventModals({ showCapacity, cardRole, buttonVariant, buttonText }) {
+function EventModals({ showCapacity, cardRole, buttonVariant, buttonText, calendarTimeZone }) {
 	const markerRef = React.useRef(null);
 	const [portalRoot, setPortalRoot] = React.useState(null);
 	const { modalState, openEventModal, closeModal } = useEventModal();
@@ -800,7 +1033,8 @@ function EventModals({ showCapacity, cardRole, buttonVariant, buttonText }) {
 			openEventModal(event);
 		},
 		portalRoot,
-		showCapacity
+		showCapacity,
+		calendarTimeZone
 	})] });
 	return marker;
 }
@@ -860,6 +1094,103 @@ function toEventCombinedControllerProps(props) {
 		calendarWindow: props.render.hydration.calendarWindow
 	};
 }
+const EventCombinedCalendarHeader = ({ calendarView, title, loadState, onPrevious, onNext, onToday, buttonVariant }) => /* @__PURE__ */ jsxs("div", {
+	className: "event-calendar-header",
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "event-calendar-nav",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onPrevious,
+				className: "event-calendar-nav-btn",
+				"aria-label": calendarView === "week" ? "Previous week" : "Previous month",
+				children: /* @__PURE__ */ jsx(CalendarNavigationChevron, { direction: "previous" })
+			}),
+			/* @__PURE__ */ jsxs("h3", {
+				className: "event-calendar-title",
+				children: [title, loadState.kind === "loading" && /* @__PURE__ */ jsx("span", {
+					className: "rb-ml-2 rb-caption status-muted",
+					children: "(loading...)"
+				})]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onNext,
+				className: "event-calendar-nav-btn",
+				"aria-label": calendarView === "week" ? "Next week" : "Next month",
+				children: /* @__PURE__ */ jsx(CalendarNavigationChevron, { direction: "next" })
+			})
+		]
+	}), /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onToday,
+		className: themeButtonClassName({
+			variant: buttonVariant,
+			size: "sm"
+		}),
+		children: "Today"
+	})]
+});
+const EventCombinedCalendarTab = ({ calendarTabViews, calendarView, calendarViewOptions, onCalendarViewChange, calendarEvents, eventsByDate, viewDate, viewport, calendarLoadState, dayNames, calendarContext, today, goToPrevious, goToNext, goToToday, emptyMessage, showCapacity, showVenue, cardRole, buttonVariant, buttonText, showEmptyState }) => /* @__PURE__ */ jsxs(EventModalProvider, { children: [/* @__PURE__ */ jsxs("div", {
+	className: "event-combined-content event-calendar",
+	children: [
+		calendarTabViews === "both" && /* @__PURE__ */ jsx("div", {
+			className: "event-calendar-view-toggle",
+			children: calendarViewOptions.map((option) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: `event-calendar-view-btn ${calendarView === option.id ? "event-calendar-view-btn--active" : ""}`,
+				onClick: () => onCalendarViewChange(option.id),
+				children: option.label
+			}, option.id))
+		}),
+		/* @__PURE__ */ jsx(EventCombinedCalendarHeader, {
+			calendarView,
+			title: viewport.title,
+			loadState: calendarLoadState,
+			onPrevious: goToPrevious,
+			onNext: goToNext,
+			onToday: goToToday,
+			buttonVariant
+		}),
+		viewport.kind === "week" ? /* @__PURE__ */ jsx(WeekAgendaView, {
+			days: viewport.days,
+			events: calendarEvents,
+			emptyMessage,
+			showCapacity,
+			showVenue,
+			showEmptyState,
+			buttonVariant,
+			buttonText,
+			calendarTimeZone: calendarContext.timeZone,
+			today
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "event-calendar-container",
+			children: [/* @__PURE__ */ jsx(CalendarDayHeaders, { dayNames }), /* @__PURE__ */ jsx("div", {
+				className: "event-calendar-grid",
+				children: viewport.days.map((date) => {
+					const dateKey = formatDateKey(date);
+					return /* @__PURE__ */ jsx(CalendarDayCell, {
+						date,
+						events: eventsByDate.get(dateKey) ?? [],
+						isCurrentMonth: date.month === viewDate.month,
+						calendarTimeZone: calendarContext.timeZone,
+						today
+					}, dateKey);
+				})
+			})]
+		}),
+		viewport.kind !== "week" && calendarEvents.length === 0 && showEmptyState && /* @__PURE__ */ jsx("p", {
+			className: "event-calendar-empty",
+			children: emptyMessage
+		})
+	]
+}), /* @__PURE__ */ jsx(EventModals, {
+	cardRole,
+	buttonVariant,
+	buttonText,
+	showCapacity,
+	calendarTimeZone: calendarContext.timeZone
+})] });
 /**
 * EventCombined Component
 *
@@ -870,6 +1201,7 @@ const EventCombinedClient = ({ events: initialEvents, siteId, stage, listLayout
 	kind: "loadMore",
 	label: "Load more events"
 }, startOfWeek = "monday", calendarTabViews = "both", defaultCalendarView, showFilters, showCategoryFilter = "auto", showVenueFilter, showStaffFilter, eventSurface, filterEventPresets, scheduleScope, filterCategoryIds, filterStaffMemberId, filterVenueId, showVenue, showMap, showCapacity, cardRole, buttonVariant = "primary", buttonText = "Book", emptyMessage = "No upcoming events scheduled.", className, calendarContext, calendarWindow }) => {
+	const hydrationReady = useHydrationReady();
 	const fetchInitialEventsOnMount = initialEvents == null;
 	const resolvedShowFilters = showFilters ?? true;
 	const resolvedShowVenueFilter = showVenueFilter ?? false;
@@ -927,7 +1259,7 @@ const EventCombinedClient = ({ events: initialEvents, siteId, stage, listLayout
 		pageSize,
 		stage
 	});
-	const { events: calendarEventsRaw, viewDate, viewport, loadState: calendarLoadState, goToPrevious, goToNext, goToToday } = useCalendarEvents({
+	const { events: calendarEventsRaw, viewDate, today, viewport, loadState: calendarLoadState, goToPrevious, goToNext, goToToday } = useCalendarEvents({
 		siteId,
 		view: calendarView,
 		startOfWeek,
@@ -1001,121 +1333,33 @@ const EventCombinedClient = ({ events: initialEvents, siteId, stage, listLayout
 				hasActiveFilters,
 				onResetFilters: resetFilters
 			}),
-			activeTab === "calendar" && /* @__PURE__ */ jsxs(EventModalProvider, { children: [/* @__PURE__ */ jsxs("div", {
-				className: "event-combined-content event-calendar",
-				children: [
-					calendarTabViews === "both" && /* @__PURE__ */ jsx("div", {
-						className: "event-calendar-view-toggle",
-						children: calendarViewOptions.map((option) => /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: `event-calendar-view-btn ${calendarView === option.id ? "event-calendar-view-btn--active" : ""}`,
-							onClick: () => setCalendarView(option.id),
-							children: option.label
-						}, option.id))
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "event-calendar-header",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "event-calendar-nav",
-							children: [
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									onClick: goToPrevious,
-									className: "event-calendar-nav-btn",
-									"aria-label": calendarView === "week" ? "Previous week" : "Previous month",
-									children: /* @__PURE__ */ jsx("svg", {
-										width: "20",
-										height: "20",
-										fill: "none",
-										stroke: "currentColor",
-										strokeWidth: 2,
-										viewBox: "0 0 24 24",
-										children: /* @__PURE__ */ jsx("path", {
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											d: "M15 19l-7-7 7-7"
-										})
-									})
-								}),
-								/* @__PURE__ */ jsxs("h3", {
-									className: "event-calendar-title",
-									children: [viewport.title, calendarLoadState.kind === "loading" && /* @__PURE__ */ jsx("span", {
-										className: "rb-ml-2 rb-caption status-muted",
-										children: "(loading...)"
-									})]
-								}),
-								/* @__PURE__ */ jsx("button", {
-									type: "button",
-									onClick: goToNext,
-									className: "event-calendar-nav-btn",
-									"aria-label": calendarView === "week" ? "Next week" : "Next month",
-									children: /* @__PURE__ */ jsx("svg", {
-										width: "20",
-										height: "20",
-										fill: "none",
-										stroke: "currentColor",
-										strokeWidth: 2,
-										viewBox: "0 0 24 24",
-										children: /* @__PURE__ */ jsx("path", {
-											strokeLinecap: "round",
-											strokeLinejoin: "round",
-											d: "M9 5l7 7-7 7"
-										})
-									})
-								})
-							]
-						}), /* @__PURE__ */ jsx("button", {
-							type: "button",
-							onClick: goToToday,
-							className: themeButtonClassName({
-								variant: buttonVariant,
-								size: "sm"
-							}),
-							children: "Today"
-						})]
-					}),
-					viewport.kind === "week" ? /* @__PURE__ */ jsx(WeekAgendaView, {
-						days: viewport.days,
-						events: calendarEventsRaw,
-						emptyMessage: "No events scheduled",
-						showCapacity: resolvedShowCapacity,
-						calendarTimeZone: calendarContext.timeZone,
-						today: calendarContext.initialToday
-					}) : /* @__PURE__ */ jsxs("div", {
-						className: "event-calendar-container",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "event-calendar-day-headers",
-							children: dayNames.map((day) => /* @__PURE__ */ jsx("div", {
-								className: "event-calendar-day-header",
-								children: day
-							}, day))
-						}), /* @__PURE__ */ jsx("div", {
-							className: "event-calendar-grid",
-							children: viewport.days.map((date) => {
-								const dateKey = formatDateKey(date);
-								return /* @__PURE__ */ jsx(CalendarDayCell, {
-									date,
-									events: eventsByDate.get(dateKey) || [],
-									isCurrentMonth: date.month === viewDate.month,
-									today: calendarContext.initialToday
-								}, dateKey);
-							})
-						})]
-					}),
-					calendarEventsRaw.length === 0 && calendarLoadState.kind === "idle" && /* @__PURE__ */ jsx("p", {
-						className: "event-calendar-empty",
-						children: emptyMessage
-					})
-				]
-			}), /* @__PURE__ */ jsx(EventModals, {
+			activeTab === "calendar" && /* @__PURE__ */ jsx(EventCombinedCalendarTab, {
+				calendarTabViews,
+				calendarView,
+				calendarViewOptions,
+				onCalendarViewChange: setCalendarView,
+				calendarEvents: calendarEventsRaw,
+				eventsByDate,
+				viewDate,
+				viewport,
+				calendarLoadState,
+				dayNames,
+				calendarContext,
+				today,
+				goToPrevious,
+				goToNext,
+				goToToday,
+				emptyMessage,
+				showCapacity: resolvedShowCapacity,
+				showVenue: resolvedShowVenue,
 				cardRole,
 				buttonVariant,
 				buttonText,
-				showCapacity: resolvedShowCapacity
-			})] })
+				showEmptyState: hydrationReady && calendarLoadState.kind === "idle"
+			})
 		]
 	});
 };
 const EventCombinedIslandClient = (props) => /* @__PURE__ */ jsx(EventCombinedClient, { ...toEventCombinedControllerProps(props) });
 //#endregion
-export { CalendarDayCell as a, useCalendarEvents as c, WeekAgendaView as i, EventCombinedIslandClient as n, EventModalProvider as o, EventModals as r, useEventModal as s, EventCombinedClient as t };
+export { WeekAgendaView as a, CalendarDayCell as c, useCalendarEvents as d, useHydrationReady as i, EventModalProvider as l, EventCombinedIslandClient as n, CalendarNavigationChevron as o, EventModals as r, CalendarDayHeaders as s, EventCombinedClient as t, useEventModal as u };