let timeZone = systemTimeZone();
let model = new CalendarModel({ focusedDate: OPENING_MONTH });
let range = { start: "2026-09-14", end: "2026-09-20" };

function pickDay(key: string) {
	let date = parseDayKey(key);

	if (model.anchorDate === null) {
		model.beginRange(date);
		range = null;
	} else {
		let picked = model.completeRange(date);
		range = picked ? { start: toDayKey(picked.start, timeZone), end: toDayKey(picked.end, timeZone) } : range;
	}

	void handle.update();
}

<RangeCalendar aria-label="Stay dates">
	<RangeCalendar.Header>
		<RangeCalendar.PreviousButton
			aria-label="Previous month"
			mix={[on<HTMLButtonElement, "click">("click", () => model.showPreviousMonth())]}
		/>
		<RangeCalendar.Heading>{monthLabel}</RangeCalendar.Heading>
		<RangeCalendar.NextButton
			aria-label="Next month"
			mix={[on<HTMLButtonElement, "click">("click", () => model.showNextMonth())]}
		/>
	</RangeCalendar.Header>

	<RangeCalendar.Grid
		aria-label={monthLabel}
		mix={[
			calendarKeys(model),
			rangePreview(model),
			on<HTMLTableElement, "click">("click", (event) => {
				if (!(event.target instanceof Element)) return;

				let key = event.target.closest("[data-date]")?.getAttribute("data-date");
				if (key) pickDay(key);
			}),
			on<HTMLTableElement, "keydown">("keydown", (event) => {
				if (event.key !== "Enter" && event.key !== " ") return;
				event.preventDefault();
				pickDay(toDayKey(model.focusedDate, timeZone));
			}),
			// RangeCalendar.Cell styles the committed range; the band the pointer
			// drags out between the two picks is the consumer's to paint.
			when("& td[data-range-preview]", [bg("brand.tint"), fg("brand.emphasis")]),
			when("& td[data-range-anchor]", [bg("brand.solid"), fg("brand.onSolid")]),
		]}
	>
		<RangeCalendar.GridHeader>
			{/* A day cell lays its own content out with flex, so each row is the flex line
			    the seven of them sit on. */}
			<RangeCalendar.Row mix={[flex()]}>
				{WEEKDAYS.map((day) => (
					<RangeCalendar.HeaderCell key={day} mix={[is(9)]}>
						{day}
					</RangeCalendar.HeaderCell>
				))}
			</RangeCalendar.Row>
		</RangeCalendar.GridHeader>

		<RangeCalendar.GridBody>
			{monthGrid(model.visibleMonth, { weekStartsOn: 0, timeZone }).map((week) => (
				<RangeCalendar.Row key={week[0]?.key} mix={[flex()]}>
					{week.map((day) => (
						<RangeCalendar.Cell
							key={day.key}
							data-date={day.key}
							data-outside-month={!day.inMonth || undefined}
							tabIndex={day.key === toDayKey(model.focusedDate, timeZone) ? 0 : -1}
							aria-selected={inRange(day) ? "true" : undefined}
							data-selection-start={day.key === range?.start ? "" : undefined}
							data-selection-end={day.key === range?.end ? "" : undefined}
						>
							{day.date.getDate()}
						</RangeCalendar.Cell>
					))}
				</RangeCalendar.Row>
			))}
		</RangeCalendar.GridBody>
	</RangeCalendar.Grid>
</RangeCalendar>