@lavalogic/scoria 0.40.26 → 0.40.28

package/dist/Components/Base/BaseModal.svelte

@@ -1,29 +1,40 @@
-<svelte:options runes />
-
-<!--
-	BaseModal.svelte - internal primitive that owns the `<dialog>`
-	open/close + Escape/backdrop dismissal + autofocus plumbing
-	shared between `Modal`, `DesktopModal`, and `TouchModal`. See
-	`BaseModalProps.ts` for the contract.
-
-	Cosmetic-free for inner content by design: each consumer renders
-	its own header / main / footer / button-row markup as
-	`{@render children()}`. The consumer also keeps its own
-	footer-text rules, scanner shortcut wiring, colourSet button
-	styling, etc. - those concerns intentionally do not live in
-	BaseModal.
-
-	The shared dialog SHELL styling (border, backdrop, zoom-in
-	animation, the `--dialog-*` size variables and the static-height
-	/ static-width / noscroll modifier classes) is included here via
-	the `@mixin dialog` SCSS so it is shared across all three
-	consumer modals.
--->
-
-<script lang="ts">import { devCatch } from "../../Helpers/Helpers.svelte.js";
-import { onMount, tick } from "svelte";
+<svelte:options runes />
+
+<!--
+	BaseModal.svelte - internal primitive that owns the `<dialog>`
+	open/close + Escape/backdrop dismissal + autofocus plumbing
+	shared between `Modal`, `DesktopModal`, and `TouchModal`. See
+	`BaseModalProps.ts` for the contract.
+
+	Cosmetic-free for inner content by design: each consumer renders
+	its own header / main / footer / button-row markup as
+	`{@render children()}`. The consumer also keeps its own
+	footer-text rules, scanner shortcut wiring, colourSet button
+	styling, etc. - those concerns intentionally do not live in
+	BaseModal.
+
+	The shared dialog SHELL styling (border, backdrop, zoom-in
+	animation, the `--dialog-*` size variables and the static-height
+	/ static-width / noscroll modifier classes) is included here via
+	the `@mixin dialog` SCSS so it is shared across all three
+	consumer modals.
+-->
+
+<script lang="ts">import { TooltipContext } from "../../Contexts/TooltipContext.svelte.js";
+import { devCatch } from "../../Helpers/Helpers.svelte.js";
+import { getContext, onMount, tick } from "svelte";
+import Tooltip from "../Contexts/Tooltip.svelte";
 let { value = $bindable(true), children, onclose, mandatory = false, autofocusSelector, ariaLabelledby, ariaDescribedby, closeOnEscape = true, closeOnBackdropClick = true, dialogClass, dialogStyle } = $props();
 let dialog = $state();
+// A dialog opened with showModal() paints in the browser top layer,
+// above every z-index on the page, including the app-root Tooltip host
+// mounted by ContextWrapper. Hovering a Button / Action inside a modal
+// therefore shows its tooltip BEHIND the modal. Rendering a second
+// Tooltip host inside the dialog puts one in the top layer too; both
+// hosts read the same app-level context, so whichever is visible paints
+// the active tooltip. Skipped when no context is mounted (tests,
+// context-free harnesses).
+const tooltipContext = getContext(TooltipContext.identifier);
 function tryFocusSelector() {
 	if (dialog && autofocusSelector != null && autofocusSelector.length > 0) {
 		const target = dialog.querySelector(autofocusSelector);
@@ -80,22 +91,25 @@ function handleBackdropClick(e) {
 		}
 	}
 }
-</script>
-
-<dialog
-	bind:this={dialog}
-	class={dialogClass}
-	style={dialogStyle}
-	aria-modal="true"
-	aria-labelledby={ariaLabelledby}
-	aria-describedby={ariaDescribedby}
-	onclose={handleNativeClose}
-	onkeydown={handleKeydown}
-	onclick={handleBackdropClick}
->
-	{@render children()}
-</dialog>
-
+</script>
+
+<dialog
+	bind:this={dialog}
+	class={dialogClass}
+	style={dialogStyle}
+	aria-modal="true"
+	aria-labelledby={ariaLabelledby}
+	aria-describedby={ariaDescribedby}
+	onclose={handleNativeClose}
+	onkeydown={handleKeydown}
+	onclick={handleBackdropClick}
+>
+	{@render children()}
+	{#if tooltipContext}
+		<Tooltip />
+	{/if}
+</dialog>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -149,4 +163,4 @@ dialog .modal-main.noscroll {
 }
 dialog .footer {
   flex-shrink: 0;
-}</style>
+}</style>

