@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/DimensionInput.svelte

@@ -1,172 +1,127 @@
-<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;
+<svelte:options runes />
+
+<script lang="ts">import { InputVariant } from "../Types/Internal/InputVariant.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, onchange, inputRefs = $bindable({}), "data-type": dataType } = $props();
+function clamp(value) {
+	if (isNaN(value)) {
+		return 0;
 	}
-
-	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>
-
+	const underMinimum = min > value;
+	const overMaximum = max != undefined && max < value;
+	return underMinimum ? min : overMaximum ? max : value;
+}
+function handleInput(axis) {
+	return (e) => {
+		const target = e.target;
+		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 +400,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,105 @@
-<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) {
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T"
+>import { dndzone } from "svelte-dnd-action";
+import { flip } from "svelte/animate";
+import DraggableCard from "./DraggableCard.svelte";
+const { items: originalItems, onUpdate, snippet: customSnippet, transformToDraggable, flipDurationMS = 60, label } = $props();
+let items = $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, b) {
+	if (a.length !== b.length) {
+		return false;
+	}
+	for (let i = 0; i < a.length; i++) {
+		if (a[i].id !== b[i].id) {
 			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;
+	return true;
+}
+function consider(newItems) {
+	isDragging = true;
+	items = newItems;
+}
+function finalise(newItems) {
+	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;
 	}
-	function finalise(newItems: Array<Draggable<T>>) {
-		items = newItems;
-		isDragging = false;
-		onUpdate(items.map((it) => it.original));
+	// 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;
 	}
-
-	$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>
-
+	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 +154,4 @@ div.dnd {
   flex: 1;
   gap: 0.5rem;
   padding: 0.5rem;
-}</style>
+}</style>