@lavalogic/scoria 0.36.0 → 0.37.0

package/dist/Components/Touch/NumberKeyboard.svelte

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts">
+<script
+	module
+	lang="ts"
+>
 	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
 	import { InputVariant } from '../../Types/Internal/InputVariant.js';
 	import { tick, untrack } from 'svelte';
@@ -8,6 +11,10 @@
 	import TextInput from '../TextInput.svelte';
 	import type { NumberKeyboardProps } from './NumberKeyboardProps.js';
 
+	const DIGITS = Object.freeze([1, 2, 3, 4, 5, 6, 7, 8, 9] as const);
+</script>
+
+<script lang="ts">
 	let {
 		value = $bindable(null),
 		label,
@@ -37,7 +44,9 @@
 	);
 
 	function getDecimalValue(): string {
-		//HACK this absolutely moronic line is intentional. It's the best way to allow arbitrary decimal places without adding leading zeroes
+		// Use toFixed to bound decimal places, then parseFloat to drop trailing
+		// zeros without re-introducing scientific notation. There is no built-in
+		// "as many decimals as requested but no more" formatter.
 		return value ? parseFloat(value.toFixed(decimalPlaces)).toString() : '';
 	}
 
@@ -50,33 +59,30 @@
 	});
 
 	$effect(() => {
-		{
-			if (coerceValue) {
-				const v =
-					min != undefined && newValue != null && min > newValue
-						? min
-						: max != undefined && newValue != null && max < newValue
-							? max
-							: newValue;
+		if (coerceValue) {
+			const v =
+				min != undefined && newValue != null && min > newValue
+					? min
+					: max != undefined && newValue != null && max < newValue
+						? max
+						: newValue;
 
-				value = v;
-			} else {
-				value = newValue;
-			}
-
-			untrack(() => {
-				refocus();
-			});
+			value = v;
+		} else {
+			value = newValue;
 		}
 	});
 
 	function refocus() {
 		tick()
 			.then(() => {
-				inputRef?.focus();
+				if (inputRef && document.activeElement !== inputRef) {
+					inputRef.focus();
+				}
 			})
 			.catch(devCatch);
 	}
+
 	function getPrevValue() {
 		if (inputRef) {
 			if (
@@ -91,7 +97,7 @@
 
 	function addDecimal() {
 		_value = getPrevValue() + '.';
-		refocus();
+		untrack(refocus);
 	}
 
 	/* due to the fact that number inputs won't allow a leading dot, we have to use a text input 
@@ -106,22 +112,43 @@
 		const preVvalue = getPrevValue();
 		const v = preVvalue && _value.slice(0, _value.length - 1);
 		_value = v;
+		untrack(refocus);
 	}
 
 	function minus() {
 		const v = ((decimal ? parseFloat(_value) : parseInt(_value)) || 0) - 1;
 
 		_value = (min != null ? Math.max(min, v) : v).toString();
+		untrack(refocus);
 	}
 
 	function plus() {
 		const v = ((decimal ? parseFloat(_value) : parseInt(_value)) || 0) + 1;
 
 		_value = (max != null ? Math.min(max, v) : v).toString();
+		untrack(refocus);
 	}
 
 	const lessThanMin = $derived(min != null && (value == null || value < min));
 	const moreThanMax = $derived(max != null && (value == null || value > max));
+
+	// Precompute disabled state per digit so the 10 buttons do not each evaluate
+	// the same arithmetic on every render.
+	const digitDisabled = $derived.by(() => {
+		const out = new Array<boolean>(10);
+		const base = (value ?? 0) * 10;
+		for (let i = 0; i < 10; i++) {
+			out[i] = max != null && base + i > max;
+		}
+		return out;
+	});
+
+	function onDigitClick(e: MouseEvent) {
+		const digit = (e.currentTarget as HTMLButtonElement).dataset.digit;
+		if (digit != null) {
+			addDigit(digit);
+		}
+	}
 </script>
 
 <div class="number-input-wrapper">
@@ -153,93 +180,26 @@
 				onkeydown={passthrough}
 				type="button"
 				disabled={value != null && min != null && value <= min}
-				onclick={() => {
-					minus();
-				}}><Icon name="minus" /></button
+				onclick={minus}><Icon name="minus" /></button
 			>
 			<button
 				onkeydown={passthrough}
 				type="button"
 				disabled={value != null && max != null && value >= max}
-				onclick={() => {
-					plus();
-				}}><Icon name="plus" /></button
+				onclick={plus}><Icon name="plus" /></button
 			>
 		</div>
 	</div>
 	<div class="number-grid">
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 1 > max) || false}
-			onclick={() => {
-				addDigit('1');
-			}}>1</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 2 > max) || false}
-			onclick={() => {
-				addDigit('2');
-			}}>2</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 3 > max) || false}
-			onclick={() => {
-				addDigit('3');
-			}}>3</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 4 > max) || false}
-			onclick={() => {
-				addDigit('4');
-			}}>4</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 5 > max) || false}
-			onclick={() => {
-				addDigit('5');
-			}}>5</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 6 > max) || false}
-			onclick={() => {
-				addDigit('6');
-			}}>6</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 7 > max) || false}
-			onclick={() => {
-				addDigit('7');
-			}}>7</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 8 > max) || false}
-			onclick={() => {
-				addDigit('8');
-			}}>8</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 9 > max) || false}
-			onclick={() => {
-				addDigit('9');
-			}}>9</button
-		>
+		{#each DIGITS as digit (digit)}
+			<button
+				onkeydown={passthrough}
+				type="button"
+				data-digit={digit}
+				disabled={digitDisabled[digit]}
+				onclick={onDigitClick}>{digit}</button
+			>
+		{/each}
 		<button
 			onkeydown={passthrough}
 			type="button"
@@ -249,18 +209,15 @@
 		<button
 			onkeydown={passthrough}
 			type="button"
-			disabled={(value != null && max && (value * 10 || 0) > max) || false}
-			onclick={() => {
-				addDigit('0');
-			}}>0</button
+			data-digit="0"
+			disabled={digitDisabled[0]}
+			onclick={onDigitClick}>0</button
 		>
 		<button
 			onkeydown={passthrough}
 			type="button"
 			disabled={_value.length === 0}
-			onclick={() => {
-				backspace();
-			}}>⌫</button
+			onclick={backspace}>⌫</button
 		>
 	</div>
 </div>

package/dist/Components/Touch/NumberKeyboardProps.d.ts

@@ -1,11 +1,30 @@
+/**
+ * Props for `NumberKeyboard`, the on-screen numeric keypad used by
+ * `NumberModal` and standalone touch flows. Tracks its value as a string
+ * internally (because `<input type="number">` cannot host a leading dot)
+ * and surfaces a parsed `number | null` via the bindable `value`.
+ */
 export interface NumberKeyboardProps {
+    /** Current numeric value. Bindable. `null` when the field is empty. */
     value: number | null;
+    /** Label rendered above the input. */
     label?: string | undefined;
+    /** Trailing label rendered to the right of the input. */
     labelRight?: string;
+    /** Placeholder text shown when the value is empty. */
     placeholder?: string | undefined;
+    /** Lower bound. Used both for validation and to clamp when `coerceValue` is true. */
     min?: number | undefined;
+    /** Upper bound. Also disables digit buttons that would exceed it. */
     max?: number | undefined;
+    /** When true, the keypad permits a decimal separator. Defaults to false. */
     decimal?: boolean;
+    /** Two-way bindable reference to the underlying input element. */
     inputRef?: HTMLInputElement | undefined;
+    /**
+     * When true, values are clamped to `[min, max]` before being written
+     * back to `value`. When false, the value is reflected as typed and the
+     * caller is expected to validate.
+     */
     coerceValue?: boolean;
 }

package/dist/Components/Touch/NumberModal.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
+	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
 	import { passthrough } from '../../Helpers/Helpers.svelte.js';
 	import NumberKeyboard from './NumberKeyboard.svelte';
 	import type { NumberModalProps } from './NumberModalProps.js';
@@ -16,13 +17,19 @@
 		cancelEditing,
 		confirm,
 		decimal,
-		isValid = () => true,
-		explanation
+		isValid,
+		explanation,
 	}: NumberModalProps = $props();
 
-	let tempValue = $derived(value);
+	// Mirror external `value` snapshots into a writable derived. Reads from
+	// `value` are tracked; writes happen through the assignment binding
+	// fed back to `NumberKeyboard`.
+	let tempValue: number | null = $derived(value);
 
-	const isAcceptableValue = $derived(tempValue != null && isValid(tempValue));
+	const isAcceptableValue = useAsyncFlag(
+		() => (tempValue == null ? false : (isValid?.(tempValue) ?? true)),
+		false
+	);
 </script>
 
 <TouchModal
@@ -34,7 +41,6 @@
 	onsubmit={(e: SubmitEvent) => {
 		e.preventDefault();
 		if (tempValue == null) {
-			console.warn(`number modal value was null`);
 			return;
 		}
 		confirm(tempValue);
@@ -54,7 +60,11 @@
 	</div>
 	{#snippet footer()}
 		<div class="modal-footer">
-			<button onkeydown={passthrough} type="submit" disabled={!isAcceptableValue}>Confirm</button>
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isAcceptableValue.value}>Confirm</button
+			>
 			<button
 				onkeydown={passthrough}
 				type="button"

package/dist/Components/Touch/NumberModalProps.d.ts

@@ -1,15 +1,37 @@
+import type { AsyncFlag } from '../../Types/Internal/AsyncFlag.js';
 import type { Snippet } from 'svelte';
+/**
+ * Props for `NumberModal`, the touch-friendly modal that hosts a
+ * `NumberKeyboard` and surfaces the entered value through a confirm
+ * callback. Internally wraps `TouchModal`.
+ */
 export interface NumberModalProps {
+    /** Header text shown in the modal title bar. */
     header: string;
+    /** Initial numeric value, or `null` when no value is yet entered. */
     value: number | null;
+    /** Fires when the user cancels (close button, Escape on non-mandatory). */
     cancelEditing: () => void;
+    /** Fires when the user confirms a value. Receives the non-null entered value. */
     confirm: (value: number) => void;
-    isValid?: (value: number) => boolean;
+    /**
+     * Optional validator. Accepts a bare boolean or a Promise of one
+     * (via {@link AsyncFlag}). When the resolved value is `false`, the
+     * confirm button is disabled.
+     */
+    isValid?: (value: number) => AsyncFlag<boolean>;
+    /** Label rendered above the input in the keypad. */
     label?: string;
+    /** Placeholder text shown when the value is empty. */
     placeholder?: string;
+    /** Lower numeric bound. */
     min?: number;
+    /** Upper numeric bound. */
     max?: number;
+    /** Optional explanation snippet rendered above the keypad. */
     explanation?: Snippet;
+    /** Permit a decimal separator in the keypad. */
     decimal?: boolean;
+    /** Clamp the value into `[min, max]` rather than reflecting raw input. */
     coerceValue?: boolean;
 }

package/dist/Components/Touch/PlusMinusCard.svelte

@@ -1,31 +1,27 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script lang="ts">
 	import { Size } from '../../Types/Internal/Size.js';
-	import type { Snippet } from 'svelte';
 	import Action from '../Action.svelte';
-	export interface PlusMinusCardProps {
-		callback: (diff: number) => void;
-		children: Snippet;
-		disabled?: boolean;
-	}
-</script>
+	import type { PlusMinusCardProps } from './PlusMinusCardProps.js';
 
-<script lang="ts">
 	let { callback, disabled = false, children }: PlusMinusCardProps = $props();
 </script>
 
-<div class="card pad-right" class:disabled>
+<div
+	class="card pad-right"
+	class:disabled
+>
 	<div class="icon-left">
 		<Action
 			{disabled}
-			label="decrement"
+			label="Decrement"
 			onclick={() => {
 				callback(-1);
 			}}
 			icon={{
 				name: 'circle-minus',
-				size: Size.DoubleXLarge
+				size: Size.DoubleXLarge,
 			}}
 			size={Size.DoubleXLarge}
 		/>
@@ -34,13 +30,13 @@
 	<div class="icon-right">
 		<Action
 			{disabled}
-			label="increment"
+			label="Increment"
 			onclick={() => {
 				callback(1);
 			}}
 			icon={{
 				name: 'circle-plus',
-				size: Size.DoubleXLarge
+				size: Size.DoubleXLarge,
 			}}
 			size={Size.DoubleXLarge}
 		/>
@@ -82,8 +78,8 @@
   user-select: none;
   justify-content: center;
   text-align: center;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
 }
 .card .icon-left,
 .card .icon-right {

package/dist/Components/Touch/PlusMinusCard.svelte.d.ts

@@ -1,9 +1,4 @@
-import type { Snippet } from 'svelte';
-export interface PlusMinusCardProps {
-    callback: (diff: number) => void;
-    children: Snippet;
-    disabled?: boolean;
-}
+import type { PlusMinusCardProps } from './PlusMinusCardProps.js';
 declare const PlusMinusCard: import("svelte").Component<PlusMinusCardProps, {}, "">;
 type PlusMinusCard = ReturnType<typeof PlusMinusCard>;
 export default PlusMinusCard;

package/dist/Components/Touch/PlusMinusCardProps.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+/**
+ * Props for `PlusMinusCard`, a touch-friendly card with a centred value
+ * flanked by decrement (-1) and increment (+1) buttons. The card itself
+ * does not own the value; it invokes `callback` with the requested
+ * delta (-1 or +1) and expects the caller to update the bound state.
+ */
+export interface PlusMinusCardProps {
+    /**
+     * Fires when the user taps decrement or increment. Receives the delta
+     * to apply: -1 for decrement, +1 for increment.
+     */
+    callback: (diff: number) => void;
+    /** Value snippet rendered between the two buttons. */
+    children: Snippet;
+    /** Disable both buttons and visually mute the card. */
+    disabled?: boolean;
+}

package/dist/Components/Touch/PlusMinusCardProps.js

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

package/dist/Components/Touch/SelectModal.svelte

@@ -7,22 +7,25 @@
 	import TextInput from '../TextInput.svelte';
 	import type { SelectModalProps } from './SelectModalProps.js';
 	import TouchModal from './TouchModal.svelte';
+
 	const {
 		header,
 		searchbar = false,
 		choices,
 		cancelEditing,
-		selected
+		selected,
 	}: SelectModalProps = $props();
 
 	let selectedRef: HTMLButtonElement | undefined = $state();
 	let searchValue = $state('');
 
+	// Cache the search needle's upper-case form so we do not re-upper-case
+	// the same string on every keystroke per choice. Per-label upper-casing
+	// is unavoidable but the needle is constant across the filter pass.
+	const searchNeedle = $derived(searchValue.toLocaleUpperCase());
 	const filteredChoices = $derived(
 		searchbar
-			? choices.filter((it) =>
-					it.label.toLocaleUpperCase().includes(searchValue.toLocaleUpperCase())
-				)
+			? choices.filter((it) => it.label.toLocaleUpperCase().includes(searchNeedle))
 			: choices
 	);
 
@@ -54,11 +57,14 @@
 		}
 	}}
 >
-	<div class="select-container" class:with-top-padding={!searchbar}>
+	<div
+		class="select-container"
+		class:with-top-padding={!searchbar}
+	>
 		{#if filteredChoices.length === 0}
 			<span>No Results</span>
 		{/if}
-		{#each filteredChoices as choice (choice)}
+		{#each filteredChoices as choice (choice.label)}
 			{#if selected === choice.label}
 				{#if choice.callback}
 					<button
@@ -68,25 +74,37 @@
 						onclick={() => choice.callback?.()}>{choice.label}</button
 					>
 				{:else}
-					<button onkeydown={passthrough} bind:this={selectedRef} type={choice.type}
-						>{choice.label}</button
+					<button
+						onkeydown={passthrough}
+						bind:this={selectedRef}
+						type={choice.type}>{choice.label}</button
 					>
 				{/if}
 			{:else if choice.callback}
-				<button onkeydown={passthrough} type="button" onclick={() => choice.callback?.()}
-					>{choice.label}</button
+				<button
+					onkeydown={passthrough}
+					type="button"
+					onclick={() => choice.callback?.()}>{choice.label}</button
 				>
 			{:else}
-				<button onkeydown={passthrough} type={choice.type}>{choice.label}</button>
+				<button
+					onkeydown={passthrough}
+					type={choice.type}>{choice.label}</button
+				>
 			{/if}
 		{/each}
 	</div>
 
-	<!-- TODO move this snippet above once the plugin bug is fixed -->
 	{#snippet headerExtra()}
-		<div class:visible={searchbar} class="header-extra">
-			<TextInput labelTop="Search" bind:value={searchValue} variant={InputVariant.Modal} />
-		</div>
+		{#if searchbar}
+			<div class="header-extra visible">
+				<TextInput
+					labelTop="Search"
+					bind:value={searchValue}
+					variant={InputVariant.Modal}
+				/>
+			</div>
+		{/if}
 	{/snippet}
 
 	{#snippet footer()}

package/dist/Components/Touch/SelectModalProps.d.ts

@@ -1,8 +1,29 @@
 import type { CallbackButton } from '../../Types/Internal/CallbackButton.js';
+/**
+ * Props for `SelectModal`, the touch-friendly list-of-choices modal.
+ * Renders each choice as a large button, with an optional search bar
+ * filtering the list. Internally wraps `TouchModal`.
+ */
 export interface SelectModalProps {
+    /** Header text shown in the modal title bar. */
     header: string;
-    choices: Array<CallbackButton>;
+    /**
+     * Choices rendered as buttons. Treated as read-only; the modal does
+     * not mutate the array. Each entry's `label` doubles as the each-block
+     * key and as the selected-choice identifier.
+     */
+    choices: ReadonlyArray<CallbackButton>;
+    /** Fires when the user cancels (Cancel button or Escape). */
     cancelEditing: () => void;
+    /**
+     * Render a search input above the list that case-insensitively filters
+     * choices by `label`. Pressing Enter (form submit) invokes the first
+     * filtered choice's callback. Defaults to false.
+     */
     searchbar?: boolean;
+    /**
+     * Label of the currently-selected choice. The matching button is
+     * scrolled into view on mount and focused when no search bar is shown.
+     */
     selected?: CallbackButton['label'] | null;
 }