@lavalogic/scoria 0.40.17 → 0.40.19

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 -->
@@ -715,6 +771,9 @@ $effect(() => {
 						{#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>
@@ -939,8 +998,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 {
@@ -980,11 +1047,15 @@ $effect(() => {
   color: #259fc7;
 }
 .appointment-block.outbound {
-  border-color: #e7b100;
-  background-color: #f0faf0;
+  border-color: #66bb6a;
+  background-color: #eaf7ec;
 }
 .appointment-block.outbound .apt-type {
-  color: #e7b100;
+  color: #2e7d32;
+}
+.appointment-block.outbound:hover {
+  background-color: #dcefdd;
+  border-color: #43a047;
 }
 
 .apt-type {
@@ -1003,6 +1074,12 @@ $effect(() => {
   font-size: 0.75rem;
 }
 
+.apt-reference {
+  color: #647d8e;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
 .week-day-tabs {
   display: flex;
   flex-flow: row nowrap;

package/dist/Components/AppointmentCalendar/AppointmentCalendarProps.d.ts

@@ -29,6 +29,8 @@ export interface CalendarAppointment {
     readonly typeCode: string;
     readonly label: string;
     readonly sublabel?: string;
+    /** Optional booking reference shown on the appointment card. */
+    readonly reference?: string;
 }
 export interface CalendarDoor {
     readonly id: number;

package/dist/Components/DateInput.svelte

@@ -82,7 +82,7 @@ function handleChange(e) {
 				/>
 			{/if}
 			<input
-				step={type === 'datetime-local' ? 1 : 'any'}
+				step={type === 'datetime-local' ? 1 : type === 'time' ? 60 : 'any'}
 				class:invalid={isInvalid}
 				class:left-pad={leftIcon != undefined}
 				class:right-pad={rightIcon != undefined}

package/dist/Components/DateInputProps.d.ts

@@ -1,3 +1,4 @@
 import type { DateOnlyInputProps } from './DateOnlyInputProps.js';
 import type { DateTimeInputProps } from './DateTimeInputProps.js';
-export type DateInputProps = DateOnlyInputProps | DateTimeInputProps;
+import type { TimeInputProps } from './TimeInputProps.js';
+export type DateInputProps = DateOnlyInputProps | DateTimeInputProps | TimeInputProps;

package/dist/Components/TimeInputProps.d.ts

@@ -0,0 +1,51 @@
+import type { InputVariant } from '../Types/Internal/InputVariant.js';
+import type { InputTime } from '../Types/Internal/Misc.js';
+import type { PartialIconProps } from './PartialIconProps.js';
+/**
+ * Props for the `time` variant of {@link DateInput}.
+ *
+ * Renders a native `<input type="time">` with the same overlapping-label
+ * border chrome as the date/datetime variants. `value` is branded with
+ * {@link InputTime} (`HH:MM`); the empty string is a known sentinel that
+ * the consumer is expected to handle when binding.
+ */
+export interface TimeInputProps {
+    /** Discriminator. Must be the literal `'time'`. */
+    type: 'time';
+    /**
+     * Bindable time value (`HH:MM`). `''` or `null` represent "no time
+     * selected" — both are accepted because consumers commonly back the
+     * binding with a nullable field; the component treats them alike.
+     */
+    value?: InputTime | '' | null;
+    /** Label rendered above the input. */
+    label?: string;
+    /** Native `placeholder` attribute. */
+    placeholder?: string;
+    /** Native `required` attribute. */
+    required?: boolean;
+    /** Render the "- optional" suffix next to `label`. */
+    optional?: boolean;
+    /** Render variant. See {@link InputVariant}. */
+    variant?: InputVariant;
+    /** Native `min` constraint. */
+    min?: InputTime;
+    /** Native `max` constraint. */
+    max?: InputTime;
+    /** Native `disabled` attribute. */
+    disabled?: boolean;
+    /** Icon rendered on the left of the input. */
+    leftIcon?: PartialIconProps;
+    /** Icon rendered on the right of the input. */
+    rightIcon?: PartialIconProps;
+    /** Bindable reference to the underlying `<input>` element. */
+    inputRef?: HTMLInputElement;
+    /** Force the invalid visual state. */
+    invalid?: boolean;
+    /** Blur handler. */
+    onblur?: (e: FocusEvent) => void;
+    /** Focus handler. */
+    onfocus?: (e: FocusEvent) => void;
+    /** Change handler. May return `void` or `Promise<void>`. */
+    onchange?: (value: InputTime | null) => void | Promise<void>;
+}

package/dist/Components/TimeInputProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Types/Internal/Misc.d.ts

@@ -69,6 +69,8 @@ export type ScoriaStorageKey = BrandedString<'ScoriaStorageKey'>;
 export type InputDate = BrandedString<'InputDate'>;
 /** ISO date-time string of the form `YYYY-MM-DDTHH:MM:SS`. */
 export type InputDateWithTime = BrandedString<'InputDateWithTime'>;
+/** ISO time-only string of the form `HH:MM`. */
+export type InputTime = BrandedString<'InputTime'>;
 /** Date string formatted for the FloWMS SQL backend. */
 export type SQLDate = BrandedString<'SQLDate'>;
 /** Integer centimetre count. Used by dimension inputs. */

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export type { DateOnlyInputProps } from './Components/DateOnlyInputProps.js';
 export { default as DatePicker } from './Components/DatePicker.svelte';
 export { type DatePickerProps } from './Components/DatePickerProps.js';
 export type { DateTimeInputProps } from './Components/DateTimeInputProps.js';
+export type { TimeInputProps } from './Components/TimeInputProps.js';
 export { default as DesktopModal } from './Components/DesktopModal.svelte';
 export type { DesktopModalProps } from './Components/DesktopModalProps.js';
 export { default as Dial } from './Components/Dial.svelte';
@@ -210,7 +211,7 @@ export { type GridStringItem } from './Types/Internal/GridStringItem.js';
 export { type GridTextItem } from './Types/Internal/GridTextItem.js';
 export { type IdentifiableToastMessage } from './Types/Internal/IdentifiableToastMessage.js';
 export { InputVariant } from './Types/Internal/InputVariant.js';
-export { type BrandedInteger, type BrandedNumber, type BrandedString, type Centimetres, type CssLength, type InputDate, type InputDateWithTime, type NonNullableKey, type Pixels, type ScoriaStorageKey, type SQLDate, type Unsubscriber, type Uuid, type ValueProp, } from './Types/Internal/Misc.js';
+export { type BrandedInteger, type BrandedNumber, type BrandedString, type Centimetres, type CssLength, type InputDate, type InputDateWithTime, type InputTime, type NonNullableKey, type Pixels, type ScoriaStorageKey, type SQLDate, type Unsubscriber, type Uuid, type ValueProp, } from './Types/Internal/Misc.js';
 export { type RefWrapper } from './Types/Internal/RefWrapper.js';
 export { type SelectOption } from './Types/Internal/SelectOption.js';
 export { Shape } from './Types/Internal/Shape.js';

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.19",
   "publishConfig": {
     "access": "restricted"
   },