package/dist/Components/ChipsInput.svelte

@@ -0,0 +1,194 @@
+<svelte:options runes />
+
+<script lang="ts">import { generateWeakId } from "../Helpers/Helpers.svelte.js";
+let { values = $bindable([]), onchange, labelTop, optional = false, placeholder, disabled = false, invalid = false, id = generateWeakId() } = $props();
+let draft = $state("");
+function commit(next) {
+	values = next;
+	onchange?.(next);
+}
+function commitDraft() {
+	const value = draft.trim();
+	if (value === "") {
+		return;
+	}
+	if (!values.includes(value)) {
+		commit([...values, value]);
+	}
+	draft = "";
+}
+function remove(value) {
+	commit(values.filter((v) => v !== value));
+}
+function onkeydown(e) {
+	if (e.key === "Enter" || e.key === ",") {
+		e.preventDefault();
+		commitDraft();
+		return;
+	}
+	if (e.key === "Backspace" && draft === "" && values.length > 0) {
+		commit(values.slice(0, -1));
+	}
+}
+</script>
+
+<label
+	class="chips-wrapper"
+	for={id}
+>
+	{#if labelTop}
+		<span
+			class="top-label"
+			class:invalid
+			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+		>
+		<span
+			aria-hidden="true"
+			class="border"
+			class:invalid
+			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+		>
+	{/if}
+	<div
+		class="box"
+		class:invalid
+		class:disabled
+	>
+		{#each values as value (value)}
+			<span class="chip">
+				{value}
+				{#if !disabled}
+					<button
+						type="button"
+						class="remove"
+						aria-label="Remove {value}"
+						onclick={() => {
+							remove(value);
+						}}>&times;</button
+					>
+				{/if}
+			</span>
+		{/each}
+		<input
+			{id}
+			type="text"
+			{placeholder}
+			{disabled}
+			bind:value={draft}
+			{onkeydown}
+			onblur={commitDraft}
+		/>
+	</div>
+</label>
+
+<style>.chips-wrapper {
+  position: relative;
+  display: flex;
+  flex-flow: column nowrap;
+  min-width: 16rem;
+}
+
+span.top-label {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.875rem;
+  user-select: none;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  padding: 0rem 0.5rem;
+  top: calc(-0.875rem / 2 - 2px);
+  z-index: 2;
+  color: #647d8e;
+  white-space: nowrap;
+}
+span.top-label.invalid {
+  color: #aa1414;
+}
+
+span.border {
+  position: absolute;
+  left: 0.5rem;
+  font-size: 0.875rem;
+  user-select: none;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  line-height: 1rem;
+  z-index: 1;
+  white-space: nowrap;
+  top: 0px;
+  line-height: 0px;
+  color: transparent;
+  border-bottom: solid 1px #ffffff;
+}
+span.border.invalid {
+  border-bottom-color: #f9e9e9;
+}
+
+.box {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: 0.375rem;
+  border: solid 1px #cbd4da;
+  border-radius: 4px;
+  background: #ffffff;
+  padding: 0.45rem 0.75rem;
+  min-height: 2.65rem;
+  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;
+}
+.box:focus-within {
+  outline: solid 1px #259fc7;
+  outline-offset: -1px;
+}
+.box.invalid {
+  border-color: #aa1414;
+  background-color: #f9e9e9;
+}
+.box.disabled {
+  background-color: #f4f7f9;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border: solid 1px #cbd4da;
+  border-radius: 999px;
+  padding: 0.1rem 0.3rem 0.1rem 0.6rem;
+  font-size: 0.8125rem;
+  color: #3a4952;
+  background: #ffffff;
+  white-space: nowrap;
+}
+
+.remove {
+  border: 0;
+  background: transparent;
+  color: #647d8e;
+  font-size: 0.85rem;
+  line-height: 1;
+  padding: 0.1rem 0.25rem;
+  cursor: pointer;
+  border-radius: 999px;
+  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;
+}
+.remove:hover, .remove:focus-visible {
+  color: #3a4952;
+  background: #e9ecf1;
+}
+
+input {
+  flex: 1 1 6rem;
+  min-width: 6rem;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #3a4952;
+  padding: 0.2rem 0;
+}
+input::placeholder {
+  color: #647d8e;
+}</style>

package/dist/Components/ChipsInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ChipsInputProps } from './ChipsInputProps.js';
+declare const ChipsInput: import("svelte").Component<ChipsInputProps, {}, "values">;
+type ChipsInput = ReturnType<typeof ChipsInput>;
+export default ChipsInput;

package/dist/Components/ChipsInputProps.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Props for the {@link ChipsInput} component: a free-text multi-value input.
+ * Committed values render as removable chips inside the input frame; typing
+ * adds a value on Enter or comma, and Backspace on an empty draft removes the
+ * last chip. Use it wherever a field holds an ordered list of short free-text
+ * values that have no lookup source (codes, tags, reference lists); reach for
+ * `MultiSelect` instead when the values come from a known option set.
+ */
+export interface ChipsInputProps {
+    /**
+     * The committed values, in order. Bindable; the component never mutates
+     * the array in place - every change (add, remove) assigns a fresh array
+     * and then fires {@link ChipsInputProps.onchange}.
+     */
+    values: Array<string>;
+    /**
+     * Called with the fresh values array after every add or remove. Optional
+     * when the consumer relies on `bind:values` alone.
+     */
+    onchange?: (values: Array<string>) => void;
+    /**
+     * Label rendered floating over the top border, matching the TextInput
+     * label treatment.
+     */
+    labelTop?: string;
+    /** Render the "- optional" suffix next to `labelTop`. */
+    optional?: boolean;
+    /** Placeholder shown in the draft input while it is empty. */
+    placeholder?: string;
+    /**
+     * When true the control is non-interactive: the draft input is disabled
+     * and chips lose their remove buttons.
+     */
+    disabled?: boolean;
+    /** Force the invalid (error palette) visual state. */
+    invalid?: boolean;
+    /** DOM id placed on the inner draft `<input>`. */
+    id?: string;
+}

package/dist/Components/ChipsInputProps.js

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

package/dist/Components/ConditionBuilder/ConditionBuilder.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="F extends string | number, O extends string | number, V"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="F extends string | number, O extends string | number, V"
 >import SingleSelect from "../SingleSelect.svelte";
 import Button from "../Button.svelte";
 import { makeGroup, makeLeaf } from "./ConditionTree.js";
@@ -42,101 +42,101 @@ function setValue(leaf, value) {
 	leaf.value = value;
 	onChange(root);
 }
-</script>
-
-<div
-	class="group"
-	class:nested={depth > 0}
->
-	<div class="combinator">
-		<Button
-			label={andLabel}
-			toggled={root.combinator === 'and'}
-			onclick={() => setCombinator('and')}>{andLabel}</Button
-		>
-		<Button
-			label={orLabel}
-			toggled={root.combinator === 'or'}
-			onclick={() => setCombinator('or')}>{orLabel}</Button
-		>
-	</div>
-
-	<div class="children">
-		{#each root.children as child (child.id)}
-			{#if child.kind === 'leaf'}
-				<div class="leaf">
-					<SingleSelect
-						label="Field"
-						options={[...fields]}
-						labelProp="label"
-						valueProp="value"
-						valueAsObject={false}
-						clearable
-						value={child.field}
-						onchange={(value) => setField(child, value)}
-					/>
-					<SingleSelect
-						label="Operator"
-						options={[...operatorsFor(child.field)]}
-						labelProp="label"
-						valueProp="value"
-						valueAsObject={false}
-						clearable
-						value={child.operator}
-						onchange={(value) => setOperator(child, value)}
-					/>
-					<div class="value-editor">
-						{@render valueEditor(child, (value) => setValue(child, value))}
-					</div>
-					<Button
-						label="Remove condition"
-						iconLeft={{ name: 'circle-cross' }}
-						onclick={() => removeChild(child)}
-					/>
-				</div>
-			{:else}
-				<div class="subgroup">
-					<Self
-						root={child}
-						{onChange}
-						{fields}
-						{operatorsFor}
-						{valueEditor}
-						{defaultValueFor}
-						{allowGroups}
-						{maxDepth}
-						{addConditionLabel}
-						{addGroupLabel}
-						{andLabel}
-						{orLabel}
-						depth={depth + 1}
-					/>
-					<Button
-						label="Remove group"
-						iconLeft={{ name: 'circle-cross' }}
-						onclick={() => removeChild(child)}
-					/>
-				</div>
-			{/if}
-		{/each}
-	</div>
-
-	<div class="actions">
-		<Button
-			label={addConditionLabel}
-			iconLeft={{ name: 'circle-plus' }}
-			onclick={addLeaf}>{addConditionLabel}</Button
-		>
-		{#if allowGroups && depth < maxDepth}
-			<Button
-				label={addGroupLabel}
-				iconLeft={{ name: 'circle-plus' }}
-				onclick={addGroup}>{addGroupLabel}</Button
-			>
-		{/if}
-	</div>
-</div>
-
+</script>
+
+<div
+	class="group"
+	class:nested={depth > 0}
+>
+	<div class="combinator">
+		<Button
+			label={andLabel}
+			toggled={root.combinator === 'and'}
+			onclick={() => setCombinator('and')}>{andLabel}</Button
+		>
+		<Button
+			label={orLabel}
+			toggled={root.combinator === 'or'}
+			onclick={() => setCombinator('or')}>{orLabel}</Button
+		>
+	</div>
+
+	<div class="children">
+		{#each root.children as child (child.id)}
+			{#if child.kind === 'leaf'}
+				<div class="leaf">
+					<SingleSelect
+						label="Field"
+						options={[...fields]}
+						labelProp="label"
+						valueProp="value"
+						valueAsObject={false}
+						clearable
+						value={child.field}
+						onchange={(value) => setField(child, value)}
+					/>
+					<SingleSelect
+						label="Operator"
+						options={[...operatorsFor(child.field)]}
+						labelProp="label"
+						valueProp="value"
+						valueAsObject={false}
+						clearable
+						value={child.operator}
+						onchange={(value) => setOperator(child, value)}
+					/>
+					<div class="value-editor">
+						{@render valueEditor(child, (value) => setValue(child, value))}
+					</div>
+					<Button
+						label="Remove condition"
+						iconLeft={{ name: 'circle-cross' }}
+						onclick={() => removeChild(child)}
+					/>
+				</div>
+			{:else}
+				<div class="subgroup">
+					<Self
+						root={child}
+						{onChange}
+						{fields}
+						{operatorsFor}
+						{valueEditor}
+						{defaultValueFor}
+						{allowGroups}
+						{maxDepth}
+						{addConditionLabel}
+						{addGroupLabel}
+						{andLabel}
+						{orLabel}
+						depth={depth + 1}
+					/>
+					<Button
+						label="Remove group"
+						iconLeft={{ name: 'circle-cross' }}
+						onclick={() => removeChild(child)}
+					/>
+				</div>
+			{/if}
+		{/each}
+	</div>
+
+	<div class="actions">
+		<Button
+			label={addConditionLabel}
+			iconLeft={{ name: 'circle-plus' }}
+			onclick={addLeaf}>{addConditionLabel}</Button
+		>
+		{#if allowGroups && depth < maxDepth}
+			<Button
+				label={addGroupLabel}
+				iconLeft={{ name: 'circle-plus' }}
+				onclick={addGroup}>{addGroupLabel}</Button
+			>
+		{/if}
+	</div>
+</div>
+
 <style>.group {
   display: flex;
   flex-flow: column nowrap;
@@ -184,4 +184,4 @@ function setValue(leaf, value) {
   display: flex;
   flex-flow: row nowrap;
   gap: 0.5rem;
-}</style>
+}</style>

package/dist/Components/ResourceCalendar/ResourceCalendar.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="E extends CalendarEvent"
+<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";
@@ -518,241 +518,241 @@ $effect(() => {
 	calendarBody.scrollTop += delta;
 	hasCentred = true;
 });
-</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);
-						}}
-						ondblclick={() => {
-							onSlotDoubleClick(resource.id, slotIdx);
-						}}
-					></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}
-
+</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);
+						}}
+						ondblclick={() => {
+							onSlotDoubleClick(resource.id, slotIdx);
+						}}
+					></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;
@@ -1149,4 +1149,4 @@ $effect(() => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}</style>
+}</style>

