@lavalogic/scoria 0.40.20 → 0.40.22

package/dist/Components/{AppointmentCalendar/AppointmentCalendar.svelte → ResourceCalendar/ResourceCalendar.svelte}

@@ -1,25 +1,25 @@
-<svelte:options runes />
-
-<script lang="ts">import { Colour } from "../../scss/colours.js";
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="E extends CalendarEvent"
+>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, availability, centreHour = 12, isLoading = false, headerExtra } = $props();
+import { CalendarViewMode } from "./ResourceCalendarProps.js";
+let { resources, events, event: eventContent, selectedDate, viewMode, ondatechange, onviewmodechange, onrangeselect, oneventclick, oneventmove, startHour = 0, endHour = 24, slotIntervalMinutes = 15, availability, centreHour = 12, 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.
+* `selectedDate` is always read by the component, never written. The runtime
+* type may be a plain `Date` or a `SvelteDate`; both expose the same `Date`
+* interface. 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`.
+* Today's reference Date hoisted out of the per-cell loops so rendering the
+* month grid does not allocate 42 fresh `Date` instances on every state
+* change. `$derived` does not invalidate over time on its own.
 */
 const today = $derived(new Date());
 // ---- Date helpers ----
@@ -93,13 +93,6 @@ const timeSlots = $derived.by(() => {
 	return slots;
 });
 // ---- Availability shading ----
-/**
-* Whether the given slot is outside the door's available windows.
-*
-* A door absent from {@link availability} (or no `availability` map at
-* all) is treated as fully available, so nothing is shaded until the
-* caller supplies windows for that door.
-*/
 function slotUnavailableInWindows(windows, slot) {
 	const minutes = slot.hour * 60 + slot.minute;
 	for (const window of windows) {
@@ -109,11 +102,11 @@ function slotUnavailableInWindows(windows, slot) {
 	}
 	return true;
 }
-function isSlotUnavailable(doorId, slotIndex) {
+function isSlotUnavailable(resourceId, slotIndex) {
 	if (!availability) {
 		return false;
 	}
-	const windows = availability.get(doorId);
+	const windows = availability.get(resourceId);
 	if (!windows) {
 		return false;
 	}
@@ -124,28 +117,26 @@ function isSlotUnavailable(doorId, slotIndex) {
 	return slotUnavailableInWindows(windows, slot);
 }
 /**
-* Contiguous unavailable runs per door, expressed as top/height
-* percentages of the day column. Rendered as a single overlay block per
-* run so the shading pattern is continuous across the whole region
-* rather than restarting (and visibly seaming) at every slot cell.
+* Contiguous unavailable runs per resource, as top/height percentages of the
+* day column. Rendered as a single overlay block per run so the shading is
+* continuous rather than restarting (and visibly seaming) at every slot.
 */
-const unavailableRunsByDoor = $derived.by(() => {
-	// Local index built inside a $derived; outer reactivity covers reads.
+const unavailableRunsByResource = $derived.by(() => {
 	// eslint-disable-next-line svelte/prefer-svelte-reactivity
-	const byDoor = new Map();
+	const byResource = new Map();
 	const slotCount = timeSlots.length;
 	if (!availability || slotCount === 0) {
-		return byDoor;
+		return byResource;
 	}
-	for (const door of doors) {
-		const windows = availability.get(door.id);
+	for (const resource of resources) {
+		const windows = availability.get(resource.id);
 		if (!windows) {
 			continue;
 		}
 		const runs = [];
 		let runStart = null;
-		// One extra iteration (i === slotCount) flushes a run that reaches
-		// the end of the day.
+		// One extra iteration (i === slotCount) flushes a run that reaches the
+		// end of the day.
 		for (let i = 0; i <= slotCount; i++) {
 			const unavailable = i < slotCount && slotUnavailableInWindows(windows, timeSlots[i]);
 			if (unavailable) {
@@ -161,18 +152,15 @@ const unavailableRunsByDoor = $derived.by(() => {
 			}
 		}
 		if (runs.length > 0) {
-			byDoor.set(door.id, runs);
+			byResource.set(resource.id, runs);
 		}
 	}
-	return byDoor;
+	return byResource;
 });
-function unavailableRunsAt(doorId) {
-	return unavailableRunsByDoor.get(doorId) ?? [];
+function unavailableRunsAt(resourceId) {
+	return unavailableRunsByResource.get(resourceId) ?? [];
 }
-/**
-* Build a `YYYY-MM-DD` key for date bucketing. Avoids `toISOString`
-* timezone conversions that would smear appointments across days.
-*/
+/** Build a `YYYY-MM-DD` key for date bucketing without timezone smearing. */
 function dayKey(d) {
 	const y = d.getFullYear();
 	const m = String(d.getMonth() + 1).padStart(2, "0");
@@ -180,33 +168,31 @@ function dayKey(d) {
 	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.
+* Precomputed `Map<resourceId, Map<dayKey, PositionedEvent[]>>` for day and
+* week views — avoids per-cell `events.filter(...)` and per-event `Date`
+* allocations on every render.
 */
-const positionedByDoorAndDay = $derived.by(() => {
+const positionedByResourceAndDay = $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 byResource = new Map();
+	for (const ev of events) {
+		const from = new Date(ev.start);
+		const to = new Date(ev.end);
 		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,
+			...ev,
 			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);
+		let perDay = byResource.get(ev.resourceId);
 		if (!perDay) {
 			// eslint-disable-next-line svelte/prefer-svelte-reactivity
 			perDay = new Map();
-			byDoor.set(apt.segmentId, perDay);
+			byResource.set(ev.resourceId, perDay);
 		}
 		const list = perDay.get(key);
 		if (list) {
@@ -215,43 +201,35 @@ const positionedByDoorAndDay = $derived.by(() => {
 			perDay.set(key, [positioned]);
 		}
 	}
-	return byDoor;
+	return byResource;
 });
-function appointmentsAt(doorId, day) {
-	return positionedByDoorAndDay.get(doorId)?.get(dayKey(day)) ?? [];
+function eventsAt(resourceId, day) {
+	return positionedByResourceAndDay.get(resourceId)?.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.
-*/
+/** Precomputed event-count badges per day for the month view. */
 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));
+	for (const ev of events) {
+		const key = dayKey(new Date(ev.start));
 		let perDay = intermediate.get(key);
 		if (!perDay) {
 			// eslint-disable-next-line svelte/prefer-svelte-reactivity
 			perDay = new Map();
 			intermediate.set(key, perDay);
 		}
-		perDay.set(apt.segmentId, (perDay.get(apt.segmentId) ?? 0) + 1);
+		perDay.set(ev.resourceId, (perDay.get(ev.resourceId) ?? 0) + 1);
 	}
-	// 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);
+		for (const resource of resources) {
+			const count = perDay.get(resource.id);
 			if (count) {
 				list.push({
-					doorId: door.id,
-					doorName: door.name,
+					resourceId: resource.id,
+					resourceLabel: resource.label,
 					count
 				});
 			}
@@ -267,96 +245,88 @@ function countsAt(day) {
 }
 // ---- Click and drag logic ----
 let isDragging = $state(false);
-let dragDoorId = $state(null);
+let dragResourceId = $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.
+function onSlotMouseDown(resourceId, slotIndex, e) {
+	// Only start a drag-create on the primary (left) button.
 	if (e.button !== 0) {
 		return;
 	}
-	if (!ondragcreate || appointmentDragStarted) {
+	if (!onrangeselect || eventDragStarted) {
 		return;
 	}
-	// Unavailable slots cannot seed a new appointment.
-	if (isSlotUnavailable(doorId, slotIndex)) {
+	if (isSlotUnavailable(resourceId, slotIndex)) {
 		return;
 	}
 	isDragging = true;
-	dragDoorId = doorId;
+	dragResourceId = resourceId;
 	dragStartSlotIndex = slotIndex;
 	dragEndSlotIndex = slotIndex;
 }
-function onSlotMouseEnter(doorId, slotIndex, e) {
+function onSlotMouseEnter(resourceId, 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) {
+	// pointer-up happened somewhere we did not observe. Reset.
+	if ((isDragging || eventDragStarted) && (e.buttons & 1) === 0) {
 		isDragging = false;
-		dragDoorId = null;
+		dragResourceId = null;
 		dragStartSlotIndex = null;
 		dragEndSlotIndex = null;
-		resetAppointmentDrag();
+		resetEventDrag();
 		return;
 	}
-	// Appointment move drag
-	if (appointmentDragStarted) {
-		// Freeze the drop target rather than land it on an unavailable slot.
-		if (isSlotUnavailable(doorId, slotIndex)) {
+	// Event move drag
+	if (eventDragStarted) {
+		if (isSlotUnavailable(resourceId, slotIndex)) {
 			return;
 		}
-		isDraggingAppointment = true;
-		moveTargetDoorId = doorId;
+		isDraggingEvent = true;
+		moveTargetResourceId = resourceId;
 		moveTargetSlotIndex = slotIndex;
 		return;
 	}
 	// Slot drag-create
-	if (!isDragging || doorId !== dragDoorId) {
+	if (!isDragging || resourceId !== dragResourceId) {
 		return;
 	}
-	// Keep the selection within the door's available windows.
-	if (isSlotUnavailable(doorId, slotIndex)) {
+	if (isSlotUnavailable(resourceId, slotIndex)) {
 		return;
 	}
 	dragEndSlotIndex = slotIndex;
 }
 function onSlotMouseUp() {
-	// ---- Handle appointment drag-move ----
-	if (isDraggingAppointment && draggedAppointment && moveTargetDoorId != null && moveTargetSlotIndex != null) {
+	// ---- Handle event drag-move ----
+	if (isDraggingEvent && draggedEvent && moveTargetResourceId != 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();
+		const newStart = new Date(selected);
+		newStart.setHours(slot.hour, slot.minute, 0, 0);
+		const newEnd = new Date(newStart.getTime() + draggedSlotCount * slotIntervalMinutes * 6e4);
+		const origFrom = new Date(draggedEvent.start);
+		const samePosition = moveTargetResourceId === draggedEvent.resourceId && newStart.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
+			// Dropped in the same spot - treat as a click.
+			oneventclick?.(draggedEvent);
+		} else if (!hasOverlap(moveTargetResourceId, newStart, newEnd, draggedEvent.id)) {
+			oneventmove?.({
+				event: draggedEvent,
+				newResourceId: moveTargetResourceId,
+				newStart,
+				newEnd
 			});
 		}
-		resetAppointmentDrag();
+		resetEventDrag();
 		return;
 	}
-	// ---- Handle appointment click (mousedown + mouseup without leaving the block) ----
-	if (appointmentDragStarted && !isDraggingAppointment && draggedAppointment) {
-		onappointmentclick?.(draggedAppointment);
-		resetAppointmentDrag();
+	// ---- Handle event click (mousedown + mouseup without leaving the block) ----
+	if (eventDragStarted && !isDraggingEvent && draggedEvent) {
+		oneventclick?.(draggedEvent);
+		resetEventDrag();
 		return;
 	}
-	resetAppointmentDrag();
+	resetEventDrag();
 	// ---- Handle drag-create ----
-	if (!isDragging || dragDoorId == null || dragStartSlotIndex == null || dragEndSlotIndex == null) {
+	if (!isDragging || dragResourceId == null || dragStartSlotIndex == null || dragEndSlotIndex == null) {
 		return;
 	}
 	const startIdx = Math.min(dragStartSlotIndex, dragEndSlotIndex);
@@ -364,27 +334,25 @@ function onSlotMouseUp() {
 	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);
+	const start = new Date(selected);
+	start.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 end = new Date(selected);
+	// End slot is the start of the last selected slot; add one interval.
+	end.setHours(endSlot.hour, endSlot.minute + slotIntervalMinutes, 0, 0);
 	const selection = {
-		doorId: dragDoorId,
-		doorName: door?.name ?? "",
-		dateFrom,
-		dateTo
+		resourceId: dragResourceId,
+		start,
+		end
 	};
 	isDragging = false;
-	dragDoorId = null;
+	dragResourceId = null;
 	dragStartSlotIndex = null;
 	dragEndSlotIndex = null;
-	ondragcreate?.(selection);
+	onrangeselect?.(selection);
 }
-function isSlotInDragRange(doorId, slotIndex) {
-	if (!isDragging || doorId !== dragDoorId) {
+function isSlotInDragRange(resourceId, slotIndex) {
+	if (!isDragging || resourceId !== dragResourceId) {
 		return false;
 	}
 	if (dragStartSlotIndex == null || dragEndSlotIndex == null) {
@@ -396,58 +364,57 @@ function isSlotInDragRange(doorId, slotIndex) {
 }
 // ---- 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);
+// ---- Event drag-move logic ----
+let eventDragStarted = $state(false);
+let isDraggingEvent = $state(false);
+let draggedEvent = $state(null);
+let draggedSlotCount = $state(0);
+let moveTargetResourceId = $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.
+function onEventMouseDown(ev, e) {
+	// Only react to the primary (left) button.
 	if (e.button !== 0) {
 		return;
 	}
-	if (!onappointmentmove) {
+	if (!oneventmove) {
 		return;
 	}
 	e.preventDefault();
-	appointmentDragStarted = true;
-	draggedAppointment = apt;
-	const from = new Date(apt.dateFrom);
-	const to = new Date(apt.dateTo);
+	eventDragStarted = true;
+	draggedEvent = ev;
+	const from = new Date(ev.start);
+	const to = new Date(ev.end);
 	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;
+	draggedSlotCount = Math.max(1, Math.ceil(durationMin / slotIntervalMinutes));
+}
+function resetEventDrag() {
+	eventDragStarted = false;
+	isDraggingEvent = false;
+	draggedEvent = null;
+	draggedSlotCount = 0;
+	moveTargetResourceId = null;
 	moveTargetSlotIndex = null;
 }
-function isSlotInMoveTarget(doorId, slotIndex) {
-	if (!isDraggingAppointment || moveTargetDoorId !== doorId) {
+function isSlotInMoveTarget(resourceId, slotIndex) {
+	if (!isDraggingEvent || moveTargetResourceId !== resourceId) {
 		return false;
 	}
 	if (moveTargetSlotIndex == null) {
 		return false;
 	}
-	return slotIndex >= moveTargetSlotIndex && slotIndex < moveTargetSlotIndex + draggedAptSlotCount;
+	return slotIndex >= moveTargetSlotIndex && slotIndex < moveTargetSlotIndex + draggedSlotCount;
 }
-function hasOverlap(doorId, dateFrom, dateTo, excludeAptId) {
-	return appointments.some((apt) => {
-		if (apt.id === excludeAptId) {
+function hasOverlap(resourceId, start, end, excludeId) {
+	return events.some((ev) => {
+		if (ev.id === excludeId) {
 			return false;
 		}
-		if (apt.segmentId !== doorId) {
+		if (ev.resourceId !== resourceId) {
 			return false;
 		}
-		const aptFrom = new Date(apt.dateFrom);
-		const aptTo = new Date(apt.dateTo);
-		return dateFrom < aptTo && dateTo > aptFrom;
+		const evFrom = new Date(ev.start);
+		const evTo = new Date(ev.end);
+		return start < evTo && end > evFrom;
 	});
 }
 // ---- Month view helpers ----
@@ -455,7 +422,7 @@ 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
+	// 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();
@@ -464,7 +431,7 @@ function getMonthDays(date) {
 	const days = [];
 	// eslint-disable-next-line svelte/prefer-svelte-reactivity
 	const current = new Date(startDate);
-	// Generate 6 weeks (42 days) to fill the grid
+	// Generate 6 weeks (42 days) to fill the grid.
 	for (let i = 0; i < 42; i++) {
 		days.push({
 			date: new Date(current),
@@ -507,18 +474,10 @@ const viewModes = [
 	}
 ];
 // ---- Centre-on-hour scrolling ----
-/** The whole hour whose row carries the `data-centre-row` marker. */
 const centreRowHour = $derived(centreHour == null ? null : Math.floor(centreHour));
-/** The scrollable calendar body; bound so we can centre it on the marker. */
 let calendarBody = $state();
-/**
-* Whether the grid has been centred for the current spell in a
-* day/week view. Plain (non-reactive) so re-centring only happens when
-* the grid (re)appears, never while the user scrolls or data loads.
-*/
 let hasCentred = false;
 $effect(() => {
-	// Re-arm whenever we leave the time-grid views so re-entry recentres.
 	if (viewMode !== CalendarViewMode.Day && viewMode !== CalendarViewMode.Week) {
 		hasCentred = false;
 		return;
@@ -530,265 +489,252 @@ $effect(() => {
 	if (!marker) {
 		return;
 	}
-	// Centre the marker row in the viewport via rect maths so nested
-	// sticky/relative offset parents don't skew the target.
 	const bodyRect = calendarBody.getBoundingClientRect();
 	const markerRect = marker.getBoundingClientRect();
 	const delta = markerRect.top + markerRect.height / 2 - (bodyRect.top + bodyRect.height / 2);
 	calendarBody.scrollTop += delta;
 	hasCentred = true;
 });
-</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"
-		bind:this={calendarBody}
-	>
-		{#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}
-					data-centre-row={slot.hour === centreRowHour && slot.minute === 0
-						? ''
-						: undefined}
-				>
-					{#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}
-						class:unavailable={isSlotUnavailable(door.id, slotIdx)}
-						onmousedown={(e) => {
-							onSlotMouseDown(door.id, slotIdx, e);
-						}}
-						onmouseenter={(e) => {
-							hoveredSlotIndex = slotIdx;
-							onSlotMouseEnter(door.id, slotIdx, e);
-						}}
-					></div>
-				{/each}
-				<!-- Unavailable shading: one continuous block per contiguous run -->
-				{#each unavailableRunsAt(door.id) as run (run.topPercent)}
-					<div
-						class="unavailable-overlay"
-						style="top: {run.topPercent}%; height: {run.heightPercent}%;"
-					></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}
-						{#if apt.reference}
-							<span class="apt-reference">Ref: {apt.reference}</span>
-						{/if}
-					</div>
-				{/each}
-			</div>
-		{/each}
-	</div>
-{/snippet}
-
-<style>.appointment-calendar {
+</script>
+
+<!-- A drag can end anywhere on the page; 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="resource-calendar"
+	class:is-moving-event={isDraggingEvent}
+	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"
+		bind:this={calendarBody}
+	>
+		{#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 resourceGrid(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 resourceGrid(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 { resourceId, resourceLabel, count } (resourceId)}
+									<span class="resource-badge">
+										{resourceLabel}: {count}
+									</span>
+								{/each}
+							</div>
+						</button>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+{#snippet resourceGrid(day: Date)}
+	<div class="grid-header">
+		<div class="time-header">Time</div>
+		{#each resources as resource (resource.id)}
+			<div class="resource-header">{resource.label}</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}
+					data-centre-row={slot.hour === centreRowHour && slot.minute === 0 ? '' : undefined}
+				>
+					{#if slot.minute === 0}
+						<span>{slot.label}</span>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		{#each resources as resource (resource.id)}
+			<div class="resource-column">
+				<!-- Slot cells for drag interaction (rendered first, below events) -->
+				{#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(resource.id, slotIdx)}
+						class:move-target={isSlotInMoveTarget(resource.id, slotIdx)}
+						class:row-hover={hoveredSlotIndex === slotIdx}
+						class:unavailable={isSlotUnavailable(resource.id, slotIdx)}
+						onmousedown={(e) => {
+							onSlotMouseDown(resource.id, slotIdx, e);
+						}}
+						onmouseenter={(e) => {
+							hoveredSlotIndex = slotIdx;
+							onSlotMouseEnter(resource.id, slotIdx, e);
+						}}
+					></div>
+				{/each}
+				<!-- Unavailable shading: one continuous block per contiguous run -->
+				{#each unavailableRunsAt(resource.id) as run (run.topPercent)}
+					<div
+						class="unavailable-overlay"
+						style="top: {run.topPercent}%; height: {run.heightPercent}%;"
+					></div>
+				{/each}
+				<!-- Event blocks positioned absolutely (rendered after, above slots).
+				     The consumer renders the card body via the `event` snippet. -->
+				{#each eventsAt(resource.id, day) as ev (ev.id)}
+					<!-- svelte-ignore a11y_no_static_element_interactions -->
+					<div
+						class="event-block"
+						class:dragging={isDraggingEvent && draggedEvent?.id === ev.id}
+						class:movable={!!oneventmove}
+						style="top: {ev.topPercent}%; height: {ev.heightPercent}%;"
+						onmousedown={(e) => {
+							onEventMouseDown(ev, e);
+						}}
+					>
+						{@render eventContent(ev)}
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+{/snippet}
+
+<style>.resource-calendar {
   display: flex;
   flex-flow: column nowrap;
   height: 100%;
   background-color: #ffffff;
   overflow: hidden;
 }
-.appointment-calendar.is-moving-appointment {
+.resource-calendar.is-moving-event {
   cursor: grabbing;
 }
 
@@ -899,7 +845,7 @@ $effect(() => {
 }
 
 .time-header,
-.door-header {
+.resource-header {
   padding: 0.5rem;
   font-size: 0.875rem;
   font-weight: 600;
@@ -919,7 +865,7 @@ $effect(() => {
   background-color: #e9ecf1;
 }
 
-.door-header {
+.resource-header {
   flex: 1;
   min-width: 8rem;
 }
@@ -964,7 +910,7 @@ $effect(() => {
   white-space: nowrap;
 }
 
-.door-column {
+.resource-column {
   flex: 1;
   min-width: 8rem;
   position: relative;
@@ -1010,75 +956,23 @@ $effect(() => {
   background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(128, 150, 165, 0.14) 6px, rgba(128, 150, 165, 0.14) 12px);
 }
 
-.appointment-block {
+.event-block {
   position: absolute;
   left: 2px;
   right: 2px;
   z-index: 5;
   border-radius: 4px;
-  border: solid 1px #9fdaec;
-  background-color: #f4fbfd;
-  padding: 0.25rem 0.4rem;
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 0.15rem;
   overflow: hidden;
   cursor: pointer;
-  font-size: 0.75rem;
-  text-align: left;
-  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
   user-select: none;
 }
-.appointment-block.movable {
+.event-block.movable {
   cursor: grab;
 }
-.appointment-block.dragging {
+.event-block.dragging {
   opacity: 0.4;
   cursor: grabbing;
 }
-.appointment-block:hover {
-  background-color: #e6f8fd;
-  border-color: #74c9e4;
-}
-.appointment-block.inbound {
-  border-color: #9fdaec;
-}
-.appointment-block.inbound .apt-type {
-  color: #259fc7;
-}
-.appointment-block.outbound {
-  border-color: #66bb6a;
-  background-color: #eaf7ec;
-}
-.appointment-block.outbound .apt-type {
-  color: #2e7d32;
-}
-.appointment-block.outbound:hover {
-  background-color: #dcefdd;
-  border-color: #43a047;
-}
-
-.apt-type {
-  font-weight: 600;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-}
-
-.apt-label {
-  color: #3a4952;
-  font-weight: 500;
-}
-
-.apt-sublabel {
-  color: #647d8e;
-  font-size: 0.75rem;
-}
-
-.apt-reference {
-  color: #647d8e;
-  font-size: 0.75rem;
-  font-weight: 600;
-}
 
 .week-day-tabs {
   display: flex;
@@ -1093,7 +987,8 @@ $effect(() => {
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
-  gap: 0.15rem;
+  justify-content: center;
+  gap: 0.2rem;
   padding: 0.5rem 0.25rem;
   border: none;
   border-right: solid 1px #cbd4da;
@@ -1115,24 +1010,26 @@ $effect(() => {
   background-color: #259fc7;
   color: #ffffff;
   border-radius: 50%;
-  width: 1.5rem;
-  height: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .day-name {
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   color: #647d8e;
   text-transform: uppercase;
   font-weight: 600;
+  line-height: 1;
 }
 
 .day-num {
-  font-size: 1rem;
-  color: #3a4952;
-  font-weight: 500;
+  font-size: 0.875rem;
+  color: #647d8e;
+  font-weight: 600;
+  line-height: 1;
+  height: 1.5rem;
+  min-width: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .month-view {
@@ -1219,7 +1116,7 @@ $effect(() => {
   overflow: hidden;
 }
 
-.door-badge {
+.resource-badge {
   font-size: 0.75rem;
   color: #259fc7;
   background-color: #e6f8fd;
@@ -1228,4 +1125,4 @@ $effect(() => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}</style>
+}</style>