@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Touch/NumberModal.svelte

@@ -1,71 +1,81 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
-	import NumberKeyboard from './NumberKeyboard.svelte';
-	import type { NumberModalProps } from './NumberModalProps.js';
-	import TouchModal from './TouchModal.svelte';
-	let {
-		coerceValue = false,
-		header,
-		value,
-		label,
-		placeholder,
-		min,
-		max,
-		cancelEditing,
-		confirm,
-		decimal,
-		isValid = () => true,
-		explanation
-	}: NumberModalProps = $props();
-
-	let tempValue = $derived(value);
-
-	const isAcceptableValue = $derived(tempValue != null && isValid(tempValue));
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	mandatory
-	onsubmit={(e: SubmitEvent) => {
-		e.preventDefault();
-		if (tempValue == null) {
-			console.warn(`number modal value was null`);
-			return;
-		}
-		confirm(tempValue);
-	}}
-	{explanation}
->
-	<div class="number-input-wrapper">
-		<NumberKeyboard
-			{coerceValue}
-			{min}
-			{max}
-			{label}
-			{placeholder}
-			bind:value={tempValue}
-			{decimal}
-		/>
-	</div>
-	{#snippet footer()}
-		<div class="modal-footer">
-			<button onkeydown={passthrough} type="submit" disabled={!isAcceptableValue}>Confirm</button>
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>Cancel</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
+<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';
+	import TouchModal from './TouchModal.svelte';
+	let {
+		coerceValue = false,
+		header,
+		value,
+		label,
+		placeholder,
+		min,
+		max,
+		cancelEditing,
+		confirm,
+		decimal,
+		isValid,
+		explanation,
+	}: NumberModalProps = $props();
+
+	// 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 = useAsyncFlag(
+		() => (tempValue == null ? false : (isValid?.(tempValue) ?? true)),
+		false
+	);
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	mandatory
+	onsubmit={(e: SubmitEvent) => {
+		e.preventDefault();
+		if (tempValue == null) {
+			return;
+		}
+		confirm(tempValue);
+	}}
+	{explanation}
+>
+	<div class="number-input-wrapper">
+		<NumberKeyboard
+			{coerceValue}
+			{min}
+			{max}
+			{label}
+			{placeholder}
+			bind:value={tempValue}
+			{decimal}
+		/>
+	</div>
+	{#snippet footer()}
+		<div class="modal-footer">
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isAcceptableValue.value}>Confirm</button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -326,4 +336,4 @@ button {
 }
 .modal-footer button[type=submit]:not([disabled]):focus {
   outline-offset: -2px;
-}</style>
+}</style>

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,52 +1,48 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	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>
-
-<script lang="ts">
-	let { callback, disabled = false, children }: PlusMinusCardProps = $props();
-</script>
-
-<div class="card pad-right" class:disabled>
-	<div class="icon-left">
-		<Action
-			{disabled}
-			label="decrement"
-			onclick={() => {
-				callback(-1);
-			}}
-			icon={{
-				name: 'circle-minus',
-				size: Size.DoubleXLarge
-			}}
-			size={Size.DoubleXLarge}
-		/>
-	</div>
-	<span class="value">{@render children()}</span>
-	<div class="icon-right">
-		<Action
-			{disabled}
-			label="increment"
-			onclick={() => {
-				callback(1);
-			}}
-			icon={{
-				name: 'circle-plus',
-				size: Size.DoubleXLarge
-			}}
-			size={Size.DoubleXLarge}
-		/>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { Size } from '../../Types/Internal/Size.js';
+	import Action from '../Action.svelte';
+	import type { PlusMinusCardProps } from './PlusMinusCardProps.js';
+
+	let { callback, disabled = false, children }: PlusMinusCardProps = $props();
+</script>
+
+<div
+	class="card pad-right"
+	class:disabled
+>
+	<div class="icon-left">
+		<Action
+			{disabled}
+			label="Decrement"
+			onclick={() => {
+				callback(-1);
+			}}
+			icon={{
+				name: 'circle-minus',
+				size: Size.DoubleXLarge,
+			}}
+			size={Size.DoubleXLarge}
+		/>
+	</div>
+	<span class="value">{@render children()}</span>
+	<div class="icon-right">
+		<Action
+			{disabled}
+			label="Increment"
+			onclick={() => {
+				callback(1);
+			}}
+			icon={{
+				name: 'circle-plus',
+				size: Size.DoubleXLarge,
+			}}
+			size={Size.DoubleXLarge}
+		/>
+	</div>
+</div>
+
 <style>.card {
   color: #3a4952;
   fill: #3a4952;
@@ -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 {
@@ -95,4 +91,4 @@
 .card.disabled {
   background-color: #f4f7f9;
   color: #8096a5;
-}</style>
+}</style>

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

@@ -1,107 +1,125 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { InputVariant } from '../../Types/Internal/InputVariant.js';
-	import { onMount, tick } from 'svelte';
-	import TextInput from '../TextInput.svelte';
-	import type { SelectModalProps } from './SelectModalProps.js';
-	import TouchModal from './TouchModal.svelte';
-	const {
-		header,
-		searchbar = false,
-		choices,
-		cancelEditing,
-		selected
-	}: SelectModalProps = $props();
-
-	let selectedRef: HTMLButtonElement | undefined = $state();
-	let searchValue = $state('');
-
-	const filteredChoices = $derived(
-		searchbar
-			? choices.filter((it) =>
-					it.label.toLocaleUpperCase().includes(searchValue.toLocaleUpperCase())
-				)
-			: choices
-	);
-
-	onMount(() => {
-		tick()
-			.then(() => {
-				if (selected) {
-					selectedRef?.scrollIntoView({ block: 'center', inline: 'center' });
-					if (!searchbar) {
-						selectedRef?.focus();
-					}
-				}
-			})
-			.catch(devCatch);
-	});
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	mandatory
-	staticHeight
-	onsubmit={(e: SubmitEvent) => {
-		e.preventDefault();
-		if (searchbar) {
-			filteredChoices[0]?.callback?.()?.catch(devCatch);
-		}
-	}}
->
-	<div class="select-container" class:with-top-padding={!searchbar}>
-		{#if filteredChoices.length === 0}
-			<span>No Results</span>
-		{/if}
-		{#each filteredChoices as choice (choice)}
-			{#if selected === choice.label}
-				{#if choice.callback}
-					<button
-						onkeydown={passthrough}
-						bind:this={selectedRef}
-						type="button"
-						onclick={() => choice.callback?.()}>{choice.label}</button
-					>
-				{:else}
-					<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
-				>
-			{:else}
-				<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>
-	{/snippet}
-
-	{#snippet footer()}
-		<div class="cancel-container">
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>Cancel</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { InputVariant } from '../../Types/Internal/InputVariant.js';
+	import { onMount, tick } from 'svelte';
+	import TextInput from '../TextInput.svelte';
+	import type { SelectModalProps } from './SelectModalProps.js';
+	import TouchModal from './TouchModal.svelte';
+
+	const {
+		header,
+		searchbar = false,
+		choices,
+		cancelEditing,
+		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(searchNeedle))
+			: choices
+	);
+
+	onMount(() => {
+		tick()
+			.then(() => {
+				if (selected) {
+					selectedRef?.scrollIntoView({ block: 'center', inline: 'center' });
+					if (!searchbar) {
+						selectedRef?.focus();
+					}
+				}
+			})
+			.catch(devCatch);
+	});
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	mandatory
+	staticHeight
+	onsubmit={(e: SubmitEvent) => {
+		e.preventDefault();
+		if (searchbar) {
+			filteredChoices[0]?.callback?.()?.catch(devCatch);
+		}
+	}}
+>
+	<div
+		class="select-container"
+		class:with-top-padding={!searchbar}
+	>
+		{#if filteredChoices.length === 0}
+			<span>No Results</span>
+		{/if}
+		{#each filteredChoices as choice (choice.label)}
+			{#if selected === choice.label}
+				{#if choice.callback}
+					<button
+						onkeydown={passthrough}
+						bind:this={selectedRef}
+						type="button"
+						onclick={() => choice.callback?.()}>{choice.label}</button
+					>
+				{:else}
+					<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
+				>
+			{:else}
+				<button
+					onkeydown={passthrough}
+					type={choice.type}>{choice.label}</button
+				>
+			{/if}
+		{/each}
+	</div>
+
+	{#snippet headerExtra()}
+		{#if searchbar}
+			<div class="header-extra visible">
+				<TextInput
+					labelTop="Search"
+					bind:value={searchValue}
+					variant={InputVariant.Modal}
+				/>
+			</div>
+		{/if}
+	{/snippet}
+
+	{#snippet footer()}
+		<div class="cancel-container">
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -347,4 +365,4 @@ button {
 
 button {
   align-items: center;
-}</style>
+}</style>

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;
 }