@lavalogic/scoria 0.40.17 → 0.40.18

package/dist/Components/AppointmentCalendar/AppointmentCalendar.svelte

@@ -100,6 +100,15 @@ const timeSlots = $derived.by(() => {
 * 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) {
+		if (minutes >= window.startMinutes && minutes < window.endMinutes) {
+			return false;
+		}
+	}
+	return true;
+}
 function isSlotUnavailable(doorId, slotIndex) {
 	if (!availability) {
 		return false;
@@ -112,13 +121,53 @@ function isSlotUnavailable(doorId, slotIndex) {
 	if (!slot) {
 		return false;
 	}
-	const minutes = slot.hour * 60 + slot.minute;
-	for (const window of windows) {
-		if (minutes >= window.startMinutes && minutes < window.endMinutes) {
-			return false;
+	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.
+*/
+const unavailableRunsByDoor = $derived.by(() => {
+	// Local index built inside a $derived; outer reactivity covers reads.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const byDoor = new Map();
+	const slotCount = timeSlots.length;
+	if (!availability || slotCount === 0) {
+		return byDoor;
+	}
+	for (const door of doors) {
+		const windows = availability.get(door.id);
+		if (!windows) {
+			continue;
+		}
+		const runs = [];
+		let runStart = null;
+		// 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) {
+				if (runStart === null) {
+					runStart = i;
+				}
+			} else if (runStart !== null) {
+				runs.push({
+					topPercent: runStart / slotCount * 100,
+					heightPercent: (i - runStart) / slotCount * 100
+				});
+				runStart = null;
+			}
+		}
+		if (runs.length > 0) {
+			byDoor.set(door.id, runs);
 		}
 	}
-	return true;
+	return byDoor;
+});
+function unavailableRunsAt(doorId) {
+	return unavailableRunsByDoor.get(doorId) ?? [];
 }
 /**
 * Build a `YYYY-MM-DD` key for date bucketing. Avoids `toISOString`
@@ -696,6 +745,13 @@ $effect(() => {
 						}}
 					></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 -->
@@ -939,8 +995,16 @@ $effect(() => {
 }
 .slot-cell.unavailable {
   cursor: not-allowed;
-  background-color: #e9ecf1;
-  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(128, 150, 165, 0.18) 5px, rgba(128, 150, 165, 0.18) 10px);
+}
+
+.unavailable-overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+  background-color: rgba(128, 150, 165, 0.06);
+  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 {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.40.17",
+  "version": "0.40.18",
   "publishConfig": {
     "access": "restricted"
   },