@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte

@@ -1,731 +1,648 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { Colour } from '../../scss/colours.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import Button from '../Button.svelte';
-	import Icon from '../Icon.svelte';
-	import LoadingOverlay from '../LoadingOverlay.svelte';
-	import { CalendarViewMode } from './AppointmentCalendarProps.js';
-	import type {
-		AppointmentCalendarProps,
-		CalendarAppointment,
-		DragSelection,
-	} from './AppointmentCalendarProps.js';
-
-	let {
-		doors,
-		appointments,
-		selectedDate,
-		viewMode,
-		ondatechange,
-		onviewmodechange,
-		ondragcreate,
-		onappointmentclick,
-		onappointmentmove,
-		startHour = 0,
-		endHour = 24,
-		slotIntervalMinutes = 15,
-		isLoading = false,
-		headerExtra,
-	}: AppointmentCalendarProps = $props();
-
-	/**
-	 * `selectedDate` is always read by the component, never written. The
-	 * runtime type may be either a plain `Date` or a `SvelteDate`; both
-	 * expose the same `Date` interface that we use here. Cast to `Date`
-	 * for narrowing inside the script.
-	 */
-	const selected = $derived(selectedDate as Date);
-
-	/**
-	 * Today's reference Date hoisted out of the per-cell loops so that
-	 * rendering the month grid does not allocate 42 fresh `Date`
-	 * instances on every state change. `$derived` does not invalidate
-	 * over time on its own; if you need real day-rollover semantics
-	 * track it with a `SvelteDate` and a `setInterval`.
-	 */
-	const today = $derived(new Date());
-
-	// ---- Date helpers ----
-
-	const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-	const monthNames = [
-		'January',
-		'February',
-		'March',
-		'April',
-		'May',
-		'June',
-		'July',
-		'August',
-		'September',
-		'October',
-		'November',
-		'December',
-	];
-
-	function formatDate(d: Date): string {
-		if (viewMode === CalendarViewMode.Month) {
-			return `${monthNames[d.getMonth()]} ${d.getFullYear()}`;
-		}
-		return `${dayNames[d.getDay()]} ${d.getDate()} ${monthNames[d.getMonth()]} ${d.getFullYear()}`;
+<svelte:options runes />
+
+<script lang="ts">import { Colour } from "../../scss/colours.js";
+import { Size } from "../../Types/Internal/Size.js";
+import Button from "../Button.svelte";
+import Icon from "../Icon.svelte";
+import LoadingOverlay from "../LoadingOverlay.svelte";
+import { CalendarViewMode } from "./AppointmentCalendarProps.js";
+let { doors, appointments, selectedDate, viewMode, ondatechange, onviewmodechange, ondragcreate, onappointmentclick, onappointmentmove, startHour = 0, endHour = 24, slotIntervalMinutes = 15, isLoading = false, headerExtra } = $props();
+/**
+* `selectedDate` is always read by the component, never written. The
+* runtime type may be either a plain `Date` or a `SvelteDate`; both
+* expose the same `Date` interface that we use here. Cast to `Date`
+* for narrowing inside the script.
+*/
+const selected = $derived(selectedDate);
+/**
+* Today's reference Date hoisted out of the per-cell loops so that
+* rendering the month grid does not allocate 42 fresh `Date`
+* instances on every state change. `$derived` does not invalidate
+* over time on its own; if you need real day-rollover semantics
+* track it with a `SvelteDate` and a `setInterval`.
+*/
+const today = $derived(new Date());
+// ---- Date helpers ----
+const dayNames = [
+	"Sunday",
+	"Monday",
+	"Tuesday",
+	"Wednesday",
+	"Thursday",
+	"Friday",
+	"Saturday"
+];
+const monthNames = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+function formatDate(d) {
+	if (viewMode === CalendarViewMode.Month) {
+		return `${monthNames[d.getMonth()]} ${d.getFullYear()}`;
 	}
-
-	function sameDay(a: Date, b: Date): boolean {
-		return (
-			a.getFullYear() === b.getFullYear() &&
-			a.getMonth() === b.getMonth() &&
-			a.getDate() === b.getDate()
-		);
-	}
-
-	function addDays(d: Date, n: number): Date {
+	return `${dayNames[d.getDay()]} ${d.getDate()} ${monthNames[d.getMonth()]} ${d.getFullYear()}`;
+}
+function sameDay(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function addDays(d, n) {
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const result = new Date(d);
+	result.setDate(result.getDate() + n);
+	return result;
+}
+function navigateDate(direction) {
+	if (viewMode === CalendarViewMode.Day) {
+		ondatechange(addDays(selected, direction));
+	} else if (viewMode === CalendarViewMode.Week) {
+		ondatechange(addDays(selected, direction * 7));
+	} else {
 		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const result = new Date(d);
-		result.setDate(result.getDate() + n);
-		return result;
+		const d = new Date(selected);
+		d.setMonth(d.getMonth() + direction);
+		ondatechange(d);
 	}
-
-	function navigateDate(direction: number): void {
-		if (viewMode === CalendarViewMode.Day) {
-			ondatechange(addDays(selected, direction));
-		} else if (viewMode === CalendarViewMode.Week) {
-			ondatechange(addDays(selected, direction * 7));
-		} else {
-			// eslint-disable-next-line svelte/prefer-svelte-reactivity
-			const d = new Date(selected);
-			d.setMonth(d.getMonth() + direction);
-			ondatechange(d);
+}
+function goToToday() {
+	ondatechange(new Date());
+}
+// ---- Time slot generation ----
+const timeSlots = $derived.by(() => {
+	const slots = [];
+	for (let h = startHour; h < endHour; h++) {
+		for (let m = 0; m < 60; m += slotIntervalMinutes) {
+			const hh = String(h).padStart(2, "0");
+			const mm = String(m).padStart(2, "0");
+			slots.push({
+				hour: h,
+				minute: m,
+				label: `${hh}:${mm}`
+			});
 		}
 	}
-
-	function goToToday(): void {
-		ondatechange(new Date());
-	}
-
-	// ---- Time slot generation ----
-
-	const timeSlots: Array<{ hour: number; minute: number; label: string }> = $derived.by(() => {
-		const slots: Array<{ hour: number; minute: number; label: string }> = [];
-		for (let h = startHour; h < endHour; h++) {
-			for (let m = 0; m < 60; m += slotIntervalMinutes) {
-				const hh = String(h).padStart(2, '0');
-				const mm = String(m).padStart(2, '0');
-				slots.push({ hour: h, minute: m, label: `${hh}:${mm}` });
-			}
+	return slots;
+});
+/**
+* Build a `YYYY-MM-DD` key for date bucketing. Avoids `toISOString`
+* timezone conversions that would smear appointments across days.
+*/
+function dayKey(d) {
+	const y = d.getFullYear();
+	const m = String(d.getMonth() + 1).padStart(2, "0");
+	const day = String(d.getDate()).padStart(2, "0");
+	return `${y}-${m}-${day}`;
+}
+/**
+* Precomputed `Map<doorId, Map<dayKey, PositionedAppointment[]>>` for
+* day and week views. Replaces the previous per-cell
+* `appointments.filter(...)` calls which were `O(doors * appointments)`
+* per render and allocated a fresh `Date` per appointment per pass.
+*/
+const positionedByDoorAndDay = $derived.by(() => {
+	const totalMinutes = (endHour - startHour) * 60;
+	// Local indexes built inside a $derived; outer reactivity already covers reads.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const byDoor = new Map();
+	for (const apt of appointments) {
+		const from = new Date(apt.dateFrom);
+		const to = new Date(apt.dateTo);
+		const startMin = (from.getHours() - startHour) * 60 + from.getMinutes();
+		const endMin = (to.getHours() - startHour) * 60 + to.getMinutes();
+		const durationMin = Math.max(endMin - startMin, slotIntervalMinutes);
+		const positioned = {
+			...apt,
+			topPercent: Math.max(0, startMin) / totalMinutes * 100,
+			heightPercent: Math.min(durationMin, totalMinutes - startMin) / totalMinutes * 100
+		};
+		const key = dayKey(from);
+		let perDay = byDoor.get(apt.segmentId);
+		if (!perDay) {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			perDay = new Map();
+			byDoor.set(apt.segmentId, perDay);
+		}
+		const list = perDay.get(key);
+		if (list) {
+			list.push(positioned);
+		} else {
+			perDay.set(key, [positioned]);
 		}
-		return slots;
-	});
-
-	// ---- Appointment positioning (day view) ----
-
-	type PositionedAppointment = CalendarAppointment & {
-		readonly topPercent: number;
-		readonly heightPercent: number;
-	};
-
-	/**
-	 * Build a `YYYY-MM-DD` key for date bucketing. Avoids `toISOString`
-	 * timezone conversions that would smear appointments across days.
-	 */
-	function dayKey(d: Date): string {
-		const y = d.getFullYear();
-		const m = String(d.getMonth() + 1).padStart(2, '0');
-		const day = String(d.getDate()).padStart(2, '0');
-		return `${y}-${m}-${day}`;
 	}
-
-	/**
-	 * Precomputed `Map<doorId, Map<dayKey, PositionedAppointment[]>>` for
-	 * day and week views. Replaces the previous per-cell
-	 * `appointments.filter(...)` calls which were `O(doors * appointments)`
-	 * per render and allocated a fresh `Date` per appointment per pass.
-	 */
-	const positionedByDoorAndDay = $derived.by(() => {
-		const totalMinutes = (endHour - startHour) * 60;
-		// Local indexes built inside a $derived; outer reactivity already covers reads.
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const byDoor = new Map<number, Map<string, Array<PositionedAppointment>>>();
-		for (const apt of appointments) {
-			const from = new Date(apt.dateFrom);
-			const to = new Date(apt.dateTo);
-			const startMin = (from.getHours() - startHour) * 60 + from.getMinutes();
-			const endMin = (to.getHours() - startHour) * 60 + to.getMinutes();
-			const durationMin = Math.max(endMin - startMin, slotIntervalMinutes);
-			const positioned: PositionedAppointment = {
-				...apt,
-				topPercent: (Math.max(0, startMin) / totalMinutes) * 100,
-				heightPercent: (Math.min(durationMin, totalMinutes - startMin) / totalMinutes) * 100,
-			};
-			const key = dayKey(from);
-			let perDay = byDoor.get(apt.segmentId);
-			if (!perDay) {
-				// eslint-disable-next-line svelte/prefer-svelte-reactivity
-				perDay = new Map();
-				byDoor.set(apt.segmentId, perDay);
-			}
-			const list = perDay.get(key);
-			if (list) {
-				list.push(positioned);
-			} else {
-				perDay.set(key, [positioned]);
-			}
+	return byDoor;
+});
+function appointmentsAt(doorId, day) {
+	return positionedByDoorAndDay.get(doorId)?.get(dayKey(day)) ?? [];
+}
+/**
+* Precomputed appointment-count badges per day for the month view.
+* Replaces the previous `O(cells * doors * appointments)` recomputation
+* which scaled to ~42 000 ops on a single render with 10 doors and
+* 100 appointments.
+*/
+const countsByDay = $derived.by(() => {
+	// Local indexes built inside a $derived; outer reactivity already covers reads.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const map = new Map();
+	// One scan over appointments builds a nested Map<dayKey, Map<doorId, count>>.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const intermediate = new Map();
+	for (const apt of appointments) {
+		const key = dayKey(new Date(apt.dateFrom));
+		let perDay = intermediate.get(key);
+		if (!perDay) {
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			perDay = new Map();
+			intermediate.set(key, perDay);
 		}
-		return byDoor;
-	});
-
-	function appointmentsAt(doorId: number, day: Date): ReadonlyArray<PositionedAppointment> {
-		return positionedByDoorAndDay.get(doorId)?.get(dayKey(day)) ?? [];
+		perDay.set(apt.segmentId, (perDay.get(apt.segmentId) ?? 0) + 1);
 	}
-
-	/**
-	 * Precomputed appointment-count badges per day for the month view.
-	 * Replaces the previous `O(cells * doors * appointments)` recomputation
-	 * which scaled to ~42 000 ops on a single render with 10 doors and
-	 * 100 appointments.
-	 */
-	const countsByDay = $derived.by(() => {
-		// Local indexes built inside a $derived; outer reactivity already covers reads.
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const map = new Map<string, Array<{ doorId: number; doorName: string; count: number }>>();
-		// One scan over appointments builds a nested Map<dayKey, Map<doorId, count>>.
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const intermediate = new Map<string, Map<number, number>>();
-		for (const apt of appointments) {
-			const key = dayKey(new Date(apt.dateFrom));
-			let perDay = intermediate.get(key);
-			if (!perDay) {
-				// eslint-disable-next-line svelte/prefer-svelte-reactivity
-				perDay = new Map();
-				intermediate.set(key, perDay);
+	// Flatten to the door-ordered list the markup expects.
+	for (const [key, perDay] of intermediate) {
+		const list = [];
+		for (const door of doors) {
+			const count = perDay.get(door.id);
+			if (count) {
+				list.push({
+					doorId: door.id,
+					doorName: door.name,
+					count
+				});
 			}
-			perDay.set(apt.segmentId, (perDay.get(apt.segmentId) ?? 0) + 1);
 		}
-		// Flatten to the door-ordered list the markup expects.
-		for (const [key, perDay] of intermediate) {
-			const list: Array<{ doorId: number; doorName: string; count: number }> = [];
-			for (const door of doors) {
-				const count = perDay.get(door.id);
-				if (count) {
-					list.push({ doorId: door.id, doorName: door.name, count });
-				}
-			}
-			if (list.length > 0) {
-				map.set(key, list);
-			}
+		if (list.length > 0) {
+			map.set(key, list);
 		}
-		return map;
-	});
-
-	function countsAt(day: Date): ReadonlyArray<{ doorId: number; doorName: string; count: number }> {
-		return countsByDay.get(dayKey(day)) ?? [];
 	}
-
-	// ---- Click and drag logic ----
-
-	let isDragging = $state(false);
-	let dragDoorId: number | null = $state(null);
-	let dragStartSlotIndex: number | null = $state(null);
-	let dragEndSlotIndex: number | null = $state(null);
-
-	function onSlotMouseDown(doorId: number, slotIndex: number, e: MouseEvent): void {
-		// Only start a drag-create on the primary (left) button. Otherwise a
-		// middle-click (autoscroll) or right-click would open the create modal.
-		if (e.button !== 0) {
-			return;
-		}
-		if (!ondragcreate || appointmentDragStarted) {
-			return;
-		}
-		isDragging = true;
-		dragDoorId = doorId;
-		dragStartSlotIndex = slotIndex;
-		dragEndSlotIndex = slotIndex;
+	return map;
+});
+function countsAt(day) {
+	return countsByDay.get(dayKey(day)) ?? [];
+}
+// ---- Click and drag logic ----
+let isDragging = $state(false);
+let dragDoorId = $state(null);
+let dragStartSlotIndex = $state(null);
+let dragEndSlotIndex = $state(null);
+function onSlotMouseDown(doorId, slotIndex, e) {
+	// Only start a drag-create on the primary (left) button. Otherwise a
+	// middle-click (autoscroll) or right-click would open the create modal.
+	if (e.button !== 0) {
+		return;
 	}
-
-	function onSlotMouseEnter(doorId: number, slotIndex: number, e: MouseEvent): void {
-		// If a drag is in progress but the primary button is no longer held, the
-		// pointer-up happened somewhere we did not observe (e.g. outside the
-		// calendar). Reset so we do not "drag" without the button being pressed.
-		if ((isDragging || appointmentDragStarted) && (e.buttons & 1) === 0) {
-			isDragging = false;
-			dragDoorId = null;
-			dragStartSlotIndex = null;
-			dragEndSlotIndex = null;
-			resetAppointmentDrag();
-			return;
-		}
-		// Appointment move drag
-		if (appointmentDragStarted) {
-			isDraggingAppointment = true;
-			moveTargetDoorId = doorId;
-			moveTargetSlotIndex = slotIndex;
-			return;
-		}
-		// Slot drag-create
-		if (!isDragging || doorId !== dragDoorId) {
-			return;
-		}
-		dragEndSlotIndex = slotIndex;
+	if (!ondragcreate || appointmentDragStarted) {
+		return;
 	}
-
-	function onSlotMouseUp(): void {
-		// ---- Handle appointment drag-move ----
-		if (
-			isDraggingAppointment &&
-			draggedAppointment &&
-			moveTargetDoorId != null &&
-			moveTargetSlotIndex != null
-		) {
-			const slot = timeSlots[moveTargetSlotIndex];
-			// eslint-disable-next-line svelte/prefer-svelte-reactivity
-			const newDateFrom = new Date(selected);
-			newDateFrom.setHours(slot.hour, slot.minute, 0, 0);
-			const newDateTo = new Date(
-				newDateFrom.getTime() + draggedAptSlotCount * slotIntervalMinutes * 60000
-			);
-
-			// Check whether the position actually changed
-			const origFrom = new Date(draggedAppointment.dateFrom);
-			const samePosition =
-				moveTargetDoorId === draggedAppointment.segmentId &&
-				newDateFrom.getTime() === origFrom.getTime();
-
-			if (samePosition) {
-				// Dropped in the same spot - treat as a click
-				onappointmentclick?.(draggedAppointment);
-			} else if (!hasOverlap(moveTargetDoorId, newDateFrom, newDateTo, draggedAppointment.id)) {
-				const door = doors.find((d) => d.id === moveTargetDoorId);
-				onappointmentmove?.({
-					appointment: draggedAppointment,
-					newDoorId: moveTargetDoorId,
-					newDoorName: door?.name ?? '',
-					newDateFrom,
-					newDateTo,
-				});
-			}
-
-			resetAppointmentDrag();
-			return;
-		}
-
-		// ---- Handle appointment click (mousedown + mouseup without leaving the block) ----
-		if (appointmentDragStarted && !isDraggingAppointment && draggedAppointment) {
-			onappointmentclick?.(draggedAppointment);
-			resetAppointmentDrag();
-			return;
-		}
-
-		resetAppointmentDrag();
-
-		// ---- Handle drag-create ----
-		if (
-			!isDragging ||
-			dragDoorId == null ||
-			dragStartSlotIndex == null ||
-			dragEndSlotIndex == null
-		) {
-			return;
-		}
-
-		const startIdx = Math.min(dragStartSlotIndex, dragEndSlotIndex);
-		const endIdx = Math.max(dragStartSlotIndex, dragEndSlotIndex);
-
-		const startSlot = timeSlots[startIdx];
-		const endSlot = timeSlots[endIdx];
-
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const dateFrom = new Date(selected);
-		dateFrom.setHours(startSlot.hour, startSlot.minute, 0, 0);
-
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const dateTo = new Date(selected);
-		// End slot is the start of the last selected slot; add one interval for the end time
-		dateTo.setHours(endSlot.hour, endSlot.minute + slotIntervalMinutes, 0, 0);
-
-		const door = doors.find((d) => d.id === dragDoorId);
-
-		const selection: DragSelection = {
-			doorId: dragDoorId,
-			doorName: door?.name ?? '',
-			dateFrom,
-			dateTo,
-		};
-
+	isDragging = true;
+	dragDoorId = doorId;
+	dragStartSlotIndex = slotIndex;
+	dragEndSlotIndex = slotIndex;
+}
+function onSlotMouseEnter(doorId, slotIndex, e) {
+	// If a drag is in progress but the primary button is no longer held, the
+	// pointer-up happened somewhere we did not observe (e.g. outside the
+	// calendar). Reset so we do not "drag" without the button being pressed.
+	if ((isDragging || appointmentDragStarted) && (e.buttons & 1) === 0) {
 		isDragging = false;
 		dragDoorId = null;
 		dragStartSlotIndex = null;
 		dragEndSlotIndex = null;
-
-		ondragcreate?.(selection);
+		resetAppointmentDrag();
+		return;
 	}
-
-	function isSlotInDragRange(doorId: number, slotIndex: number): boolean {
-		if (!isDragging || doorId !== dragDoorId) {
-			return false;
-		}
-		if (dragStartSlotIndex == null || dragEndSlotIndex == null) {
-			return false;
-		}
-		const min = Math.min(dragStartSlotIndex, dragEndSlotIndex);
-		const max = Math.max(dragStartSlotIndex, dragEndSlotIndex);
-		return slotIndex >= min && slotIndex <= max;
+	// Appointment move drag
+	if (appointmentDragStarted) {
+		isDraggingAppointment = true;
+		moveTargetDoorId = doorId;
+		moveTargetSlotIndex = slotIndex;
+		return;
 	}
-
-	// ---- Row hover tracking ----
-
-	let hoveredSlotIndex: number | null = $state(null);
-
-	// ---- Appointment drag-move logic ----
-
-	let appointmentDragStarted = $state(false);
-	let isDraggingAppointment = $state(false);
-	let draggedAppointment: CalendarAppointment | null = $state(null);
-	let draggedAptSlotCount = $state(0);
-	let moveTargetDoorId: number | null = $state(null);
-	let moveTargetSlotIndex: number | null = $state(null);
-
-	function onAppointmentMouseDown(apt: CalendarAppointment, e: MouseEvent): void {
-		// Only react to the primary (left) button so middle/right clicks don't
-		// start a move or register as an appointment click.
-		if (e.button !== 0) {
-			return;
-		}
-		if (!onappointmentmove) {
-			return;
+	// Slot drag-create
+	if (!isDragging || doorId !== dragDoorId) {
+		return;
+	}
+	dragEndSlotIndex = slotIndex;
+}
+function onSlotMouseUp() {
+	// ---- Handle appointment drag-move ----
+	if (isDraggingAppointment && draggedAppointment && moveTargetDoorId != null && moveTargetSlotIndex != null) {
+		const slot = timeSlots[moveTargetSlotIndex];
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const newDateFrom = new Date(selected);
+		newDateFrom.setHours(slot.hour, slot.minute, 0, 0);
+		const newDateTo = new Date(newDateFrom.getTime() + draggedAptSlotCount * slotIntervalMinutes * 6e4);
+		// Check whether the position actually changed
+		const origFrom = new Date(draggedAppointment.dateFrom);
+		const samePosition = moveTargetDoorId === draggedAppointment.segmentId && newDateFrom.getTime() === origFrom.getTime();
+		if (samePosition) {
+			// Dropped in the same spot - treat as a click
+			onappointmentclick?.(draggedAppointment);
+		} else if (!hasOverlap(moveTargetDoorId, newDateFrom, newDateTo, draggedAppointment.id)) {
+			const door = doors.find((d) => d.id === moveTargetDoorId);
+			onappointmentmove?.({
+				appointment: draggedAppointment,
+				newDoorId: moveTargetDoorId,
+				newDoorName: door?.name ?? "",
+				newDateFrom,
+				newDateTo
+			});
 		}
-		e.preventDefault();
-		appointmentDragStarted = true;
-		draggedAppointment = apt;
-
-		const from = new Date(apt.dateFrom);
-		const to = new Date(apt.dateTo);
-		const durationMin = (to.getTime() - from.getTime()) / 60000;
-		draggedAptSlotCount = Math.max(1, Math.ceil(durationMin / slotIntervalMinutes));
+		resetAppointmentDrag();
+		return;
 	}
-
-	function resetAppointmentDrag(): void {
-		appointmentDragStarted = false;
-		isDraggingAppointment = false;
-		draggedAppointment = null;
-		draggedAptSlotCount = 0;
-		moveTargetDoorId = null;
-		moveTargetSlotIndex = null;
+	// ---- Handle appointment click (mousedown + mouseup without leaving the block) ----
+	if (appointmentDragStarted && !isDraggingAppointment && draggedAppointment) {
+		onappointmentclick?.(draggedAppointment);
+		resetAppointmentDrag();
+		return;
 	}
-
-	function isSlotInMoveTarget(doorId: number, slotIndex: number): boolean {
-		if (!isDraggingAppointment || moveTargetDoorId !== doorId) {
+	resetAppointmentDrag();
+	// ---- Handle drag-create ----
+	if (!isDragging || dragDoorId == null || dragStartSlotIndex == null || dragEndSlotIndex == null) {
+		return;
+	}
+	const startIdx = Math.min(dragStartSlotIndex, dragEndSlotIndex);
+	const endIdx = Math.max(dragStartSlotIndex, dragEndSlotIndex);
+	const startSlot = timeSlots[startIdx];
+	const endSlot = timeSlots[endIdx];
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const dateFrom = new Date(selected);
+	dateFrom.setHours(startSlot.hour, startSlot.minute, 0, 0);
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const dateTo = new Date(selected);
+	// End slot is the start of the last selected slot; add one interval for the end time
+	dateTo.setHours(endSlot.hour, endSlot.minute + slotIntervalMinutes, 0, 0);
+	const door = doors.find((d) => d.id === dragDoorId);
+	const selection = {
+		doorId: dragDoorId,
+		doorName: door?.name ?? "",
+		dateFrom,
+		dateTo
+	};
+	isDragging = false;
+	dragDoorId = null;
+	dragStartSlotIndex = null;
+	dragEndSlotIndex = null;
+	ondragcreate?.(selection);
+}
+function isSlotInDragRange(doorId, slotIndex) {
+	if (!isDragging || doorId !== dragDoorId) {
+		return false;
+	}
+	if (dragStartSlotIndex == null || dragEndSlotIndex == null) {
+		return false;
+	}
+	const min = Math.min(dragStartSlotIndex, dragEndSlotIndex);
+	const max = Math.max(dragStartSlotIndex, dragEndSlotIndex);
+	return slotIndex >= min && slotIndex <= max;
+}
+// ---- Row hover tracking ----
+let hoveredSlotIndex = $state(null);
+// ---- Appointment drag-move logic ----
+let appointmentDragStarted = $state(false);
+let isDraggingAppointment = $state(false);
+let draggedAppointment = $state(null);
+let draggedAptSlotCount = $state(0);
+let moveTargetDoorId = $state(null);
+let moveTargetSlotIndex = $state(null);
+function onAppointmentMouseDown(apt, e) {
+	// Only react to the primary (left) button so middle/right clicks don't
+	// start a move or register as an appointment click.
+	if (e.button !== 0) {
+		return;
+	}
+	if (!onappointmentmove) {
+		return;
+	}
+	e.preventDefault();
+	appointmentDragStarted = true;
+	draggedAppointment = apt;
+	const from = new Date(apt.dateFrom);
+	const to = new Date(apt.dateTo);
+	const durationMin = (to.getTime() - from.getTime()) / 6e4;
+	draggedAptSlotCount = Math.max(1, Math.ceil(durationMin / slotIntervalMinutes));
+}
+function resetAppointmentDrag() {
+	appointmentDragStarted = false;
+	isDraggingAppointment = false;
+	draggedAppointment = null;
+	draggedAptSlotCount = 0;
+	moveTargetDoorId = null;
+	moveTargetSlotIndex = null;
+}
+function isSlotInMoveTarget(doorId, slotIndex) {
+	if (!isDraggingAppointment || moveTargetDoorId !== doorId) {
+		return false;
+	}
+	if (moveTargetSlotIndex == null) {
+		return false;
+	}
+	return slotIndex >= moveTargetSlotIndex && slotIndex < moveTargetSlotIndex + draggedAptSlotCount;
+}
+function hasOverlap(doorId, dateFrom, dateTo, excludeAptId) {
+	return appointments.some((apt) => {
+		if (apt.id === excludeAptId) {
 			return false;
 		}
-		if (moveTargetSlotIndex == null) {
+		if (apt.segmentId !== doorId) {
 			return false;
 		}
-		return (
-			slotIndex >= moveTargetSlotIndex && slotIndex < moveTargetSlotIndex + draggedAptSlotCount
-		);
-	}
-
-	function hasOverlap(doorId: number, dateFrom: Date, dateTo: Date, excludeAptId: number): boolean {
-		return appointments.some((apt) => {
-			if (apt.id === excludeAptId) {
-				return false;
-			}
-			if (apt.segmentId !== doorId) {
-				return false;
-			}
-			const aptFrom = new Date(apt.dateFrom);
-			const aptTo = new Date(apt.dateTo);
-			return dateFrom < aptTo && dateTo > aptFrom;
+		const aptFrom = new Date(apt.dateFrom);
+		const aptTo = new Date(apt.dateTo);
+		return dateFrom < aptTo && dateTo > aptFrom;
+	});
+}
+// ---- Month view helpers ----
+function getMonthDays(date) {
+	const year = date.getFullYear();
+	const month = date.getMonth();
+	const firstDayOfMonth = new Date(year, month, 1);
+	// Start from Monday of the week containing the first day
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const startDate = new Date(firstDayOfMonth);
+	const dayOfWeek = startDate.getDay();
+	const daysFromMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+	startDate.setDate(startDate.getDate() - daysFromMonday);
+	const days = [];
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const current = new Date(startDate);
+	// Generate 6 weeks (42 days) to fill the grid
+	for (let i = 0; i < 42; i++) {
+		days.push({
+			date: new Date(current),
+			isCurrentMonth: current.getMonth() === month
 		});
+		current.setDate(current.getDate() + 1);
 	}
-
-	// ---- Month view helpers ----
-
-	function getMonthDays(date: Date): Array<{ date: Date; isCurrentMonth: boolean }> {
-		const year = date.getFullYear();
-		const month = date.getMonth();
-
-		const firstDayOfMonth = new Date(year, month, 1);
-
-		// Start from Monday of the week containing the first day
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const startDate = new Date(firstDayOfMonth);
-		const dayOfWeek = startDate.getDay();
-		const daysFromMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-		startDate.setDate(startDate.getDate() - daysFromMonday);
-
-		const days: Array<{ date: Date; isCurrentMonth: boolean }> = [];
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const current = new Date(startDate);
-
-		// Generate 6 weeks (42 days) to fill the grid
-		for (let i = 0; i < 42; i++) {
-			days.push({
-				date: new Date(current),
-				isCurrentMonth: current.getMonth() === month,
-			});
-			current.setDate(current.getDate() + 1);
-		}
-
-		return days;
+	return days;
+}
+/** Cached month grid; rebuilt only when `selected` changes. */
+const monthDays = $derived(getMonthDays(selected));
+// ---- Week view helpers ----
+function getWeekDays(date) {
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const d = new Date(date);
+	const day = d.getDay();
+	const mondayOffset = day === 0 ? -6 : 1 - day;
+	d.setDate(d.getDate() + mondayOffset);
+	const week = [];
+	for (let i = 0; i < 7; i++) {
+		week.push(new Date(d));
+		d.setDate(d.getDate() + 1);
 	}
-
-	/** Cached month grid; rebuilt only when `selected` changes. */
-	const monthDays = $derived(getMonthDays(selected));
-
-	// ---- Week view helpers ----
-
-	function getWeekDays(date: Date): Array<Date> {
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const d = new Date(date);
-		const day = d.getDay();
-		const mondayOffset = day === 0 ? -6 : 1 - day;
-		d.setDate(d.getDate() + mondayOffset);
-
-		const week: Array<Date> = [];
-		for (let i = 0; i < 7; i++) {
-			week.push(new Date(d));
-			d.setDate(d.getDate() + 1);
-		}
-		return week;
+	return week;
+}
+const weekDays = $derived(getWeekDays(selected));
+// ---- View mode buttons ----
+const viewModes = [
+	{
+		mode: CalendarViewMode.Day,
+		label: "Day"
+	},
+	{
+		mode: CalendarViewMode.Week,
+		label: "Week"
+	},
+	{
+		mode: CalendarViewMode.Month,
+		label: "Month"
 	}
-
-	const weekDays = $derived(getWeekDays(selected));
-
-	// ---- View mode buttons ----
-
-	const viewModes: ReadonlyArray<{ mode: CalendarViewMode; label: string }> = [
-		{ mode: CalendarViewMode.Day, label: 'Day' },
-		{ mode: CalendarViewMode.Week, label: 'Week' },
-		{ mode: CalendarViewMode.Month, label: 'Month' },
-	];
-</script>
-
-<!-- A drag can end anywhere on the page (the pointer is often released outside
-     the calendar when sweeping across columns). Listen on the window so the
-     drag state is always finalised and never left "stuck" for the next drag. -->
-<svelte:window onmouseup={onSlotMouseUp} />
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-	class="appointment-calendar"
-	class:is-moving-appointment={isDraggingAppointment}
-	role="application"
->
-	<!-- Header: navigation + view toggle -->
-	<div class="calendar-header">
-		<div class="header-left">
-			<Button
-				label="Today"
-				size={Size.Small}
-				onclick={goToToday}
-			>
-				Today
-			</Button>
-			<div class="nav-arrows">
-				<button
-					class="nav-btn"
-					onclick={() => {
-						navigateDate(-1);
-					}}
-					aria-label="Previous"
-				>
-					<Icon
-						name="chevron-left"
-						size={Size.Small}
-						colour={Colour['$ui-blue-14']}
-					/>
-				</button>
-				<button
-					class="nav-btn"
-					onclick={() => {
-						navigateDate(1);
-					}}
-					aria-label="Next"
-				>
-					<Icon
-						name="chevron-right"
-						size={Size.Small}
-						colour={Colour['$ui-blue-14']}
-					/>
-				</button>
-			</div>
-			<h2 class="current-date-label">{formatDate(selected)}</h2>
-		</div>
-		<div class="header-right">
-			{#if headerExtra}
-				{@render headerExtra()}
-			{/if}
-			<div class="view-toggle">
-				{#each viewModes as { mode, label } (mode)}
-					<button
-						class="view-btn"
-						class:active={viewMode === mode}
-						onclick={() => {
-							onviewmodechange(mode);
-						}}
-					>
-						{label}
-					</button>
-				{/each}
-			</div>
-		</div>
-	</div>
-
-	<!-- Week day tabs rendered OUTSIDE the scrollable body so they stay frozen -->
-	{#if viewMode === CalendarViewMode.Week}
-		<div class="week-day-tabs">
-			{#each weekDays as day (day.getTime())}
-				<button
-					class="week-day-tab"
-					class:active={sameDay(day, selected)}
-					class:today={sameDay(day, today)}
-					onclick={() => {
-						ondatechange(day);
-					}}
-				>
-					<span class="day-name">{dayNames[day.getDay()].slice(0, 3)}</span>
-					<span class="day-num">{day.getDate()}</span>
-				</button>
-			{/each}
-		</div>
-	{/if}
-
-	<!-- Calendar body -->
-	<div class="calendar-body">
-		{#if isLoading}
-			<LoadingOverlay />
-		{/if}
-
-		{#if viewMode === CalendarViewMode.Day}
-			<!-- DAY VIEW -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class="day-view"
-				onmouseleave={() => {
-					hoveredSlotIndex = null;
-				}}
-			>
-				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-				{@render doorGrid(selected)}
-			</div>
-		{:else if viewMode === CalendarViewMode.Week}
-			<!-- WEEK VIEW: day grid only, tabs are above calendar-body -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class="day-view"
-				onmouseleave={() => {
-					hoveredSlotIndex = null;
-				}}
-			>
-				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-				{@render doorGrid(selected)}
-			</div>
-		{:else}
-			<!-- MONTH VIEW -->
-			<div class="month-view">
-				<div class="month-header-row">
-					{#each ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as dayLabel (dayLabel)}
-						<div class="month-day-header">{dayLabel}</div>
-					{/each}
-				</div>
-				<div class="month-grid">
-					{#each monthDays as { date: dayDate, isCurrentMonth } (dayDate.getTime())}
-						<button
-							class="month-day-cell"
-							class:other-month={!isCurrentMonth}
-							class:today={sameDay(dayDate, today)}
-							class:selected={sameDay(dayDate, selected)}
-							onclick={() => {
-								ondatechange(dayDate);
-								onviewmodechange(CalendarViewMode.Day);
-							}}
-						>
-							<span class="day-number">{dayDate.getDate()}</span>
-							<div class="day-badges">
-								{#each countsAt(dayDate) as { doorId, doorName, count } (doorId)}
-									<span class="door-badge">
-										{doorName}: {count}
-									</span>
-								{/each}
-							</div>
-						</button>
-					{/each}
-				</div>
-			</div>
-		{/if}
-	</div>
-</div>
-
-{#snippet doorGrid(day: Date)}
-	<div class="grid-header">
-		<div class="time-header">Time</div>
-		{#each doors as door (door.id)}
-			<div class="door-header">{door.name}</div>
-		{/each}
-	</div>
-	<div class="grid-body">
-		<div class="time-column">
-			{#each timeSlots as slot, slotIdx (slot.hour * 60 + slot.minute)}
-				<div
-					class="time-label"
-					class:hour-start={slot.minute === 0}
-					class:row-hover={hoveredSlotIndex === slotIdx}
-				>
-					{#if slot.minute === 0}
-						<span>{slot.label}</span>
-					{/if}
-				</div>
-			{/each}
-		</div>
-		{#each doors as door (door.id)}
-			<div class="door-column">
-				<!-- Slot cells for drag interaction (rendered first, sit below appointments) -->
-				{#each timeSlots as slot, slotIdx (slot.hour * 60 + slot.minute)}
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<div
-						class="slot-cell"
-						class:hour-start={slot.minute === 0}
-						class:drag-selected={isSlotInDragRange(door.id, slotIdx)}
-						class:move-target={isSlotInMoveTarget(door.id, slotIdx)}
-						class:row-hover={hoveredSlotIndex === slotIdx}
-						onmousedown={(e) => {
-							onSlotMouseDown(door.id, slotIdx, e);
-						}}
-						onmouseenter={(e) => {
-							hoveredSlotIndex = slotIdx;
-							onSlotMouseEnter(door.id, slotIdx, e);
-						}}
-					></div>
-				{/each}
-				<!-- Appointment blocks positioned absolutely (rendered after, sit above slots) -->
-				{#each appointmentsAt(door.id, day) as apt (apt.id)}
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<div
-						class="appointment-block"
-						class:inbound={apt.typeCode === 'INBOUND'}
-						class:outbound={apt.typeCode === 'OUTBOUND'}
-						class:dragging={isDraggingAppointment && draggedAppointment?.id === apt.id}
-						class:movable={!!onappointmentmove}
-						style="top: {apt.topPercent}%; height: {apt.heightPercent}%;"
-						onmousedown={(e) => {
-							onAppointmentMouseDown(apt, e);
-						}}
-					>
-						<span class="apt-type">{apt.typeCode}</span>
-						<span class="apt-label">{apt.label}</span>
-						{#if apt.sublabel}
-							<span class="apt-sublabel">{apt.sublabel}</span>
-						{/if}
-					</div>
-				{/each}
-			</div>
-		{/each}
-	</div>
-{/snippet}
-
+];
+</script>
+
+<!-- A drag can end anywhere on the page (the pointer is often released outside
+     the calendar when sweeping across columns). Listen on the window so the
+     drag state is always finalised and never left "stuck" for the next drag. -->
+<svelte:window onmouseup={onSlotMouseUp} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+	class="appointment-calendar"
+	class:is-moving-appointment={isDraggingAppointment}
+	role="application"
+>
+	<!-- Header: navigation + view toggle -->
+	<div class="calendar-header">
+		<div class="header-left">
+			<Button
+				label="Today"
+				size={Size.Small}
+				onclick={goToToday}
+			>
+				Today
+			</Button>
+			<div class="nav-arrows">
+				<button
+					class="nav-btn"
+					onclick={() => {
+						navigateDate(-1);
+					}}
+					aria-label="Previous"
+				>
+					<Icon
+						name="chevron-left"
+						size={Size.Small}
+						colour={Colour['$ui-blue-14']}
+					/>
+				</button>
+				<button
+					class="nav-btn"
+					onclick={() => {
+						navigateDate(1);
+					}}
+					aria-label="Next"
+				>
+					<Icon
+						name="chevron-right"
+						size={Size.Small}
+						colour={Colour['$ui-blue-14']}
+					/>
+				</button>
+			</div>
+			<h2 class="current-date-label">{formatDate(selected)}</h2>
+		</div>
+		<div class="header-right">
+			{#if headerExtra}
+				{@render headerExtra()}
+			{/if}
+			<div class="view-toggle">
+				{#each viewModes as { mode, label } (mode)}
+					<button
+						class="view-btn"
+						class:active={viewMode === mode}
+						onclick={() => {
+							onviewmodechange(mode);
+						}}
+					>
+						{label}
+					</button>
+				{/each}
+			</div>
+		</div>
+	</div>
+
+	<!-- Week day tabs rendered OUTSIDE the scrollable body so they stay frozen -->
+	{#if viewMode === CalendarViewMode.Week}
+		<div class="week-day-tabs">
+			{#each weekDays as day (day.getTime())}
+				<button
+					class="week-day-tab"
+					class:active={sameDay(day, selected)}
+					class:today={sameDay(day, today)}
+					onclick={() => {
+						ondatechange(day);
+					}}
+				>
+					<span class="day-name">{dayNames[day.getDay()].slice(0, 3)}</span>
+					<span class="day-num">{day.getDate()}</span>
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Calendar body -->
+	<div class="calendar-body">
+		{#if isLoading}
+			<LoadingOverlay />
+		{/if}
+
+		{#if viewMode === CalendarViewMode.Day}
+			<!-- DAY VIEW -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="day-view"
+				onmouseleave={() => {
+					hoveredSlotIndex = null;
+				}}
+			>
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render doorGrid(selected)}
+			</div>
+		{:else if viewMode === CalendarViewMode.Week}
+			<!-- WEEK VIEW: day grid only, tabs are above calendar-body -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="day-view"
+				onmouseleave={() => {
+					hoveredSlotIndex = null;
+				}}
+			>
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render doorGrid(selected)}
+			</div>
+		{:else}
+			<!-- MONTH VIEW -->
+			<div class="month-view">
+				<div class="month-header-row">
+					{#each ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as dayLabel (dayLabel)}
+						<div class="month-day-header">{dayLabel}</div>
+					{/each}
+				</div>
+				<div class="month-grid">
+					{#each monthDays as { date: dayDate, isCurrentMonth } (dayDate.getTime())}
+						<button
+							class="month-day-cell"
+							class:other-month={!isCurrentMonth}
+							class:today={sameDay(dayDate, today)}
+							class:selected={sameDay(dayDate, selected)}
+							onclick={() => {
+								ondatechange(dayDate);
+								onviewmodechange(CalendarViewMode.Day);
+							}}
+						>
+							<span class="day-number">{dayDate.getDate()}</span>
+							<div class="day-badges">
+								{#each countsAt(dayDate) as { doorId, doorName, count } (doorId)}
+									<span class="door-badge">
+										{doorName}: {count}
+									</span>
+								{/each}
+							</div>
+						</button>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+{#snippet doorGrid(day: Date)}
+	<div class="grid-header">
+		<div class="time-header">Time</div>
+		{#each doors as door (door.id)}
+			<div class="door-header">{door.name}</div>
+		{/each}
+	</div>
+	<div class="grid-body">
+		<div class="time-column">
+			{#each timeSlots as slot, slotIdx (slot.hour * 60 + slot.minute)}
+				<div
+					class="time-label"
+					class:hour-start={slot.minute === 0}
+					class:row-hover={hoveredSlotIndex === slotIdx}
+				>
+					{#if slot.minute === 0}
+						<span>{slot.label}</span>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		{#each doors as door (door.id)}
+			<div class="door-column">
+				<!-- Slot cells for drag interaction (rendered first, sit below appointments) -->
+				{#each timeSlots as slot, slotIdx (slot.hour * 60 + slot.minute)}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="slot-cell"
+						class:hour-start={slot.minute === 0}
+						class:drag-selected={isSlotInDragRange(door.id, slotIdx)}
+						class:move-target={isSlotInMoveTarget(door.id, slotIdx)}
+						class:row-hover={hoveredSlotIndex === slotIdx}
+						onmousedown={(e) => {
+							onSlotMouseDown(door.id, slotIdx, e);
+						}}
+						onmouseenter={(e) => {
+							hoveredSlotIndex = slotIdx;
+							onSlotMouseEnter(door.id, slotIdx, e);
+						}}
+					></div>
+				{/each}
+				<!-- Appointment blocks positioned absolutely (rendered after, sit above slots) -->
+				{#each appointmentsAt(door.id, day) as apt (apt.id)}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="appointment-block"
+						class:inbound={apt.typeCode === 'INBOUND'}
+						class:outbound={apt.typeCode === 'OUTBOUND'}
+						class:dragging={isDraggingAppointment && draggedAppointment?.id === apt.id}
+						class:movable={!!onappointmentmove}
+						style="top: {apt.topPercent}%; height: {apt.heightPercent}%;"
+						onmousedown={(e) => {
+							onAppointmentMouseDown(apt, e);
+						}}
+					>
+						<span class="apt-type">{apt.typeCode}</span>
+						<span class="apt-label">{apt.label}</span>
+						{#if apt.sublabel}
+							<span class="apt-sublabel">{apt.sublabel}</span>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+{/snippet}
+
 <style>.appointment-calendar {
   display: flex;
   flex-flow: column nowrap;
@@ -1150,4 +1067,4 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}</style>
+}</style>