@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/Base/Pagination.svelte

@@ -1,200 +1,200 @@
-<svelte:options runes />
-
-<!--
-@component
-Generic local-collection paginator. Renders a window of items via a
-`snippet` plus a control bar with page-number buttons, a jump-to-page
-input, and previous/next buttons. The component is generic over
-`T extends object` with a `key: keyof T` used as the
-`{#each}` key inside the rendered page.
-
-### Usage
-
-```svelte
-<Pagination snippet={itemSnippet} pageSize={20} items={dataWrapper.value} key="id" />
-```
-
-The `pageButtons` window (up to five numbered buttons) is recomputed
-via `$derived`, not via an `$effect`, so the page bar diffs in a
-single reactive pass and the keyed `{#each pageButtons as page ...}`
-preserves button identity across page changes.
--->
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import { autoPluralise, generateWeakId } from '../../Helpers/Helpers.svelte.js';
-	import { Colour } from '../../scss/colours.js';
-	import { Side } from '../../Types/Internal/Side.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import { Variant } from '../../Types/Internal/Variant.js';
-	import Button from '../Button.svelte';
-	import Icon from '../Icon.svelte';
-	import NumberInput from '../NumberInput.svelte';
-	import type { PaginationProps } from './PaginationProps.js';
-
-	const {
-		items,
-		key,
-		pageSize = 20,
-		snippet,
-		itemName = 'Item',
-		border = false,
-		padding = '1.5rem', // sizing.$regular-padding
-		gap = '1.5rem', // sizing.$regular-gap
-		height,
-	}: PaginationProps<T> = $props();
-
-	const _uuid = generateWeakId();
-	let pageIndex = $state(0);
-	const pageValue = $derived(pageIndex + 1);
-	const startIndex = $derived(pageIndex * pageSize);
-	const pageItems = $derived(items.slice(startIndex, startIndex + pageSize));
-
-	const lastPage = $derived(Math.ceil(items.length / pageSize));
-	const lastPageIndex = $derived(lastPage - 1);
-
-	// Debounced jump-to-page handler. Reads the raw event because the
-	// debounce drives state, not the input value directly; binding to
-	// `pageValue` would defeat the debounce.
-	let debounceTimeout = -1;
-	function onNumberInput(e: Event) {
-		const value = (e.target as HTMLInputElement).value;
-		const page = Number(value);
-
-		clearTimeout(debounceTimeout);
-		if (!isNaN(page)) {
-			debounceTimeout = setTimeout(() => {
-				pageIndex = Math.max(page - 1, 0);
-			}, 400) as unknown as number;
-		}
-	}
-
-	/**
-	 * Compute the window of up to five page numbers shown in the
-	 * control bar. Centred on the current page where possible and
-	 * clamped against both ends. Pulled into a stand-alone helper so
-	 * the windowing logic is unit-testable from outside the component.
-	 */
-	function getPageWindow(
-		currentIndex: number,
-		totalPages: number,
-		windowSize: number
-	): Array<number> {
-		const start = Math.min(totalPages - 2, currentIndex - 1);
-		const clampedStart = Math.max(1, Math.min(start, totalPages - (windowSize - 1)));
-		const count = Math.min(totalPages, windowSize);
-		const out = new Array<number>(count);
-		for (let i = 0; i < count; i++) {
-			out[i] = clampedStart + i;
-		}
-		return out;
-	}
-
-	const pageButtons = $derived(getPageWindow(pageIndex, lastPage, 5));
-</script>
-
-<div
-	class="wrapper"
-	class:border
-	style:padding
-	style:gap
-	style:height
->
-	{#each pageItems as item, index (item[key])}
-		{@render snippet(item, index)}
-	{/each}
-	<div class="spread_row bottom_row">
-		<div class="block">
-			<span>{items.length} {autoPluralise(itemName, items.length)}</span>
-		</div>
-
-		<div class="block records-per-page">
-			<span>Records per Page: {pageSize}</span>
-		</div>
-
-		<div class="spacer"></div>
-
-		<div
-			class="scrollable"
-			role="navigation"
-			aria-label="Pagination"
-		>
-			<div class="block">
-				<Icon
-					name="paper"
-					colour={Colour['$ui-blue-6']}
-				/>
-				<span>{lastPage} {autoPluralise('Page', lastPage)}</span>
-			</div>
-
-			<div class="block">
-				<label for="{_uuid}-jump-to-page"
-					><Icon
-						name="arrow-move-horizontal"
-						colour={Colour['$ui-blue-6']}
-					/></label
-				>
-
-				<label for="{_uuid}-jump-to-page">Jump to page:</label>
-
-				<NumberInput
-					id="{_uuid}-jump-to-page"
-					value={pageValue}
-					oninput={onNumberInput}
-				/>
-			</div>
-
-			<div class="block nopad page-arrow">
-				<Button
-					variant={Variant.Toolbar}
-					disabled={pageIndex === 0}
-					side={Side.Bottom}
-					onclick={() => {
-						pageIndex = Math.max(pageIndex - 1, 0);
-					}}
-					size={Size.FillHeight}
-					iconLeft={{
-						name: 'left-close',
-						size: Size.FillHeight,
-					}}>Previous Page</Button
-				>
-			</div>
-
-			{#each pageButtons as pageNumber (pageNumber)}
-				<div class="block nopad">
-					<Button
-						variant={Variant.Toolbar}
-						side={Side.Bottom}
-						size={Size.FillHeight}
-						toggled={pageIndex + 1 === pageNumber}
-						label={`Go to page ${pageNumber.toString()}`}
-						onclick={() => {
-							pageIndex = pageNumber - 1;
-						}}>{pageNumber}</Button
-					>
-				</div>
-			{/each}
-
-			<div class="block nopad page-arrow">
-				<Button
-					variant={Variant.Toolbar}
-					side={Side.Bottom}
-					size={Size.FillHeight}
-					onclick={() => {
-						pageIndex = Math.min(pageIndex + 1, lastPageIndex);
-					}}
-					disabled={pageIndex == lastPageIndex}
-					iconRight={{
-						name: 'right-close',
-						size: Size.FillHeight,
-					}}>Next Page</Button
-				>
-			</div>
-		</div>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<!--
+@component
+Generic local-collection paginator. Renders a window of items via a
+`snippet` plus a control bar with page-number buttons, a jump-to-page
+input, and previous/next buttons. The component is generic over
+`T extends object` with a `key: keyof T` used as the
+`{#each}` key inside the rendered page.
+
+### Usage
+
+```svelte
+<Pagination snippet={itemSnippet} pageSize={20} items={dataWrapper.value} key="id" />
+```
+
+The `pageButtons` window (up to five numbered buttons) is recomputed
+via `$derived`, not via an `$effect`, so the page bar diffs in a
+single reactive pass and the keyed `{#each pageButtons as page ...}`
+preserves button identity across page changes.
+-->
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	import { autoPluralise, generateWeakId } from '../../Helpers/Helpers.svelte.js';
+	import { Colour } from '../../scss/colours.js';
+	import { Side } from '../../Types/Internal/Side.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import { Variant } from '../../Types/Internal/Variant.js';
+	import Button from '../Button.svelte';
+	import Icon from '../Icon.svelte';
+	import NumberInput from '../NumberInput.svelte';
+	import type { PaginationProps } from './PaginationProps.js';
+
+	const {
+		items,
+		key,
+		pageSize = 20,
+		snippet,
+		itemName = 'Item',
+		border = false,
+		padding = '1.5rem', // sizing.$regular-padding
+		gap = '1.5rem', // sizing.$regular-gap
+		height,
+	}: PaginationProps<T> = $props();
+
+	const _uuid = generateWeakId();
+	let pageIndex = $state(0);
+	const pageValue = $derived(pageIndex + 1);
+	const startIndex = $derived(pageIndex * pageSize);
+	const pageItems = $derived(items.slice(startIndex, startIndex + pageSize));
+
+	const lastPage = $derived(Math.ceil(items.length / pageSize));
+	const lastPageIndex = $derived(lastPage - 1);
+
+	// Debounced jump-to-page handler. Reads the raw event because the
+	// debounce drives state, not the input value directly; binding to
+	// `pageValue` would defeat the debounce.
+	let debounceTimeout = -1;
+	function onNumberInput(e: Event) {
+		const value = (e.target as HTMLInputElement).value;
+		const page = Number(value);
+
+		clearTimeout(debounceTimeout);
+		if (!isNaN(page)) {
+			debounceTimeout = setTimeout(() => {
+				pageIndex = Math.max(page - 1, 0);
+			}, 400) as unknown as number;
+		}
+	}
+
+	/**
+	 * Compute the window of up to five page numbers shown in the
+	 * control bar. Centred on the current page where possible and
+	 * clamped against both ends. Pulled into a stand-alone helper so
+	 * the windowing logic is unit-testable from outside the component.
+	 */
+	function getPageWindow(
+		currentIndex: number,
+		totalPages: number,
+		windowSize: number
+	): Array<number> {
+		const start = Math.min(totalPages - 2, currentIndex - 1);
+		const clampedStart = Math.max(1, Math.min(start, totalPages - (windowSize - 1)));
+		const count = Math.min(totalPages, windowSize);
+		const out = new Array<number>(count);
+		for (let i = 0; i < count; i++) {
+			out[i] = clampedStart + i;
+		}
+		return out;
+	}
+
+	const pageButtons = $derived(getPageWindow(pageIndex, lastPage, 5));
+</script>
+
+<div
+	class="wrapper"
+	class:border
+	style:padding
+	style:gap
+	style:height
+>
+	{#each pageItems as item, index (item[key])}
+		{@render snippet(item, index)}
+	{/each}
+	<div class="spread_row bottom_row">
+		<div class="block">
+			<span>{items.length} {autoPluralise(itemName, items.length)}</span>
+		</div>
+
+		<div class="block records-per-page">
+			<span>Records per Page: {pageSize}</span>
+		</div>
+
+		<div class="spacer"></div>
+
+		<div
+			class="scrollable"
+			role="navigation"
+			aria-label="Pagination"
+		>
+			<div class="block">
+				<Icon
+					name="paper"
+					colour={Colour['$ui-blue-6']}
+				/>
+				<span>{lastPage} {autoPluralise('Page', lastPage)}</span>
+			</div>
+
+			<div class="block">
+				<label for="{_uuid}-jump-to-page"
+					><Icon
+						name="arrow-move-horizontal"
+						colour={Colour['$ui-blue-6']}
+					/></label
+				>
+
+				<label for="{_uuid}-jump-to-page">Jump to page:</label>
+
+				<NumberInput
+					id="{_uuid}-jump-to-page"
+					value={pageValue}
+					oninput={onNumberInput}
+				/>
+			</div>
+
+			<div class="block nopad page-arrow">
+				<Button
+					variant={Variant.Toolbar}
+					disabled={pageIndex === 0}
+					side={Side.Bottom}
+					onclick={() => {
+						pageIndex = Math.max(pageIndex - 1, 0);
+					}}
+					size={Size.FillHeight}
+					iconLeft={{
+						name: 'left-close',
+						size: Size.FillHeight,
+					}}>Previous Page</Button
+				>
+			</div>
+
+			{#each pageButtons as pageNumber (pageNumber)}
+				<div class="block nopad">
+					<Button
+						variant={Variant.Toolbar}
+						side={Side.Bottom}
+						size={Size.FillHeight}
+						toggled={pageIndex + 1 === pageNumber}
+						label={`Go to page ${pageNumber.toString()}`}
+						onclick={() => {
+							pageIndex = pageNumber - 1;
+						}}>{pageNumber}</Button
+					>
+				</div>
+			{/each}
+
+			<div class="block nopad page-arrow">
+				<Button
+					variant={Variant.Toolbar}
+					side={Side.Bottom}
+					size={Size.FillHeight}
+					onclick={() => {
+						pageIndex = Math.min(pageIndex + 1, lastPageIndex);
+					}}
+					disabled={pageIndex == lastPageIndex}
+					iconRight={{
+						name: 'right-close',
+						size: Size.FillHeight,
+					}}>Next Page</Button
+				>
+			</div>
+		</div>
+	</div>
+</div>
+
 <style>.wrapper {
   display: flex;
   flex: 1;
@@ -269,4 +269,4 @@ preserves button identity across page changes.
 }
 .spread_row .spacer {
   flex-grow: 2;
-}</style>
+}</style>

package/dist/Components/Base/Snippets.svelte

@@ -1,36 +1,36 @@
-<svelte:options runes />
-
-<!-- @component
-An empty component that only exists to export common snippets
-(`pending` and `failed`) for re-use by `{#await}` blocks and other
-async-status surfaces. The component itself renders nothing.
- -->
-<script
-	lang="ts"
-	module
->
-	import { getErrorMessage, loadingText } from '../../Helpers/Helpers.svelte.js';
-	import Button from '../Button.svelte';
-
-	// The local `{#snippet _pending}` / `{#snippet _failed}` declarations
-	// must be hoistable references for `export const` to bind to them.
-	// Svelte 5 currently requires the snippet name to differ from the
-	// exported binding, so we use an underscore prefix on the local
-	// declaration and expose the un-prefixed name as the public surface.
-	export const pending = _pending;
-	export const failed = _failed;
-</script>
-
-{#snippet _pending()}
-	{loadingText}
-{/snippet}
-{#snippet _failed(e: unknown, retry?: () => void)}
-	Error: {getErrorMessage(e)}
-	{#if retry}
-		<Button
-			onclick={() => {
-				retry();
-			}}>Retry</Button
-		>
-	{/if}
-{/snippet}
+<svelte:options runes />
+
+<!-- @component
+An empty component that only exists to export common snippets
+(`pending` and `failed`) for re-use by `{#await}` blocks and other
+async-status surfaces. The component itself renders nothing.
+ -->
+<script
+	lang="ts"
+	module
+>
+	import { getErrorMessage, loadingText } from '../../Helpers/Helpers.svelte.js';
+	import Button from '../Button.svelte';
+
+	// The local `{#snippet _pending}` / `{#snippet _failed}` declarations
+	// must be hoistable references for `export const` to bind to them.
+	// Svelte 5 currently requires the snippet name to differ from the
+	// exported binding, so we use an underscore prefix on the local
+	// declaration and expose the un-prefixed name as the public surface.
+	export const pending = _pending;
+	export const failed = _failed;
+</script>
+
+{#snippet _pending()}
+	{loadingText}
+{/snippet}
+{#snippet _failed(e: unknown, retry?: () => void)}
+	Error: {getErrorMessage(e)}
+	{#if retry}
+		<Button
+			onclick={() => {
+				retry();
+			}}>Retry</Button
+		>
+	{/if}
+{/snippet}

package/dist/Components/BigRadioSet.svelte

@@ -1,40 +1,40 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T"
->
-	import type { BigRadioOption } from '../Types/Internal/BigRadioOption.js';
-	import type { BigRadioSetProps } from './BigRadioSetProps.js';
-	let { name, options, selected = $bindable(), onchange }: BigRadioSetProps<T> = $props();
-</script>
-
-<div
-	class="wrapper"
-	role="radiogroup"
->
-	{#each options as option (option.value)}
-		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-		{@render radio(option)}
-	{/each}
-</div>
-
-{#snippet radio(option: BigRadioOption<T>)}
-	<label class:selected={selected === option.value}>
-		<input
-			type="radio"
-			{name}
-			bind:group={selected}
-			value={option.value}
-			onchange={() => void onchange?.(option.value)}
-		/>
-		<div class="text">
-			<h5 class="title">{option.label}</h5>
-			<p class="note">{option.info}</p>
-		</div>
-	</label>
-{/snippet}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T"
+>
+	import type { BigRadioOption } from '../Types/Internal/BigRadioOption.js';
+	import type { BigRadioSetProps } from './BigRadioSetProps.js';
+	let { name, options, selected = $bindable(), onchange }: BigRadioSetProps<T> = $props();
+</script>
+
+<div
+	class="wrapper"
+	role="radiogroup"
+>
+	{#each options as option (option.value)}
+		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+		{@render radio(option)}
+	{/each}
+</div>
+
+{#snippet radio(option: BigRadioOption<T>)}
+	<label class:selected={selected === option.value}>
+		<input
+			type="radio"
+			{name}
+			bind:group={selected}
+			value={option.value}
+			onchange={() => void onchange?.(option.value)}
+		/>
+		<div class="text">
+			<h5 class="title">{option.label}</h5>
+			<p class="note">{option.info}</p>
+		</div>
+	</label>
+{/snippet}
+
 <style>.wrapper {
   display: flex;
   flex-flow: row wrap;
@@ -87,4 +87,4 @@ label.selected {
 }
 label.selected h5 {
   color: #ffffff;
-}</style>
+}</style>