feat(ui): add id prop for inputs

remove warnings, migrate deprecated (dispatch to prop), include min max switch from float input, include esc/enter from float input, include precision, include partial styling from float input

packages/ui/src/lib/Input.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
+	import type { NodeInput } from '@nodarium/types';
+
 	import Checkbox from './inputs/Checkbox.svelte';
 	import Float from './inputs/Float.svelte';
 	import Integer from './inputs/Integer.svelte';
 	import Select from './inputs/Select.svelte';
-
-	import type { NodeInput } from '@nodarium/types';
 	import Vec3 from './inputs/Vec3.svelte';
+	// import Number from './inputs/Number.svelte';
 
 	interface Props {
 		input: NodeInput;
 		value: any;
+		id?: string;
 	}
 
-	let { input, value = $bindable() }: Props = $props();
+	let { input, value = $bindable(), id }: Props = $props();
 </script>
 
 {#if input.type === 'float'}
@@ -20,9 +22,9 @@
 {:else if input.type === 'integer'}
 	<Integer bind:value min={input?.min} max={input?.max} />
 {:else if input.type === 'boolean'}
-	<Checkbox bind:value />
+	<Checkbox bind:value {id} />
 {:else if input.type === 'select'}
-	<Select bind:value options={input.options} />
+	<Select bind:value options={input.options} {id} />
 {:else if input.type === 'vec3'}
-	<Vec3 bind:value />
+	<Vec3 bind:value {id} />
 {/if}

packages/ui/src/lib/inputs/Checkbox.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	interface Props {
 		value: boolean;
+		id?: string;
 	}
 
-	let { value = $bindable(false) }: Props = $props();
+	let { value = $bindable(false), id }: Props = $props();
 
 	$effect(() => {
 		if (typeof value === 'string') {
@@ -23,6 +24,7 @@
 		type="checkbox"
 		bind:checked={value}
 		class="peer absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]"
+		{id}
 	/>
 	<span
 		class="absolute opacity-0 peer-checked:opacity-100 transition-opacity duration-100 flex w-full h-full items-center justify-center"

packages/ui/src/lib/inputs/Float.svelte

@@ -4,13 +4,15 @@
 		step?: number;
 		min?: number;
 		max?: number;
+		id?: string;
 	}
 
 	let {
 		value = $bindable(0.5),
 		step = 0.01,
 		min = $bindable(0),
-		max = $bindable(1)
+		max = $bindable(1),
+		id
 	}: Props = $props();
 
 	if (min > max) {
@@ -110,6 +112,7 @@
 	<input
 		bind:value
 		bind:this={inputEl}
+		{id}
 		{step}
 		{max}
 		{min}

packages/ui/src/lib/inputs/Integer.svelte

@@ -1,41 +1,48 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
-
 	interface Props {
+		value?: number;
+		step?: number;
 		min?: number | undefined;
 		max?: number | undefined;
-		step?: number;
-		value?: number;
 		id?: string;
+		change?: (arg: number) => void;
 	}
 
 	let {
-		min = undefined,
-		max = undefined,
-		step = 1,
 		value = $bindable(0),
-		id = ''
+		step = 1,
+		min = $bindable(0),
+		max = $bindable(1),
+		id,
+		change
 	}: Props = $props();
 
-	if (!value) {
-		value = 0;
+	if (min > max) {
+		[min, max] = [max, min];
+	}
+	if (value > max) {
+		max = value;
 	}
 
-	let inputEl: HTMLInputElement | undefined = $state();
-	let wrapper: HTMLDivElement | undefined = $state();
+	function strip(input: number) {
+		return +parseFloat(input + '').toPrecision(2);
+	}
+
+	let inputEl = $state() as HTMLInputElement;
+	let wrapper = $state() as HTMLDivElement;
 
 	let prev = -1;
 	function update() {
 		if (prev === value) return;
 		prev = value;
-		dispatch('change', parseFloat(value + ''));
+		change?.(value);
 	}
 
 	function handleChange(change: number) {
 		value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
 	}
 
+	let isMouseDown = $state(false);
 	let downX = 0;
 	let downV = 0;
 	let rect: DOMRect;
@@ -65,6 +72,13 @@
 		window.removeEventListener('mousemove', handleMouseMove);
 	}
 
+	function handleKeyDown(ev: KeyboardEvent) {
+		if (ev.key === 'Escape' || ev.key === 'Enter') {
+			handleMouseUp();
+			inputEl?.blur();
+		}
+	}
+
 	function handleMouseMove(ev: MouseEvent) {
 		if (!ev.ctrlKey && typeof min === 'number' && typeof max === 'number') {
 			const vx = (ev.clientX - rect.left) / rect.width;
@@ -76,8 +90,12 @@
 	}
 
 	$effect(() => {
+		if ((value || 0).toString().length > 5) {
+			value = strip(value || 0);
+		}
 		value !== undefined && update();
 	});
+
 	let width = $derived(
 		Number.isFinite(value) ? Math.max((value?.toString().length ?? 1) * 8, 30) + 'px' : '20px'
 	);
@@ -86,9 +104,11 @@
 <div
 	class="component-wrapper"
 	bind:this={wrapper}
+	class:is-down={isMouseDown}
 	role="slider"
 	tabindex="0"
 	aria-valuenow={value}
+	onkeydown={handleKeyDown}
 	onmousedown={handleMouseDown}
 	onmouseup={handleMouseUp}
 >
@@ -124,21 +144,32 @@
 		border-radius: var(--border-radius, 2px);
 	}
 
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+	}
+
 	input[type='number'] {
 		-webkit-appearance: textfield;
 		-moz-appearance: textfield;
 		appearance: textfield;
 		cursor: pointer;
-		font-size: 1em;
 		font-family: var(--font-family);
-		padding-top: 8px;
+		font-variant-numeric: tabular-nums;
+		color: var(--text-color);
+		background-color: transparent;
+		padding: var(--padding, 6px);
+		font-size: 1em;
+		padding-inline: 10px;
+		text-align: center;
+		border: none;
+		border-style: none;
 		flex: 1;
 		width: 72%;
 	}
 
-	input[type='number']::-webkit-inner-spin-button,
-	input[type='number']::-webkit-outer-spin-button {
-		-webkit-appearance: none;
+	.is-down > input {
+		cursor: ew-resize !important;
 	}
 
 	.overlay {
@@ -151,6 +182,10 @@
 		pointer-events: none;
 	}
 
+	.is-down > .overlay {
+		transition: none !important;
+	}
+
 	button {
 		background-color: transparent;
 		border: none;

packages/ui/src/lib/inputs/Number.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	interface Props {
+		value?: number;
+		step?: number;
+		min?: number;
+		max?: number;
+		id?: string;
+	}
+
+	let {
+		value = $bindable(1),
+		step = 1,
+		min = $bindable(0),
+		max = $bindable(1),
+		id
+	}: Props = $props();
+
+	if (min > max) {
+		[min, max] = [max, min];
+	}
+	if (value > max) {
+		max = value;
+	}
+
+	function strip(input: number) {
+		return +parseFloat(input + '').toPrecision(2);
+	}
+
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	let prev = -1;
+	function update() {
+		if (prev === value) return;
+		if (value.toString().length > 5) {
+			value = strip(value);
+		}
+		prev = value;
+	}
+
+	function handleChange(change: number) {
+		value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity));
+	}
+
+	function handleKeyDown(ev: KeyboardEvent) {
+		if (ev.key === 'Escape' || ev.key === 'Enter') {
+			inputEl?.blur();
+		}
+	}
+
+	$effect(() => {
+		update();
+	});
+
+	let ratio = $derived(((value - min) / (max - min)) * 100);
+</script>
+
+<div>
+	<div class="component-wrapper">
+		<button onclick={() => handleChange(-step)}>-</button>
+		<input
+			bind:value
+			bind:this={inputEl}
+			{id}
+			{step}
+			{max}
+			{min}
+			type="number"
+			onkeydown={handleKeyDown}
+		/>
+		<button onclick={() => handleChange(+step)}>+</button>
+	</div>
+	<div class="slider">
+		<input
+			type="range"
+			bind:value
+			{min}
+			{max}
+			{step}
+			style={`background: linear-gradient(90deg, var(--text-color) ${ratio}%, var(--layer-2, #4b4b4b) ${ratio}%)`}
+		/>
+	</div>
+</div>
+
+<style>
+	.component-wrapper {
+		display: flex;
+		background-color: var(--layer-2, #4b4b4b);
+		user-select: none;
+		transition: box-shadow 0.3s ease;
+		border: solid 1px var(--outline);
+		overflow: hidden;
+		border-radius: 0 var(--border-radius, 2px); /* only top */
+	}
+
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+	}
+
+	input[type='number'] {
+		-webkit-appearance: textfield;
+		-moz-appearance: textfield;
+		appearance: textfield;
+		cursor: pointer;
+		font-family: var(--font-family);
+		font-variant-numeric: tabular-nums;
+		color: var(--text-color);
+		background-color: transparent;
+		padding: var(--padding, 6px);
+		font-size: 1em;
+		padding-inline: 10px;
+		text-align: center;
+		border: none;
+		border-style: none;
+		flex: 1;
+		width: 72%;
+	}
+
+	button {
+		background-color: transparent;
+		border: none;
+		cursor: pointer;
+		line-height: 0px;
+		margin: 0;
+		color: var(--text-color);
+		margin-inline: 6px;
+	}
+
+	div input[type='number'] {
+		color: var(--text-color);
+		background-color: transparent;
+		padding: var(--padding, 6px);
+		padding-inline: 0px;
+		text-align: center;
+		border: none;
+		border-style: none;
+	}
+
+	.slider {
+		position: relative;
+		margin-top: -1px; /* hide edge */
+	}
+
+	input[type='range'] {
+		position: absolute;
+		appearance: none;
+		width: 100%;
+		height: 3px;
+		background: var(--layer-2, #4b4b4b);
+		cursor: pointer;
+	}
+
+	/* Thumb: for Chrome, Safari, Edge */
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 0px;
+		height: 0px;
+		box-shadow: none;
+	}
+
+	/* Thumb: for Firefox */
+	input[type='range']::-moz-range-thumb {
+		border: none;
+		width: 0px;
+		height: 0px;
+		box-shadow: none;
+	}
+</style>