package/dist/index.d.ts

@@ -20,6 +20,8 @@ export { default as Button } from './Components/Button.svelte';
 export type { ButtonProps } from './Components/ButtonProps.js';
 export { default as Checkbox } from './Components/Checkbox.svelte';
 export type { CheckboxProps } from './Components/CheckboxProps.js';
+export { default as ChipsInput } from './Components/ChipsInput.svelte';
+export type { ChipsInputProps } from './Components/ChipsInputProps.js';
 export { default as CollapsibleCard } from './Components/CollapsibleCard.svelte';
 export type { CollapsibleCardProps } from './Components/CollapsibleCardProps.js';
 export { default as CollapsibleMenuGroup } from './Components/CollapsibleMenuGroup.svelte';

package/dist/index.js

@@ -13,6 +13,7 @@ export {} from './Components/BubbleColour.js';
 export {} from './Components/BubbleProps.js';
 export { default as Button } from './Components/Button.svelte';
 export { default as Checkbox } from './Components/Checkbox.svelte';
+export { default as ChipsInput } from './Components/ChipsInput.svelte';
 export { default as CollapsibleCard } from './Components/CollapsibleCard.svelte';
 export { default as CollapsibleMenuGroup } from './Components/CollapsibleMenuGroup.svelte';
 export { default as PopoverButton } from './Components/PopoverButton.svelte';

