@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/DesktopModal.svelte

@@ -1,92 +1,92 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { ColourSet } from '../scss/colours.js';
-	import Button from './Button.svelte';
-	import type { DesktopModalProps } from './DesktopModalProps.js';
-	import LoadingOverlay from './LoadingOverlay.svelte';
-	import Modal from './Modal.svelte';
-
-	const {
-		onclose,
-		onsubmit,
-		noscroll,
-		headerLabel,
-		headerSubtitle,
-		buttons,
-		children,
-		isLoading,
-		mandatory,
-		loadingMessage,
-		staticHeight,
-		staticWidth,
-		minWidth,
-		minHeight,
-		width,
-		height,
-	}: DesktopModalProps = $props();
-</script>
-
-<Modal
-	{onclose}
-	mandatory={mandatory || isLoading}
-	{staticHeight}
-	{staticWidth}
-	{minWidth}
-	{minHeight}
-	{width}
-	{height}
-	{noscroll}
-	{onsubmit}
->
-	{#snippet header()}
-		<div class="outer">
-			<div class="column">
-				{#if typeof headerLabel === 'string'}
-					<h1>{headerLabel}</h1>
-				{:else}
-					{@render headerLabel()}
-				{/if}
-				{#if headerSubtitle}
-					<div class="one-line">
-						<span>{headerSubtitle}</span>
-					</div>
-				{/if}
-			</div>
-			<div class="spacer"></div>
-		</div>
-	{/snippet}
-
-	{#snippet footer()}
-		<div class="footer">
-			{#if buttons.length}
-				{#each buttons as button (button.label)}
-					<div class:left={button.left}>
-						<Button
-							type={button.type}
-							disabled={button.disabled}
-							onclick={button.callback}
-							colourSet={button.colourSet ??
-								(button.type === 'submit' ? ColourSet.Primary : undefined)}>{button.label}</Button
-						>
-					</div>
-				{/each}
-			{/if}
-		</div>
-	{/snippet}
-
-	<div class="body-outer">
-		{@render children()}
-	</div>
-
-	{#if isLoading}
-		<LoadingOverlay
-			absolute
-			message={loadingMessage}
-		/>
-	{/if}
-</Modal>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { ColourSet } from '../scss/colours.js';
+	import Button from './Button.svelte';
+	import type { DesktopModalProps } from './DesktopModalProps.js';
+	import LoadingOverlay from './LoadingOverlay.svelte';
+	import Modal from './Modal.svelte';
+
+	const {
+		onclose,
+		onsubmit,
+		noscroll,
+		headerLabel,
+		headerSubtitle,
+		buttons,
+		children,
+		isLoading,
+		mandatory,
+		loadingMessage,
+		staticHeight,
+		staticWidth,
+		minWidth,
+		minHeight,
+		width,
+		height,
+	}: DesktopModalProps = $props();
+</script>
+
+<Modal
+	{onclose}
+	mandatory={mandatory || isLoading}
+	{staticHeight}
+	{staticWidth}
+	{minWidth}
+	{minHeight}
+	{width}
+	{height}
+	{noscroll}
+	{onsubmit}
+>
+	{#snippet header()}
+		<div class="outer">
+			<div class="column">
+				{#if typeof headerLabel === 'string'}
+					<h1>{headerLabel}</h1>
+				{:else}
+					{@render headerLabel()}
+				{/if}
+				{#if headerSubtitle}
+					<div class="one-line">
+						<span>{headerSubtitle}</span>
+					</div>
+				{/if}
+			</div>
+			<div class="spacer"></div>
+		</div>
+	{/snippet}
+
+	{#snippet footer()}
+		<div class="footer">
+			{#if buttons.length}
+				{#each buttons as button (button.label)}
+					<div class:left={button.left}>
+						<Button
+							type={button.type}
+							disabled={button.disabled}
+							onclick={button.callback}
+							colourSet={button.colourSet ??
+								(button.type === 'submit' ? ColourSet.Primary : undefined)}>{button.label}</Button
+						>
+					</div>
+				{/each}
+			{/if}
+		</div>
+	{/snippet}
+
+	<div class="body-outer">
+		{@render children()}
+	</div>
+
+	{#if isLoading}
+		<LoadingOverlay
+			absolute
+			message={loadingMessage}
+		/>
+	{/if}
+</Modal>
+
 <style>.outer {
   padding: 1.5rem;
   display: flex;
@@ -184,4 +184,4 @@
 }
 .outer .spacer {
   flex-grow: 1;
-}</style>
+}</style>

package/dist/Components/Dial.svelte

@@ -1,206 +1,206 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { Sizing } from '../scss/sizing.js';
-
-	// Pixel height of each dial option. Sourced from `sizing.ts` so the
-	// SCSS partial and TS constant stay in sync (see comment at the top
-	// of `sizing.ts`).
-	const OPTION_HEIGHT: number = Sizing['$dial-option-height'];
-</script>
-
-<script
-	lang="ts"
-	generics="T"
->
-	import { onMount } from 'svelte';
-	import type { DialProps } from './DialProps.js';
-
-	let {
-		selected,
-		entries,
-		type,
-		ref = $bindable(),
-		onsubmit,
-		onPrevious,
-		onNext,
-		onchange,
-	}: DialProps<T> = $props();
-
-	// `position`, `offset`, `dragging` must all be `$state` so that the
-	// position-syncing `$effect` below re-runs when `dragging` flips back
-	// to `false` at the end of a drag. The previous `let` variables were
-	// invisible to Svelte's reactivity and made the `$effect`'s firing
-	// order depend on `selected` happening to change.
-	//
-	// `position` initialises to 0; the `$effect` below syncs it to the
-	// `selected`-derived position on first run. Reading `selected` /
-	// `values` directly in the initialiser would only capture their
-	// initial values (svelte warning `state_referenced_locally`), and
-	// since the effect already covers that path we keep the initialiser
-	// trivial.
-	let position = $state(0);
-	let offset = $state(0);
-	let dragging = $state(false);
-
-	let itemWrapper: HTMLUListElement | undefined = $state();
-	let previousY = 0;
-
-	// AbortController used to register/clean up window-level
-	// `mousemove`/`mouseup`/`touchmove`/`touchend` listeners. Stored in a
-	// single ref so a stray `mousedown` cannot leak a second set, and so
-	// the cleanup `$effect` below can detach everything on unmount even
-	// if the user navigates away mid-drag.
-	let dragAbort: AbortController | undefined;
-
-	onMount(() => {
-		setPosition();
-	});
-
-	$effect(() => {
-		if (!dragging) {
-			const selectedPosition =
-				selected != null ? -entries.findIndex((e) => e.value === selected) * OPTION_HEIGHT : 0;
-			if (position !== selectedPosition) {
-				position = selectedPosition;
-				setPosition();
-			}
-		}
-	});
-
-	// Ensure any in-flight drag listeners are detached on unmount. The
-	// listeners would otherwise leak if the component unmounted between
-	// `onmousedown` and `onMouseUp` (rare, but possible if the parent
-	// modal closes mid-drag).
-	$effect(() => () => {
-		dragAbort?.abort();
-	});
-
-	function onChange(changedData: T) {
-		onchange({
-			type,
-			changedData,
-		});
-	}
-
-	function setPosition() {
-		if (!itemWrapper) {
-			// Silently no-op if the wrapper has not yet mounted. The previous
-			// `console.warn` fired during the initial render of every dial
-			// and was noise in production logs.
-			return;
-		}
-
-		// Set transform / transition individually rather than rewriting the
-		// full `cssText`. The latter parses the entire declaration string
-		// per mousemove (~60 Hz); `setProperty` skips the parse and only
-		// updates the named declarations. The `transition-duration` scales
-		// with drag inertia, so we still need imperative updates rather
-		// than `style:transform={...}` for the dragging case.
-		const transitionDuration = `${Math.abs(offset) / 100 + 0.1}s`;
-		itemWrapper.style.setProperty('transition', `transform ${transitionDuration}`);
-		itemWrapper.style.setProperty('transform', `translateY(${position}px)`);
-	}
-
-	const onmousedown = (event: MouseEvent | TouchEvent) => {
-		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
-		dragging = true;
-
-		// One AbortController per drag. Attached to all four window
-		// listeners so a single `controller.abort()` detaches everything.
-		dragAbort?.abort();
-		dragAbort = new AbortController();
-		const { signal } = dragAbort;
-
-		window.addEventListener('mousemove', onMouseMove, { signal });
-		window.addEventListener('mouseup', onMouseUp, { signal });
-		window.addEventListener('touchmove', onMouseMove, { signal });
-		window.addEventListener('touchend', onMouseUp, { signal });
-	};
-
-	const onMouseMove = (event: MouseEvent | TouchEvent) => {
-		const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
-		offset = clientY - previousY;
-
-		const maxPosition = -entries.length * OPTION_HEIGHT;
-		const _position = position + offset;
-		position = Math.max(maxPosition, Math.min(OPTION_HEIGHT, _position));
-		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
-		setPosition();
-	};
-
-	const onMouseUp = () => {
-		const maxPosition = -(entries.length - 1) * OPTION_HEIGHT;
-		const rounderPosition = Math.round((position + offset * 5) / OPTION_HEIGHT) * OPTION_HEIGHT;
-		const finalPosition = Math.max(maxPosition, Math.min(0, rounderPosition));
-
-		dragging = false;
-		position = finalPosition;
-
-		dragAbort?.abort();
-		dragAbort = undefined;
-
-		setPosition();
-		onChange(entries[-finalPosition / OPTION_HEIGHT].value);
-	};
-
-	const onwheel = (e: WheelEvent) => {
-		if (e.deltaY > 0) {
-			position = position - OPTION_HEIGHT;
-		}
-		if (e.deltaY < 0) {
-			position = position + OPTION_HEIGHT;
-		}
-		onMouseUp();
-	};
-
-	const handledKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter']);
-	function onkeydown(e: KeyboardEvent) {
-		if (handledKeys.has(e.key)) {
-			e.preventDefault();
-
-			if (e.key === 'ArrowLeft') {
-				onPrevious(type);
-			} else if (e.key === 'ArrowRight') {
-				onNext(type);
-			} else if (e.key === 'ArrowUp') {
-				position = position + OPTION_HEIGHT;
-				onMouseUp();
-			} else if (e.key === 'ArrowDown') {
-				position = position - OPTION_HEIGHT;
-				onMouseUp();
-			} else if (e.key === 'Enter') {
-				onsubmit();
-			}
-		}
-	}
-</script>
-
-<div
-	class="select-wrapper"
-	role="listbox"
-	tabindex="0"
-	bind:this={ref}
-	{onmousedown}
-	ontouchstart={onmousedown}
-	{onwheel}
-	{onkeydown}
->
-	<div class="selected-wrapper">
-		<ul
-			bind:this={itemWrapper}
-			class="touch-date-container"
-		>
-			{#each entries as entry (entry.value)}
-				<li>{entry.label}</li>
-			{/each}
-		</ul>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { Sizing } from '../scss/sizing.js';
+
+	// Pixel height of each dial option. Sourced from `sizing.ts` so the
+	// SCSS partial and TS constant stay in sync (see comment at the top
+	// of `sizing.ts`).
+	const OPTION_HEIGHT: number = Sizing['$dial-option-height'];
+</script>
+
+<script
+	lang="ts"
+	generics="T"
+>
+	import { onMount } from 'svelte';
+	import type { DialProps } from './DialProps.js';
+
+	let {
+		selected,
+		entries,
+		type,
+		ref = $bindable(),
+		onsubmit,
+		onPrevious,
+		onNext,
+		onchange,
+	}: DialProps<T> = $props();
+
+	// `position`, `offset`, `dragging` must all be `$state` so that the
+	// position-syncing `$effect` below re-runs when `dragging` flips back
+	// to `false` at the end of a drag. The previous `let` variables were
+	// invisible to Svelte's reactivity and made the `$effect`'s firing
+	// order depend on `selected` happening to change.
+	//
+	// `position` initialises to 0; the `$effect` below syncs it to the
+	// `selected`-derived position on first run. Reading `selected` /
+	// `values` directly in the initialiser would only capture their
+	// initial values (svelte warning `state_referenced_locally`), and
+	// since the effect already covers that path we keep the initialiser
+	// trivial.
+	let position = $state(0);
+	let offset = $state(0);
+	let dragging = $state(false);
+
+	let itemWrapper: HTMLUListElement | undefined = $state();
+	let previousY = 0;
+
+	// AbortController used to register/clean up window-level
+	// `mousemove`/`mouseup`/`touchmove`/`touchend` listeners. Stored in a
+	// single ref so a stray `mousedown` cannot leak a second set, and so
+	// the cleanup `$effect` below can detach everything on unmount even
+	// if the user navigates away mid-drag.
+	let dragAbort: AbortController | undefined;
+
+	onMount(() => {
+		setPosition();
+	});
+
+	$effect(() => {
+		if (!dragging) {
+			const selectedPosition =
+				selected != null ? -entries.findIndex((e) => e.value === selected) * OPTION_HEIGHT : 0;
+			if (position !== selectedPosition) {
+				position = selectedPosition;
+				setPosition();
+			}
+		}
+	});
+
+	// Ensure any in-flight drag listeners are detached on unmount. The
+	// listeners would otherwise leak if the component unmounted between
+	// `onmousedown` and `onMouseUp` (rare, but possible if the parent
+	// modal closes mid-drag).
+	$effect(() => () => {
+		dragAbort?.abort();
+	});
+
+	function onChange(changedData: T) {
+		onchange({
+			type,
+			changedData,
+		});
+	}
+
+	function setPosition() {
+		if (!itemWrapper) {
+			// Silently no-op if the wrapper has not yet mounted. The previous
+			// `console.warn` fired during the initial render of every dial
+			// and was noise in production logs.
+			return;
+		}
+
+		// Set transform / transition individually rather than rewriting the
+		// full `cssText`. The latter parses the entire declaration string
+		// per mousemove (~60 Hz); `setProperty` skips the parse and only
+		// updates the named declarations. The `transition-duration` scales
+		// with drag inertia, so we still need imperative updates rather
+		// than `style:transform={...}` for the dragging case.
+		const transitionDuration = `${Math.abs(offset) / 100 + 0.1}s`;
+		itemWrapper.style.setProperty('transition', `transform ${transitionDuration}`);
+		itemWrapper.style.setProperty('transform', `translateY(${position}px)`);
+	}
+
+	const onmousedown = (event: MouseEvent | TouchEvent) => {
+		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		dragging = true;
+
+		// One AbortController per drag. Attached to all four window
+		// listeners so a single `controller.abort()` detaches everything.
+		dragAbort?.abort();
+		dragAbort = new AbortController();
+		const { signal } = dragAbort;
+
+		window.addEventListener('mousemove', onMouseMove, { signal });
+		window.addEventListener('mouseup', onMouseUp, { signal });
+		window.addEventListener('touchmove', onMouseMove, { signal });
+		window.addEventListener('touchend', onMouseUp, { signal });
+	};
+
+	const onMouseMove = (event: MouseEvent | TouchEvent) => {
+		const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		offset = clientY - previousY;
+
+		const maxPosition = -entries.length * OPTION_HEIGHT;
+		const _position = position + offset;
+		position = Math.max(maxPosition, Math.min(OPTION_HEIGHT, _position));
+		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		setPosition();
+	};
+
+	const onMouseUp = () => {
+		const maxPosition = -(entries.length - 1) * OPTION_HEIGHT;
+		const rounderPosition = Math.round((position + offset * 5) / OPTION_HEIGHT) * OPTION_HEIGHT;
+		const finalPosition = Math.max(maxPosition, Math.min(0, rounderPosition));
+
+		dragging = false;
+		position = finalPosition;
+
+		dragAbort?.abort();
+		dragAbort = undefined;
+
+		setPosition();
+		onChange(entries[-finalPosition / OPTION_HEIGHT].value);
+	};
+
+	const onwheel = (e: WheelEvent) => {
+		if (e.deltaY > 0) {
+			position = position - OPTION_HEIGHT;
+		}
+		if (e.deltaY < 0) {
+			position = position + OPTION_HEIGHT;
+		}
+		onMouseUp();
+	};
+
+	const handledKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter']);
+	function onkeydown(e: KeyboardEvent) {
+		if (handledKeys.has(e.key)) {
+			e.preventDefault();
+
+			if (e.key === 'ArrowLeft') {
+				onPrevious(type);
+			} else if (e.key === 'ArrowRight') {
+				onNext(type);
+			} else if (e.key === 'ArrowUp') {
+				position = position + OPTION_HEIGHT;
+				onMouseUp();
+			} else if (e.key === 'ArrowDown') {
+				position = position - OPTION_HEIGHT;
+				onMouseUp();
+			} else if (e.key === 'Enter') {
+				onsubmit();
+			}
+		}
+	}
+</script>
+
+<div
+	class="select-wrapper"
+	role="listbox"
+	tabindex="0"
+	bind:this={ref}
+	{onmousedown}
+	ontouchstart={onmousedown}
+	{onwheel}
+	{onkeydown}
+>
+	<div class="selected-wrapper">
+		<ul
+			bind:this={itemWrapper}
+			class="touch-date-container"
+		>
+			{#each entries as entry (entry.value)}
+				<li>{entry.label}</li>
+			{/each}
+		</ul>
+	</div>
+</div>
+
 <style>.select-wrapper {
   --option-height: 50px;
   height: calc(var(--option-height));
@@ -262,4 +262,4 @@
   width: 80px;
   height: var(--option-height);
   user-select: none;
-}</style>
+}</style>