@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/DimensionInput.svelte

@@ -1,172 +1,172 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import type { Centimetres } from '../Types/Internal/Misc.js';
-	import type { DimensionInputProps } from './DimensionInputProps.js';
-
-	const min = 0;
-	let {
-		id,
-		x = $bindable(null),
-		y = $bindable(null),
-		z = $bindable(null),
-
-		max,
-		labelTop = 'Dimensions',
-		optional = true,
-		placeholder,
-		required = false,
-		variant = InputVariant.Default,
-		decimal = false,
-		invalid = false,
-		showErrorColours = false,
-		disabled,
-
-		leftIcon,
-
-		onblur,
-		onfocus,
-		onkeydown,
-		// oninput intentionally not forwarded; per-axis handleInput wires it.
-		onchange,
-
-		inputRefs = $bindable({}),
-		'data-type': dataType,
-	}: DimensionInputProps = $props();
-
-	function clamp(value: number): Centimetres {
-		if (isNaN(value)) {
-			return 0 as Centimetres;
-		}
-		const underMinimum = min > value;
-		const overMaximum = max != undefined && max < value;
-		return (underMinimum ? min : overMaximum ? max : value) as Centimetres;
-	}
-
-	function handleInput(axis: 'x' | 'y' | 'z') {
-		return (e: Event) => {
-			const target = e.target as HTMLInputElement;
-			const raw = target.value;
-			const parsed = raw === '' ? null : clamp(Number(raw));
-			if (axis === 'x') {
-				x = parsed;
-			} else if (axis === 'y') {
-				y = parsed;
-			} else {
-				z = parsed;
-			}
-			onchange?.(axis, parsed);
-		};
-	}
-
-	const isInvalid = $derived(
-		showErrorColours &&
-			((required &&
-				(x == null ||
-					x.toString().trim() === '' ||
-					y == null ||
-					y.toString().trim() === '' ||
-					z == null ||
-					z.toString().trim() === '')) ||
-				invalid)
-	);
-
-	const xId = $derived(id ? `${id}-x` : undefined);
-	const yId = $derived(id ? `${id}-y` : undefined);
-	const zId = $derived(id ? `${id}-z` : undefined);
-</script>
-
-<div
-	class="error-wrapper"
-	class:for-modal={variant == InputVariant.Modal}
-	class:for-table={variant == InputVariant.Table}
->
-	<span
-		class="top-label"
-		class:for-default={variant === InputVariant.Default}
-		class:invalid={isInvalid}
-		>{labelTop}{#if optional}
-			- <span class="optional">optional</span>{/if}</span
-	>
-	{#if variant === InputVariant.Default}
-		<span class="border"
-			>{labelTop}{#if optional}
-				- <span class="optional">optional</span>{/if}</span
-		>
-	{/if}
-	<div
-		class="icon-container"
-		class:for-modal={variant == InputVariant.Modal}
-	>
-		<input
-			id={xId}
-			class:for-default={variant === InputVariant.Default}
-			data-type={dataType}
-			class:left-pad={leftIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			type="number"
-			value={x ?? ''}
-			oninput={handleInput('x')}
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			bind:this={inputRefs.x}
-			{placeholder}
-			{required}
-			{disabled}
-			{min}
-			{max}
-			step={decimal ? 0.01 : 1}
-		/>
-		<input
-			id={yId}
-			class:for-default={variant === InputVariant.Default}
-			data-type={dataType}
-			class:left-pad={leftIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			type="number"
-			value={y ?? ''}
-			oninput={handleInput('y')}
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			bind:this={inputRefs.y}
-			{placeholder}
-			{required}
-			{disabled}
-			{min}
-			{max}
-			step={decimal ? 0.01 : 1}
-		/>
-		<input
-			id={zId}
-			class:for-default={variant === InputVariant.Default}
-			data-type={dataType}
-			class:left-pad={leftIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			type="number"
-			value={z ?? ''}
-			oninput={handleInput('z')}
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			bind:this={inputRefs.z}
-			{placeholder}
-			{required}
-			{disabled}
-			{min}
-			{max}
-			step={decimal ? 0.01 : 1}
-		/>
-		<div class="spacer"></div>
-		<span
-			class="right-label inset"
-			class:for-modal={variant == InputVariant.Modal}>cm</span
-		>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import type { Centimetres } from '../Types/Internal/Misc.js';
+	import type { DimensionInputProps } from './DimensionInputProps.js';
+
+	const min = 0;
+	let {
+		id,
+		x = $bindable(null),
+		y = $bindable(null),
+		z = $bindable(null),
+
+		max,
+		labelTop = 'Dimensions',
+		optional = true,
+		placeholder,
+		required = false,
+		variant = InputVariant.Default,
+		decimal = false,
+		invalid = false,
+		showErrorColours = false,
+		disabled,
+
+		leftIcon,
+
+		onblur,
+		onfocus,
+		onkeydown,
+		// oninput intentionally not forwarded; per-axis handleInput wires it.
+		onchange,
+
+		inputRefs = $bindable({}),
+		'data-type': dataType,
+	}: DimensionInputProps = $props();
+
+	function clamp(value: number): Centimetres {
+		if (isNaN(value)) {
+			return 0 as Centimetres;
+		}
+		const underMinimum = min > value;
+		const overMaximum = max != undefined && max < value;
+		return (underMinimum ? min : overMaximum ? max : value) as Centimetres;
+	}
+
+	function handleInput(axis: 'x' | 'y' | 'z') {
+		return (e: Event) => {
+			const target = e.target as HTMLInputElement;
+			const raw = target.value;
+			const parsed = raw === '' ? null : clamp(Number(raw));
+			if (axis === 'x') {
+				x = parsed;
+			} else if (axis === 'y') {
+				y = parsed;
+			} else {
+				z = parsed;
+			}
+			onchange?.(axis, parsed);
+		};
+	}
+
+	const isInvalid = $derived(
+		showErrorColours &&
+			((required &&
+				(x == null ||
+					x.toString().trim() === '' ||
+					y == null ||
+					y.toString().trim() === '' ||
+					z == null ||
+					z.toString().trim() === '')) ||
+				invalid)
+	);
+
+	const xId = $derived(id ? `${id}-x` : undefined);
+	const yId = $derived(id ? `${id}-y` : undefined);
+	const zId = $derived(id ? `${id}-z` : undefined);
+</script>
+
+<div
+	class="error-wrapper"
+	class:for-modal={variant == InputVariant.Modal}
+	class:for-table={variant == InputVariant.Table}
+>
+	<span
+		class="top-label"
+		class:for-default={variant === InputVariant.Default}
+		class:invalid={isInvalid}
+		>{labelTop}{#if optional}
+			- <span class="optional">optional</span>{/if}</span
+	>
+	{#if variant === InputVariant.Default}
+		<span class="border"
+			>{labelTop}{#if optional}
+				- <span class="optional">optional</span>{/if}</span
+		>
+	{/if}
+	<div
+		class="icon-container"
+		class:for-modal={variant == InputVariant.Modal}
+	>
+		<input
+			id={xId}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			value={x ?? ''}
+			oninput={handleInput('x')}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			bind:this={inputRefs.x}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<input
+			id={yId}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			value={y ?? ''}
+			oninput={handleInput('y')}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			bind:this={inputRefs.y}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<input
+			id={zId}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			value={z ?? ''}
+			oninput={handleInput('z')}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			bind:this={inputRefs.z}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<div class="spacer"></div>
+		<span
+			class="right-label inset"
+			class:for-modal={variant == InputVariant.Modal}>cm</span
+		>
+	</div>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -445,4 +445,4 @@ div.spacer {
 .icon-container input:last-of-type {
   border-radius: 0;
   border-left-color: transparent;
-}</style>
+}</style>

package/dist/Components/DragMenu/DragMenuHolder.svelte

@@ -1,121 +1,121 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T"
->
-	import { type DndEvent, dndzone } from 'svelte-dnd-action';
-	import { flip } from 'svelte/animate';
-	import type { DragMenuHolderProps } from './DragMenuHolderProps.js';
-	import type { Draggable } from './Draggable.js';
-	import DraggableCard from './DraggableCard.svelte';
-
-	const {
-		items: originalItems,
-		onUpdate,
-		snippet: customSnippet,
-		transformToDraggable,
-		flipDurationMS = 60,
-		label,
-	}: DragMenuHolderProps<T> = $props();
-
-	let items: Array<Draggable<T>> = $state([]);
-	/**
-	 * `true` between `consider` and `finalise` events from dndzone.
-	 * While true we suppress the `originalItems -> items` sync effect
-	 * so an unrelated parent mutation cannot replace the user's
-	 * in-progress drag state.
-	 */
-	let isDragging = $state(false);
-
-	/** Compare two id sequences. Used to skip the sync effect when nothing changed. */
-	function sameIdSequence(a: ReadonlyArray<Draggable<T>>, b: ReadonlyArray<Draggable<T>>): boolean {
-		if (a.length !== b.length) {
-			return false;
-		}
-		for (let i = 0; i < a.length; i++) {
-			if (a[i].id !== b[i].id) {
-				return false;
-			}
-		}
-		return true;
-	}
-
-	function consider(newItems: Array<Draggable<T>>) {
-		isDragging = true;
-		items = newItems;
-	}
-	function finalise(newItems: Array<Draggable<T>>) {
-		items = newItems;
-		isDragging = false;
-		onUpdate(items.map((it) => it.original));
-	}
-
-	$effect.pre(() => {
-		// Re-establish the dependency on the source array.
-		const next = originalItems.map(transformToDraggable);
-		// Skip when a drag is in progress so the user's transient
-		// ordering is not clobbered by an unrelated parent mutation.
-		if (isDragging) {
-			return;
-		}
-		// Skip when the logical content is unchanged. Prevents flicker
-		// when the parent recreates the array reference with the same
-		// items (e.g. an unrelated `$derived` invalidation).
-		if (sameIdSequence(items, next)) {
-			return;
-		}
-		items = next;
-	});
-
-	const snippet = $derived(customSnippet ?? draggableWithSelect);
-</script>
-
-{#snippet draggableWithSelect<T>(item: Draggable<T>, index: number)}
-	<DraggableCard
-		title={item.title}
-		subtitle={item.subtitle}
-		{index}
-		selectable
-		selected={item.selected}
-	/>
-{/snippet}
-
-<div class="wrapper">
-	{#if label}
-		<span class="top-label">{label}</span>
-		<span class="top-label-border">{label}</span>
-	{/if}
-	<div
-		class="dnd"
-		use:dndzone={{ items, flipDurationMs: flipDurationMS, delayTouchStart: 30 }}
-		onconsider={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
-			consider(e.detail.items);
-		}}
-		onfinalize={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
-			finalise(e.detail.items);
-		}}
-	>
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		{#each items as item, index (item.id)}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<div
-				class="contents"
-				onclick={(e) => {
-					if (item.toggleSelected) {
-						e.stopPropagation();
-						item.toggleSelected();
-					}
-				}}
-				animate:flip={{ duration: flipDurationMS }}
-			>
-				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-				{@render snippet(item, index)}
-			</div>
-		{/each}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T"
+>
+	import { type DndEvent, dndzone } from 'svelte-dnd-action';
+	import { flip } from 'svelte/animate';
+	import type { DragMenuHolderProps } from './DragMenuHolderProps.js';
+	import type { Draggable } from './Draggable.js';
+	import DraggableCard from './DraggableCard.svelte';
+
+	const {
+		items: originalItems,
+		onUpdate,
+		snippet: customSnippet,
+		transformToDraggable,
+		flipDurationMS = 60,
+		label,
+	}: DragMenuHolderProps<T> = $props();
+
+	let items: Array<Draggable<T>> = $state([]);
+	/**
+	 * `true` between `consider` and `finalise` events from dndzone.
+	 * While true we suppress the `originalItems -> items` sync effect
+	 * so an unrelated parent mutation cannot replace the user's
+	 * in-progress drag state.
+	 */
+	let isDragging = $state(false);
+
+	/** Compare two id sequences. Used to skip the sync effect when nothing changed. */
+	function sameIdSequence(a: ReadonlyArray<Draggable<T>>, b: ReadonlyArray<Draggable<T>>): boolean {
+		if (a.length !== b.length) {
+			return false;
+		}
+		for (let i = 0; i < a.length; i++) {
+			if (a[i].id !== b[i].id) {
+				return false;
+			}
+		}
+		return true;
+	}
+
+	function consider(newItems: Array<Draggable<T>>) {
+		isDragging = true;
+		items = newItems;
+	}
+	function finalise(newItems: Array<Draggable<T>>) {
+		items = newItems;
+		isDragging = false;
+		onUpdate(items.map((it) => it.original));
+	}
+
+	$effect.pre(() => {
+		// Re-establish the dependency on the source array.
+		const next = originalItems.map(transformToDraggable);
+		// Skip when a drag is in progress so the user's transient
+		// ordering is not clobbered by an unrelated parent mutation.
+		if (isDragging) {
+			return;
+		}
+		// Skip when the logical content is unchanged. Prevents flicker
+		// when the parent recreates the array reference with the same
+		// items (e.g. an unrelated `$derived` invalidation).
+		if (sameIdSequence(items, next)) {
+			return;
+		}
+		items = next;
+	});
+
+	const snippet = $derived(customSnippet ?? draggableWithSelect);
+</script>
+
+{#snippet draggableWithSelect<T>(item: Draggable<T>, index: number)}
+	<DraggableCard
+		title={item.title}
+		subtitle={item.subtitle}
+		{index}
+		selectable
+		selected={item.selected}
+	/>
+{/snippet}
+
+<div class="wrapper">
+	{#if label}
+		<span class="top-label">{label}</span>
+		<span class="top-label-border">{label}</span>
+	{/if}
+	<div
+		class="dnd"
+		use:dndzone={{ items, flipDurationMs: flipDurationMS, delayTouchStart: 30 }}
+		onconsider={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
+			consider(e.detail.items);
+		}}
+		onfinalize={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
+			finalise(e.detail.items);
+		}}
+	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		{#each items as item, index (item.id)}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<div
+				class="contents"
+				onclick={(e) => {
+					if (item.toggleSelected) {
+						e.stopPropagation();
+						item.toggleSelected();
+					}
+				}}
+				animate:flip={{ duration: flipDurationMS }}
+			>
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render snippet(item, index)}
+			</div>
+		{/each}
+	</div>
+</div>
+
 <style>.top-label {
   position: absolute;
   left: 0.5rem;
@@ -170,4 +170,4 @@ div.dnd {
   flex: 1;
   gap: 0.5rem;
   padding: 0.5rem;
-}</style>
+}</style>