package/dist/scss/_colours.scss

@@ -64,6 +64,12 @@ $error-border: #aa1414;
 $error-background: #f9e9e9;
 $warning: #f8eab8;
 $warning-border: #e7b500;
+// Success / positive-confirmation state, mirroring the $error triplet.
+// Hue matches $despatched-background (#2f921d) so it sits in the existing
+// palette rather than introducing a new green.
+$success: #2f921d;
+$success-border: #277a18;
+$success-background: #eaf5e7;
 
 $allocated-background: #e7b100;
 $in-picking-background: #ec58c3;

package/dist/scss/colours.d.ts

@@ -59,6 +59,9 @@ export declare const Colour: {
     readonly '$error-background': "#F9E9E9";
     readonly $warning: "rgba(231, 181, 0, 0.228)";
     readonly '$warning-border': "rgb(231, 181, 0)";
+    readonly $success: "#2F921D";
+    readonly '$success-border': "#277A18";
+    readonly '$success-background': "#EAF5E7";
     readonly '$allocated-background': "#E7B100";
     readonly '$in-picking-background': "#EC58C3";
     readonly '$in-picking-colour': "#720653";

package/dist/scss/colours.js

@@ -61,6 +61,12 @@ export const Colour = {
     '$error-background': '#F9E9E9',
     $warning: 'rgba(231, 181, 0, 0.228)',
     '$warning-border': 'rgb(231, 181, 0)',
+    // Success / positive-confirmation state, mirroring the $error triplet.
+    // Hue matches $despatched-background (#2F921D) so it sits in the existing
+    // palette rather than introducing a new green.
+    $success: '#2F921D',
+    '$success-border': '#277A18',
+    '$success-background': '#EAF5E7',
     '$allocated-background': '#E7B100',
     '$in-picking-background': '#EC58C3',
     '$in-picking-colour': '#720653',

package/package.json

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